5.2 图标的设计规范
图标设计的标准:功能寓意的识别性、风格的统一性是一个图标设计好坏的重要标准。
图标的七个一致性:线宽一致,体积感留白一致,倒角圆角一致,角度一致,色彩一致,复杂度一致,光影一致。
如果是导航图标,最好设计阴阳线形和对应的选中状态面性图标。
如图5-2为设计规范的图标。
图标的常见风格种类:像素图标、剪影图标、2.5D图标、拟物图标、扁平图标、MEB风格图标、线性图标、3D图标、手机系统主题图标、默认缺省提示图标、运营节气皮肤图标、微质感图标、快捷入口图标、运营入口图标、节日装饰性图标等,如图5-3所示。

图5-2 设计规范的图标

图5-3 图标的常见风格种类
图标结构色彩复杂性的定位:一般来说,页面上空间大、图标少的话,图标可以设计得复杂且尺寸大一些,如全屏导航类或者缺省提示类;反之,如果在一个非常密集的空间里,图标可以画得小一些,简洁一些,如个人中心、侧滑列表等。
一般一类图标的尺寸是一致的,这样以像素或者自定义尺寸为1个单位的话,可以把图标分成N个格子,为了让方形、圆形、竖形,或者不规则图形的体积感相等,我们一般会在留白区域内框定一个适合于图标表现的区域,尽可能以这个区域为图标的设计主体,如图5-4所示。

图5-4 图标网格
尺规绘图:图形设计尽可能以圆和直线来设计,保持图形的饱满规则性,如图5-5所示。

图5-5 尺规绘图
如图5-6所示为图标的细节规范。

图5-6 图标的细节规范

图5-6 图标的细节规范(续)

图5-6 图标的细节规范(续)

图5-6 图标的细节规范(续)

图5-6 图标的细节规范(续)

图5-6 图标的细节规范(续)
评价一套图标的好坏的标准如下。
- 整体统一性。
- 图标识别性。
- 颜色舒适度。
- 创意新颖性。
- 质量完稿度。
- 符合产品调性。