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 里内置的文本编辑器，都是通过类似这样的，基于字符显示模式来表现 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 Intece 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 内置的备忘录应用。
然后再说说如何做出一个好的「拟物化」风格图标。根据个人经验，做好「拟物化」风格的图标，主要依靠几点：
前两点都好理解，着重说一下第三点。做「拟物化」风格的图标，堆砌大量的细节不是一个明智的做法。因为，除非做 OS X App 那样的图标，绝大多数系统应用程序的图标分辨率都比较低的，例如 iPhone iOS 7 图标分辨率是 120×120，在这样的分辨率下显然不适合堆砌细节。并且，堆砌细节容易给人造成认知上的困难，并很容易造成混乱、不一致感。再有，堆砌细节还很容易降 低图标的辨识度。因此，虽然基于矢量的 Adobe Illustator 很适合用可无限缩放的矢量图形堆砌细节，不过不这样做。
好了，现在可以开始进入正题——解析的那个图标是如何表现的了。这个浏览器的图标，放在了一个类似 App Launcher 的展示界面里：
展示界面是单独的一个 AI 文件，里面以外部文件链接的形式，嵌入了几个图标。AI 嵌入外部文件很简单，只要把外部文件直接拖拽进去就可以了。外部文件发生改动，更新后，AI 会自动更新，非常方便。并且外部文件拖拽进去后，可以像在 AI 里创建的矢量图形一样加上效果。比如，这个展示界面上，所有的图标都加了一个阴影效果。由于这套图标的光源方向是从上到下，因此阴影方向也是竖直向下。阴 影不要弄得过重，淡淡的一层就很好：
似乎的确有些复杂，那么稍做简化一下吧。在「外观」面板里，只保留两个描边和蓝色填色层的可见性。这样，可以清楚地看到这个矢量图形主体元素：
两个描边的作用，是用来表现银色边框。两个边框均为沿图形内侧对齐，的是 2px 宽度，下面的是 3px 宽度，用不同的灰度来表现边框的立体感。边框的材质假定是一种稍微粗糙一些的金属，有一个自顶向下照射的光源和光。在上一个教程里，介绍了金属材质的 光学特性。金属材质在单一光源照射下，会有一个特别亮的高光区，并且高光区在边缘处亮度会很快地衰减。因此，在这里同理，为模拟这样的金属材质，描边的渐 变应该做类似这样的设置：
首先是一个「位移径」效果（实际上个人觉得译为「偏移径」更好，英文原文是 Offset Path）。这个效果的作用是，让矢量图形收缩／扩张指定像素的大小。在这里，将「位移」数值设定为 “-1″，即向内收缩 1px 大小。为什么要这样做？如果不这样做的话，那么在边框的边缘处，蓝色底座会被隐约看到，特别是在图像缩小查看时：
产生这种情况的原因是 AI 默认是以消锯齿的方式填充颜色。在执行消锯齿操作时，图形边缘的像素会被设置为半透明。所以在边框处的蓝色「细线」，实际上是边框边缘的半透明像素叠加到 蓝色基座的半透明像素上，因此看上去是暗蓝色。所以，首先要给图形加上一个「位移径」效果，避免边缘出现蓝色的「细线」。
再下面是两个「投影」效果，为底座附近的表面增添凹凸感。的投影颜色是黑色，下面的投影颜色为白色，模拟一个下凹效果。下面是加投影和未加投影的对比：
说的就是两个描边和蓝色填色层的作用和效果，接下来继续说说剩下的五个填色层。最位于描边之上的两个半透明填色层实际上分别是两个径向渐变，其作用是，为边框的边缘增加细微的阴影效果，对比如图：
这三个填色层由于在蓝色的填色层下，所以填色层本身实际上是不能被看到的。三个填色层可以使用任意的颜色，只是可见度要设置为 100%，即完全可见。加入这三个填色层的目的，是为了给图形加上细微的光影效果，对比如下：
说的就是是底座图层了。的几个图层就很简单了。底座层是内容层。现在内容层里只有一个文字对象，文字对象加上了变形、羽化、外发光等效果，让文字看上去是在发光，如图：
再是「盖子」，也很简单了。下面是一个圆形，是一个椭圆。模拟一个圆形的灯光光源，从顶向下照射到一个光滑的球面玻璃表面上。两个矢量对象均没有描边，填充色都是半透明渐变：
差不多就是这个样子了。可以看到，虽然可能相对于 PS 这样的像素图处理工具来说，AI 的效果会有一些局限性，不过整体上还是够用的了。熟练掌握 AI 的使用后，如果图标不是特别复杂，那么用 AI 来画也可以，甚至可能更方便一些。
这一期的教程可能有些困难，并且自己最近一直失眠，写的时候状况有些不佳。如果看这篇教程遇到什么困难，欢迎留言。
人人都是产品经理（是以产品经理、运营为核心的学习、交流、分享平台，集、培训、招聘、社群为一体，全方位服务产品人和运营人，成立8年举办在线+期，线+场，产品经理大会、运营大会20+场，覆盖北上广深杭成都等15个城市，在行业有较高的影响力和知名度。平台聚集了众多BAT美团京东滴滴360小米网易等知名互联网公司产品总监和运营总监，他们在这里分享知识、招聘人才，与你一起成长。
秋天对应的五行本文由来源于财鼎国际(www.hengpunai.cn)