使用做设计系列教程效果外观面板和质感表现下

　　Hi！又到了教程时间了。在系列教程《使用AI做UI设计系列教程：效果、外观面板和质感表现（上）》里，讲述了AdobeIllustrator里面的效果、外观面板的一些基本概念；
　　上一个教程《使用AI做UI设计系列教程：效果、外观面板和质感表现（中）》里，介绍了生活中常见的几种材质的光学特性，并举了两个例子，介绍了如何用AI表现这样的材质。本次教程将要用一个实例，介绍一个图标的质感表现，是如何使用AI里面的效果等手法来表现的。嗯对了，用来作为模特的图标就是这个，一个浏览器图标：
　　不过，在具体讨论这个图标是如何表现之前，还是先说说关于图标的一些基本知识吧。首先，大家都可以看出来，这个图标是一个拟物化，或者可以称作风格化的图标。这种风格的图标使用了类似阴影、渐变、高斯模糊、羽化等手段，来表现材质、光照、层次感等，使图标看上去比较像现实世界中存在的一个物体那样。通过真实世界中对应的隐喻，来让用户明白这个图标背后App的作用，并唤起用户的情感。
　　当然了，与此像对应的，就是扁平化风格的图标了。扁平化风格的图标，抽离掉了光影、材质，只使用简单的图形、色彩来表现。拟物化与扁平化风格的对比，大概就是下面的样子：
　　大家应该都知道了，从2012年起，拟物化保皇党与扁平化革命军开始爆发流血冲突。特别是在2012年WWDC后，由于iOS6仍旧使用传统的拟物化风格，造成扁平化革命军的不满，令流血冲突更是升级成为了全面战争。战争大概持续了一年，随着于2013年WWDC发布的iOS7系统内置的图标全面改为扁平化风格。这场战争以扁平化革命军胜利，拟物化保皇党的败走而终结。
　　为什么会形成拟物化保皇党和扁平化革命军两派，并且爆发战争呢？在前些日子有不少讨论了，每个设计师都有自己的说法。对此，我个人的观点嘛，举个例子来说吧：以前，人们都过得很困苦，很多人平时连馒头、面条、米饭都舍不得吃，一般吃饭就吃窝头、棒渣粥，就着点儿咸菜，像饺子这种美食更是一年才舍得吃一顿。改革开放后，大家都过上好日子了，就算是顿顿吃饺子也吃得起。于是很多人经常吃大鱼大肉，哪个肉放的多、油放的多、盐放的多就吃啥。结果是三高啊，心血管疾病的病患数量急剧升高。再后来，很多人又开始回归粗粮、蔬菜等食品了，尽管大鱼大肉地吃他们也绝对负担得起。
　　也就是说，虽然现在很多人喜欢吃粗粮，不过跟以前那会儿是有本质的区别的。区别就是，现在我们可以选择吃精粮还是吃粗粮，以前没有这种选择。GUI的演化也是如此。
　　从前在AppleII和IBMPC那个时代啊，不仅电脑屏幕小，分辨率还都很低，而且色彩表现能力极为有限。比如曾经很流行的，曾用于Windows1。x、2。x系列的CGA标准，一般分辨率只是320200，只有16种颜色可以显示。在这样的情况下，GUI的表现受到了极大的限制，举几个古时候的GUI作为例子：
　　这是VisualBasicDOS版（嗯，VB这货还有DOS版）的界面创建器，工作在DOS的字符模式下。注意看，这个界面的一切元素，都是基于类似制表符、空格、小数点这样的字符来实现的。当时很多基于DOS带GUI的程序，比如晚期DOS里内置的http：edit。com文本编辑器，都是通过类似这样的，基于字符显示模式来表现GUI。VBforDOS可以说是这这种基于字符GUI的极致了，仅用字符就实现了窗体和几乎所有常用的控件，甚至实现了窗体的阴影效果。现在这种字符GUI在某些场合、领域依然存在，普通人比较容易接触到的就是PC机的BIOS界面，还有LinuxUnix里的一些程序至今依然使用这样的字符UI。
　　这个是我自己截取的Windows2。03的截图，工作在DOS的图形模式下，VGA屏幕（640480，16色）。可以看到图标都是简单的黑白图形，窗体、控件也是标准的扁平化风格。因为当年流行的屏幕表现力通常很差，并且电脑带不起来高分辨率、色彩丰富的界面，只能表现成这个样子。
　　然后，随着显示器和电脑硬件的进步，VGA、SVGA等高级一些的显示标准开始普及起来。于是流行的GUI开始变成了这样的风格：
　　这两个都是Windows3。2系统界面。可以看到，GUI开始使用高光和阴影来表现控件的立体感，并且图标也开始带有色彩，试图呈现现实世界中的物件。
　　这张截图，从外到内为WindowsVista、XP、3。2。可以看到，随着显示设备的进步和计算机性能的提高，Windows的UI经历了怎样的一套演化流程。
　　（上面的三张图都是自己截取的。如果想更多了解GUI演化历史，可以参看GraphicalUserInterfaceGallery这个著名的网站）。
　　移动设备也不利外，早期像NewtownPDA这样的设备只能显示黑白画面。演化到WindowsMobile时代后，流行的显示屏最开始是240320，256色，后来演变到640480，65536色这样的。再然后是iPhone的320480，32位真彩色。与此同时，GUI也正像从前在电脑上发生过的那样，从黑白线条风格，逐渐变成了彩色像素小图标，然后是iPhoneOS的水晶质感图标、立体控件。最终，拟物化风格在搭载Retina显示屏的iPhone4上市后达到了顶峰，因为Retina显示屏清晰锐利的屏幕，非常适合表现材质质感。
　　不过，当拟物化风格大行其道后，种种弊端开始显现出来。比如，不是每个App都有对应在现实世界中的隐喻。而且，拟物化风格容易让人把注意力从内容本身转移到界面上。还有，过度的拟物化风格图标的堆积容易给人以不一致感。因此，爆发了上面所说的，拟物化保皇党和扁平化革命军的冲突，最终扁平化获胜，开始流行起来。
　　可能有人会问，既然现在是扁平化的天下了，那为什么还要用拟物化风格的图标举例讲述呢？答：这一期讲的就是如何用AI表现质感和光影啊。再说了，现在拟物化风格也没有完全消亡，不信看看iOS7内置的备忘录应用。
　　然后再说说如何做出一个好的拟物化风格图标。根据个人经验，做好拟物化风格的图标，主要依靠几点：
　　注重细节；
　　保证图标的辨识度；
　　控制细节的数量；
　　前两点都好理解，着重说一下第三点。做拟物化风格的图标，堆砌大量的细节不是一个明智的做法。因为，除非做OSXApp那样的图标，绝大多数系统应用程序的图标分辨率都比较低的，例如iPhoneiOS7图标分辨率是120120，在这样的分辨率下显然不适合堆砌细节。并且，堆砌细节容易给人造成认知上的困难，并很容易造成混乱、不一致感。再有，堆砌细节还很容易降低图标的辨识度。因此，虽然基于矢量的AdobeIllustator很适合用可无限缩放的矢量图形堆砌细节，不过不建议这样做。
　　好了，现在可以开始进入正题解析上面的那个图标是如何表现的了。这个浏览器的图标，放在了一个类似AppLauncher的展示界面里：
　　展示界面是单独的一个AI文件，里面以外部文件链接的形式，嵌入了几个图标。AI嵌入外部文件很简单，只要把外部文件直接拖拽进去就可以了。外部文件发生改动，更新后，AI会自动更新，非常方便。并且外部文件拖拽进去后，可以像在AI里创建的矢量图形一样加上效果。比如，这个展示界面上，所有的图标都加了一个阴影效果。由于这套图标的光源方向是从上到下，因此阴影方向也是竖直向下。阴影不要弄得过重，淡淡的一层就很好：
　　加入阴影效果，使得这套图标看起来更符合人们的视觉经验，并能更好地将图标层与背景层区分开来。
　　每个图标都是一个单独的文件。这个浏览器图标也不例外，文件整体是这样的：
　　这个图标文件由四个图层组成，分别是基座、内容层、盖子、参考线：
　　那么，就一层一层来说吧。
　　最下面的一层也是最复杂的一层，是这个图标的基座，由两个矢量对象组成：
　　灰白色的底层很简单，没有描边，只有一个填色层，方向是从上到下，模拟光源自顶向下照射。
　　灰框蓝色的基座就比较复杂了，这个矢量对象的外观面板嘛是这个样子：
　　一共有两个描边层，六个填色层。
　　似乎的确有些复杂，那么稍做简化一下吧。在外观面板里，只保留两个描边和蓝色填色层的可见性。这样，可以清楚地看到这个矢量图形主体元素：
　　两个描边的作用，是用来表现银色边框。两个边框均为沿图形内侧对齐，上面的是2px宽度，下面的是3px宽度，用不同的灰度来表现边框的立体感。边框的材质假定是一种稍微粗糙一些的金属，有一个自顶向下照射的光源和环境光。在上一个教程里，介绍了金属材质的光学特性。金属材质在单一光源照射下，会有一个特别亮的高光区，并且高光区在边缘处亮度会很快地衰减。因此，在这里同理，为模拟这样的金属材质，描边的渐变应该做类似这样的设置：
　　在边框下面的是蓝色渐变的填色层，填色层一共有四个效果：
　　首先是一个位移路径效果（实际上个人觉得译为偏移路径更好，英文原文是OffsetPath）。这个效果的作用是，让矢量图形收缩扩张指定像素的大小。在这里，将位移数值设定为1，即向内收缩1px大小。为什么要这样做？如果不这样做的话，那么在边框的边缘处，蓝色底座会被隐约看到，特别是在图像缩小查看时：
　　产生这种情况的原因是AI默认是以消锯齿的方式填充颜色。在执行消锯齿操作时，图形边缘的像素会被设置为半透明。所以在边框处的蓝色细线，实际上是边框边缘的半透明像素叠加到蓝色基座的半透明像素上，因此看上去是暗蓝色。所以，首先要给图形加上一个位移路径效果，避免边缘出现蓝色的细线。
　　接下来是一个内发光效果，给圆形底座的边缘加上阴影效果，增加真实感：
　　对比没有加入阴影效果的情况：
　　再下面是两个投影效果，为底座附近的表面增添凹凸感。上面的投影颜色是黑色，下面的投影颜色为白色，模拟一个下凹效果。下面是加投影和未加投影的对比：
　　上面说的就是两个描边和蓝色填色层的作用和效果，接下来继续说说剩下的五个填色层。最上面位于描边之上的两个半透明填色层实际上分别是两个径向渐变，其作用是，为边框的边缘增加细微的阴影效果，对比如图：
　　最下面的三个填色层附带的效果是这样的：
　　这三个填色层由于在蓝色的填色层下，所以填色层本身实际上是不能被看到的。三个填色层可以使用任意的颜色，只是可见度要设置为100，即完全可见。加入这三个填色层的目的，是为了给图形加上细微的光影效果，对比如下：
　　上面说的就是是底座图层了。上面的几个图层就很简单了。底座层上面是内容层。现在内容层里只有一个文字对象，文字对象加上了变形、羽化、外发光等效果，让文字看上去是在发光，如图：
　　再上面是盖子，也很简单了。下面是一个圆形，上面是一个椭圆。模拟一个圆形的灯光光源，从顶向下照射到一个光滑的球面玻璃表面上。两个矢量对象均没有描边，填充色都是半透明渐变：
　　最上面就是参考线图层了：
　　（回忆一下，怎么用AI做出这样的参考线？）
　　差不多就是这个样子了。可以看到，虽然可能相对于PS这样的像素图处理工具来说，AI的效果会有一些局限性，不过整体上还是够用的了。熟练掌握AI的使用后，如果图标不是特别复杂，那么用AI来画也可以，甚至可能更方便一些。
　　这一期的教程可能有些困难，并且自己最近一直失眠，写的时候精神状况有些不佳。如果看这篇教程遇到什么困难，欢迎留言。
　　原文地址：zhangboning。me
　　作者：张泊宁研究所
　　原文来自：优设网