图标设计简析前言 图标是 UI 设计中极为重要的一个环节，我们在做每个界面的设计几乎都会涉及到图标的表达，出色的图标设计可以让界面表达更加精致、有趣。 本文主要从图标的风格、图标的设计规范、图标的设计技巧三个方面来进行图标的讲解，让我们开始图标之旅吧～ 一、图标风格 图标可大致划分为三类：线性、面性、线面结合。结合三种基础类型的表达方式可以创造出各式各样的表现形式。
1.线性图标 使用轻量的线条勾勒的图标，整体感受也趋向于精致、细致而具有锐度感。 不同的线条表现具有不同的视觉感受，细线轻量、直线硬朗、曲线柔美。
例如：中欧钱滚滚基金 图标以线性描边风格为主，简洁明了，中规中矩，功能区的图标更以不同较为鲜艳的颜色进行区分。
2.面性图标 面性图标比线性图标更能表达出图标的力量感和重量感，比线性图标会更加容易吸引用户目光。 在识别度上，面性图标更加依赖于外轮廓的清晰度，因此在设计时对于外形的打磨是重中之重，清晰的外轮廓可以帮助提高识别度。
例如：天天基金 功能区的图标采用了扁平化风格设计，在单色的基础上加入了模拟光影的渐变，使得这个区域更加有空间感。
3.线面结合图标 结合了线性和面性的优点，既保持了面性的重量感，同时具有线性的精致、细腻。 因此在设计时可以根据图标具体想要表达的感觉对线面比例进行把控，不同比例可以呈现出不同的视觉感知。
例如：蚂蚁财富 功能区的图标采用了线面结合的图标风格设计。
二、图标的设计规范 1.面的统一 规整的面性图标，如圆形，圆角矩形，里面的挖空图形面积要统一，不能有大有小，或者视觉重心不一致。例如图：
2.线的统一 1）粗细统一 线性图标粗细常见的有2px、3px、或者有更粗的5px、6px，根据自己的产品调性来决定，其中3px是最常见的。 微信最新的7.0版本，标签栏从2px都加粗到3px，其他icon也都相应加粗，所以3px已经成为主流。 细线显得精致，粗线视觉面积大，显得厚重敦实。所以保证线条粗细统一是图标设计最基本的要求，如图：
3）圆角统一 直角的风格更加硬朗，充满了力量感。 圆角的图标显得风格温润尔雅，小圆角设计显得整体风格柔和，如果圆角非常大，会显得图标偏卡通感觉。所以圆角的统一也是必要性的。如图：
三、图标的设计技巧 1.面性图标 1）渐变 渐变分为同色系渐变和跨色系渐变。 同色系渐变：在色相保持不变的情况下，通过饱和度和明度调节亮暗关系，调暗技巧：明度调低的同时饱和度调高一点，以免颜色过脏。 同色系渐变在保证和谐的情况下，又有活泼跳跃的感觉。角度通常斜45度。如图：
跨色度渐变：视觉更加丰富，年轻时尚活泼。多用于直播、社交、视频、游戏类。需要注意的是，颜色跨度多为近似色。如图：
2）投影 投影的加入，使得图标带有略微的立体感，需要注意的是，投影切忌使用黑白灰色，会显得过脏。 正确的做法是，吸取背景色，然后做加深处理，投影参数没有固定数值，依视觉而定，略微带点投影就行，不能做得太厚实，也不能做得太弥散。投影通常下移4-6px距离。如图：
2.线性图标 1）断线 在做断线风格的时候，就像小时候画的一笔画，注意断线结构，避免生硬的断线，且造型简单，不要过于复杂。 一般在图标右下角断。在断线的基础上可以做一些独特的设计语言，断线的边缘可以是一个曲线。如图：
2）颜色 双色的使用使图标视觉更加丰富，一个主色和一个辅助色搭配，两种颜色可以互为补色，也可以是类似色。辅助色占比30%左右。如图：
3.线面混合 线面混合也是常用的一种设计手法。面的颜色通常为APP的主色调。 填充手法通常分为两种：一种是投影填充，另一种是线框内寻找一个面填充。填充比例不宜过多，30%-50%、且线条颜色通常为黑色。如图
小结 图标的种类远远不止本文所提到的这些内容，但是万变不离其宗，都是「线性、面性、线面结合」 再结合 「透明度、渐变、颜色叠加、质感、多维空间」等等的表达方式而设计出来的。
文章分类：
道乐研究院
|
