![UI设计精品必修课](https://wfqqreader-1252317822.image.myqcloud.com/cover/275/27563275/b_27563275.jpg)
上QQ阅读APP看书,第一时间看更新
5.2 图标的设计规范
图标设计的标准:功能寓意的识别性、风格的统一性是一个图标设计好坏的重要标准。
图标的七个一致性:线宽一致,体积感留白一致,倒角圆角一致,角度一致,色彩一致,复杂度一致,光影一致。
如果是导航图标,最好设计阴阳线形和对应的选中状态面性图标。
如图5-2为设计规范的图标。
图标的常见风格种类:像素图标、剪影图标、2.5D图标、拟物图标、扁平图标、MEB风格图标、线性图标、3D图标、手机系统主题图标、默认缺省提示图标、运营节气皮肤图标、微质感图标、快捷入口图标、运营入口图标、节日装饰性图标等,如图5-3所示。
![](https://epubservercos.yuewen.com/989D74/15825991605219206/epubprivate/OEBPS/Images/Figure-P40_13734.jpg?sign=1739300643-wRHAHZnr2rRmii2eGL5WwLqRi6DvYVuT-0-7ee30bc1d29e436630a322ec2125d3da)
图5-2 设计规范的图标
![](https://epubservercos.yuewen.com/989D74/15825991605219206/epubprivate/OEBPS/Images/Figure-P40_21015.jpg?sign=1739300643-BEDCr3sl912v60GYzOECGyXH55I6M5Cd-0-8a9502eb4c1c204c6abf982e2e0ecbe6)
图5-3 图标的常见风格种类
图标结构色彩复杂性的定位:一般来说,页面上空间大、图标少的话,图标可以设计得复杂且尺寸大一些,如全屏导航类或者缺省提示类;反之,如果在一个非常密集的空间里,图标可以画得小一些,简洁一些,如个人中心、侧滑列表等。
一般一类图标的尺寸是一致的,这样以像素或者自定义尺寸为1个单位的话,可以把图标分成N个格子,为了让方形、圆形、竖形,或者不规则图形的体积感相等,我们一般会在留白区域内框定一个适合于图标表现的区域,尽可能以这个区域为图标的设计主体,如图5-4所示。
![](https://epubservercos.yuewen.com/989D74/15825991605219206/epubprivate/OEBPS/Images/Figure-P41_21016.jpg?sign=1739300643-RUcEqLz3JZYiI7bfiearyYC5kztbVtIA-0-3b654b12804060e3cee7a3d365702504)
图5-4 图标网格
尺规绘图:图形设计尽可能以圆和直线来设计,保持图形的饱满规则性,如图5-5所示。
![](https://epubservercos.yuewen.com/989D74/15825991605219206/epubprivate/OEBPS/Images/Figure-P41_21017.jpg?sign=1739300643-Df7i3PYaeaCzB4oQqNV7UrDa9LzDvGLD-0-b5b74465b5b5aa4186b45c662abb8a71)
图5-5 尺规绘图
如图5-6所示为图标的细节规范。
![](https://epubservercos.yuewen.com/989D74/15825991605219206/epubprivate/OEBPS/Images/Figure-P42_21019.jpg?sign=1739300643-bVRQm59BNwAkqHmVORre50VAtUV7wMuK-0-ae66f399761c9ca1352a96771071d37a)
图5-6 图标的细节规范
![](https://epubservercos.yuewen.com/989D74/15825991605219206/epubprivate/OEBPS/Images/Figure-P43_21020.jpg?sign=1739300643-sIq9Ju6uJAsrM5rDokiWNnDxKSjwzLsX-0-f27039b55028ffa3c9b39ccd44d8063f)
图5-6 图标的细节规范(续)
![](https://epubservercos.yuewen.com/989D74/15825991605219206/epubprivate/OEBPS/Images/Figure-P44_21021.jpg?sign=1739300643-yq2seXgsuSgqbzj7YsBKLzeBL17M8NOC-0-f42d9adb7ffba26a7660b186678d777d)
图5-6 图标的细节规范(续)
![](https://epubservercos.yuewen.com/989D74/15825991605219206/epubprivate/OEBPS/Images/Figure-P45_21022.jpg?sign=1739300643-oBMR81JclZ2y6dHa7KihpfV3AYiT4LqQ-0-330e0273929bcaf8d02427093c6abf60)
图5-6 图标的细节规范(续)
![](https://epubservercos.yuewen.com/989D74/15825991605219206/epubprivate/OEBPS/Images/Figure-P46_21024.jpg?sign=1739300643-Yg0uB8cfM5gS77dUDw5E0cZVLLOyDIvL-0-bb4a156d66526e09a0742adc58d0d46b)
图5-6 图标的细节规范(续)
![](https://epubservercos.yuewen.com/989D74/15825991605219206/epubprivate/OEBPS/Images/Figure-P47_21025.jpg?sign=1739300643-UQUk1j23nj6sPsSlevfGgGnNpMPajQU4-0-c6b21268435df14d710b3c3b8a37ed39)
图5-6 图标的细节规范(续)
评价一套图标的好坏的标准如下。
- 整体统一性。
- 图标识别性。
- 颜色舒适度。
- 创意新颖性。
- 质量完稿度。
- 符合产品调性。