漫谈UI设计中的图标设计

在UI设计中，图标的使用可以说是占了大壁江山，相信大家都知道图标的重要性，一个优秀的图标比语言更吸引眼球更可视化，甚至跨越了语言的障碍，传递信息也非常的高效。

以下是我将要分享的流程节点：

根据图标的使用场景 > 确定图标的风格 > 在图标中融入品牌元素 > 最终进行自我检测

图标的使用场景

在着手设计图标之前，你得根据图标的使用场景去选择图标的类型。先来看看图标的使用场景：

1/ 应用图标

要在各个APP中脱颖而出，视觉上要够抢眼；风格上能传达行业属性和品牌调性。

2/ 功能入口

作为流量分发的出口，很重要，体量感上要够重、够突出。

3/ TAB底部导航

虽然很重要，但常驻底部，可弱化。

4/ 列表流

处于次重点，视觉上次突出。

5/ 网格布局

处于次重点，视觉上次突出。

6/ 标题点缀

处于次重点，视觉上次突出。

7/ 辅助/装饰

用于辅助装饰作用，视觉上要最弱。

8/ 活动入口

如果作为一个主推的活动入口，要吸睛。

如上所示，图标的使用场景大致可分为8大场景，每个场景对图标都有不同的要求。

· 应用图标：够抢眼
· 功能图标：最突出
· 底部导航：可弱化
· 列表流/网格布局/标题点缀：次突出
· 辅助/装饰：要最弱
· 活动入口：要吸睛

如何根据场景选择图标类型？

首先，无论是从全局还是从单个页面来看，根据内容由主到次，图标也要相应的由重到轻；
但是，在具体页面中也要根据产品和营销的需要去做具体的调整。
根据产品功能的优先级别或者希望用户关注的主次，图标的风格也是：面性图标>线面图标>线性图标。

图标的风格

从图标的使用场景可以大致确定我们的图标类型。这时候心里至少要有个方向，知道我们的图标体量感是什么样的。然后，我们要开始着手去设计图标的风格。当我接触一些新的设计师时，总是能听到一些抱怨说：    “图标没有什么好设计的，长得都一样。”

其实不然，图标是有很多风格的。下面我就列举了38种图标风格，给设计师们以灵感和参考。也便于我们在设计时，能尽快的选择适合自己产品调性的风格。

面性图标

1/ 剪影图标

这是市场上比较最常见的一种设计风格，有很多设计风格都是在其基础上的延伸。

2/ 微渐变图标

图标在有色背板之上；白色的渐变增加一些环境色。

3/ 双色渐变图标

一般采取邻近色渐变，绚丽多彩。

4/ 双色图标

采取两种颜色，注意用色比例不要均衡，要有主次。

5/ 不透明度图标

图标的少部分色块调整不透明度，要注意比例不要均衡，要有主次。

6/ 轻质感图标

比剪影多了些细节。

@Dea_n

7/ 轻拟物图标

处于拟物和扁平中间，就是这种暧昧的感觉。

8/ 拟物图标

直观！真实！辨识度非常高！

9/ 图片图标

当图形不能很好的表达或表达不具吸引力或实物能更好的表达产品调性时，也可以选择使用实物图片当作图标。

10/ 文字图标

当图形不能很好的表达其含义或者用户人群比较小白时，直接使用文字也是一种不错的选择。

11/ 图文图标

从某种意义上来说辨识度确实会很高。

12/ 折叠图标

用颜色的细微变化来做出纸张的折叠效果。

13/ 折纸风图标

用视觉手法模拟折纸的视觉效果。

14/ 折纸阴影图标

部分图形衔接处使用少量阴影体现折纸效果。

15/ 插画图标

插画图标的采用，比较个性化！另外较多的细节，也使其更突出！

16/ 叠加图标

将一组图层进行叠加，形成丰富的层次感，视觉表现力比较丰富，一般比较适合应用图标。

17/ 长投影图标

曾经也是风靡过的网红。

18/ 像素图标

在UI中确实少用，除非要打造出特有或复古的风格。没有找到合适的例子。

19/ YOGA风格图标

设计师Yoga自创的一种风格，主要以渐变的穿插和切割为主的一种图形设计模式，个性鲜明，色彩大胆，是继MBE风格后的一种新的设计潮流。

20/ 2.5D图标

比普通图标更具有冲击力、比3D图标设计难度更低，但是也不失立体效果，能为界面增添更多视觉感受。

21/ 低面建模

用色块来进行二维、三维的装饰表达。风格很强，很独特。没找到合适的产品，大概就是如下的样子。

22/ 扩大图标

使用背板对图标做一些遮挡，保留一些想象的空间和延展性。

23/ 背板的设计

在图标上玩不出啥花样了，也可以对背板做一些个性化的设计。

24/ 其他 欢迎大家补充哦～

线性图标

1/ 传统线性图标

先来看看传统的线性图标，这也是使用最多的一种图标类型。随处可见。

2/ 粗线图标

较适用于年轻化用户人群。

  @孔晨

3/ 直角图标

棱角分明，比较硬朗、冷峻，适合工具类、时尚类。

4/ 断点图标

形状拼接处断点，相比传统的封闭式，多了些可以品味的细节。

5/ 高光图标

利用点线来模拟高光的效果，使图标更丰富。

      @孔晨

6/ 中国风图标

利用中国汉字笔画而组成的图标，非常具有传统手工艺人的气质，很符合其产品调性。

7/ 一笔速写图标

专门从事图形和图标设计的设计机构Differantly Studio。其创作者的风格：以一笔速写的手法绘制图标，一笔成型、简洁概括事物最鲜明的特征，颇具创新性和趣味性！

8/ 双色图标

利用辅色来丰富图标，辅色面积占比20%即可，不可太多。

9/ 多色图标

有时，为了追求一些个性化，也可以突破传统，慎用。

10/ 插画图标

相对比较复杂，当内容很少时，可以考虑此方法，慎用。

线面结合图标

1/ 线面结合图标

相较于面和线，线面结合可以打造更多的细节层次感，在视觉上可以作出更多的差异化。

2/ MBE风格图标

很流行的一种风格，此风格的作者是法国设计师MBE，2015年底他在dribbble上发布了此风格的一系列作品，从线性Q版卡通画演变而来。配色大胆、明亮、饱和度高、适合低龄儿童类产品。

3/ 微投影图标

利用同色系来给图标做一个浅浅的投影效果。MBE的简化版。

4/ 面性点缀图标

图标的少部分采用色块的形式进行点缀。

5/ 线+轻拟物图标

词穷了，不知道取啥名字了，反正就是下面这种形式的，线+轻拟物的赶脚….

在图标中融入品牌元素

为什么要在图标中融入品牌元素呢？因为我们大部分的人做的APP都不是用户量巨大的APP（如微信），我们需要通过融入品牌元素的手段去提升产品的辨识度，增加产品的特色。而微信这种拥有强大用户量的产品，打造产品的品牌特色已经不是他们的强烈需求，他们会更注重图标本身的含义。

在图标中融入品牌元素方法：

1/ 品牌logo的直接应用

在底部导航中，运用品牌Logo作为首页的图标。

2/ 品牌名称的直接使用

在底部导航中，直接运用品牌名称作为底部tab导航。

3/ 品牌logo风格的延续

在图标中延续logo的风格，包括颜色、线条、设计手法等等。

4/ 提取品牌logo中的元素

找到品牌logo中的特色元素，融入到其他图标中。

5/ 提取品牌logo中的色彩

“统一色彩”几乎是所有设计手法中要达到“统一”的最常见、最简约的一种方法。

最后进行自我检测

当我们认真在做设计，而往往太投入而看不到其中的问题，这时候就需要一套既定的标准来去衡量这套图标是否合格。

我将从以下维度来评判图标是否合格： 

是否具有辨识度？
是否统一？
风格是否符合行业调性？
是否具有品牌特色？

1/ 辨识度

不忘初衷，别忘了图标的使命感是帮助用户更好的识别，请不要造成干扰而得不偿失。

含义辨识度

要让你的图标能被你的用户所理解。

视觉辨识度

国外有个测试，测试四种样式的图标：
实心图标：白底黑图，黑底白图
空心图标：白底黑图，黑底白图
最后得出的结果是：空心图标的黑底白图要比其他的图慢0.17秒，也就是这种图的视觉辨识度最弱：

2/ 统一性

当做整套图标时，要复盘一下图标的统一性。

统一饱满度

统一色彩饱和度

统一圆角

统一描边

统一线条末端

3/ 风格

风格就像灵魂一样，通过视觉表现的手法来传达自己的特性，让你的用户迅速抓住你的产品特征。
比如：

幼儿：给低幼儿童使用的产品，可爱、活泼。

传统文化：蕴含东方美学的原创好物，融入中国元素，能快速的传达东方美学。

女性：柔美，较多粉色系，图标圆润。

男性：刚硬，较多深色系，图标方直。

4/ 品牌

风格能让你的产品拥有自己的性格，打造产品的品牌特色，提升产品的辨识度。让你的产品在众多产品中脱颖而出。
常见的方式有：色彩、特殊元素、吉祥物…(详见第三部分：在图标中融入品牌元素)

总结

根据图标的使用场景 > 确定图标的风格 > 在图标中融入品牌元素 > 最终进行自我检测

本篇文章对图标的设计过程做了一个全局的分析和总结，但是还是有很多东西还没总结，也说的还不够透彻，我会争取下次总结的更好。希望本篇总结能对你有所启发和帮助，有所不足的地方也欢迎大家的指正。希望能和大家互相分享，互相学习，共同进步。

PS：另外文中用到的案例是我平时保存的素材，现在很多找不到出处了，知道的同学欢迎补充。