1.3 如何建立统一风格

在应用界面设计中，功能图标不是单独的个体，通常是由许多不同的图标构成整个系列，它们贯穿于整个产品应用的所有页面并向用户传递信息。因此，功能图标应该风格一致，包括造型规则、圆角大小、线框粗细、图形样式和个性细节等元素，只有具有风格一致的图标设计，才能带给用户高度统一的视觉体验。良好的视觉体验是用户在这一页面看到一组图标不会因在另一页面看到另一组图标而感到错愕，认为是身处两个不同的应用，而应该是符合用户的心理预期。接下来，我们就来学习如何绘制整套统一风格的功能图标。

圆角

无论是面形图标还是线形图标，圆角最能决定它们的气质。大圆角风格的图标造型圆润，给人可爱活泼的感觉。例如，iOS的设计语言是圆角矩形，因此在iOS系统应用中的功能图标都具有圆角这一元素。小圆角或趋向直角风格的图标造型简洁，给人稳重直接的感觉。例如，Material design中定义了一种小圆角图标的设计风格。下图分别为圆角和直角风格的相机，建议在绘制面形图标时，即使是直角风格也最好给主体图形增加一点点圆角，否则绘制出来的图标带有一种类似纸片锋利的感觉。

断线

线形图标本身自带线框描边这一统一元素，通常它们是封闭的路径，而在此基础上又延伸出了一种新的变体，那就是断线风格，即在线形图标的局部进行断开，呈现一种开放的路径。断线图标像是由一根线条扭曲而成，这种精心处理过的风格又比单纯的线形图标更具有设计感。

绘制断线风格的图标需注意断线的位置，不可随意截断，而要根据图标的造型结构针对性地处理。通常选择图标的角落作为断线的位置，无论如何也不要破坏图标原本的造型，使得图标的识别性变弱。下图列举4个断线位置图标仍然延续了线条的走向没有影响图标的识别性，都保持了相机的外形特征。

断线选择水平和垂直的位置，通常会破坏图标的美观性，例如错误1；不选择具有识别性的位置，错误2中图标上部凸起是相机非常明显的特征，在此断线是不正确的；断线不宜过短，错误3中过短的断线不宜被发现且可能会被认为是设计缺陷，最短断线建议保持在图标线框粗的2倍；断线也不宜过长，错误4中过长的断线易破坏外形且增加整套图标的绘制难度。

统一元素

在图标的构造中使用某种统一的元素，能直接体现出一致性来。Google Play的家族图标高度一致，全新的子品牌图标设计使用母品牌的三角形作为统一的外形和背景，使得无论何种外形的图标都保持着一致的视觉风格。

统一元素不是随意设计的，既要提升图标的设计感，又要符合产品的定位。没有想法地随意添加元素可能会画蛇添足，而一个好的元素则会给产品大大加分。阿里健康的整套图标都绘制了一个可爱的笑脸符号，在人们的认知中笑脸代表健康、快乐、服务、亲和，它与阿里健康的产品属性非常契合，因此给用户带来非常深刻的记忆点。

视图

在应用界面设计中，功能图标通常绘制成正面平视图，这样的造型简单直观，能迅速被用户认知，以提高产品效率。同时，平面化的图形亦可降低整套图标的绘制难度以及能更好地统一风格。以箱子为例，将其一个面的外观、特征等抽象绘制出来的图形最简单，也易于投射到大脑中快速被认知，而两个面至三个面则使绘制和认知难度逐步增加。

更为严谨的绘制还需考虑正面和侧面之分，这是很多设计师常常忽略的地方，虽然在风格一致的情况下，正面和侧面绘制的图标排列在一起也能和谐共处。下面一组正面绘制的图标中有一个是侧面绘制，你发现了吗？

填充色彩

色彩也是建立统一风格的一种方式，给图标填充颜色能迅速抓住用户的注意力，同时描绘填色的图标更加富有情感和生命力。在绘制填充时，需注意色彩的饱和度一致、色彩搭配协调等。以adline的作品为例，所有图标都填充了咖啡色的线框和斜虚线，在图形局部填充同样色值的配色组合，令整套图标的视觉效果非常惊艳。

品牌基因

通过品牌Logo的视觉元素来延续图标的设计，可以带给用户由外而内的一致感。在优酷最新的应用中，功能图标运用其品牌的红蓝主色作为填充，蓝色填充主要结构，红色填充局部，并将红蓝色进行叠加，形成非常有趣的视觉效果，也使得这一套图标风格独树一帜，具有非常鲜明的记忆点和识别性。

极简风格

极简风格的图标设计具有最简单的外形，给人一种抽象的联想，往往这种风格是最能体现产品气质的，但也是最难设计的。36Kr的整套图标具有棱角分明的块状，除了圆没有任何弯曲的元素，每一个图标都是由相同色相但不同饱和度的两个部分组成，带给用户非常深刻的印象。因为极简风格的图标过于抢眼，因此要与整体风格协调，否则就会不伦不类。值得称赞的是，在36Kr中，从图标到界面设计都保持着极简风格。

总之，要想在绘制整套图标时建立统一风格，就要从外观和颜色上确立主风格，在局部寻求个性特征，将两者结合，并融合产品属性和符合用户定位，先在脑海中构思出清晰的概念，然后用铅笔在稿纸上描绘，最后确立一个最佳风格上机绘图，只有不断地思考和打磨才能创作出完美的设计方案。