图标设计——ICON DESIGN

一、图标概述：

1.1、图标定义

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

图标是一种具有高度概括性的图形化标识，在界面中与文案相互支撑、搭配使用，隐晦或直白的表达内容的具体含义、属性特征、形象气质等丰富的视觉信息。

图标设计是一门学问，在我们的认知中，通常将图标理解为某个概念的抽象图形，通过设计清晰易懂的图形传达出比文字更高效率的信息，同时提升界面的美观程度。

从概念上来讲，图标可分为广义、狭义两种，广义指的是现实世界中的图形符号、且有明确指向的含义，而狭义的图标指的设备界面中的符号，这些设备泛指承载互联网产品的载体（如手机、电脑、iPad...等）。在UI设计中主要具是针对狭义的概念。图标是UI设计中除了文字之外最不可或缺的视觉元素，在设计中看似只占一个很小的区域，但是它却是考验设计师基本功的重要标准，了解图标相关的概念，以及正确绘制的方法，是入门 UI设计的必备条件。

1.2、图标分类

从不同的角度图标可以分为不同的类型：

从应用场景图标可分为应用图标和功能图标。

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

功能图标：指的是担负一定功能和含义的图形，一般来说需要像文字一般地被人迅速理解，所以表达方式上不适合特别复杂。

从表现形态图标可分为文字（中文&英文）数字图标、和图形图标。

文字图标：中文是我们的母语，每一个汉字都令人记忆深刻，文字也是最直白的信息，而且不容易被曲解，所以很多国内的产品都会使用文字作为自己的产品图标。英文设计与中文设计的设计模式相似，通常是提取应用名称的首字母融合产品的功能卖点或行业属性进行创意加工，新的字母图形依旧保持本身的识别性。

数字图标：直接用数字做应用图标的相对较少，但是数字识别性强，易于传播的特点。利用数字进行设计能给人亲和力。难点是怎样与品牌形成强关联性。

图形图标：图形图标最初的形态为写实图标，经过不同的设计手法和风格表现如今也有着多种不同的表现形式。

从表现形式图标可分为静态图标、动态图标。

1.3、图标重要性

对于UI设计而言，图标可以说是整个产品的点睛之笔，它甚至可以直接影响着一款产品的形象和气质。在不少 UI 界面中，图标几乎是这个页面的核心支撑体，它直接影响着产品的视觉体验和产品调性。它有以下几点好处：

全球通用：Windows,iOS, etc., 中文版和英文版甚至各种语言版本，在不打开菜单之前，基本上都长一样。

节约空间：如果能用一个图标清楚表达含义的时候，就不需要用文字，比如用一个“叉”代表「关闭」。

快速定位：图标可以用它独特的形状或者颜色让人快速定位到一个功能。

上下文的定位：比如小飞机的图标单独放出来不确定是什么，但是在和收件箱在一起它就可以认为是发件箱了。

二、图标风格：

2.1、线性图标

线性图标又分为单色、双色、渐变、不透明度、一笔成型、断点。

单色线性：拥有简洁、清晰的特性，在视觉层级上较低，适用于基础功能图标。b端较为常见，移动端常见在设置页面或导航栏通知、分享等图标设计上。

双色线性：在单色的基础上丰富配色，解决了单色线性原本过于单调的问题，在提升趣味性的同时，也将视觉层级进行了提高，同样适用于基础功能图标。在使用过程中需要注意的是丰富的配色会偏向年轻化，需要考虑是否符合产品风格及主流目标用户审美。

线性渐变：还可以在用色上进行区分，简洁的用色可以给人带来科技、炫酷感，在车载ui中较常见。丰富的渐变配色则更适合运营入口设计，有着年轻化、热烈的氛围。

不透明度：线性双色可以和不透明度风格进行很好的比较，前者视觉更跳跃，个性更鲜明。而后者在使用时普适性更强，即丰富配色细节，又避免视觉过于跳跃（可以把它理解为同类色配色）。所以在大多数使用场景下，不透明度风格都是一个很好选择。

断点风格：有线性单色&双色该有的个性，并且在线性双色基础上继续提升趣味性，使用需要注意产品目标人群年龄段。

一笔成型：该风格设计感和个性都极强，很考验设计师对造型绘制的把控，功底不够就很容易导致设计后出现识别问题。所以设计难度较大，且延展性较弱，难以表达复杂语义，使用需谨慎。

2.2、面性图标

面性图标又分为单色、双色、不透明度、晶白、磨砂、2.5d、渐变、新拟态、轻质感、明暗、写实、抽象、卡通、像素、扁平等。

单色面性：

双色面性：

不透明度:面型不透明度风格，通过调节前后不透明度可以带来较强的空间感，使用场景较广泛。

晶白:晶白严格来说也算质感图标（白色质感）的一种，常见于品类图标设计，通过透明度、投影、渐变等参数调节，使整体立体感和空间感都很强。

磨砂玻璃：又叫毛玻璃风格，是通过背景模糊，或剪切模糊图层的技法来表达通透、有层次、精致的视觉感受，但由于容易与浅色背景相融，造成对比度不足难以识别的问题，所以在使用中需要注意无障设计。

2.5d:有很强的趣味性，及识别度，适合重要入口或运营设计。但这类风格较为卡通，且表现花哨。使用需要注意应用场景及目标人群年龄段，避免干扰信息阅读和不符和产品风格。

渐变：这类风格可以很好的吸引用户注意力，在电商、美食类产品中较常见，主要注意配色干净协调

新拟态（Neumorphism）：新拟态图标色彩相对单一，与背景融合度较高，通过高光、投影表现一定的立体感。通常是整个产品就是新拟态风格时才使用。所以该风格局限性较大，再有这类风格与背景对比较弱，无障设计问题较大。

轻质感：通过大量渐变、投影来表现立体感，整体风格偏年轻化，常见在教育类产品中，使用注意配色干净和谐。

明暗质感：通过调节同一色相不同明度、饱和度来营造前后空间感，整体风格统一。

写实（3D）：这类图标特点很明显，有极高的识别度，目前美团外卖品类区入口就是该风格，整体偏年轻化。主要考验设计师造型绘制、技法表现能力。

抽象:通过几何图形组合、色彩使用来表达美的视觉感受。这类图标艺术（装饰）价值更大，不追求识别度，美观即可。

卡通插画:这类风格既可以做图标又可以做空状态插图，设计美观有特色即可。

像素风格:这类移动端界面较少见，目前只在一个海外电商产品（Jollychic）中看过，还有就是一些像素游戏中，比如「泰拉瑞亚」、「我的世界」。

2.3、线面图标

线面：和线性双色图标类似，趣味性较强，具备个性化特点，可以做Tab选中状态。

描边插画：类似卡通插画，在卡通插画基础上加入描边。同样颜色，在一些特定的前后交接处利用线条做区分，算是多一种设计表现形式，同样美观有特色即可。

三、图标性格气质：

3.1、细线粗线

细线:细线条工整、干净、品质且精致的感觉。

粗线：粗线条给人一种力量、饱满稳重的感觉。

3.2、圆角、直角（端点）

直角：严谨、正式、果断利落。

圆角：安全、亲和、年轻活泼。

线段的圆角端点和平角端点同角的圆角直角一样，有着相似的性格气质。

四、设计规范：

4.1、尺寸规范

为了保持图标元素的平衡感，通常需要使用基础的网格尺寸来进行绘制图标，常用的网格绘制尺寸为：16、24、36、48、64、128、512、1024。网格的大小必须要是4或12的倍数（安卓是8的倍数，iOS是4的是倍数）。@2x下作图要保证是4的倍数，这样可以整除2，适配@1x的屏幕；@3x下作图就需要是12的倍数了，这个数值可以整除2、3、4，适配@1x和@2x的屏幕，界面中通常使用的图标尺寸24*24px、48*48px。这里建议用48px做为常规图标设计尺寸。

4.2、统一规范

描边粗细统一：图标的描边数值统一。但是实际操作时可能偶尔会面临图标的内部留白面积较小或者较大，这时如果一个图标的所有描边都统一粗细的话，就会导致图标视觉上过于拥挤或者宽松，我们可以灵活的调整内外环图形的描边粗细，一般内部描边可以稍大于外部描边，以达到视觉效果舒服。

圆角数值统一：保持图标中的圆角数值统一。但是有的设计师在设计一个图标时，所有的图标都严格按照统一的数值来进行设计，从而忽略了最重要的视觉效果。一个图标的外轮廓与内部的图形大小是不一致的，如果我们强行保持所有圆角数值统一，内部10px的圆角和外部10px的圆角效果是大相径庭的，这种情况下需根据具体的视觉效果主观地调整圆角数值。

内外环比例统一:我们从整体看局部，图标外轮廓的几何形状统一后，虽然没有大毛病，但是看起来却有点乱,我们将图标的内环大小统一后，图标整体看起来就有序多了.

“破形”统一:在设计图标的时候，为了表现出丰富、时尚、不安分等情绪，我们常常采用破形的做法来设计图标。但是破形也不能随便地“破”，在处理破形时，要保持1.位置、2.角度、3.破形的大小统一。1.位置：尽量所有的破形的位置都在相对的位置。2.角度：尽量破形的角度保持一致根据像素的网格线来设置一条线的起点和终点，会让你的图标看起来更清晰。图标中的倾斜角度应为45的倍数。3.破形的大小：尽量保持被破掉的大小一致。

4.3、图标keyline

也称图标盒子。为保持图标视觉上的一致性和平衡感，需要先绘制keyline用来指导、规范图标设计。keyline由圆形、正方形、长方形-横、长方形-竖组成，网格的大小需保持4的倍数，便于不同尺寸的图标都能适配，可使用24*24px的网格尺寸为基准，其他尺寸的图标可通过增加倍数以此类推，如48*48px、72*72px......

下图是以24px尺寸的网格参考基准示例。使用图标盒子有利于使我们创造的系列图标保持规范与统一。

4.4、结合品牌

立足于品牌做设计是形成产品设计独特性、差异化和品牌性的关键，除了直接的品牌曝光以外，品牌基因的融入也是强化的重点方向。而品牌基因的提取方向很多，比如品牌色、特征图形、局部表现、风格特征、留白空隙、性格特征、品牌形象（吉祥物）等等，归根结底主要的方向是颜色、图形、特征、风格、吉祥物等。

五、设计流程：

5.1、明确语义

图标存在的目的是起引导作用，在丰富页面视觉的同时，还帮助用户更快的获取信息。设计师在将文字翻译成图标前，必须先理解其文字含义。

5.2、关键词详解发散

这一步有点类似情绪版使用，但不同的是：我们需要将确定的词（A)进行详细解释，再将解释文案中关键的词语进行发散，得出一系列相关联的词（A1、A2、A3…）。有时间还可以根据这些词找到对应的图片，再看在这些相关联的图片中，有哪些细节可以传递最开始我们确定的那个词（A）的意思。

5.3、确定风格

可以借助情绪版，根据产品定位和目标用户描述，再结合应用场景，在目前已有的风格中找到符合产品气质，符合当前模块视觉层级的图标风格。前面我们已经了解了目前常见的图标风格有三大类：线性、面型、线面。还有性格气质，比如在线性中又分粗线（沉稳、力量）、细线（品质）、曲线（女性化），还有圆角、直角，每种类型所传递的感受都不同。在创意前期，我们将每个点合理进行随机组合（如下图）即可创造一种更新颖的风格。

5.4、提取造型

经过关键词详解发散，其实我们已经获得了很细节点，接下来将这些细节点进行合理融合后，就可以得到代表同一语义但形式各异的基础图标样式（此时还只是想法阶段，可以通过手绘方式记录组合形式，不用特别精细化）。通过手绘或大脑想象进行造型构思。

5.5、创意输出

在设计执行时敬遵设计规范。

六、自检标准：

6.1、简洁美观

图标是将现实世界中的事件/事务用抽象的图形表现出来，如果过于追求完美而设计的太复杂，还不如直接上图片来的快，所以不能过于展现真实物品的细节，最终设计出正确而不失真的图标尤为重要，这样既能用于传递信息，又便于用户快速且清晰感知。当然这会受设计师对图标造型把控、图标构成元素比例、配色等设计能力影响。图标也有丰富细节的做法，常见在一些重要运营入口上。

6.2、易于识别

语义识别:语义识别的理解就是当用户看到这个图标之后，很清晰的知道这个是干什么的。例如“扫一扫”图标，平常用户在扫码页面时，都会有一个二维码显示区域，中间有一条线在区域内扫瞄，基于这样的用户习惯和认知，扫一扫图标就很好的传递这是扫描二维码的意思。

视觉识别：视觉识别与语言识别不同，它更在乎影响用户识别图标的一些感官因素，如颜色、复杂程度、图标类型的搭配等。

6.3、细节统一

在细节中包含：表现风格、描边粗细、端点类型、圆角大小、斜角角度、配色、投影参数等（不同风格图标的细节不同，这里只是列举部分），上述细节在系列图标中都应保持一致。

针对大型项目，要想整个家族的图标更加和谐，保持相同的样式及设计原则着实不易，尤其是在多人完成设计的情况下，事先有一个清晰的设计原则和规范是必不可少的。图标都有着对应的视觉重量，例如描边粗细、填充模式、繁简程度等属性，需要做的就是控制好这些关键因素，让整体看起来视觉重量相同且能相互关联组合到一起，保持所有图标的一致性。

6.4、像素对齐

在图标绘制中，需尽量避免坐标位置xy或宽高参数出现小数点，以此保证最终导出的图标是清晰的。

6.5、视觉大小一致

由于不同图标外轮廓不同，就会导致哪怕在物理大小上相同的图标（假设都是24x24），但视觉上可能还是会给人大小不一致的感受，因此我们需要借助前面提到的图标盒子进行约束调整。

视觉对齐:为确保视觉平衡，异形元素在使用系统自动对齐后，会有一定的偏差，需手动微调进行视觉对齐。

6.6、饱满透气

图标的饱满透气，不一定需要加入很多笔画（描边、装饰等）细节。而是尽可能在形成风格的同时，简化能影响识别度的关键笔画，通过调节笔画大小、长短、位置使图标达到一个最平衡状态。

饱满度的提升也能体现图标的精致感，这也是考虑图标视觉识别的一个重要因素。根据网格系统和图标盒子，通常也是按照图标元素在固定矩形删格中的位置比例来看整体效果，再判断是否饱满。

6.7、融入品牌基因

在图标中融入品牌基因可以有效的提升产品品牌感，作为高阶设计师必备技能之一，常见提取维度：颜色、图形、特征、设计语言、Logo轮廓、品牌吉祥物等。

6.8、延展性

即便做好了前面的一切，图标设计工作也并未完成，需要做的是持续测试图标的可用性，做好后续的完善与优化，没有最好、只有更好，以确保上线后的效果和后续的迭代。

七、输出：

7.1、格式

矢量格式

SVG：缩放无损、体积小、支持前端样式修改参数、单色情况下方便前端修改颜色来表达图标状态，减少重复上传。

位图格式

PNG：支持透明格式。

JPG：兼容性强，适合大尺寸高饱和度图像。

GIF：动态图标使用，缺点是透明情况下边缘容易出现锯齿，这里如果采用AE制作的动画建议导出lottie动画与开发对接。

7.2、图标命名

科学和高效的命名规则能够帮助我们快速定位到自己制作的图标，并且帮助开发缩短命名时间，加强团队写作效率。切图可按照“业务_类型_功能_大小_状态”的格式进行命名。切图命名的格式建议为全英文，可在切图之前对图层进行命名，常用切图命名对照表如下所示。

例：

btn_download_start_green_normal   绿色开始下载按钮默认状态

img_setting_bg    设置页面全背景

图标的知识点就分享到这里啦。

部分图片来源于网络，侵删。

Powered by Froala Editor