视觉设计 » 最全的图标设计指南,设计师必备

最全的图标设计指南,设计师必备

发表于: 视觉设计. 评论
Sponsor

今天是是一篇关于各种图标设计指南和技巧对的分享,包括图标风格、图标功能、图标设计技巧、图标设计教程、图标网站素材推荐。

    目录:

  1. 图标风格:线性图标、面性图标、双色线面、渐变色图标、毛玻璃、不透明、轻拟物/微扁平
  2. 图标功能:应用图标、金刚区图标、功能图标、标签栏图标
  3. 图标设计技巧视觉一致:像素对齐、识别度、线面统─、描边统一、断点技巧
  4. 图标设计教程:毛玻璃
  5. 图标网站素材推荐:flaticon、iconfont、iconsdb、icons8、iconfinder、thenounproject

一、图标风格

1.1 线性图标

线性图标特点简洁、干练、识别度较高,视觉降噪,无更多干扰性适用于APP标签栏、功能模块及后台系统侧边栏等

1.2 面性图标

面性图标更能强化产品本身特性,视觉更丰富饱满,吸引用户注意力适用于APP标签栏、金刚区及后台系统侧边栏等

1.3 双色线面图标

双色图标的两种色调一般是运用品牌色进行制作,突出图标特性的同时,又能强调品牌调性适用于APP金刚区及功能区等

1.4 渐变色图标

渐变色图标的色彩更能吸引用户注意力,主色调运用品牌色,结合不透明图标等更具设计感适用于APP金刚区及功能区等

1.5 毛玻璃

毛玻璃图标是近两年比较流行的风格,很多APP金刚区及个人中心都采用了毛玻璃/磨砂玻璃图标适用于APP金刚区及功能区等

1.6 不透明图标

不透明图标为某部分调整不透明度得到有层次感的图标,更年轻、简约适用于APP标签栏、功能模块

1.7 轻拟物/微扁平

轻拟物图标介于扁平与立体图标之间,有一点质感又不是很立体,更大程度的还原事物本身适用于游戏、外卖、IP衍生等APP金刚区及功能区等

二、图标功能

2.1 应用图标

通俗的说为APP产品的logo,也叫启动图标,应用于桌面图标,ios应用商店等多个地方。该图标简洁易理解,能够明确表达产品定位及核心功能,有名称首字、全称、IP、首字母、及符号等多种格式构成

2.2 金刚区图标

金刚区图标作为APP产品的重中之重,用户点击、提升转化率的关键,在风格、表意、品牌感、设计感等多个方面应反复斟酌细化

2.3 功能图标

功能图标为了提升用户可读性,图标相对于文字识别度极高,用户反应时间短,同时也能提升版面简洁性及设计感,有更多留白,增加呼吸感

2.4 标签栏图标

APP底部用于切换页面的图标,有线性、面性及其他形式,分为点击态/选中态,未点击态/未选中状态,图标颜色为品牌色或品牌色与辅助色结合

三、图标设计技巧

3.1 视觉一致

根据米勒-莱尔错觉,在做设计图时,不能单纯的靠软件自带的左对齐、右对齐等方式达到物理对齐,尽可能的调整元素,使之视觉对齐

3.2 像素对齐

ps这类位图软件作图时,容易造成图标模糊,解决办法:使用直接选择工具选中虚掉的两个锚点ctrl+t,再按键盘的上下左右键调整下位置,图标就会变得清晰

3.3 识别度

图标是弱化实物的表现结果,需简洁明了,易识别,画图标时,应去掉冗余的元素,用基本的形状保留最基础的部分,让图标更易理解

3.4 线面统一

在整组图标中,利用一致性自检图标是否符合整体调性。包含图标颜色、线性/面性图标、描边粗细、大小、形状等多方面

3.5 描边粗细统一

在整组图标中,利用一致性自检图标是否符合整体调性。包含图标颜色、线性/面性图标、描边粗细、大小、形状等多方面

3.6 断点技巧1

图标由几个元素组成时,断点优先选择在连接处,让整个图标看起来更自然和谐

3.7 断点技巧2

分析图标复杂度,复杂度较低的部分,通过断点来增加图标复杂度,以达到更高的平衡感

3.8 断点技巧3

针对对称图标,避免在对称处(正中间)断点,会显得比较死板,稍微不对称更柔和自然

四、毛玻璃图标设计教程

4.1 拆分图层并绘制基本图形

由矩形、圆、钢笔工具绘制基本图形。山和太阳(左边的两个形状)命名图层1;大矩形(第3个形状)命名为图层2;最右边矩形命名为图层3

4.2 填充颜色和叠放

图层1色值(FFFFFF),图层2色值(FFECE7),图层3色值(FC7856-FFBAA9)同时进行位置叠放

4.3 复制图层

复制图层3(渐变背景层),放于图层2(大矩形)的上面

4.4 高斯模糊并剪切蒙版

把刚复制的图层进行高斯模糊(模糊值20,不透明度90%,仅做参考),左图把刚刚高斯模糊的图层跟图层2(浅橙色的大矩形)进行剪切蒙版,如右图

4.5 调整图层颜色及投影/合并图层

调整图层1(山和太阳)色值为FFF3FO,并添加投影把调整好的图层1(山和太阳)与图层2,3(图标背景)叠放合并,得到右图

4.6 添加细节

为了使图标细节更丰富,更有质感,对比度更强,增加了1px的描边。图层2(大矩形)渐变描边色值:FFE8E3-FFD3C7。图层3(小矩形)渐变描边色值:FC7856-FFB9A8

4.7 整套效果图添加细节

按照上述步骤,可作出整套毛玻璃图标

五、设计师必备图标网站

作者 | 陈亚
来源 | 站酷(chenya.zcool.com.cn)

赞助商链接
赞助商链接
设计达人微信交流社区:shejidaren888
喜欢这篇文章吗?欢迎分享到你的微博、QQ群,并关注我们的微博,谢谢支持。
版权:除非注明,本站文章均为原创文章,转载请联系我们授权,否则禁止转载。

{ 发表评论 }