• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >心得技巧 > 网易资深设计师:APP应用图标的36个设计方法

网易资深设计师:APP应用图标的36个设计方法

作者: 字体:[增加 减小] 来源:互联网 时间:2018-08-23

本文主要包含App图标制作,图标设计,经验分享等相关知识,希望在学习及工作中可以帮助到您

编者按:应用图标的设计表现形式很多,本文总结了36种图表设计形式与你分享,希望能够对你有所启发。

当我们决定要去App Store、Google Play这样的应用市场下载某个App应用时,首先映入眼帘的便是Icon,即应用图标。

一个App应用图标设计的美感与吸引力,决定了用户对产品的第一印象。一个有吸引力的APP应用图标,可以让用户愿意去了解你,下载你的App。

通过分析大量的应用图标,结合自己的专业认知,总结了以下设计方法。

方法论描述仅代表个人认知经验,设计的方法有很多种,以下仅为抛砖迎玉,希望大家能找到适合自己的方法。

一. 中文字体

1. 单个字体设计

提取产品名称中最具代表性的独立文字,进行字体设计。通过对笔画及整体骨架进行设计调整,以达到符合产品特性和视觉差异化的目的。作为国人对汉字的敏感度,这样的设计形式大大降低了用户对品牌的认知成本。

优点:拥有特征性的字体设计可以一目了然的传递产品信息,让用户在自己的手机桌面上快速找到应用所在。如支付宝、网易邮箱大师、知乎等应用图标,识别性很强。

独立文字的提取难度较大,只能应用于产品名称中有特征性含义的产品,如果提取不当很容易达不到市场差异化,与很多相同字体混淆在一起,干扰用户对产品的记忆。

2. 多个字体设计

多个字体设计通常为产品名称直接运用在设计中,如有道、闲鱼、当当、小红书等。多个字体设计需要注意的是整体的协调与可读性,一排出现两个汉字属于比较理想的可读范围,极限值为3个汉字并排,最多两行为宜。

由此推算,适合运用字体作为应用图标的产品名称最多6个字为宜,超出这个数量,将会大大降低用户对产品的识别能力。

优点:可以更加直接的告知用户产品名称,便于品牌推广,减少用户的记忆成本。

对产品名称有一定限制因素,以1~4个汉字为最佳,超过6个汉字组合将会影响用户的识别能力。

3. 字体加辅助图形组合设计

为了突出产品特有的气质和属性,通过字体与辅助图形组合来烘托这样的氛围也是设计方式之一。如头条字体和文章剪影图形组合形成内容丰富的氛围,利用纸张折痕的效果突出文艺气质,购物袋的图形运用烘托购物的氛围等等。

优点:相比单纯的文字设计,适当辅助一些带有产品特性的图形,可以更加灵活的突出产品气质和属性。

图形运用不当容易对字体信息的传达造成干扰,需要在字体设计比重和图形难易度之间做好权衡。

4. 字体加几何图形组合设计

几何图形的运用可以增加图标的形式感,如矩形与字体设计组合可以强调局部信息;圆润的形状可以使图标风格更加活泼有趣;三角形的运用有一定的引导性。

优点:几何图形的运用可以增加应用图标的形式感和趣味性。

常用的几何图形形式单一,难以形成独有的视觉差异。

英文、数字、特殊符号

5. 单个英文字母设计

英文字母设计通常是提取产品名称首字母进行设计,由于英文字母本身造型简洁,结合产品特点进行创意加工,很容易达到美感和识别性兼备。

优点:利于设计师发挥,很容易做出具备美感的应用图标。

很容易创意雷同,视觉差异化很难保障。

6. 多个英文字母设计

多个英文字母通常是产品名称全称或几个单词首字母组合而成,在国内也会提取汉语拼音和拼音首字母等方式进行组合。在进行字母组合设计的时候,需要考虑组合字母的识别性,单排字母为1~3个为宜,字母越多,识别性越低。

优点:组合字母很容易形成独有的产品简称,方便用户记忆,如OFO,YY等。

热门的组合字母容易雷同,对产品差异化形成挑战。

7. 字母加背景图案组合设计

通过添加背景图案,结合字母设计组合呈现,既可以增加应用图标的视觉层次感,也能丰富视觉表现力。这里需要注意背景图案的色相和繁简度的处理,需要和字母设计形成强对比,使信息传达不受影响。

优点:可以丰富应用图标的视觉层次感和视觉表现力。

字母数量过多时,背景图案的设计繁简度会影响信息的传达。

8. 字母加图形组合设计

字母加图形组合设计应用比较广泛,图形分为几何图形和生活映象提炼的图形。如酷狗音乐就是结合圆形组合而成,QQ浏览器则是与生活中云朵的提炼图形结合而成。通过字母与图形进行创意加工,可以使应用图标视觉表现更加饱满。

优点:图标视觉表现饱满,对字母的设计要求相对较低。

如果选取的图形为常用图形,不易形成特征性元素。

9. 数字设计

数字对于我们来说是非常敏感的,利用数字进行设计能给人亲和力。由于数字的识别性很强,易于品牌传播与用户记忆。

优点:自带亲和力,识别性强,易于传播和记忆。

针对性较强,数字与品牌关联性密合度控制较难。

10. 特殊符号设计

特殊符号在应用图标的设计案例中相对较少,由于符号本身的含义会对产品属性有一定限制,所以针对性比较强。如「¥」符号可代表与钱财有关联性的产品,无法运用在与此属性无关的产品上面。

优点:图形特征明显,自身有很强的属性,可以很好的诠释关联的产品属性。

图形属性针对性较强,独立图形无法在同类产品中形成差异化,需要结合产品特征进行组合设计。

三. 图形

11. 几何图形设计

几何图形的运用设计给人简约、现代、个性、富有空间感等视觉感觉,从单个具象图形到复杂的空间感营造,几何图形的表现形式非常丰富。

不同的形状给人的情感表达不同,如三角形给人传达个性、稳定、现代、时尚等,添加圆角后又会更加亲民、可爱。我们可以结合产品特征,合理的选择适合的形状图形进行创意。

优点:构图简洁,设计形式丰富多样,不同的形状和细节处理可以营造不同的氛围。

过于简约的形状容易创意雷同,无法形成差异化,考验设计师的图形创意能力。

12. 抽象图形设计

通过提取品牌信息、产品服务、功能模块等关键词进行图形创意,形成的图形不属于生活中大家常见的基本图形,是对品牌进行高度提炼形成的抽象图形。通过暗喻的形式传达品牌文化和产品特点,品牌独特性较强。

优点:抽象图形品牌独特性较强,容易形成视觉差异化。

用户认知记忆成本较高,品牌推广难度较大。

13. 动物剪影设计

动物剪影通常是提取动物外部轮廓进行单色填充,可以提取动物整体形象或者局部特征部位作为设计元素。这类应用图标背景为单色或者渐变色,少量的会辅助一些图形作为背景元素,动物采用单色填充,以白色填充居多。

优点:单色填充的动物形象与背景对比强烈,整体视觉效果直观醒目、简洁大方。

常见的动物形象容易雷同,生僻的动物造型对用户的认知能力有一定的挑战。

您可能想查找下面的文章:

  • 网易资深设计师:APP应用图标的36个设计方法

相关文章

  • 2018-08-23新手交互设计师如何迅速成长?爱彼迎高手来教你!
  • 2017-08-06iframe在IE6下出现横向滚动条的解决方案
  • 2018-08-23《爱乐之城》背后,15个灵感塑造了这部奥斯卡领跑影片
  • 2018-08-23全球iPhone摄影大赛人物类冠军:如何提高手机摄影水平?
  • 2018-08-2390%的文案根本不会沟通,4大实用技巧提升文案的沟通力
  • 2017-08-06haslaylout 和 bfc解析的理解
  • 2018-08-23汉堡图标不好使?这5个替代方案帮你搞定移动端导航
  • 2018-08-23平面基础小课堂!聊聊排版中的版面率和留白率
  • 2018-08-23免费高效!用 Paddy 让你的 Sketch 学会自动排版!
  • 2018-08-23这个APP的UX设计,把订购汉堡玩出花来了

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • wap页面之iphone设备字体偏大问题解决方法
    • 用品牌基因法做图标设计,高级UI设计师才会的手法!(实战篇)
    • 超详细的动态表情包新手绘制指南
    • 超全面!产品设计中的「容错性」原则总结
    • 我有一个好想法,为什么落地困难重重?
    • 用一篇文章,让你看懂设计史上的3个经典艺术流派
    • 前端开发中一些常用技巧总结
    • 工作复盘:从四大角色带你了解H5制作流程
    • 鼠标经过图片超链接时改变图片的大小(宽、高)的css
    • 让IE支持CSS3 Media Query实现响应式Web设计

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有