前面的章节,已经系统的讲解了图标的设计方法,相信认真学习并实践的同学,已经可以设计出优秀的图标了。

但是,在 UI 设计中,图标不是孤立存在的。我们学习图标的设计,不是为了画一组套图,然后上传到设计平台中分享或求赞,而是要在真实的项目中发挥作用。如果不了解图标应用到项目中的知识点,那么真实的图标设计水平就会在项目设计过程中被损耗。

所以,最后一章,说的就是工具图标在项目中应用的方法,我相信这是在网上很难找到的分享,建议仔细阅读。

5.1 一套应用中的图标规格

图标是一个应用不能或缺的组成元素,在应用的界面中随处可见。也因为图标的常见性,我们往往需要在一个应用应用多套图标,这和崇尚简约的第一印象是有背离的。

很多新手,都以为我们只要设计一套大而全的图标,在项目中对应提取即可。但有很多场景,如果只使用一种图标类型,那么效果会非常差劲。比如 ,我们看看下面的淘宝设置页,前后包含了 6 种以上的图标。是太复杂了没错,但如果我们把图标都替换成同一套呢?

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/86675d68-91ed-4b2d-b637-71cf499caf0c/1.png

可以看见,右侧替换后的案例,效果非常的不理想,缺乏对比和趣味性。交互规则中说:如无必要,勿增实体,但对于图标的使用来说,这就是必要。

应用内的图标规格不同,可以用两个属性来划分,大小和风格。

5.1.1 图标的尺寸