前面已经说完了工具图标相关的设计规范和方法,本章就开始进入下一个主题,关于装饰图标的设计。

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/26852ace-22d1-4bc8-806e-5965b11f18a9/0.png

在装饰图标中,就没有工具图标那么严谨的规范需要遵循,也就意味着自由度越高,可以任意发挥。显然,想要通过一篇文章掌握所有的装饰图标视觉设计方法,并不现实,新手只要将精力聚焦在最常用的几种图标风格的设计上即可。

装饰图标最主要的应用区域,集中在首页的快速入口上,也是今天多数应用中会使用的组件。下面,我们会通过讲解国内主流应用中的几种装饰图标的设计。

3.1 扁平插画风格

装饰图标的主要作用是丰富视觉体验,对于识别性的要求较弱,所以我们可以在这里应用更复杂的图形和添加更多的细节。在这里的扁平插画风格设计更具象,而不是像工具图标一样的抽象化,所以完整的采用扁平插画的设计是没问题的。

例如在肯德基客户端首页的服务分类中,使用的图标就是依据扁平插画的形式设计的,有较多的色彩和完整的细节。

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/0de8be09-5926-4e67-915d-a8d6c44735ed/1.png

这类图标设计的并不困难,只要具备了工具图标的设计基础,就可以很快学会并运用。它的设计特征是这样的,先通过绘制具体的图形轮廓,然后为这个轮廓内添加细节,并对不同的面填充不同的色彩进行区分。

下面,我们通过讲解几个图标的设计过程,帮助大家学习这种设计风格。