图标设计指南（二）：图标的风格

本篇文章是《图标设计指南》系列文章的第二篇，在上一篇文章中，我们讲述了「 定图标的义」和「 图标的种类」，在本篇中，我们一起来探讨下「图标的风格」。

图标的风格

常见风格与基础风格

常见的功能性图标风格大致有三种：

「线性图标」、「面型图标」以及「扁平化图标」；

但其实我们可以将「扁平化图标」可以看作是「线性图标」和「面型图标」的一种组合形式，所以归根到底，基础的图标风格有两大类：「线性图标」和「面型图标」；

形态调整

线性图标通过调整线条的粗细，可以衍生出不同的图标风格。比如较细的线条看起来会更加精致纤美，而较粗的线条看起来会更加有力量。

而面型图标通过正负形设计的调整，又可以表达出不同的形态和感受。比如图示中的「图片」图标，通过正负形的切换可以分别代表「白天」和「黑夜」。

形态组合

基于最基本的「线性图标」和「面型图标」，通过不同的形态和风格的组合，再结合丰富的 表现手法，就可以设计出形形色色的图标风格了。比如：不同粗细线条线性图标的组合，或者面面组合，或者线面组合。

大家在设计图标的时候，需要根据自己的产品特征、受众和使用场景，去选择适合自己的表现形式。

表现手法

除了基本的形态组合之外，结合适当的表现手法，不同的排列组合可以创造出非常丰富的图标风格。比如前面提到的 扁平化图标，其实就是在基础形态上通过组合与表现手法的运用创造出来的。

常见的表现手法有：层叠、拼接、调整中宮、断点、色彩、渐变、透明度/饱和度/明度、转角度、高光、投影、流线、笔触、透视、连笔、特征元素...

我们来一个一个解读一下，最后结合案例，相信大家会非常容易理解和吸收：

层叠：层叠是指将不同的设计图形元素以层叠的方式进行组合，可以线面层叠、线线层叠、面面层叠等等。
拼接：拼接是指将不同的设计图形元素进行拼接组合，当然也可以是线面、线线、面面...
调整中宫：中宫原本是字体设计中的概念。在进行字体设计的时候，我们常常会将字体置入一个九宫格来做字体结构的辅助参考，有点类似于我们小时候写字的田字格。九宫格最中间的一格，称之为中宫，中宫是一个字的视觉重心的核心所在，通过调整中宫的位置，九宫格的其他八个格子都会受到影响，因此中宫对于汉字的设计非常关键；中宫的高低宽窄直接决定了一个汉字的气质和高矮胖瘦。前面我们也提到了，图标本身就是一种文字，因此图标的中宫会决定图标是高瘦还是矮胖。图标设计里中宫的确定主要取决于在绘制初期「图标网格」的设计，这部分我们后面会展开去讲解。
断点：断点是指在绘制图标的时候，有意识得去打断线条中的部分图形，从而制造一种缺失美和独特感，这种手法常运用于线性图标。断点的位置通常也有一些规律可循，这里先不详细展开。
色彩：通过不同的色彩来搭配，撞色、顺色等...
渐变：在图形中加入渐变的质感，可以是同色渐变也可以是异色渐变；
透明度 / 饱和度 / 明度：通常通过调整同一种色彩的不同 HSL / Opacity 或者 Alpha 值来构建图标的主色和辅色。虽然调整明度和调整透明度都能达到相同/类似的效果，但需要根据具体的背景色场景来选择，通过对场景中不透明度的依赖性来决定采用那种合适。而且，通常来说，同时调节饱和度和明度会比直接调整其中一种值所得到的色彩更加有层次性，但有时也需要兼顾项目中色彩体系中的数学规律。
转角度：指图标中矩形直角边的 border-radius 圆角值，圆角越小，图标越显得锐利冷峻。
高光：有时会在图标中，刻意增加一些浅色或者渐变色的线条或图形，来凸显类似光照后的高光效果。
阴影：将阴影本身作为图标设计元素的一部分，表现手法有：渐变色、参数投影、高斯模糊等。比如曾经非常流行的 LongShadow 长投影风格图标。
流线：流线是指图标的边缘路径样式。常见的图标流线都是横平竖直的，但曲线可以打造出另外一种截然不同的艺术效果。
笔触：笔触是指图标的线条粗细，通常电脑绘制的图标笔触都是均匀的，但有时也会可以通过笔刷、压感或者二次调整路径等方式来模拟手绘、铅笔、马克笔等艺术效果，以符合产品的气质特点。
透视：透视是指图标视角的选取，大部分场景下都会选择正视或者侧视的视角，但有时也会以30度、45度、轴测图等其他不同的角度来作为图标设计的视角，比如近几年颇为流行的 2.5D / Isometric 图标。
连笔：通过将不同路径的笔画关联，构建出连笔画的效果，常配合断点手法用于线性元素。
特征元素：我们可以给一套图标都添加一些特征元素点缀，从而增强图标的独特性和一致性。

图标的表现手法还有很多，大部分情况下我们会将其中的某些手法结合使用，通过不同的基础元素和不同手法的结合，构建出千变万化的风格特色。大家可以通过命题的形式刻意使用某些手法的组合来做设计练习，甚至可以创造出属于自己的图标风格，或许可以像当年的MBE风格一样，风靡全球。

下面我们通过一些示例来看一下，这些不同的手法是如何运用的：

示例1：采用面型图标+面型图标的组合模式；单套图标使用了不同的色彩；图标采用尖角，没有增加转角；单枚图标中，通过修改部分元素透明度的方式来增加丰富性和层次感。

示例2：采用线面结合的手法；通过层叠的方式进行叠加；面型元素增加了透明度渐变的效果；采用黑色与橙红色的配色；

示例3：采用线面结合的手法；整体视角采用的轴测 2.5D 视角，面型元素增加了透明度，作为整面点缀和侧面的阴影效果；

示例4：采用线面结合的手法；线性元素作为整个图标的视觉主体；面型元素作为主体填充；整套图标采用不同的色彩进行搭配使用；面型元素增加了透明度；图标背后通过将面型元素增加高斯模糊的方式来构建阴影效果，模拟物体在白色表面的自然反光效果，显得十分通透灵动；

示例5：采用线线搭配，部分元素的线条采用其他颜色进行搭配；图标的流线采用外扩于中宫的曲线而非直线，非常有特点；

示例6：采用线面结合的方式进行搭配设计，不同线条做了断点处理的效果；不同层次的元素采用不同的色彩进行搭配；并且通过白色进行了高光点缀；采用深色元素作为阴影效果；图标的边缘增加了彩色斑点的点缀；娃娃笑脸是贯穿图标的关键特征元素；

表现手法运用较多的时候，图标的复杂度就越高，甚至从符号变成插画；

线性or面型

设计中，我们应该是用「线性图标」还是「面型图标」呢？

其实二者没有太明显的选择优劣，很多场景下已经越来越模糊，但总的来说，还是有一些法则可以作为参考：

常用的手法：在App的底部导航栏，选中状态使用面型图标，而非选中状态使用线性图标；
16px左右的小图标慎用线性图标，线性图标在16px下，可排布像素的区域较小，这个时候线性图标不容易设计；
面型图标比起线性图标，除装饰性外具备更强的视觉信息层次感，更具引导性，比如金刚区功能图标、IOS设置界面，使用面型图标；
车载等系统界面，更适合用面型图标，面型图标的视觉面积较大，短时间内更加容易识别；
线性图标看起来通常会更加细腻精致，适合比较精致简洁的设计或者女性化产品设计；

OK，到这里，我们的《图标设计指南》系列文章的第二篇就讲完了~

下一篇我们讲一下「图标的设计原则」和「图标的性格」