设计师必看的图标设计原则及分类

在 UI 的设计体系中，图标是最重要的组成部分之一，是任何 UI 界面中都不可或缺的视觉元素。了解图标相关的概念，以及正确设计的方法，是入门 UI 设计的必备条件。

本文将结合本人进行图标设计时思路，我希望用一篇长文来讲清楚图标设计的所有要点和具体的设计方法，让所有设计新人更快的上手图标设计。

本文共分为以下5个部分：

 1、认识图标

2、图标设计原则

3、设计规范

4、总结

1、认识图标

图标相信进入UI设计这一行的人都不陌生，在我们的日常生活中也是也是随处可见，如电的开关、洗手间门外的标识、商场导视中收银台图标、出口标识等等

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

01）线型图标

通过线条勾勒出来的图标，一般通过描边粗细、图标细节来打造产品图标的区别。

02）面性图标

采用填充和负空间结构的图标。面型相对于线型来说更加具有视觉重量，更容易吸引用户的关注，识别度也更强。所以面型图标经常被设计师用于区分线型图标的选中状态。

03）渐变图标

 

采用渐变色填充的图标，渐变图标算是面型图标的一个分支，但因为细节丰富，弥散阴影的运用更偏向于年轻化

04）线面混合图标

线型与面型的结合，通常用于打造视觉调性。

05) 扁平图标

 

采用扁平插画形式的图标,扁平图标对于普通的面型图标，更加注重细节表现，视觉层级丰富，所以常用于营造产品氛围和视觉调性。

06) 拟物风格图标

 

通过光影模拟真实物体质感的图标，一般常用于都节日活动或游戏中。

07)实物贴图图标：

 

采用真实摄影物体的图标，一般常用于电商和超市、生鲜类产品。

08）2.5D图标

 

2.5D立体图标。2017-2018年左右，2.5D图标曾在UI界刮起一阵风，所以有不少设计师认为这将成为未来图标的一个趋势，但是这阵风好像很快又刮停了...可能是因为设计成本过高，且风格过于鲜明，难以被许多产品驾驭。

2、图标设计原则

01）表意准确

 

图标作为一种信息传递的载体，意在通过简洁的符号告知用户某件事物，让用户记住某件事物，如果表达出来的意思不准确，乱七八糟，让人一头雾水甚至颠倒是非，那图标存在的意义何在呢？

如上图相信大家第一眼看到，都能准确明白它们的含义。所以我们设计图标的第一原则就是表意准确，让用户第一看到图标就能理解它的含义。在这里需要特别提到一点、图标具有通用性，符合所有的用户的使用习惯，不要试图去改变用户日积月累沉淀下来的记忆。

02）视觉统一

在很多APP中我们可以发现图标实际大小不一致，但视觉大小却是统一的。如同样尺寸的圆和矩形，矩形会看起来更大，所以我们要适当调小偏矩形的图标尺寸，使他们视觉大小一致。

03）一致性

在同一款产品中，设计图标时，需要确保图标的线条的一致性、内外倒角一致性、风格一致性等，保证整款产品和谐统一。

04）极致简约

在界面中，一种简化的风格能让人容易理解，并能弱化自己的存在，从而凸显内容。因此图标设计一定要简约,清晰，让用户一眼看到就能理解图标的含义。

3、图标设计规范

01）图标的尺寸

一致性是设计图标的关键，在绘制时，一定要确保所有的图标都相同大小。在UI界面设计中，网格的大小必须要是4或12的倍数（安卓是8的倍数，iOS是4的是倍数）。@2x下作图要保证是4的倍数，这样可以整除2，适配@1x的屏幕；@3x下作图就需要是12的倍数了，这个数值可以整除2、3、4，适配@1x和@2x的屏幕，界面中通常使用的图标尺寸24*24px、48*48px。这里建议用48px做为常规图标设计尺寸。

2. 贴合栅格线

请保证图标的节点都贴合在栅格线上。避免出现小数点、奇数等数值。

总结

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

OK，图标设计指南就分享到这里，希望对大家有所帮助。因为篇幅较长，几经修改，有细节不严谨的地方，欢迎斧正，感谢阅读。

下一篇将具体分享图标设计的过程。

原文链接：https://mp.weixin.qq.com/s/QQueVlK6k3tvHGB99QENKw