@張泊寧研究所 ：Hi！又到了教程時間了。在系列教程《使用AI做UI設計系列教程：效果、外觀面板和質感表現（上）》里，講述了 Adobe Illustrator 里面的效果、外觀面板的一些基本概念；

上一個教程《使用AI做UI設計系列教程：效果、外觀面板和質感表現（中）》里，介紹了生活中常見的幾種材質的光學特性，并舉了兩個例子，介紹了如何用 AI 表現這樣的材質。本次教程將要用一個實例，介紹一個圖標的質感表現，是如何使用 AI 里面的效果等手法來表現的。嗯對了，用來作為「模特」的圖標就是這個，一個瀏覽器圖標：

不過，在具體討論這個圖標是如何表現之前，還是先說說關于圖標的一些基本知識吧。首先，大家都可以看出來，這個圖標是一個「擬物化」，或者可以稱作「風格化」的圖標。這種風格的圖標使用了類似陰影、漸變、高斯模糊、羽化等手段，來表現材質、光照、層次感等，使圖標看上去比較像現實世界中存在的一個物體那樣。通過真實世界中對應的隱喻，來讓用戶明白這個圖標背后 App 的作用，并喚起用戶的情感。

小課堂系列：
《使用 Adobe Illustrator 做 UI 設計——多重填充與多重描邊》
《小課堂第二彈！使用ILLUSTRATOR做UI設計系列教程》
《小課堂第三彈！使用ILLUSTRATOR做UI設計系列教程》
《小課堂第四彈：使用ILLUSTRATOR做UI設計系列教程》
《使用ILLUSTRATOR做UI設計系列教程：創建內陰影效果（5）》
《使用AI做UI設計系列教程：效果、外觀面板和質感表現（上）》
《使用AI做UI設計系列教程：效果、外觀面板和質感表現（中）》

當然了，與此像對應的，就是「扁平化」風格的圖標了。「扁平化」風格的圖標，抽離掉了光影、材質，只使用簡單的圖形、色彩來表現。「擬物化」與「扁平化」風格的對比，大概就是下面的樣子：

大家應該都知道了，從 2012 年起，「擬物化」保皇黨與「扁平化」革命軍開始爆發流血沖突。特別是在 2012 年 WWDC 后，由于 iOS 6 仍舊使用傳統的「擬物化」風格，造成「扁平化」革命軍的不滿，令流血沖突更是升級成為了全面戰爭。戰爭大概持續了一年，隨著于 2013 年 WWDC 發布的 iOS 7 系統內置的圖標全面改為「扁平化」風格。這場戰爭以「扁平化」革命軍勝利，「擬物化」保皇黨的敗走而終結。

為什么會形成「擬物化」保皇黨和「扁平化」革命軍兩派，并且爆發戰爭呢？在前些日子有不少討論了，每個設計師都有自己的說法。對此，我個人的觀點嘛，舉個例子來說吧：以前，人們都過得很困苦，很多人平時連饅頭、面條、米飯都舍不得吃，一般吃飯就吃窩頭、棒渣粥，就著點兒咸菜，像餃子這種「美食」更是一年才舍得吃一頓。改革開放后，大家都過上好日子了，就算是頓頓吃餃子也吃得起。于是很多人經常吃大魚大肉，哪個肉放的多、油放的多、鹽放的多就吃啥。結果是「三高」啊，心血管疾病的病患數量急劇升高。再后來，很多人又開始回歸粗糧、蔬菜等食品了，盡管大魚大肉地吃他們也絕對負擔得起。

也就是說，雖然現在很多人喜歡吃粗糧，不過跟以前那會兒是有本質的區別的。區別就是，現在我們可以選擇吃精糧還是吃粗糧，以前沒有這種選擇。GUI 的演化也是如此。

從前在 Apple II 和 IBM PC 那個時代啊，不僅電腦屏幕小，分辨率還都很低，而且色彩表現能力極為有限。比如曾經很流行的，曾用于 Windows 1.x、2.x 系列的 CGA 標準，一般分辨率只是 320x200，只有 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 屏幕（640x480，16 色）。可以看到圖標都是簡單的黑白圖形，窗體、控件也是標準的「扁平化」風格。因為當年流行的屏幕表現力通常很差，并且電腦帶不起來高分辨率、色彩豐富的界面，只能表現成這個樣子。

然后，隨著顯示器和電腦硬件的進步，VGA、SVGA 等高級一些的顯示標準開始普及起來。于是流行的 GUI 開始變成了這樣的風格：

這兩個都是 Windows 3.2 系統界面。可以看到，GUI 開始使用高光和陰影來表現控件的立體感，并且圖標也開始帶有色彩，試圖呈現現實世界中的物件。

這張截圖，從外到內為 Windows Vista、XP、3.2. 可以看到，隨著顯示設備的進步和計算機性能的提高，Windows 的 UI 經歷了怎樣的一套演化流程。

（上面的三張圖都是自己截取的。如果想更多了解 GUI 演化歷史，可以參看Graphical User Interface Gallery 這個著名的網站）。

移動設備也不利外，早期像 Newtown PDA 這樣的設備只能顯示黑白畫面。演化到 Windows Mobile 時代后，流行的顯示屏最開始是 240x320, 256 色，后來演變到 640x480 , 65536 色這樣的。再然后是 iPhone 的 320x480，32 位真彩色。與此同時，GUI 也正像從前在電腦上發生過的那樣，從黑白線條風格，逐漸變成了彩色像素小圖標，然后是 iPhone OS 的水晶質感圖標、「立體」控件。最終，「擬物化」風格在搭載 Retina 顯示屏的 iPhone 4 上市后達到了頂峰，因為 Retina 顯示屏清晰銳利的屏幕，非常適合表現材質質感。

不過，當「擬物化」風格大行其道后，種種弊端開始顯現出來。比如，不是每個 App 都有對應在現實世界中的隱喻。而且，「擬物化」風格容易讓人把注意力從內容本身轉移到界面上。還有，過度的「擬物化」風格圖標的堆積容易給人以不一致感。因此，爆發了上面所說的，「擬物化」保皇黨和「扁平化」革命軍的沖突，最終「扁平化」獲勝，開始流行起來。

可能有人會問，既然現在是「扁平化」的天下了，那為什么還要用「擬物化」風格的圖標舉例講述呢？答：這一期講的就是如何用 AI 表現質感和光影啊。再說了，現在「擬物化」風格也沒有完全消亡，不信看看 iOS 7 內置的備忘錄應用。

然后再說說如何做出一個好的「擬物化」風格圖標。根據個人經驗，做好「擬物化」風格的圖標，主要依靠幾點：

1. 注重細節；
2. 保證圖標的辨識度；
3. 控制細節的數量；

前兩點都好理解，著重說一下第三點。做「擬物化」風格的圖標，堆砌大量的細節不是一個明智的做法。因為，除非做 OS X App 那樣的圖標，絕大多數系統應用程序的圖標分辨率都比較低的，例如 iPhone iOS 7 圖標分辨率是 120x120，在這樣的分辨率下顯然不適合堆砌細節。并且，堆砌細節容易給人造成認知上的困難，并很容易造成混亂、不一致感。再有，堆砌細節還很容易降低圖標的辨識度。因此，雖然基于矢量的 Adobe Illustator 很適合用可無限縮放的矢量圖形堆砌細節，不過不建議這樣做。

好了，現在可以開始進入正題——解析上面的那個圖標是如何表現的了。這個瀏覽器的圖標，放在了一個類似 App Launcher 的展示界面里：

展示界面是單獨的一個 AI 文件，里面以外部文件鏈接的形式，嵌入了幾個圖標。AI 嵌入外部文件很簡單，只要把外部文件直接拖拽進去就可以了。外部文件發生改動，更新后，AI 會自動更新，非常方便。并且外部文件拖拽進去后，可以像在 AI 里創建的矢量圖形一樣加上效果。比如，這個展示界面上，所有的圖標都加了一個陰影效果。由于這套圖標的光源方向是從上到下，因此陰影方向也是豎直向下。陰影不要弄得過重，淡淡的一層就很好：

加入陰影效果，使得這套圖標看起來更符合人們的視覺經驗，并能更好地將圖標層與背景層區分開來。

每個圖標都是一個單獨的文件。這個瀏覽器圖標也不例外，文件整體是這樣的：

這個圖標文件由四個圖層組成，分別是「基座」、內容層、「蓋子」、參考線：

那么，就一層一層來說吧。

最下面的一層也是最復雜的一層，是這個圖標的「基座」，由兩個矢量對象組成：

灰白色的底層很簡單，沒有描邊，只有一個填色層，方向是從上到下，模擬光源自頂向下照射。

灰框藍色的基座就比較復雜了，這個矢量對象的外觀面板嘛……是這個樣子：

一共有兩個描邊層，六個填色層。

似乎的確有些復雜，那么稍做簡化一下吧。在「外觀」面板里，只保留兩個描邊和藍色填色層的可見性。這樣，可以清楚地看到這個矢量圖形主體元素：

兩個描邊的作用，是用來表現銀色邊框。兩個邊框均為沿圖形內側對齊，上面的是 2px 寬度，下面的是 3px 寬度，用不同的灰度來表現邊框的立體感。邊框的材質假定是一種稍微粗糙一些的金屬，有一個自頂向下照射的光源和環境光。在上一個教程里，介紹了金屬材質的光學特性。金屬材質在單一光源照射下，會有一個特別亮的高光區，并且高光區在邊緣處亮度會很快地衰減。因此，在這里同理，為模擬這樣的金屬材質，描邊的漸變應該做類似這樣的設置：

在邊框下面的是藍色漸變的填色層，填色層一共有四個效果：

首先是一個「位移路徑」效果（實際上個人覺得譯為「偏移路徑」更好，英文原文是 Offset Path）。這個效果的作用是，讓矢量圖形收縮／擴張指定像素的大小。在這里，將「位移」數值設定為 "-1"，即向內收縮 1px 大小。為什么要這樣做？如果不這樣做的話，那么在邊框的邊緣處，藍色底座會被隱約看到，特別是在圖像縮小查看時：

產生這種情況的原因是 AI 默認是以消鋸齒的方式填充顏色。在執行消鋸齒操作時，圖形邊緣的像素會被設置為半透明。所以在邊框處的藍色「細線」，實際上是邊框邊緣的半透明像素疊加到藍色基座的半透明像素上，因此看上去是暗藍色。所以，首先要給圖形加上一個「位移路徑」效果，避免邊緣出現藍色的「細線」。

接下來是一個「內發光」效果，給圓形底座的邊緣加上陰影效果，增加真實感：

對比沒有加入陰影效果的情況：

再下面是兩個「投影」效果，為底座附近的表面增添凹凸感。上面的投影顏色是黑色，下面的投影顏色為白色，模擬一個下凹效果。下面是加投影和未加投影的對比：

上面說的就是兩個描邊和藍色填色層的作用和效果，接下來繼續說說剩下的五個填色層。最上面位于描邊之上的兩個半透明填色層實際上分別是兩個徑向漸變，其作用是，為邊框的邊緣增加細微的陰影效果，對比如圖：

最下面的三個填色層附帶的效果是這樣的：

這三個填色層由于在藍色的填色層下，所以填色層本身實際上是不能被看到的。三個填色層可以使用任意的顏色，只是可見度要設置為 100%，即完全可見。加入這三個填色層的目的，是為了給圖形加上細微的光影效果，對比如下：

上面說的就是是底座圖層了。上面的幾個圖層就很簡單了。底座層上面是內容層。現在內容層里只有一個文字對象，文字對象加上了變形、羽化、外發光等效果，讓文字看上去是在發光，如圖：

再上面是「蓋子」，也很簡單了。下面是一個圓形，上面是一個橢圓。模擬一個圓形的燈光光源，從頂向下照射到一個光滑的球面玻璃表面上。兩個矢量對象均沒有描邊，填充色都是半透明漸變：

最上面就是參考線圖層了：

（回憶一下，怎么用 AI 做出這樣的參考線？）

差不多就是這個樣子了。可以看到，雖然可能相對于 PS 這樣的像素圖處理工具來說，AI 的效果會有一些局限性，不過整體上還是夠用的了。熟練掌握 AI 的使用后，如果圖標不是特別復雜，那么用 AI 來畫也可以，甚至可能更方便一些。

這一期的教程可能有些困難，并且自己最近一直失眠，寫的時候精神狀況有些不佳。如果看這篇教程遇到什么困難，歡迎留言。

原文地址：zhangboning.me
作者：@張泊寧研究所

本文由優設網原創翻譯，請尊重版權和譯者成果，轉摘請附上優設鏈接，違者必究。謝謝各位編輯同仁配合。

【優設網 原創文章 投稿郵箱：2650232288@qq.com】

 
================關于優設網================
"優設網uisdc.com"是一個分享網頁設計、無線端設計以及PS教程的干貨網站。
【特色推薦】
設計師需要讀的100本書：史上最全的設計師圖書導航：http://hao.uisdc.com/book/。
設計微博：擁有粉絲量67萬的人氣微博@優秀網頁設計 ，歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航：全球頂尖設計網站推薦，設計師必備導航：http://hao.uisdc.com
———————————————————–
想在手機上、被窩里獲取設計教程、經驗分享和各種意想不到的"福利"嗎？
添加 優秀網頁設計 微信號：【youshege】優設哥的全拼
您也可以通過掃描下方二維碼快速添加：