Hi！又到了教程时间了。在系列教程《使用AI做UI设计系列教程：效果、外观面板和质感表现（上）》里，讲述了 Adobe Illustrator 里面的效果、外观面板的一些基本概念；

上一个教程《使用AI做UI设计系列教程：效果、外观面板和质感表现（中）》里，介绍了生活中常见的几种材质的光学特性，并举了两个例子，介绍了如何用 AI 表现这样的材质。本次教程将要用一个实例，介绍一个图标的质感表现，是如何使用 AI 里面的效果等手法来表现的。嗯对了，用来作为「模特」的图标就是这个，一个浏览器图标：

不过，在具体讨论这个图标是如何表现之前，还是先说说关于图标的一些基本知识吧。首先，大家都可以看出来，这个图标是一个「拟物化」，或者可以称作 「风格化」的图标。这种风格的图标使用了类似阴影、渐变、高斯模糊、羽化等手段，来表现材质、光照、层次感等，使图标看上去比较像现实世界中存在的一个物 体那样。通过真实世界中对应的隐喻，来让用户明白这个图标背后 App 的作用，并唤起用户的情感。

当然了，与此像对应的，就是「扁平化」风格的图标了。「扁平化」风格的图标，抽离掉了光影、材质，只使用简单的图形、色彩来表现。「拟物化」与「扁平化」风格的对比，大概就是下面的样子：

大家应该都知道了，从 2012 年起，「拟物化」保皇党与「扁平化」革命军开始爆发流血冲突。特别是在 2012 年 WWDC 后，由于 iOS 6 仍旧使用传统的「拟物化」风格，造成「扁平化」革命军的不满，令流血冲突更是升级成为了全面战争。战争大概持续了一年，随着于 2013 年 WWDC 发布的 iOS 7 系统内置的图标全面改为「扁平化」风格。这场战争以「扁平化」革命军胜利，「拟物化」保皇党的败走而终结。

为什么会形成「拟物化」保皇党和「扁平化」革命军两派，并且爆发战争呢？在前些日子有不少讨论了，每个设计师都有自己的说法。对此，我个人的观点 嘛，举个例子来说吧：以前，人们都过得很困苦，很多人平时连馒头、面条、米饭都舍不得吃，一般吃饭就吃窝头、棒渣粥，就着点儿咸菜，像饺子这种「美食」更 是一年才舍得吃一顿。改革开放后，大家都过上好日子了，就算是顿顿吃饺子也吃得起。于是很多人经常吃大鱼大肉，哪个肉放的多、油放的多、盐放的多就吃啥。 结果是「三高」啊，心血管疾病的病患数量急剧升高。再后来，很多人又开始回归粗粮、蔬菜等食品了，尽管大鱼大肉地吃他们也绝对负担得起。

也就是说，虽然现在很多人喜欢吃粗粮，不过跟以前那会儿是有本质的区别的。区别就是，现在我们可以选择吃精粮还是吃粗粮，以前没有这种选择。GUI 的演化也是如此。

从前在 Apple II 和 IBM PC 那个时代啊，不仅电脑屏幕小，分辨率还都很低，而且色彩表现能力极为有限。比如曾经很流行的，曾用于 Windows 1.x、2.x 系列的 CGA 标准，一般分辨率只是 320×200，只有 16 种颜色可以显示。在这样的情况下，GUI 的表现受到了极大的限制，举几个古时候的 GUI 作为例子：

这是 Visual Basic DOS 版（嗯，VB 这货还有 DOS 版）的界面创建器，工作在 DOS 的字符模式下。注意看，这个界面的一切元素，都是基于类似制表符、空格、小数点这样的字符来实现的。当时很多基于 DOS 带 GUI 的程序，比如晚期 DOS 里内置的http://edit.com 文本编辑器，都是通过类似这样的，基于字符显示模式来表现 GUI。VB for DOS 可以说是这这种基于字符 GUI 的极致了，仅用字符就实现了窗体和几乎所有常用的控件，甚至实现了窗体的阴影效果。现在这种字符 GUI 在某些场合、领域依然存在，普通人比较容易接触到的就是 PC 机的 BIOS 界面，还有 Linux/Unix 里的一些程序至今依然使用这样的字符 UI。

这个是我自己截取的 Windows 2.03 的截图，工作在 DOS 的图形模式下，VGA 屏幕（640×480，16 色）。可以看到图标都是简单的黑白图形，窗体、控件也是标准的「扁平化」风格。因为当年流行的屏幕表现力通常很差，并且电脑带不起来高分辨率、色彩丰富的 界面，只能表现成这个样子。

然后，随着显示器和电脑硬件的进步，VGA、SVGA 等高级一些的显示标准开始普及起来。于是流行的 GUI 开始变成了这样的风格：

这两个都是 Windows 3.2 系统界面。可以看到，GUI 开始使用高光和阴影来表现控件的立体感，并且图标也开始带有色彩，试图呈现现实世界中的物件。

这张截图，从外到内为 Windows Vista、XP、3.2. 可以看到，随着显示设备的进步和计算机性能的提高，Windows 的 UI 经历了怎样的一套演化流程。

（上面的三张图都是自己截取的。如果想更多了解 GUI 演化历史，可以参看Graphical User Interface Gallery 这个著名的网站）。

移动设备也不利外，早期像 Newtown PDA 这样的设备只能显示黑白画面。演化到 Windows Mobile 时代后，流行的显示屏最开始是 240×320, 256 色，后来演变到 640×480 , 65536 色这样的。再然后是 iPhone 的 320×480，32 位真彩色。与此同时，GUI 也正像从前在电脑上发生过的那样，从黑白线条风格，逐渐变成了彩色像素小图标，然后是 iPhone OS 的水晶质感图标、「立体」控件。最终，「拟物化」风格在搭载 Retina 显示屏的 iPhone 4 上市后达到了顶峰，因为 Retina 显示屏清晰锐利的屏幕，非常适合表现材质质感。

不过，当「拟物化」风格大行其道后，种种弊端开始显现出来。比如，不是每个 App 都有对应在现实世界中的隐喻。而且，「拟物化」风格容易让人把注意力从内容本身转移到界面上。还有，过度的「拟物化」风格图标的堆积容易给人以不一致感。 因此，爆发了上面所说的，「拟物化」保皇党和「扁平化」革命军的冲突，最终「扁平化」获胜，开始流行起来。

可能有人会问，既然现在是「扁平化」的天下了，那为什么还要用「拟物化」风格的图标举例讲述呢？答：这一期讲的就是如何用 AI 表现质感和光影啊。再说了，现在「拟物化」风格也没有完全消亡，不信看看 iOS 7 内置的备忘录应用。

然后再说说如何做出一个好的「拟物化」风格图标。根据个人经验，做好「拟物化」风格的图标，主要依靠几点：

1. 注重细节；
2. 保证图标的辨识度；
3. 控制细节的数量；

前两点都好理解，着重说一下第三点。做「拟物化」风格的图标，堆砌大量的细节不是一个明智的做法。因为，除非做 OS X App 那样的图标，绝大多数系统应用程序的图标分辨率都比较低的，例如 iPhone iOS 7 图标分辨率是 120×120，在这样的分辨率下显然不适合堆砌细节。并且，堆砌细节容易给人造成认知上的困难，并很容易造成混乱、不一致感。再有，堆砌细节还很容易降 低图标的辨识度。因此，虽然基于矢量的 Adobe Illustator 很适合用可无限缩放的矢量图形堆砌细节，不过不建议这样做。

好了，现在可以开始进入正题——解析上面的那个图标是如何表现的了。这个浏览器的图标，放在了一个类似 App Launcher 的展示界面里：

展示界面是单独的一个 AI 文件，里面以外部文件链接的形式，嵌入了几个图标。AI 嵌入外部文件很简单，只要把外部文件直接拖拽进去就可以了。外部文件发生改动，更新后，AI 会自动更新，非常方便。并且外部文件拖拽进去后，可以像在 AI 里创建的矢量图形一样加上效果。比如，这个展示界面上，所有的图标都加了一个阴影效果。由于这套图标的光源方向是从上到下，因此阴影方向也是竖直向下。阴 影不要弄得过重，淡淡的一层就很好：

加入阴影效果，使得这套图标看起来更符合人们的视觉经验，并能更好地将图标层与背景层区分开来。

每个图标都是一个单独的文件。这个浏览器图标也不例外，文件整体是这样的：

这个图标文件由四个图层组成，分别是「基座」、内容层、「盖子」、参考线：

那么，就一层一层来说吧。

最下面的一层也是最复杂的一层，是这个图标的「基座」，由两个矢量对象组成：

灰白色的底层很简单，没有描边，只有一个填色层，方向是从上到下，模拟光源自顶向下照射。

灰框蓝色的基座就比较复杂了，这个矢量对象的外观面板嘛……是这个样子：

一共有两个描边层，六个填色层。

似乎的确有些复杂，那么稍做简化一下吧。在「外观」面板里，只保留两个描边和蓝色填色层的可见性。这样，可以清楚地看到这个矢量图形主体元素：

两个描边的作用，是用来表现银色边框。两个边框均为沿图形内侧对齐，上面的是 2px 宽度，下面的是 3px 宽度，用不同的灰度来表现边框的立体感。边框的材质假定是一种稍微粗糙一些的金属，有一个自顶向下照射的光源和环境光。在上一个教程里，介绍了金属材质的 光学特性。金属材质在单一光源照射下，会有一个特别亮的高光区，并且高光区在边缘处亮度会很快地衰减。因此，在这里同理，为模拟这样的金属材质，描边的渐 变应该做类似这样的设置：

在边框下面的是蓝色渐变的填色层，填色层一共有四个效果：

首先是一个「位移路径」效果（实际上个人觉得译为「偏移路径」更好，英文原文是 Offset Path）。这个效果的作用是，让矢量图形收缩／扩张指定像素的大小。在这里，将「位移」数值设定为 “-1″，即向内收缩 1px 大小。为什么要这样做？如果不这样做的话，那么在边框的边缘处，蓝色底座会被隐约看到，特别是在图像缩小查看时：

产生这种情况的原因是 AI 默认是以消锯齿的方式填充颜色。在执行消锯齿操作时，图形边缘的像素会被设置为半透明。所以在边框处的蓝色「细线」，实际上是边框边缘的半透明像素叠加到 蓝色基座的半透明像素上，因此看上去是暗蓝色。所以，首先要给图形加上一个「位移路径」效果，避免边缘出现蓝色的「细线」。

接下来是一个「内发光」效果，给圆形底座的边缘加上阴影效果，增加真实感：

对比没有加入阴影效果的情况：

再下面是两个「投影」效果，为底座附近的表面增添凹凸感。上面的投影颜色是黑色，下面的投影颜色为白色，模拟一个下凹效果。下面是加投影和未加投影的对比：

上面说的就是两个描边和蓝色填色层的作用和效果，接下来继续说说剩下的五个填色层。最上面位于描边之上的两个半透明填色层实际上分别是两个径向渐变，其作用是，为边框的边缘增加细微的阴影效果，对比如图：

最下面的三个填色层附带的效果是这样的：

这三个填色层由于在蓝色的填色层下，所以填色层本身实际上是不能被看到的。三个填色层可以使用任意的颜色，只是可见度要设置为 100%，即完全可见。加入这三个填色层的目的，是为了给图形加上细微的光影效果，对比如下：

上面说的就是是底座图层了。上面的几个图层就很简单了。底座层上面是内容层。现在内容层里只有一个文字对象，文字对象加上了变形、羽化、外发光等效果，让文字看上去是在发光，如图：

再上面是「盖子」，也很简单了。下面是一个圆形，上面是一个椭圆。模拟一个圆形的灯光光源，从顶向下照射到一个光滑的球面玻璃表面上。两个矢量对象均没有描边，填充色都是半透明渐变：

最上面就是参考线图层了：

（回忆一下，怎么用 AI 做出这样的参考线？）

差不多就是这个样子了。可以看到，虽然可能相对于 PS 这样的像素图处理工具来说，AI 的效果会有一些局限性，不过整体上还是够用的了。熟练掌握 AI 的使用后，如果图标不是特别复杂，那么用 AI 来画也可以，甚至可能更方便一些。

这一期的教程可能有些困难，并且自己最近一直失眠，写的时候精神状况有些不佳。如果看这篇教程遇到什么困难，欢迎留言。

原文地址：zhangboning.me

作者：@张泊宁研究所

原文来自：优设网

使用AI做UI设计系列教程系列

 效果、外观面板和质感表现（上）

效果、外观面板和质感表现（中）