图标是界面中重要组成部分，除了部分插画之外是设计师真的需要花时间为产品设计的一套视觉符号。图标设计也是体现专业水平的重要方面，提高这方面的能力除了大量的思考和练习之外，还要从他人的思路和作品中总结出一套规律形成自己的知识结果和体系。大量关于图标设计的文章都提到了一些要点，但都不够全面。所以看过这些文章，学习之后把这些已经获得的知识点汇总起来，作为学习的总结也希望能给他人提供参考。
一、图标在界面中的作用
1、传达品牌
图标是产品和服务的视觉表现的一部分，是视觉标志的重要延伸；一套能体现产品特点的图标能在用户使用过程中传达出更多的情感内涵。
eg：淘宝把启动图标作为底部标签图标的一种形态，突出品牌的传达。
eg：天猫标签栏图标更是“猫形”的延续。
2、易于辨识记忆
对比文字，图标具有更好的辨识度，堪称信息时代的象形文字，具象而清晰。用户可以通过界面的图标快速理解界面传达出的信息，从而进行操作完成任务。
eg:下面4各图标即使没有文字注释，多数移动互联网用户也能够理解它们的含义（不识字的小朋友也不例外）。
3、丰富页面，易于排版布局
图标结合配色，图形化的呈现使界面更加丰富而不显枯燥。图标可大可小，可简单可复杂。与文字结合起来，可以形成各种排版，使界面均衡而有节奏。
eg:没有图标的发现页就比较单调无趣了。
4、跨越语言的符号系统，能在不同文化间形成共识
在全球化的时代，不同国家不同年龄的用户可以对图标形成一致的认知。在产品全球化时，往往只要对文字进行翻译而无需更换一套图标。
二、图标的分类
1、按作用分：
按图标的作用可分为导航操作、装饰示意、显示状态。导航操作的图标，点击后可跳转到另一个页面，或者发起某个动作；装饰示意的图标，不具备特定的功能，只是为了配合文字传达出信息的含义，同时丰富页面；显示状态的图标，可以操作从而切换状态。
eg: “心形”为装饰示意，“好看”为显示状态，“评论”为导航操作。
2、按位置分：
按照图标在界面中出现的位置可分为：底部导航图标、标题栏操作图标、金刚区入口图标、列表流示意图标、页面辅助装饰图标、页面信息流功能图标、分类页入口图标、产品启动图标；这些图标的作用和大小可能都不同，但可以在风格的某种维度上保持统一性，组合起来更加协调。
3、按风格分：
按照图标的视觉风格可分为：线性图标、面性图标、线面结合图标、扁平图标、写实图标、插画图标、2.5D图标。图标的风格可能会根据流行风格而变化，比如曾经流行的写实风格，随后流行的扁平风格，再到现在流行的半扁平风格。也可能和产品本身的属性有关，比如生鲜或外卖平台使用插画写实风格的图标唤醒用户的食欲，儿童教育类的产品图标使用卡通的插画风格而符合儿童的审美。在具体的运用中根据图标在界面中的权重和层级，产品视觉风格而设定其大小、抽象程度和风格。
三、图标的尺寸体系和设计规范
1、尺寸体系：
根据位置不同，图标大小和描边宽度和圆角大小也不同。产品启动图标是最大尺寸的，但不需要设计师自己确定而于发布的平台有关。平台会给出一套尺寸规范，设计师在规范的大小里调节就可以了。
从最小的装饰示意型的小图标，到金刚区入口的大图标。建立以4px为单位的尺寸阶梯：24、28、32、36、40、48、56、64、72;根据大小选择不同的描边粗细，如72大小的粗细为 4 ，大小为48的图标描边粗细为3，大小为24的描边粗细为2.对应的是图形圆角的大小3（24）、6（48）、9（72）。
2、设计规范：
断点处理
定义图标描边断点的处理方式，比如支付宝视觉规范建议断点需要和图形平行，也可以定义断点产生的尖角是否需要做微小的圆角处理。
倾斜角度
定义线条和图形的倾斜角度。比如AntDesign建议的角度与76度有关，而一般的倾斜角度为15的倍数，可以是45度或60度。
组合方式
如查找文件等需要文件图标和搜索图标结合起来表示。组合的方式也可以定义起来，一般把图标放在主图标的右下角位置。
复数表示
比如群聊（微信）需要用多个图形叠加在一起表示多个对象的含义。对这种叠加的方式也可以定义起来，左右叠加还是上下叠加或者是前后叠加。
否定表示
表示打开或关闭某项功能，比如散光灯和音乐。需要表示否定的含义，是有对叉还是斜杠，斜杠是向左倾斜还是向右倾斜。这些都是可以定义规范起来的。
圆角处理
图形转角是否是需要圆角处理。外圆角和内圆角的关系如何，一般是内圆角加线宽等于外圆角。也可以像支付宝一样定义“外圆内方”的视觉特征，只定义外圆角而保持内直角从而呼应“安全可靠”的品牌价值。
描边粗细
一般在尺寸相同的图标中，保持描边的粗细一致。但在图标内部结构比较复杂，简化会丧失本身的识别性时，可以考虑使用较细的描边表现复杂结构。
细节程度
定义不同大小的图标，细节丰富到何种程度。以达到样式表意的一致性。
四、图标设计原则和绘制方法
1、设计原则：
辨识度
用户通过图标能够理解所表达的意思，就是辨识度。在表意比较特殊的时候也可以结合文字，更加精准传达出含义。辨识度的关键是形象直接，为了保证所设计的图标辨识度可以先大量参考观察他人所用的图形。比如到iconfont上参考相同表意的图标作为参考，找到最恰当的图形。
凸显性
产品启动图标能够在屏幕众多图标中吸引用户注意力。产品首页中的金刚区入口图标能够在视觉层级上突出，成为视觉的焦点，很好的分发流量。
统一性
产品图标风格上具有一致性，搭配起来协调能融为一体。
最简形态
使用基础的图形组合出来，具有几何的美感。能够表现出结构的理性和秩序之美。多一笔则显得复杂，少一笔则不能辨识，在复杂和简单之间找到最佳的平衡点，设计出简洁优美的图标。
2、绘制方法：
图标盒子
为了保证图标在大小和形态上的一致性，利用图标盒子作为参考是很好的方法。图标盒子是有横竖两个长方形、正方形和圆形组成的。可以通过各平台的官网下载，最好是能够自行绘制。绘制的方法并不复杂，目的是让各种形状的图标在视觉上大小是一致的。
布尔运算
利用基础图形的合并，交集、相减得到图标的外形。
轮廓化描边
把图形的描边转化为形状，也是常用的绘制方法。
图形的视觉差
相同宽高不同形状的图形，在视觉上的大小并不一样。比如矩形会比圆形显得大，圆形会比三角形显得大，需要再根据实际情况进行微调，让不同的图标看起来大小一致。
倾斜的线条比水平的线条在宽度相等时看起来更细，曲线比直线在宽度相等时看起来更细，这些因素也需要手动调节来消除感官差异。
图标的结构形态各异，需要在图标盒子中调整位置，以获得最佳的视觉的中心和平衡感。
贴合像素
图标尺寸很小时，半个像素会看起来很模糊。所以在绘制图标时，尽量保持边界和单个像素是贴合在一起的，避免半个像素产生的锯齿。这样绘制出的图标才会更加的清晰。
微投影和渐变
绘制金刚区的面性图标时，利用微投影和微渐变可以增加图标的质感和细节。使图标看起来更加美观精细。
3、基于基本性的风格拓展
基于一个辨识图很好的线性图标，可以根据一定的思路演变为面性图标或者线面结合图标。再添加一些细节或光影、材质和点缀，可以演变为更为复杂的图标样式。
网友评论