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