![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=1739452087-JFntLJEdQ5qe6GuFzEKZSXjoy8hrsEpl-0-cab44ff222889b3aa458244723b92d0d)
图5-2 设计规范的图标
![](https://epubservercos.yuewen.com/989D74/15825991605219206/epubprivate/OEBPS/Images/Figure-P40_21015.jpg?sign=1739452087-TO6oqGfcN3juNKMBtJgxfR2byEGAbZcc-0-27ced527fb6eac5e533c5b5a473e8e60)
图5-3 图标的常见风格种类
图标结构色彩复杂性的定位:一般来说,页面上空间大、图标少的话,图标可以设计得复杂且尺寸大一些,如全屏导航类或者缺省提示类;反之,如果在一个非常密集的空间里,图标可以画得小一些,简洁一些,如个人中心、侧滑列表等。
一般一类图标的尺寸是一致的,这样以像素或者自定义尺寸为1个单位的话,可以把图标分成N个格子,为了让方形、圆形、竖形,或者不规则图形的体积感相等,我们一般会在留白区域内框定一个适合于图标表现的区域,尽可能以这个区域为图标的设计主体,如图5-4所示。
![](https://epubservercos.yuewen.com/989D74/15825991605219206/epubprivate/OEBPS/Images/Figure-P41_21016.jpg?sign=1739452087-uT3PHodPvrmN3Fl9uhxwvrLJj05uE71r-0-64048adbec72cc10b9e78cc4e1953ce6)
图5-4 图标网格
尺规绘图:图形设计尽可能以圆和直线来设计,保持图形的饱满规则性,如图5-5所示。
![](https://epubservercos.yuewen.com/989D74/15825991605219206/epubprivate/OEBPS/Images/Figure-P41_21017.jpg?sign=1739452087-uNrFpC56xtYNu6cZ2n2Ht2dR3w0AYLJQ-0-27542ef85d542fbc7683f4fc956378cb)
图5-5 尺规绘图
如图5-6所示为图标的细节规范。
![](https://epubservercos.yuewen.com/989D74/15825991605219206/epubprivate/OEBPS/Images/Figure-P42_21019.jpg?sign=1739452087-OdfzELOwf7sxl8qE1jU76aGVUdVMhpgS-0-ec9eeef1e80150b31ce93f979cdd0639)
图5-6 图标的细节规范
![](https://epubservercos.yuewen.com/989D74/15825991605219206/epubprivate/OEBPS/Images/Figure-P43_21020.jpg?sign=1739452087-LqtrssMRxjvfIfGBFBcuwzd5SMDCwJui-0-e9709af4a791f6ee1d14afd40e978c5d)
图5-6 图标的细节规范(续)
![](https://epubservercos.yuewen.com/989D74/15825991605219206/epubprivate/OEBPS/Images/Figure-P44_21021.jpg?sign=1739452087-TKsmW3ubyj2lJNxjmkdtpjzQBZuGJ0O2-0-d6337cc9cbf5f861cf106489fa794260)
图5-6 图标的细节规范(续)
![](https://epubservercos.yuewen.com/989D74/15825991605219206/epubprivate/OEBPS/Images/Figure-P45_21022.jpg?sign=1739452087-unxsGhGOzRwULRXpdgqG59ghnDI9D7Jk-0-117b31a3f66405a2d3c51304595df230)
图5-6 图标的细节规范(续)
![](https://epubservercos.yuewen.com/989D74/15825991605219206/epubprivate/OEBPS/Images/Figure-P46_21024.jpg?sign=1739452087-aBKE8oDPoK7htcjYEMMgjMetyGcWB8dR-0-f6edf978cc217e4e8ca1981484f1578e)
图5-6 图标的细节规范(续)
![](https://epubservercos.yuewen.com/989D74/15825991605219206/epubprivate/OEBPS/Images/Figure-P47_21025.jpg?sign=1739452087-1MechyX37cHf1KksiIQOIUwTZjmsRTpN-0-c8cffb6d8e386ae2d3c2743a32d57098)
图5-6 图标的细节规范(续)
评价一套图标的好坏的标准如下。
- 整体统一性。
- 图标识别性。
- 颜色舒适度。
- 创意新颖性。
- 质量完稿度。
- 符合产品调性。