图标设计的下篇，更完整的关于图标设计文章请关注个人公众号「印迹拾光」

我们了解了 icon 的基本知识，那么如何设计一个好的 icon 呢？怎样评判我们的 icon 是否合适，是否贴合整个产品呢？我们需要了解什么才是一个好的 icon 。

我们可以从以下五个方面来检验，分别是：识别性，规范性、统一性、呼吸感与品牌感。

6.1 识别性

图标就是帮助用户理解信息，所以识别性（也可以说是可访问性）是一个图标最重要的一项，尤其在没有文字说明的情况下，一定不能让用户产生疑惑。我们检测图标的可读性通常要将图标的背景色底板在黑色和白色之间进行切换对比，不论是黑色还是白色的背景都可以看清图标的全部细节，还需要确保图标中的每一种颜色都是可见的。

图标识别性可以分为两类，分别是含义识别和视觉识别。

含义识别：是视觉语言是否可替换文字语言，简言之就是让你的图标可以被用户理解，不会让用户产生歧义。

视觉识别：图标的大小，复杂度，颜色，线条的粗细，这些影响视觉识别的因素识别性是否高。

灵活的设计思路，在保证识别度的前提下灵活发挥，尝试各种不同风格的表现形式。

当然，脑洞也不要太大，失去了原本的含义，造成误解。

6.2 规范性

规范性也是做好一个图标的基础，我们要保证图标在视觉大小的一致性，图标饱满度、遵循同一种规律，细节统一性。

视觉大小的一致性：在相同尺寸的基础上分析形状间的视觉差异，来审视视觉上是否统一，如一样尺寸大小的圆和方形的视觉大小就不一致，那么我们可以规定它的最大尺寸，进而在尺寸规范中适当调整，使得视觉大小达到统一；

饱满度：常用的衡量方法就是正负形衡量法，在图标所占区域的矩形框中，看图标的正形的面积是否还可以增加；

相同规律：同一套图标必须是以同种风格呈现的，例如是否全部使用了圆角或直角的风格，圆角大小、绘制风格是否一致；

细节统一：包括像素是否对齐、圆角、描边粗细是否统一的问题；

6.3 统一性

在绘制多个类型相同的图标时，我们需要注意这一套图标合集需要在视觉上保持统一性。在一整套产品中，会有很多种图标，但是图标的功能不一样，所表达的内容也不同。这时，图标一致性的意义就体现出来了，根据格式塔原理中的相似性原则：人们会将如元素彼此相似的东西感知为一组。这也意味着如果具有相同功能、含义和层次结构级别的元素，则应在视觉上保持统一匹配。

图标内容的统一会让用户明白相似的图标所代表的的功能也相同，而且在视觉上也更加和谐美观。因此我们在绘标后还需检查线条的粗细比重，边角的大小，配色方案，细节层次和设计元素在整个合集中是否是不变且一致的。

图标的统一性可以从：线条粗细、设计语言、复杂程度、颜色规范四个大的方向去着手。

线条粗细：相同功能类型的图标线宽粗细统一，有背板的图标线条不易过细；

设计语言：可拆分为透明度（拉开层次）、圆角（圆角还是直角）、断线开口（开口位置）、设计特征四个纬度去规范；

复杂程度：如果不能简化图标，就保持同一组图标的墨水重量一致，简化太复杂的图标，增强辨识度；

颜色规范：对于线面结合的扁平图标建议最多用两种颜色，活动入口图标如果需要的色彩数量多，那就需要保持敏感，从一种色彩的周围小幅度提取另一种色彩或多种色彩，调整其色相、饱和度、明度就能搭配出许多和谐的颜色。

6.4 呼吸感

呼吸感的意思就是适当留白。不管是图标还是界面，适当的留白可以突出主体内容，让内容具备易看性。在图标的绘制过程中，我们应该注意图标元素之间的间距不宜过近，元素也不宜过多。图标是一个物体的简略缩影，目的是为了表达内容，让用户快速理解，太过复杂的细节会影响图标的识别速度。因此在图标的绘制过程中应该删除所有无法传达图标意义的元素，避免使图标变得太过复杂难以识别。

6.5 品牌感

品牌感就是我们上面谈到的要与品牌理念相符，传达给用户的感受一致，通过吸取品牌色，提取品牌元素，采用品牌吉祥物和品牌图形的方法来提取品牌基因。我们要试着从品牌设计的角度去理解，寻找自己产品独特的品牌气质，挑选合适的技法。然后把这些元素具象化，融入在界面设计中。

那么，该如何提升品牌感，打造属于自己App的独特风格呢？

品牌基因为我们提供了一些线索，这是近年来非常流行的一种趋势。

利用品牌基因进行图标设计

我们都知道图标在APP设计中的重要性，但是打开许多APP你会发现他们的图标设计都非常普通，似乎是在图标网站上下载的素材。虽然一些优秀的设计师在进行图标设计师加入一些诸如圆角、断线等设计语言，但是仍逃脱不了与其他APP设计雷同、毫无个性的通病，使得UI看上去普通、不精致，缺少产品气质。

那么，该如何打造属于自己APP的独特风格呢？品牌基因为我们提供了一些线索。它是由平面设计中的VIS（视觉识别系统）引入的一种设计策略，通过对品牌形象进行延生设计形成一套完整的视觉符号。每一个APP都有其品牌形象，代表了与众不同的气质。接下来，我们就来学习如何利用品牌基因进行图标设计。

7.1 提取品牌图形

通常一个App的第一个tab是首页，是用户进入App后看到的第一个页面，最常见的图标设计是一个小房子的图形。首页是App中最重要的页面，承载了整个产品的核心功能，是用户浏览最多的地方，因此使用一个让人印象深刻的品牌图形作为“首页”图标是必要的，不但使App内外形成了视觉联系，同时也二次传递了品牌形象，加强了用户对App的良好印象。例如网易云音乐的首页标签就直接使用了它的品牌图形，其优点不言而喻。

但是请注意，这种设计策略并不适合于所有的App，当第一个tab被赋予特定功能，就不可使用品牌图形，否则用户会难以理解。例如微信第一个tab是聊天列表，此时使用气泡就比品牌图形更加合适。

还有另外一种情况。通常一个App的最后一个tab是个人中心，即“我的”。如果App的品牌图形是动物图形，也可以使用其整体或局部图形来作为「个人中心」的入口图标。

7.2 提取品牌色彩

色彩也是图标设计中重要的构成元素之一，合理协调的色彩搭配让用户在浏览页面时感觉舒服。从品牌形象中提取色彩作为图标设计的依据，可以给用户带来由内而外一致的视觉体验。在设计时提取品牌色彩可适当调整色彩的饱和度，明度，既可以将图形整体填充色彩（例如微信），也可以局部填充色彩，还可以填充为图标背景色，使图标之间形成色彩上的关联。直播应用Bigo Live的品牌色是青蓝色，在标签栏的图标设计上（选中态）将图形局部元素填充青蓝渐变色，活泼清爽的搭配带给用户轻快的感觉，与整体品牌调性高度一致。

7.3 提取设计语言

在VI设计中通常提取辅助图形作为设计元素，这在图标设计中同样适用，当所有的图标都具备了相同的设计元素，他们就构成了一套完整的视觉符号。例如飞猪的品牌图形就很特别，猪的头部轮廓是由大写字母F演变成的翅膀造型，因此可以看到“我的”小人图标的也使用了类似的轮廓，这样他们就形成了某种视觉联系。

7.4 提取产品气质

品牌形象决定了产品的气质，而产品的气质决定了吸引什么样的用户。就如当我们第一次看到一个人的时候，往往会根据他的外貌形象特征，产生一个大致的印象，这就是一个人的气质。APP也同样，例如传递传统手工艺人社交的「东家」，其产品流淌着古朴、温润、精致的人文气息，它将宋体汉字的笔画进行拆解组合，创造出具有东方韵味且极具形式感的图标设计。

7.5 拆分品牌名称

App标签栏图标最常见的形式是图形加文字的组合，由于文字本身就能传达最直接的含义，因此图形的识别性并不那么重要了，我们就可以在其视觉表现形式上赋予更多创意和个性。MONO是一款阅读类App，它的标签栏图标直接将品牌名称中的4个字母拆分成4个图形。虽然每个字母与其对应的功能模块本身并没有直接联系，但加上标签文字的辅助也不会造成阅读困难，而且产品本身的用户人群就是比较能接受新鲜事物的年轻人，因此这样的创意反而给App设计加分了。

7.6 展开形象联想

我们日常使用的众多App大多数都有着相同的功能模块：首页、发现、动态、我的等，因此也就出现了很多雷同的图标设计。比如“首页”是尖顶房子，“发现”是眼睛，“动态”是气泡，如果有差别也只是设计风格的差异，有的直角有的圆角，有的线性有的面形。这样的设计没有品牌归属感，试一下将这些图标单独拿出来就无法判断它是谁，它从哪儿来？

优秀的设计师不仅要具备将图标绘制精美的能力，还要具备丰富的设计想象力，不拘泥于设计规范的条条框框，有时候打破规则才能设计出优秀的图标。“首页”除了小房子🏠我们还可以想到什么？马蜂窝的做法就很巧妙，“首页”图标是“蜂巢”，而蜂巢是马蜂的房子，这样的设计与品牌形象紧密相连，简直完美！不过最新的改版好像已经改没了。

总之，要想在绘制整套图标时建立统一风格，就要从外观和颜色上确立主风格，在局部寻求个性特征，将两者结合，并融合产品属性和符合用户定位，先在脑海中构思出清晰的概念，然后在稿纸上绘制草图，最后确立一个最佳方案上机完成，只有不断地思考和打磨才能创作出最佳的设计方案。

最后

图标设计是UI设计中非常重要的环节，在尺寸有限的界面上，小小的 icon 可以更加简单高效的表达含义，传递给用户正确和友好的指引。建议每位UI设计师在平时做大量的练习尝试各种不同的风格，以满足不同的业务需求。

关于如何绘制keyline线，还有最新的iphone12样机，有需要的同学可以前往个人公众号获取哦。

OK，图标设计指南就分享到这里，希望对大家有所帮助。

因为篇幅较长，几经修改，有细节不严谨的地方，欢迎斧正，感谢阅读。

小手一赞，年薪百万！

👇