起點課堂會員權(quán)益
職業(yè)體系課特權(quán)
線下行業(yè)大會特權(quán)
個人IP打造特權(quán)
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導(dǎo)直播
12場專業(yè)技能直播
會員專屬社群
榮耀標識使用AI做UI設(shè)計系列教程：效果、外觀面板和質(zhì)感表現(xiàn)（下）
Hi！又到了教程時間了。在系列教程《使用AI做UI設(shè)計系列教程：效果、外觀面板和質(zhì)感表現(xiàn)（上）》里，講述了 Adobe Illustrator 里面的效果、外觀面板的一些基本概念；
上一個教程《使用AI做UI設(shè)計系列教程：效果、外觀面板和質(zhì)感表現(xiàn)（中）》里，介紹了生活中常見的幾種材質(zhì)的光學(xué)特性，并舉了兩個例子，介紹了如何用 AI 表現(xiàn)這樣的材質(zhì)。本次教程將要用一個實例，介紹一個圖標的質(zhì)感表現(xiàn)，是如何使用 AI 里面的效果等手法來表現(xiàn)的。嗯對了，用來作為「模特」的圖標就是這個，一個瀏覽器圖標：
不過，在具體討論這個圖標是如何表現(xiàn)之前，還是先說說關(guān)于圖標的一些基本知識吧。首先，大家都可以看出來，這個圖標是一個「擬物化」，或者可以稱作 「風(fēng)格化」的圖標。這種風(fēng)格的圖標使用了類似陰影、漸變、高斯模糊、羽化等手段，來表現(xiàn)材質(zhì)、光照、層次感等，使圖標看上去比較像現(xiàn)實世界中存在的一個物 體那樣。通過真實世界中對應(yīng)的隱喻，來讓用戶明白這個圖標背后 App 的作用，并喚起用戶的情感。
當然了，與此像對應(yīng)的，就是「扁平化」風(fēng)格的圖標了?！副馄交癸L(fēng)格的圖標，抽離掉了光影、材質(zhì)，只使用簡單的圖形、色彩來表現(xiàn)?！笖M物化」與「扁平化」風(fēng)格的對比，大概就是下面的樣子：
大家應(yīng)該都知道了，從 2012 年起，「擬物化」?；庶h與「扁平化」革命軍開始爆發(fā)流血沖突。特別是在 2012 年 WWDC 后，由于 iOS 6 仍舊使用傳統(tǒng)的「擬物化」風(fēng)格，造成「扁平化」革命軍的不滿，令流血沖突更是升級成為了全面戰(zhàn)爭。戰(zhàn)爭大概持續(xù)了一年，隨著于 2013 年 WWDC 發(fā)布的 iOS 7 系統(tǒng)內(nèi)置的圖標全面改為「扁平化」風(fēng)格。這場戰(zhàn)爭以「扁平化」革命軍勝利，「擬物化」?；庶h的敗走而終結(jié)。
為什么會形成「擬物化」?；庶h和「扁平化」革命軍兩派，并且爆發(fā)戰(zhàn)爭呢？在前些日子有不少討論了，每個設(shè)計師都有自己的說法。對此，我個人的觀點 嘛，舉個例子來說吧：以前，人們都過得很困苦，很多人平時連饅頭、面條、米飯都舍不得吃，一般吃飯就吃窩頭、棒渣粥，就著點兒咸菜，像餃子這種「美食」更 是一年才舍得吃一頓。改革開放后，大家都過上好日子了，就算是頓頓吃餃子也吃得起。于是很多人經(jīng)常吃大魚大肉，哪個肉放的多、油放的多、鹽放的多就吃啥。 結(jié)果是「三高」啊，心血管疾病的病患數(shù)量急劇升高。再后來，很多人又開始回歸粗糧、蔬菜等食品了，盡管大魚大肉地吃他們也絕對負擔得起。
也就是說，雖然現(xiàn)在很多人喜歡吃粗糧，不過跟以前那會兒是有本質(zhì)的區(qū)別的。區(qū)別就是，現(xiàn)在我們可以選擇吃精糧還是吃粗糧，以前沒有這種選擇。GUI 的演化也是如此。
從前在 Apple II 和 IBM PC 那個時代啊，不僅電腦屏幕小，分辨率還都很低，而且色彩表現(xiàn)能力極為有限。比如曾經(jīng)很流行的，曾用于 Windows 1.x、2.x 系列的 CGA 標準，一般分辨率只是 320×200，只有 16 種顏色可以顯示。在這樣的情況下，GUI 的表現(xiàn)受到了極大的限制，舉幾個古時候的 GUI 作為例子：
這是 Visual Basic DOS 版（嗯，VB 這貨還有 DOS 版）的界面創(chuàng)建器，工作在 DOS 的字符模式下。注意看，這個界面的一切元素，都是基于類似制表符、空格、小數(shù)點這樣的字符來實現(xiàn)的。當時很多基于 DOS 帶 GUI 的程序，比如晚期 DOS 里內(nèi)置的http://edit.com 文本編輯器，都是通過類似這樣的，基于字符顯示模式來表現(xiàn) GUI。VB for DOS 可以說是這這種基于字符 GUI 的極致了，僅用字符就實現(xiàn)了窗體和幾乎所有常用的控件，甚至實現(xiàn)了窗體的陰影效果。現(xiàn)在這種字符 GUI 在某些場合、領(lǐng)域依然存在，普通人比較容易接觸到的就是 PC 機的 BIOS 界面，還有 Linux/Unix 里的一些程序至今依然使用這樣的字符 UI。
這個是我自己截取的 Windows 2.03 的截圖，工作在 DOS 的圖形模式下，VGA 屏幕（640×480，16 色）?？梢钥吹綀D標都是簡單的黑白圖形，窗體、控件也是標準的「扁平化」風(fēng)格。因為當年流行的屏幕表現(xiàn)力通常很差，并且電腦帶不起來高分辨率、色彩豐富的 界面，只能表現(xiàn)成這個樣子。
然后，隨著顯示器和電腦硬件的進步，VGA、SVGA 等高級一些的顯示標準開始普及起來。于是流行的 GUI 開始變成了這樣的風(fēng)格：
這兩個都是 Windows 3.2 系統(tǒng)界面。可以看到，GUI 開始使用高光和陰影來表現(xiàn)控件的立體感，并且圖標也開始帶有色彩，試圖呈現(xiàn)現(xiàn)實世界中的物件。
這張截圖，從外到內(nèi)為 Windows Vista、XP、3.2. 可以看到，隨著顯示設(shè)備的進步和計算機性能的提高，Windows 的 UI 經(jīng)歷了怎樣的一套演化流程。
（上面的三張圖都是自己截取的。如果想更多了解 GUI 演化歷史，可以參看Graphical User Interface Gallery 這個著名的網(wǎng)站）。
移動設(shè)備也不利外，早期像 Newtown PDA 這樣的設(shè)備只能顯示黑白畫面。演化到 Windows Mobile 時代后，流行的顯示屏最開始是 240×320, 256 色，后來演變到 640×480 , 65536 色這樣的。再然后是 iPhone 的 320×480，32 位真彩色。與此同時，GUI 也正像從前在電腦上發(fā)生過的那樣，從黑白線條風(fēng)格，逐漸變成了彩色像素小圖標，然后是 iPhone OS 的水晶質(zhì)感圖標、「立體」控件。最終，「擬物化」風(fēng)格在搭載 Retina 顯示屏的 iPhone 4 上市后達到了頂峰，因為 Retina 顯示屏清晰銳利的屏幕，非常適合表現(xiàn)材質(zhì)質(zhì)感。
不過，當「擬物化」風(fēng)格大行其道后，種種弊端開始顯現(xiàn)出來。比如，不是每個 App 都有對應(yīng)在現(xiàn)實世界中的隱喻。而且，「擬物化」風(fēng)格容易讓人把注意力從內(nèi)容本身轉(zhuǎn)移到界面上。還有，過度的「擬物化」風(fēng)格圖標的堆積容易給人以不一致感。 因此，爆發(fā)了上面所說的，「擬物化」保皇黨和「扁平化」革命軍的沖突，最終「扁平化」獲勝，開始流行起來。
可能有人會問，既然現(xiàn)在是「扁平化」的天下了，那為什么還要用「擬物化」風(fēng)格的圖標舉例講述呢？答：這一期講的就是如何用 AI 表現(xiàn)質(zhì)感和光影啊。再說了，現(xiàn)在「擬物化」風(fēng)格也沒有完全消亡，不信看看 iOS 7 內(nèi)置的備忘錄應(yīng)用。
然后再說說如何做出一個好的「擬物化」風(fēng)格圖標。根據(jù)個人經(jīng)驗，做好「擬物化」風(fēng)格的圖標，主要依靠幾點：
- 注重細節(jié)；
- 保證圖標的辨識度；
- 控制細節(jié)的數(shù)量；
前兩點都好理解，著重說一下第三點。做「擬物化」風(fēng)格的圖標，堆砌大量的細節(jié)不是一個明智的做法。因為，除非做 OS X App 那樣的圖標，絕大多數(shù)系統(tǒng)應(yīng)用程序的圖標分辨率都比較低的，例如 iPhone iOS 7 圖標分辨率是 120×120，在這樣的分辨率下顯然不適合堆砌細節(jié)。并且，堆砌細節(jié)容易給人造成認知上的困難，并很容易造成混亂、不一致感。再有，堆砌細節(jié)還很容易降 低圖標的辨識度。因此，雖然基于矢量的 Adobe Illustator 很適合用可無限縮放的矢量圖形堆砌細節(jié)，不過不建議這樣做。
好了，現(xiàn)在可以開始進入正題——解析上面的那個圖標是如何表現(xiàn)的了。這個瀏覽器的圖標，放在了一個類似 App Launcher 的展示界面里：
展示界面是單獨的一個 AI 文件，里面以外部文件鏈接的形式，嵌入了幾個圖標。AI 嵌入外部文件很簡單，只要把外部文件直接拖拽進去就可以了。外部文件發(fā)生改動，更新后，AI 會自動更新，非常方便。并且外部文件拖拽進去后，可以像在 AI 里創(chuàng)建的矢量圖形一樣加上效果。比如，這個展示界面上，所有的圖標都加了一個陰影效果。由于這套圖標的光源方向是從上到下，因此陰影方向也是豎直向下。陰 影不要弄得過重，淡淡的一層就很好：
加入陰影效果，使得這套圖標看起來更符合人們的視覺經(jīng)驗，并能更好地將圖標層與背景層區(qū)分開來。
每個圖標都是一個單獨的文件。這個瀏覽器圖標也不例外，文件整體是這樣的：
這個圖標文件由四個圖層組成，分別是「基座」、內(nèi)容層、「蓋子」、參考線：
那么，就一層一層來說吧。
最下面的一層也是最復(fù)雜的一層，是這個圖標的「基座」，由兩個矢量對象組成：
灰白色的底層很簡單，沒有描邊，只有一個填色層，方向是從上到下，模擬光源自頂向下照射。
灰框藍色的基座就比較復(fù)雜了，這個矢量對象的外觀面板嘛……是這個樣子：
一共有兩個描邊層，六個填色層。
似乎的確有些復(fù)雜，那么稍做簡化一下吧。在「外觀」面板里，只保留兩個描邊和藍色填色層的可見性。這樣，可以清楚地看到這個矢量圖形主體元素：
兩個描邊的作用，是用來表現(xiàn)銀色邊框。兩個邊框均為沿圖形內(nèi)側(cè)對齊，上面的是 2px 寬度，下面的是 3px 寬度，用不同的灰度來表現(xiàn)邊框的立體感。邊框的材質(zhì)假定是一種稍微粗糙一些的金屬，有一個自頂向下照射的光源和環(huán)境光。在上一個教程里，介紹了金屬材質(zhì)的 光學(xué)特性。金屬材質(zhì)在單一光源照射下，會有一個特別亮的高光區(qū)，并且高光區(qū)在邊緣處亮度會很快地衰減。因此，在這里同理，為模擬這樣的金屬材質(zhì)，描邊的漸 變應(yīng)該做類似這樣的設(shè)置：
在邊框下面的是藍色漸變的填色層，填色層一共有四個效果：
首先是一個「位移路徑」效果（實際上個人覺得譯為「偏移路徑」更好，英文原文是 Offset Path）。這個效果的作用是，讓矢量圖形收縮／擴張指定像素的大小。在這里，將「位移」數(shù)值設(shè)定為 “-1″，即向內(nèi)收縮 1px 大小。為什么要這樣做？如果不這樣做的話，那么在邊框的邊緣處，藍色底座會被隱約看到，特別是在圖像縮小查看時：
產(chǎn)生這種情況的原因是 AI 默認是以消鋸齒的方式填充顏色。在執(zhí)行消鋸齒操作時，圖形邊緣的像素會被設(shè)置為半透明。所以在邊框處的藍色「細線」，實際上是邊框邊緣的半透明像素疊加到 藍色基座的半透明像素上，因此看上去是暗藍色。所以，首先要給圖形加上一個「位移路徑」效果，避免邊緣出現(xiàn)藍色的「細線」。
接下來是一個「內(nèi)發(fā)光」效果，給圓形底座的邊緣加上陰影效果，增加真實感：
對比沒有加入陰影效果的情況：
再下面是兩個「投影」效果，為底座附近的表面增添凹凸感。上面的投影顏色是黑色，下面的投影顏色為白色，模擬一個下凹效果。下面是加投影和未加投影的對比：
上面說的就是兩個描邊和藍色填色層的作用和效果，接下來繼續(xù)說說剩下的五個填色層。最上面位于描邊之上的兩個半透明填色層實際上分別是兩個徑向漸變，其作用是，為邊框的邊緣增加細微的陰影效果，對比如圖：
最下面的三個填色層附帶的效果是這樣的：
這三個填色層由于在藍色的填色層下，所以填色層本身實際上是不能被看到的。三個填色層可以使用任意的顏色，只是可見度要設(shè)置為 100%，即完全可見。加入這三個填色層的目的，是為了給圖形加上細微的光影效果，對比如下：
上面說的就是是底座圖層了。上面的幾個圖層就很簡單了。底座層上面是內(nèi)容層?，F(xiàn)在內(nèi)容層里只有一個文字對象，文字對象加上了變形、羽化、外發(fā)光等效果，讓文字看上去是在發(fā)光，如圖：
再上面是「蓋子」，也很簡單了。下面是一個圓形，上面是一個橢圓。模擬一個圓形的燈光光源，從頂向下照射到一個光滑的球面玻璃表面上。兩個矢量對象均沒有描邊，填充色都是半透明漸變：
最上面就是參考線圖層了：
（回憶一下，怎么用 AI 做出這樣的參考線？）
差不多就是這個樣子了?？梢钥吹?，雖然可能相對于 PS 這樣的像素圖處理工具來說，AI 的效果會有一些局限性，不過整體上還是夠用的了。熟練掌握 AI 的使用后，如果圖標不是特別復(fù)雜，那么用 AI 來畫也可以，甚至可能更方便一些。
這一期的教程可能有些困難，并且自己最近一直失眠，寫的時候精神狀況有些不佳。如果看這篇教程遇到什么困難，歡迎留言。
原文地址：zhangboning.me
作者：@張泊寧研究所
原文來自：優(yōu)設(shè)網(wǎng)
使用AI做UI設(shè)計系列教程系列
看懂了一點點，贊一個