使用ILLUSTRATOR做UI設計系列教程

  　　使用Adobe Illustrator 做UI設計教程(一)

　　我從 2012 年初開始嘗試使用 AI 來完成一些設計與創作，一直至今。個人感覺，AI 雖然有不少難用的地方，但是非常適合用於 UI 設計。甚至在很多方面，用 AI 來代替 PS 做設計更加高效、方便。主要原因是：

　　AI 的強項在於對矢量圖的處理。先哲有雲：「如果希望在計算機裡從無到有『生成』一張圖像，通常矢量圖創作軟件更適合一些，除了需要類似使用數位版手繪等那樣的特殊場合」。特別是在 UI 設計、Web 設計領域，絕大多數時候並不需要結構和色彩非常復雜的圖形。大多就是需要矩形、橢圓、圓角矩形這些很簡單的幾何形狀。因此，在這一點上，PS 等圖像處理軟件相對於 AI 來講，沒有太多的優勢。

　　在 AI 裡，可以較為方便地完成從排版布局、繪制圖形、上色、切圖導出這樣的全部一套流程。意味著用 AI 做設計時，不必要中途換軟件環境。例如很多設計師用 PS 做設計時要開著一個 AI，先用 AI 畫基本形，然後把 AI 裡的圖形作為智能對象復制到 PS 裡，然後用 PS 繼續創作。而用 AI 幾乎就可以完全避免這樣中途換軟件的情況。

　　AI 提供的一系列功能極其適用於排版布局。比如在 PS 裡，參考線只是橫著豎著的直線對吧;而在 AI 裡，參考線可以是任何形狀。參考線不是無限長?沒問題!參考線是斜線?沒問題!畫個長方形甚至畫個圈當參考線用?也沒問題!

　　由於 AI 的創作主要是是基於矢量對象，所以在 AI 裡，大多數操作都是可逆、可以在後期修改的。比如畫一個按鈕，可以很容易在後期調整按鈕圓角的半徑大小，同時保持按鈕的圖形樣式不變。畫一個六邊形同樣也可以加圓角，並在後期修改圓角大小。

　　AI 裡基於矢量對象的吸附、對齊功能相當好用，且在 UI 設計中相當常用。

　　由於 AI 有豐富的矢量效果(類似 PS 的濾鏡和圖層樣式)，因此 AI 退可做扁平，進可做擬物。下面這兩張圖就是用 AI 繪制的，完全沒有用到除 AI 之外的其他軟件：

　　當然了，做扁平化設計 AI 就更不在話下了。

　　AI 基於矢量對象的導出功能很好用，這一點將在後面的教程中講到。並且 AI 可以將圖稿導出為 SVG 格式的成品，很適合用在 Web 上。

　　AI 做出來的東西可以導出到任意大尺寸，而不會有「虛邊」情況。這一點特別適合用於設計不同分辨率的圖標，以及做 Retina 適配。

　　AI 對於 Retina MacBook Pro 的支持非常好。

　　對了，AI 在 CS5 就可以做到將矢量圖形對齊到像素了，因此不用擔心導出出來的切圖裡，直線沒有准確對上像素，因此帶來發虛的情況。

　　如果偶爾要排個版做個冊子的話，AI 遠比 PS 適合。

　　還有很多一時想不出的優點……

　　因此，即使 PS 功能相當強大，並且網上有更多的學習資源以及素材資源，對於我來說，AI 仍然是不可替代的。

　　接下來我將要寫的一些教程，內容主要是針對 AI 在 UI 設計中的一些進階使用技巧。

　　因此，這些教程可能更適合對於 AI 已經有一定了解的用戶來閱讀，可能對於 AI 的基本使用功能不會介紹太多。一是因為大多數 AI 的基本功能在 Adobe 的官方文檔上都會有介紹：Illustrator Help ;二是出於篇幅和個人時間、精力的限制;三是我相信，學習一個軟件、能力最好的辦法就是 learn it the hard way，即在一定的壓力或困難下完成學習，比如在學習 AI 遇到類似某某某功能找不到這樣的困難時，自己通過搜索引擎或官方文檔或通過自己嘗試，找到解決方案，要比直接問別人效果要好得多。

　　Adobe Illustrator 現在最高的版本是 CC，即 Creative Cloud。我將寫的一系列教程要求您用的 AI 最低版本為 CS6，因為 CS6 的一些很基礎的功能在之前的版本裡是沒有的。當然如果您用的是 CC 版本最好了。

　　使用 Adobe Illustrator 做 UI 設計(二)—— 多重填充與多重描邊

　　在這之前，說說計算機圖形(注意：非圖像)的一些基本知識。如果您用 PS 或 AI 比較多的話，可能會知道，計算機圖形的最基本要素有兩個：填充和描邊。填充和描邊可以是純色，也可以是紋理，還可以是漸變。總之，一個形狀確定了填充和描邊後，這個圖形的樣式就確定下來了。

　　自然，作為矢量圖繪制軟件，AI 也可以處理圖形的填充和描邊。不過，AI 有一個很強大的地方是——在 AI 裡，一個圖形是可以有好幾個填充和好幾個描邊的。有人可能會問，這個特性有用嗎?實際上，這是一個相當實用且強大的功能。我們通過完成一個實例來看一下：使用 AI 繪制這樣一個知乎樣式的按鈕：

　　首先，在新建文檔之前，要確保 AI 使用的單位是像素，而不是英寸、點、厘米或別的。這一點很重要，關系到導出的切圖是否為 pixel-perfect。在首選項裡可以設置 AI 使用的單位是什麼：

　　確保 AI 使用的單位是像素後，新建一個文檔，文檔的大小為 320 x 480 像素，顏色模式選為 RGB，並確認「使新建對象與像素網格對齊」沒有被勾選上。如圖：

　　在這裡要說明一下，AI 在 CS5 開始，支持將對象對齊到像素網格，這一點在 UI 設計中很重要。不過為什麼在新建文檔時不把「使新建對象與像素網格對齊」選項勾上呢?我在多次創作過程中發現，將對象一開始就對齊到像素網格，帶來的麻煩遠比帶來的便利要多。並且，對齊到像素網格可以在後期時來做。因此，在這裡先不要勾上。

　　一般來說，做 UI 設計、海報設計什麼的，如果不是特殊的需要，最好不要使用純黑、純白、純紅(#FF0000)這樣的顏色。一是因為純黑與純白這樣的顏色之間造成的對比讓人感覺很不舒服，二是自然界幾乎沒有看上去純黑和純白的物體，不符合人們的生活經驗。因此，我們給背景加上一個淺灰的顏色。即看上去和白色差不多，但又不是純白，而是稍微偏暗一些的顏色。在默認圖層裡新建一個矩形，覆蓋整個畫板，填充顏色設置為 #E6E6E6，去掉描邊，將默認圖層名稱改為 Backgound，並鎖定這個圖層，防止以後誤操作。做好之後，看上去應該是這樣:

　　然後，開始畫按鈕了。我們希望在畫面的正中位置附近畫一個大小為 72×32 像素的圓角按鈕。所以，新建一個圖層，命名為”Button”。再新建一個矩形，然後把矩形的大小設置為 72x31。之所以將矩形的寬度設置為 31 而非 32，是因為接下來要給矩形畫一個凹陷效果，這個要額外占用一個像素的高度，故設置為 31 而非 32 像素高。

　　由於人眼有視錯覺，如果把按鈕畫在畫板的正中心的話，人眼看上去感覺是在正中心偏下一些。因此，為平衡人眼的視錯覺，按鈕的位置要稍微高出正中心一些。把矩形按鈕的正中心設置為 (160，209.5 )處。將縱座標設置為一個小數的原因是，這樣可以做到像素對齊。當然，如果用對齊到像素網格功能也可以做到。這兩步完成後，矩形應該是這個位置(為方便查看位置，我把矩形換了一個填充顏色)：

　　接著，給矩形做圓角效果。選中矩形，然後使用「效果」-›「風格化」-›「圓角…」這個命令，給矩形加上一個 5 像素大小的圓角效果。加上後效果如圖：

　　現在在「外觀」面板裡，可以看到「圓角」這個效果已經添加進去了。在接下來的步驟中，要始終保持「圓角」在最上方：

　　再給按鈕換一個底色，顏色是 #8CE01E。接下來，要進入重頭戲了。點擊「外觀」面板下的「添加新填色」按鈕(即 “fx” 按鈕左邊的那個)，再新建一個填色層，顏色為純白到純黑的漸變，方向是從上到下，透明度為 20%，混合模式為「明度」。完成後畫板和外觀面板看起來應該類似這樣：

　　這樣，可以看到，通過一個底色填色層，和一個明暗漸變填色層，我們成功地做出了色彩明