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

上一個(gè)教程《使用AI做UI設(shè)計(jì)系列教程：效果、外觀面板和質(zhì)感表現(xiàn)（中）》里，介紹了生活中常見的幾種材質(zhì)的光學(xué)特性，并舉了兩個(gè)例子，介紹了如何用 AI 表現(xiàn)這樣的材質(zhì)。本次教程將要用一個(gè)實(shí)例，介紹一個(gè)圖標(biāo)的質(zhì)感表現(xiàn)，是如何使用 AI 里面的效果等手法來(lái)表現(xiàn)的。嗯對(duì)了，用來(lái)作為「模特」的圖標(biāo)就是這個(gè)，一個(gè)瀏覽器圖標(biāo)：

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

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

當(dāng)然了，與此像對(duì)應(yīng)的，就是「扁平化」風(fēng)格的圖標(biāo)了?！副馄交癸L(fēng)格的圖標(biāo)，抽離掉了光影、材質(zhì)，只使用簡(jiǎn)單的圖形、色彩來(lái)表現(xiàn)?！笖M物化」與「扁平化」風(fēng)格的對(duì)比，大概就是下面的樣子：

大家應(yīng)該都知道了，從 2012 年起，「擬物化」保皇黨與「扁平化」革命軍開始爆發(fā)流血沖突。特別是在 2012 年 WWDC 后，由于 iOS 6 仍舊使用傳統(tǒng)的「擬物化」風(fēng)格，造成「扁平化」革命軍的不滿，令流血沖突更是升級(jí)成為了全面戰(zhàn)爭(zhēng)。戰(zhàn)爭(zhēng)大概持續(xù)了一年，隨著于 2013 年 WWDC 發(fā)布的 iOS 7 系統(tǒng)內(nèi)置的圖標(biāo)全面改為「扁平化」風(fēng)格。這場(chǎng)戰(zhàn)爭(zhēng)以「扁平化」革命軍勝利，「擬物化」?；庶h的敗走而終結(jié)。

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

也就是說(shuō)，雖然現(xiàn)在很多人喜歡吃粗糧，不過跟以前那會(huì)兒是有本質(zhì)的區(qū)別的。區(qū)別就是，現(xiàn)在我們可以選擇吃精糧還是吃粗糧，以前沒有這種選擇。GUI 的演化也是如此。

從前在 Apple II 和 IBM PC 那個(gè)時(shí)代啊，不僅電腦屏幕小，分辨率還都很低，而且色彩表現(xiàn)能力極為有限。比如曾經(jīng)很流行的，曾用于 Windows 1.x、2.x 系列的 CGA 標(biāo)準(zhǔn)，一般分辨率只是 320x200，只有 16 種顏色可以顯示。在這樣的情況下，GUI 的表現(xiàn)受到了極大的限制，舉幾個(gè)古時(shí)候的 GUI 作為例子：

這是 Visual Basic DOS 版（嗯，VB 這貨還有 DOS 版）的界面創(chuàng)建器，工作在 DOS 的字符模式下。注意看，這個(gè)界面的一切元素，都是基于類似制表符、空格、小數(shù)點(diǎn)這樣的字符來(lái)實(shí)現(xiàn)的。當(dāng)時(shí)很多基于 DOS 帶 GUI 的程序，比如晚期 DOS 里內(nèi)置的http://edit.com 文本編輯器，都是通過類似這樣的，基于字符顯示模式來(lái)表現(xiàn) GUI。VB for DOS 可以說(shuō)是這這種基于字符 GUI 的極致了，僅用字符就實(shí)現(xiàn)了窗體和幾乎所有常用的控件，甚至實(shí)現(xiàn)了窗體的陰影效果?，F(xiàn)在這種字符 GUI 在某些場(chǎng)合、領(lǐng)域依然存在，普通人比較容易接觸到的就是 PC 機(jī)的 BIOS 界面，還有 Linux/Unix 里的一些程序至今依然使用這樣的字符 UI。

這個(gè)是我自己截取的 Windows 2.03 的截圖，工作在 DOS 的圖形模式下，VGA 屏幕（640x480，16 色）?？梢钥吹綀D標(biāo)都是簡(jiǎn)單的黑白圖形，窗體、控件也是標(biāo)準(zhǔn)的「扁平化」風(fēng)格。因?yàn)楫?dāng)年流行的屏幕表現(xiàn)力通常很差，并且電腦帶不起來(lái)高分辨率、色彩豐富的界面，只能表現(xiàn)成這個(gè)樣子。

然后，隨著顯示器和電腦硬件的進(jìn)步，VGA、SVGA 等高級(jí)一些的顯示標(biāo)準(zhǔn)開始普及起來(lái)。于是流行的 GUI 開始變成了這樣的風(fēng)格：

這兩個(gè)都是 Windows 3.2 系統(tǒng)界面?？梢钥吹?，GUI 開始使用高光和陰影來(lái)表現(xiàn)控件的立體感，并且圖標(biāo)也開始帶有色彩，試圖呈現(xiàn)現(xiàn)實(shí)世界中的物件。

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

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

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

不過，當(dāng)「擬物化」風(fēng)格大行其道后，種種弊端開始顯現(xiàn)出來(lái)。比如，不是每個(gè) App 都有對(duì)應(yīng)在現(xiàn)實(shí)世界中的隱喻。而且，「擬物化」風(fēng)格容易讓人把注意力從內(nèi)容本身轉(zhuǎn)移到界面上。還有，過度的「擬物化」風(fēng)格圖標(biāo)的堆積容易給人以不一致感。因此，爆發(fā)了上面所說(shuō)的，「擬物化」?；庶h和「扁平化」革命軍的沖突，最終「扁平化」獲勝，開始流行起來(lái)。

可能有人會(huì)問，既然現(xiàn)在是「扁平化」的天下了，那為什么還要用「擬物化」風(fēng)格的圖標(biāo)舉例講述呢？答：這一期講的就是如何用 AI 表現(xiàn)質(zhì)感和光影啊。再說(shuō)了，現(xiàn)在「擬物化」風(fēng)格也沒有完全消亡，不信看看 iOS 7 內(nèi)置的備忘錄應(yīng)用。

然后再說(shuō)說(shuō)如何做出一個(gè)好的「擬物化」風(fēng)格圖標(biāo)。根據(jù)個(gè)人經(jīng)驗(yàn)，做好「擬物化」風(fēng)格的圖標(biāo)，主要依靠幾點(diǎn)：

1. 注重細(xì)節(jié)；
2. 保證圖標(biāo)的辨識(shí)度；
3. 控制細(xì)節(jié)的數(shù)量；

前兩點(diǎn)都好理解，著重說(shuō)一下第三點(diǎn)。做「擬物化」風(fēng)格的圖標(biāo)，堆砌大量的細(xì)節(jié)不是一個(gè)明智的做法。因?yàn)?，除非?OS X App 那樣的圖標(biāo)，絕大多數(shù)系統(tǒng)應(yīng)用程序的圖標(biāo)分辨率都比較低的，例如 iPhone iOS 7 圖標(biāo)分辨率是 120x120，在這樣的分辨率下顯然不適合堆砌細(xì)節(jié)。并且，堆砌細(xì)節(jié)容易給人造成認(rèn)知上的困難，并很容易造成混亂、不一致感。再有，堆砌細(xì)節(jié)還很容易降低圖標(biāo)的辨識(shí)度。因此，雖然基于矢量的 Adobe Illustator 很適合用可無(wú)限縮放的矢量圖形堆砌細(xì)節(jié)，不過不建議這樣做。

好了，現(xiàn)在可以開始進(jìn)入正題——解析上面的那個(gè)圖標(biāo)是如何表現(xiàn)的了。這個(gè)瀏覽器的圖標(biāo)，放在了一個(gè)類似 App Launcher 的展示界面里：

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

加入陰影效果，使得這套圖標(biāo)看起來(lái)更符合人們的視覺經(jīng)驗(yàn)，并能更好地將圖標(biāo)層與背景層區(qū)分開來(lái)。

每個(gè)圖標(biāo)都是一個(gè)單獨(dú)的文件。這個(gè)瀏覽器圖標(biāo)也不例外，文件整體是這樣的：

這個(gè)圖標(biāo)文件由四個(gè)圖層組成，分別是「基座」、內(nèi)容層、「蓋子」、參考線：

那么，就一層一層來(lái)說(shuō)吧。

最下面的一層也是最復(fù)雜的一層，是這個(gè)圖標(biāo)的「基座」，由兩個(gè)矢量對(duì)象組成：

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

灰框藍(lán)色的基座就比較復(fù)雜了，這個(gè)矢量對(duì)象的外觀面板嘛……是這個(gè)樣子：

一共有兩個(gè)描邊層，六個(gè)填色層。

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

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

在邊框下面的是藍(lán)色漸變的填色層，填色層一共有四個(gè)效果：

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

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

接下來(lái)是一個(gè)「內(nèi)發(fā)光」效果，給圓形底座的邊緣加上陰影效果，增加真實(shí)感：

對(duì)比沒有加入陰影效果的情況：

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

上面說(shuō)的就是兩個(gè)描邊和藍(lán)色填色層的作用和效果，接下來(lái)繼續(xù)說(shuō)說(shuō)剩下的五個(gè)填色層。最上面位于描邊之上的兩個(gè)半透明填色層實(shí)際上分別是兩個(gè)徑向漸變，其作用是，為邊框的邊緣增加細(xì)微的陰影效果，對(duì)比如圖：

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

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

上面說(shuō)的就是是底座圖層了。上面的幾個(gè)圖層就很簡(jiǎn)單了。底座層上面是內(nèi)容層?，F(xiàn)在內(nèi)容層里只有一個(gè)文字對(duì)象，文字對(duì)象加上了變形、羽化、外發(fā)光等效果，讓文字看上去是在發(fā)光，如圖：

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

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

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

差不多就是這個(gè)樣子了?？梢钥吹?，雖然可能相對(duì)于 PS 這樣的像素圖處理工具來(lái)說(shuō)，AI 的效果會(huì)有一些局限性，不過整體上還是夠用的了。熟練掌握 AI 的使用后，如果圖標(biāo)不是特別復(fù)雜，那么用 AI 來(lái)畫也可以，甚至可能更方便一些。

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

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

本文由優(yōu)設(shè)網(wǎng)原創(chuàng)翻譯，請(qǐng)尊重版權(quán)和譯者成果，轉(zhuǎn)摘請(qǐng)附上優(yōu)設(shè)鏈接，違者必究。謝謝各位編輯同仁配合。

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：2650232288@qq.com】

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