之前分享过关于UI设计的文章《UI》从不同的角度解答了UI设计常见的问题；但作为电商设计师，平时在工作项目中接触更多的其实是图标设计。

图标设计是UI设计很重要的组成部分，在整个界面中虽然只占据很小的区域，却有着无可替代的作用，也很考验设计师的基本功。

因此了解图标设计的相关概念，熟悉图标设计的制作规范／流程，以及掌握图标设计的绘制方法，是学习UI设计的必经之路。

本文以图标设计为核心进行全面而系统的介绍，也会针对标志设计／图标绘制分享实际操作过程，篇幅所限不涉及UI设计其它的各方面，希望我的这篇梳理能给读者带来启发。

Part 1：图标概述

1.1 图标的定义~

图标，也称为icon或Picoto，是计算机世界对现实世界的隐喻和概括，代表软件产品中的对应功能及具体操作。

1.2 图标的作用~

在UI设计当中，图标是整个界面的点睛之笔，既关乎产品的视觉体验，也影响产品的使用体验，甚至会改变一款产品(app)的气质。

简而言之，它有以下几点好处——

• 全球通用：Windows／Android／iOS, etc. 中文版或英文版甚至各种语言版本，撇开文字符号形态，基本上长一样；

• 节约资源：如果能用一个图标清楚表达含义的时候，就不需要用文字，比如用一个“挑”代表「开启」；

• 快速定位：图标可以用它独特的形状或者颜色让人快速定位到一个功能，甚至无需思考。

1.3 图标的分类~

基于不同的角度，图标有不同的分类。

• 从意义传达的角度来说，可以分为「表象」和「表意」。

  前者可以找到现实生活中的具体参照物；而后者则源于设计师的想象(但通常是人们约定俗成的，因此才具备可识别性)。

• 从表现手法的角度而言，可以分为「线性」和「面性」。

  但这是一种笼统的归类，扁平化也可以归入其中，而新拟物图标，出现了２.５D乃至３D风格的趋势。

• 从具体功能的角度来说，可以分为「应用图标」和「功能图标」。

  前者也称之为标志图标，比如手机里装载的各种app；后者常见于各类启动程序或各大网站中，用于功能性引导或操作。

Part 2：发展演变

类似于语言的发展演变，图标的发展也大致经历过如下阶段：实物→符号；符号→新符号。

其实，这也类似于绘画史的演变，始终徘徊于写实(惟妙惟肖)与写意(印象朦胧)之间。

如你所知，图标、标识都不是界面设计师所创造的概念，它的存在可以追溯到人类文明诞生之初，在漫长的历史长河当中，早期用来传达信息的各类图标逐渐演变为系统的文字，而在地图、图书、壁画和建筑等不同的地方，还存在着用来代表和传达特定概念的图标和标识。https://www.zcool.com.cn/article/ZMTE4MzM4NA==.html

而在现代图标设计的演变过程中，有几股不容忽视的标志性力量，事实上他们不仅改变了图标设计，甚至于影响了整个设计行业。

知名设计师，有——

威廉·莫里斯(William Morris)：被尊为现代设计的先驱；

迪特·拉姆斯 (Dieter Rams)：工业设计大师；

雷蒙德·罗维(Raymond Loewy)：美国工业设计之父

菲利普·斯塔克(Philippe starck)：法国设计鬼才；

…

著名设计派，有——

瑞士设计：国际主义平面设计；

罗德岛设计学院(RISD)：现代设计的殿堂

日本设计：极简主义设计；

包豪斯设计学院(Bauhaus)：设计大师的摇篮；

…

2.1 拟物图标~

来自苹果的Macintosh系统在图形界面发展史上是无法绕过的里程碑。1991年，苹果借由Macintosh，首次发布了彩色的图标设计。图标所能容纳的信息量比起上一个黑白界面的时代更大，全新的样式使得它在信息传达的功能性上也有了明显的提升。

2.2 扁平风格~

此后UI设计师开始探索更新的表现形式来设计界面中的图标。如微软引领的Metro风格图标设计和Google引领的长投影风格的图标设计。不管你喜欢与否，当年的微软让 Metro 和扁平化赚足了眼球，甚至让人一看到扁平化就想到Metro。

2.3 微扁平/轻拟物

由于扁平风格表现形式单一，同质化严重，且缺乏个性，图标慢慢开始发展到微扁平/轻拟物的方向。相较于拟物风格不会有太多复杂的视觉元素，较之于扁平风格又有了更丰富的情感内容，所以当下流行的界面设计中，在面积比较小的区域我们倾向于使用扁平图标或线形图标；在面积比较大的区域我们会考虑加入渐变甚至轻质感的图标。

2.4 新拟物~

苹果在 WWDC2020 搞了个大新闻：macOS 将与 iOS 统一步调，从X86 平台迁移至ARM 平台，并从macOS 10迭代为macOS 11。这 20 年一遇的 Mac 大版本更新被称为Big Sur.

不同于传统的拟物，新拟物虽然将符合物理规律的光影效果引入界面，但它所模拟的材质是自然界不存在的。换句话说，新拟物是将真实光线用于虚拟对象，而拟物是还原实际物品在特定光照下的效果。

新拟物设计的精髓在于对光线的绝妙运用。它把光效拿捏在“扁平”与“拟物”之间，进而打造一种全新的视觉体验。与以往一样，第三方应用将比苹果更大胆、更快速地推动这一风格——这也是我们将会真正开始解锁新拟物优势的时候。

Part 3：应用图标

应用图标也叫启动图标，是指产品中独立的图形，也是品牌标志的核心组成元素。

应用图标使用率非常高，所以在设计中应尽量做到简化，其风格主要有以下几种：

3.1 中文图标~

中文设计即字体设计，提取应用名称中的一个或多个汉字，进行设计变形，变形后的字体图形具有产品(品牌)属性的外貌特征。

常见中文图标又分为「单字」、「多字」和「字+图」几种类型。

3.2 英文图标~

英文设计与中文设计的设计模式相似，通常提取应用名称的首字母(或数个)，融合产品的功能卖点或行业属性特征进行创意加工。

常见中文图标也分为「单词」、「多词」和「词+图」几种类型。

3.3 数字图标~

数字具备识别性强，易于传播的特点，因此利用数字进行设计能给人亲和力，难点是怎样与品牌形成强关联性。

3.4 特殊符号图标~

由于符号本身的含义会对产品属性有一定限制，所以特殊符号在应用图标的设计案例中相对较少；不过也正是由于自身属性强的特点，可以很好的诠释相关联的产品属性。

3.5 几何图形~

几何图形给人简约、现代、个性等视觉感受，从单个的图形到复杂的空间，几何图形的表现形式非常丰富。不同的形状会传递不同的情感，我们可以结合产品(品牌)特征，选择适合的形状图形进行创意表达。

3.6 线形~

线性风格注意一定不可太细，如果做得太细，在手机上看会非常尖锐，而且不易点击。例如airbnb，它的背景是一个微渐变，线性风格曲线组成的“A”，同时是一只小蜜蜂。

3.7 动物图形~

动物作为图标设计元素是比较常见的方式之一，通过提取动物整体形象或者局部特征部位作为设计元素，背景填充单色或渐变色，简洁明了。常见的表现形式有剪影、线性描边风格、面性风格等。

3.8 卡通形象~

卡通风格的产品图标会让用户更有好感(低龄审美??)，一个可爱的卡通形象有助于加深用户对产品的印象。例如Bear，它的卡通形象是一头洁白的北极熊，简洁的形象设计与产品的高效阅读体验一致。

3.9 单双形~

通常有两种设计方式，在深色背板上使图形反白，背景可以是单色也可以是渐变色；在浅色的背板上填充颜色，图形可以是单色也可以是渐变色。

3.10 正负形~

例如NPR One，图标中的负形图形是对话气泡，告诉我们这是一个媒体或社交的应用，而正形图形强调产品气质，传递品牌属性。

3.11 渐变~

可以是白色渐变(背景)，也可以是彩色渐变(图形)，注意应用图标的背景和图形的色彩要拉开对比，一般为白色或浅色背景。

3.12 空~

无，即没有设计，但没有设计本身也是一种设计，例如“黄油相机”的图标设计成一块黄油的样子已深入人心了。

Part 4：设计流程

4.1 iOS应用图标~

在苹果提供给我们的这套资源中，有 Template-AppIcons-iOS 这个文件。打开这个文件，用我们自己设计的启动图标替换掉智能对象里的内容，你会发现所有尺寸的图标都变成了我们的图标。因为iOS的圆角图标并不是标准的圆角矩形，而是某种连续曲线。

4.2 安卓应用图标~

Android应用图标同样需要很多尺寸，主流需求是1024px、512px、144px、96px、72px、48px六种。设计师提供给程序员的同样是直角矩形，然后程序员通过代码进行切割使其变成圆角图标。

4.3 iOS应用图标设计流程~

在我之前的设计作品中，有个“影记”的摄影社区APP，本篇我们就以此为例抛砖引玉，来学习一个iOS应用图标的绘制过程。

4.3.1 寻找隐喻：

隐喻是在彼类事物的暗示之下感知、体验、想象、理解、谈论此类事物的心理行为、语言行为和文化行为，即人们看到某样东西或听到某件事情能够马上在大脑中形成联想。

例如说到摄影，马上就能想到相机、快门、闪光灯、暗房等。然后通过这些联想词，去找一些气质相符的图片制作情绪版，通过情绪版可以感受到产品的调性，然后从中提取一些形状和色彩作为产品图标的主要造型。

4.3.2 竞品分析：

应用市场各类产品不胜其数，在同类应用中存在大量相似的应用图标设计，如何保持应用图标的唯一识别性非常重要。所谓唯一识别性，不仅是说要避免创意撞车、图形雷同；它还指图形表意是否清晰，是否符合用户的心里预期。

4.3.3 提取关键词：

根据收集的图片，创建情绪版，结合自己的产品提取关键词，然后就知道在接下来的设计中应该突出什么。

4.3.4 抽象图形：

确立了首字母“Y”、“快门/开关机”和“信号灯”作为应用图标的主图形，接下来将绘制好的3个图形相结合，完成初步设想。

4.3.5 图标栅格线：

使用iOS应用图标栅格线作为设计依据有助于建立和谐的图标绘制比例，并与iOS系统风格保持统一。下图为iOS系统天气应用使用了图标栅格线。将图形放置在图标栅格上调整大小并注意图形与其比例协调。

4.3.6 丰富细节：

“影记”作为摄影师分享佳作平台，摄影师们用的器材颜色大多以黑色为主，因此酷酷的黑色更适合作为应用的主色。白色的信号灯过于普通，使用相机本身发出的橘红色灯光作为信号灯的颜色，使其更加具有动感和活力。整体像「消息气泡」的造型暗示可以在这里进行摄影交流。

4.3.7 多场景测试：

将应用图标设计稿交付开发提交至App Store上架，正确的图标设计稿应是直角矩形，iOS会自动应用一个圆角遮罩将图标的4个角遮住，假如图标设计稿自带圆角，就有可能露出图标透明区域。

Part 5：功能图标

功能图标具有明确的表意功能，用以替代或辅助文字来指引用户进行快速导航，有助于用户形成产品记忆；

同时一套设计精致、风格统一的功能图标，不但给用户带来视觉上的愉悦感，还具备良好一致的使用体验。

5.1 图标的规范~

图标是UI设计的基本组成部分，对品牌营销非常有帮助。科学而严谨的设计规范能帮助我们设计精致、风格统一的图标。

5.2 图标尺寸~

在绘制图标时，一定要确保所有的图标都相同大小。在UI界面设计中，网格的大小必须要是4或12的倍数(安卓是8的倍数，iOS是4的是倍数)。

一致性是设计图标的关键，因此在绘制描边图标时，原则上需要保证所有的笔画都是相同的粗细，并且笔画之间的间距不要比笔画本身更细。

这里建议从最大的尺寸开始，然后依次绘制小一点的。因为删除和简化细节要比添加容易得多，也能最大程度的保留图标原始状态。

如下参数基于48x48px画布绘制的线性图标，线宽默认为4px，不同场景缩放比例使用——

• 图标为48x48px时，线宽4px(基准线宽)

• 图标为32x32px时，线宽3px(基准线宽)

• 图标为24x24px时，线宽2px(基准线宽)

• 图标为16x16px时，线宽2px(基准线宽)

  ......

5.3 栅格~

keyline：

keyline是网格栅格系统的基础。有助于促进图标统一性，简化设计过程中比例调整成本，绘制小图形需要参照小正方形的keyline。

关键图形：

用于图标元素绘制的参考，并帮助建立清晰的内容轮廓边界，通过使用这些核心形状作为参考，你可以跨系统保持一致的视觉比例。

5.5 拐角~

直角拐角：

• 当基础图形为满容器正方形时，建议使用3X圆角；

• 当基础图形为满高(宽)矩形时，建议使用2X圆角；

• 当基础图形为较小(小于1/2宽高)矩形时，建议使用1X圆角。

非直角拐角：

根据图标场景，通常情况下无论角度，默认均为1X圆角；特殊弧度的曲线“拐角”情况除外，根据图标设计需要单独考虑。

5.6 区域~

图标区域分为封闭和非封闭：

• 封闭区域：有闭合曲线构成的为封闭区域，可以进行独立颜色填充；

• 非封闭区域：由非闭合曲线构成的非封闭区域，原则上是不能进行独立的颜色填充；

• 封闭区域为曲线形状且有相交线段时，原则上是不能进行独立的颜色填充。

5.7 视觉平衡~

绘制图标不光要追求尺寸统一，还要实现视觉上的重量均衡。设计师要懂得调节图标大小以避开视觉上的觉错。

5.8 颜色~

功能图标最好只使用一种颜色(黑)否则组件可能变得过于复杂，不利于和其他设计师协作。出于产品营销/品牌宣传的目的，你可能会想要使用2~3种颜色，3种以上颜色的东西是插图，而不是图标。

颜色设置没有强制规定，但通常设置为——

• 选择状态颜色：未选择图标颜色为#000000，透明度为87%；

• 未激活图标颜色为#000000，透明度为54%；

• 禁用图标颜色为#000000，透明度为38%。

5.9 命名~

科学命名规则能够帮助我们快速定位，也能加强团队协作效率。切图可按照“业务_类型_功能_大小_状态”的格式进行命名。

切图命名的格式建议为全英文，可在切图之前对图层进行命名，常用切图命名对照表如下所示：

5.4  图标绘制规则~

图表绘制并无强制规则，但有一些通行的做法：

• 当线段与曲线相交或者与直线非垂直相交时，线段末端用圆头端点；

• 当线段与直线垂直相交时，线段末端用方头端点；

• 当圆点的直径与线宽一样时，圆点用图形绘制，不用线段；

• 当圆形和方形在小于16px时建议用面绘制，不要用线；

  ……

5.4.1 倾斜角度：

图标中的倾斜角度应为45的倍数，保持与keyline中的对角线或十字垂直相交线保持平行关系(矩形另说)，应避免使用15.7°，79°等这些奇怪的数值。

5.4.2 线段：

为保证风格的整体一致性，图标所有线段端点默认均应为与线段同宽的圆角端点，通常情况下线段端点和可编辑节点坐标以整数坐标为佳。

5.4.3 断点：

内部结构与外框的间距不得小于线宽，内部元素之间的间距不得不小于线宽的1/2。外形框的端口尺寸关系：4px、8px、12px，建议尺寸为4的倍数。

5.4.4 风格变换：

图标在特定规律下允许不同风格之间的变换，分别为线性风格(默认)、填充风格、混合风格、多色混合风格。

5.4.5 描边：

双数用居中描边，单数用外描边，所有锚点要与网格对齐不能出现偏移。

如果是1像素的边框，边框应该使用外部或内部的描边样式，不建议居中(如下图模糊)。

5.4.6 线段闭合：

所有线段结合处应为闭合状态，避免出现错位的情况。

5.4.7 透视：

如果图标有透视需求的话，就要统一透视角度(允许打破比例)。

5.10 图标的风格~

常见的功能性图标风格大致有三种：线性图标、面型图标和扁平化图标。

A：线性图标：

线性图标具有辨识度高，清晰，简约易识别等优点，不会对页面造成太多的视觉干扰；

缺点是线性图标的创作空间相对较少，太复杂的线性图标会对识别性产生较大的困扰。

线性图标根据样式还可以分为：双色线性图标、线面填充图标、线性渐变图标。

线性图标使用场景——

在iOS所有原生应用的导航栏和工具栏都采用了2px线框的图标设计，很多APP产品的标签栏都选择用线性风格的图标设计。

B：面型图标：

面形图标具有表意能力强，细节丰富，情绪感强，视觉突出，创作空间大等优点；

但在页面中不可过多出现，否则会造成页面臃肿，难分主次，引发用户视觉疲劳。

面型图标根据不同的配色样式可以分为：单色饱和度填充图标，纯色渐变图标和多色渐变图标。

面形图标使用场景——

面形图标具有广泛适用性，通常在运动、时尚类应用的标签栏出现。由于面形图标的视觉占比最大化，具有强烈的视觉表现力。

5.11 扁平化图标的使用场景~

扁平化图标实际上是线性图标和面形图标的一种组合形式，这种类似插画感觉的图形一开始多用于引导页、空状态页面情感化设计，后来逐渐在标签栏、金刚区也出现了扁平化图标的身影。

5.12 品类区(金刚区)图标~

品类区俗称金刚区(百变)，通常位于搜索banner之下，占据首屏22%-25%比例不等，而且是聚合各类子版块的入口，其重要性不言而喻。

因而品类区图标具备高度精炼的特性，识别度也大于文字，图标设计通常以图标+说明文字为主。常见的设计手法有——

• 圆形底板+45度渐变+白色面形+微投影；

• 45度渐变+扁平图标+微投影；简单线性；

• 45度渐变+不透明度+面形图标。

  ……

5.13 文字图标~

由于文字本身就是一种演化而来的符号，因此在某些场景下，采用文字或字符作为图标，是一种很不错的表现手法。

不过图标应该是全球性的，如果你确实需要文字图标(例如货币符号等)，那么请你自己绘制，而不是直接使用字体。

5.15 动态图标~

动效的出现，让图标拥有了更多的可能性。在常见的各种数字产品当中，UI组件和各色元素都已经动画化了。

在UI设计中尝试添加一些动画及动画图标，不仅能在视觉上快速吸引用户，还能使产品更具交互性与趣味性。

不妨分享几个动态图标资源网站——

• Feather：设计师Cole Bemis制作的一个开源图标库，可自行调节图标大小和线条粗细；

• useAnimations：支持所有设备、网站、Android和iOS，可以免费用于个人和商业用途；

• Lordicon：每一个图标都提供线性轮廓和面形剪影两种风格样式，并且图标是基于Lottie动画引擎的矢量动画图标，大小完全可扩展，且兼容所有主流浏览器。

• Icons8 Animated icons 2.0：提供的动态图标格式包括 Lottie 适用的 JSON、GIF 、AE格式，透过网页可以搜寻、预览动态图标效果。

Part 6：绘制示例

6.1 布尔运算~

布尔指的是乔治·布尔，19世纪的一位数学家，为了纪念布尔在符号逻辑运算中的杰出贡献，所以将这种运算称为布尔运算。

布尔运算听起来复杂，但其实非常简单，布尔运算采用的数字逻辑推演法，主要有数字逻辑的联合、相交、相减。对应到设计软件中就是——

• 合并形状：将两个形状合并为一个，取的是合集；

• 减去顶层形状：用底层图形减去顶层图形所得最终图形；

• 与形状区域相交：得到的形状是两个图形重叠的部分，取的是交集；

• 排除重叠形状：简单理解就是减去两个图形重叠的部分，与「与形状区域相交」相反；

基本上通过布尔运算，我们能绘制出常见的大部分图标了，但有时我们需要针对某些线条进行单独的调整，又或者我们需要打造一套手绘风的矢量图标，这个时候就需要用到贝塞尔曲线了。

6.2 贝塞尔曲线~

贝塞尔曲线适用于二维图形绘制的数学曲线。由法国工程师皮埃尔·贝塞尔(Pierre Bézier)1962年发表并命名。

贝塞尔曲线包括：节点、控制点、控制线、曲线这几个基本概念。

矢量图形便是由这几个基本概念构成的。图形由基础节点作为支撑构成，控制点和节点之间的线段称为控制线，控制线就像皮筋一样，调整控制点的位置，可以改变曲线的形状，就像被皮筋(控制线)拉扯一样。

节点包括 4 种基础属性类型——

• 直线节点：没有控制点和控制线；

• 镜像关联节点：控制其中一侧的控制点，另一侧的控制点会发生镜像变化，适合绘制对称结构的曲线；

• 无关联节点：即节点两侧的控制点可以各自自由控制，而另一侧的曲线独立不会受到影响；

• 不对称关联节点：节点两侧的控制点和节点将会保持在同一条直线上(角度对称)，但是却不会对称控制线的长度。

6.3 钢笔工具~

钢笔工具也是所有矢量软件的核心工具，也是绘制自由贝塞尔曲线常用的工具。它的使用对于新手来说可能稍微有点复杂，而一旦熟练会非常方便。

The Bézier Game 是一个非常不错的练习钢笔工具的网站，以游戏的形式练习钢笔工具使用技巧，通关的时候你对钢笔工具就已经驾轻就熟了哈。

6.4 面性示例~

眼睛：布尔运算相交 / 相减 / 合并形状

位置定位：旋转 / 相减

WIFI：相加 / 相减 / 旋转

齿轮：旋转 / 相减

铃铛：相加 / 相减

6.5 线性示例~

放大镜：旋转 / 相加

时钟：钢笔 / 剪刀工具

雨伞：相减 /  剪刀工具

相机：合并

爱心：相加 / 旋转

Part 7：评判标准

如何评判我们的 icon 品质，是否贴合整个产品(品牌)呢？我们需要了解什么才是一个好的 icon ，可以从以下五个方面来加以检验——

7.1 识别性~

识别性(也可以说是可访问性)是一个图标最基础的一项，尤其在没有文字说明的情况下，一定不能让用户产生疑惑。

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

含义识别：就是让你的图标可以被用户理解其含义，不会让用户产生歧义。

视觉识别：图标的大小、形态、颜色，线条的粗细、断点、圆角这些要素识别性是否高。

在保证识别度的前提下灵活发挥，尝试各种不同风格的表现形式。当然，脑洞也不要太大，从而失去了原本的含义。

7.2 规范性~

规范性是图标设计的基础，也是衡量图标优劣的重要依据。图标的规范性包括——

• 视觉平衡性：在相同尺寸的基础上分析形状间的视觉差异，来审视视觉分量上是否均衡；

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

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

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

7.3 统一性~

统一的图标内容会让用户更容易上手，而且在视觉上也更加和谐美观。可以从以下几个方面着手——

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

• 设计语言：可进一步拆分为圆角(直角)、透明度(层次感)、断线开口(位置)、设计特征(风格)四个纬度去规范；

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

• 颜色规范：线性功能图标单色(灰度)就好，对于线面结合的扁平图标建议最多用两种颜色(绝不超过3种)

7.4 呼吸感~

所谓的呼吸感就是适当留白。不管是图标还是界面，适当的留白可以突出主体内容，使产品变得易用。

在图标的绘制过程中，我们要注意图标元素不宜过多，元素之间的间距不宜过近，同时去掉所有无法传达确切意义的元素。

7.5 品牌感~

品牌感是产品的灵魂，也是图标设计指引的方向。

我们要试着从品牌设计的角度去理解，寻找自己产品独特的品牌气质，挑选合适的技法(下文有具体分享)，然后把这些元素具象化，融入进界面设计中。

Part 8：品牌基因

核心的问题是，该如何打造属于自己APP的独特风格呢？

品牌基因为我们提供了一些线索。它是由平面设计中的VIS(视觉识别系统)引入的一种设计策略，通过对品牌形象进行衍生设计形成一套完整的视觉符号。每一个APP都有其品牌形象，代表了与众不同的气质。

接下来，我们就来学习如何利用品牌基因进行图标设计。

8.1 提取品牌图形~

例如网易云音乐的首页标签，就直接使用了它的品牌图形(内外呼应)，其优点不言而喻。

8.2 提取品牌色彩~

Bigo Live的品牌色是青蓝色，在标签栏的图标设计上(选中态)将图形局部元素填充青蓝渐变色，活泼清爽的搭配带给用户轻快的感觉，也强化了品牌的记忆。

8.3 提取设计语言~

例如飞猪的品牌图形就很特别，猪的头部轮廓是由大写字母F演变成的翅膀造型，“我的”小人图标的也使用了类似的轮廓，这样他们就形成了某种视觉联系。

8.4 提取产品气质~

例如传递传统手工艺人社交的「东家」，其产品流淌着古朴而温润的人文气息，它将宋体汉字的笔画进行拆解组合，创造出具有东方韵味且极具形式感的图标设计。

8.5 拆分品牌名称~

App标签栏图标最常见的形式是图形加文字的组合，由于文字本身就能传达最直接的含义，因此图形的识别性并不那么重要了，我们就可以在其视觉表现形式上赋予更多创意和个性。

8.6 展开形象联想~

表现首页时除了小房子，我们还可以想到什么？马蜂窝的做法就很巧妙，“首页”图标是“蜂巢”，而蜂巢是马蜂的房子，这样的设计与品牌形象紧密相连，简直完美！不过最新的改版好像改没了?

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

OK，关于图标设计就分享到这里。希望能对大家有所帮助，水平所限虽几经修改难免仍有疏漏，欢迎留言指正并感谢阅读?

参考文献：

Material Design

Human Interface Guidelines

ICON | 设计指南——v优客

ICON | 设计指南——Bonnie Kate Wolf

UI设计师必须知道的 iOS和Android的APP图标设计指南

Fyin印迹_设计师必看的图标设计指南

图标设计零基础科普指南

品牌基因图标设计技巧