用Illustrator玩UI設計：設計新手也能輕鬆搞定網站與App介面設計

序

運用Adobe Illustrator 來玩UI 設計

我很明白這輩子就是自食其力的命。打從網際網路還在襁褓期的時候，我就選擇了平面設計師這一行，來作為職業生涯的的起步。當時學習了多種拼貼的技法，以及創作不少的麥克筆構圖作品，後來才知道同樣的差事在電腦上就能快速完成；等到我離開了學校時，那些實用的技能反而很快地顯得過氣。為了跟上時代，當時就傾我所能地買了一台嶄新的Wintel PC，外加一套CorelDraw 軟體，然後走上數位平面設計的道路。誰知道多年之後，我的印前功夫幾乎都派不上用場。就在那同時，我申請了一個Earthlink 帳號，並在Geocities 上建立了一個網站，當成學習HTML 的實驗室，而當時的動機也只是出於好奇而已。

從網路開始思考

在1998 年我買了自己的第一台Mac，然後同年就設計與建置好第一個客戶端網站（如圖I.A）。我運用Photoshop 來構築各頁面的原始樣貌，並將整個圖面切成一個表格化的版面（唉∼）；而標記部分的撰寫，則是以Dreamweaver 來進行。雖然那個網站與今日隨處可見的站台相較，是那樣地粗糙且不夠成熟，但我依舊記得在看見它誕生時、心中所體驗到的喜悅之情。而在第一個網站問世後的這些年來，我也不斷地在自我砥礪、試著讓工作流程發揮其應有的效率，不過總是很難找到一種兼具速度與創意的最佳方法。

近年來，我的事業轉進至互動設計和使用介面設計的領域之中；而且自從著手為網路應用程式與行動裝置設計UI 後，先前我在擔任平面與網站設計師時所學到的那些技巧，也隨著提升到一個全新的層次。就像許多同行一樣，我每天使用Photoshop 來完成我的設計工作。這套軟體讓我最欣賞的地方，就是能夠建立出每一分像素都相當完美的介面原型；然而比較遺憾的地方，在於它執行上述工作時又相當地缺乏彈性。在我經常使用的設計工具中，雖然也有另一套軟體，不過多半都是用來作為支援Photoshop 之用；這套軟體就是Adobe Illustrator，它的速度和向量繪圖功能皆深得我心。我試過好幾個版本，用它們來建構網頁版型和應用程式的UI，然而都只能在線架構圖止步，最後還是得回到Photoshop 來完成工作。

後來令人驚訝的事情發生了。在2010 年初，Adobe 發表了Illustrator CS5，其中搭載了不少與處理像素有關的出色功能。儘管先前曾經遇到過一些問題，而且在升級過程中也有些猶豫，但我還是決定放手一搏。讓人意想不到的是，不僅一切都相當順利，同時我也無後顧之憂地將工作流程轉移到這個工具上。現在面對最新的版本CS6，我已經能夠更快速且有效的運用這套工具，而且對我的創意發想一點兒也不會造成阻礙。

本書滿足你哪些需要？

你也許是一位經驗豐富且孰悉Photoshop 的設計老手，一位剛畢業不久的菜鳥設計師，或是有點設計天分、但需要加強美學視野的業餘愛好者。不管你的背景為何，本書都將會引導你如何以非常快速的有效率的手法，製作出忠於原始想法的視覺版型。儘管內容中有提到一些針對UI 元素設計的繪圖技法與竅門，但本書並不打算深入探討插畫設計的創作方法，而是把重心放在如何讓你的設計作品、完美融入到一個充滿凝聚力的結構之中，進而打造出整個介面體驗。無論讀者的經驗或等級為何，都能在本書內容中找到實用的資訊。

相較於我入行那時，今日的網站與應用程式已經有了相當大的不同。就網路方面來說，HTML5 和CSS3 等技術大幅度地降低了對圖形的需求，同時還帶動了那些網站在設計上、考慮去適應可能用來瀏覽的那些裝置硬體之執行條件。我可以肯定的說，要想在這行成為偉大的設計師，你就得明瞭要如何把你的設計加以程式化；同樣重要的是，要知道如何針對螢幕的需求去設計（不管尺寸為何），而瞭解程式將對此大有助益。這和為出版品頁面去設計並不相同；儘管如此，我不會像多數人那樣，堅信應該從頭到尾都在瀏覽器中來完成這個設計。就我來說，先在紙上進行構思、然後在Illustrator 內成形，這樣設計起來會更加快速。本書中所談到的這些技法，讓我能更快地針對某個設計、去嘗試不同的靈感，然後把好的想法保留下來，或將合適的點子運用在專案上。

一種熟悉的感覺

如果你有使用Photoshop 或InDesign 的經驗，就會對許多在Illustrator 裡的觀念感覺到似曾相識，這都是經過精心設計的結果。Adobe Creative Suite 之中大多數的應用軟體，在使用者介面上有著共通的風格（如圖I.B），所以彼此之間能夠合作無間，這也讓Illustrator 的學習曲線得以大幅縮短。然而就算你從未使用過任何Adobe 的應用軟體，也不會覺得毫無頭緒；你會發現到這條學習曲線，雖然有點兒陡峭，但會充滿樂趣且易於上手。就像所有事情一樣，關鍵在於耐心和持續練習。一旦你熟悉Illustrator 後，就會為自己過去怎麼沒有想到把它用在網站或應用程式設計，而感到難以理解。

順帶一提，我是個鍵盤快捷鍵的重度愛好者。俗話說「熟能生巧」，因此書中到處都會提及鍵盤快捷鍵，讓它們變得易於學習與記憶。說真的，我很討厭從選單內點選指令；假使看完本書之後，你滿腦子都是各式各樣的快捷鍵，那麼就會發現這點錢投資花得非常值得。不過就算如此，我還是會提供數種不同的達成方式，讓你來決定哪一種最適合自己使用。（希望會是快捷鍵這個方法，拜託拜託∼）

讓我們開始吧！

在我身為設計師的職業生涯中，大多數的時候都是使用Illustrator 來創作插畫與設計商標；雖然在網站設計方面，我也會用到其它的應用軟體，但這時就必須「捨棄」多年來培養而成的許多習慣。假使你以前不曾使用過Illustrator，其實可以放鬆心情讓自己逐漸進入狀況。在你初次打開這套軟體時，或許會有點感到不安；主要其是因為介面風格以實用為訴求，所以剛開始容易讓人為之卻步。看著這些工具、面板、以及一片空白的畫面，你可能會覺得說：「我要從哪兒開始著手？」

這一切能量都是要協助你建立一個適合自己的彈性工作流程，而非為了強迫你去適應這套應用軟體。Illustrator 可允許使用者自訂工作環境，因此你可以安排面板、工具和選單，以符合你的工作風格與流程；加上由於其以物件為基礎的本質，你可以無畏地輕鬆改變先前的調整，或實驗不同的配置方式。

「從做中學」是我的風格，因此本書會教你如何運用各種不同的工具，來建立某個UI 原型的畫面。在你進行整個過程時，請務必確認都有將作品加以儲存；然而若忘記的話，你可以前往www.peachpit.com/UIwithAI 去下載該原型的各個階段，以及其它豐富的實用範例。所以不妨找個舒服的姿勢坐下，喝一口能夠讓你提神的飲料，然後釋放腦海中無窮的靈感，盡情地探索運用Illustrator 來實現創意的各種方法吧！

序

運用Adobe Illustrator 來玩UI 設計

我很明白這輩子就是自食其力的命。打從網際網路還在襁褓期的時候，我就選擇了平面設計師這一行，來作為職業生涯的的起步。當時學習了多種拼貼的技法，以及創作不少的麥克筆構圖作品，後來才知道同樣的差事在電腦上就能快速完成；等到我離開了學校時，那些實用的技能反而很快地顯得過氣。為了跟上時代，當時就傾我所能地買了一台嶄新的Wintel PC，外加一套CorelDraw 軟體，然後走上數位平面設計的道路。誰知道多年之後，我的印前功夫幾乎都派不上用場。就在那同時，我申請了一個Earthlink 帳號，並...

作者感言
序文
Chapter 1 如何運用Illustrator 來玩UI 設計
向量架構的優勢
文字藝術與色彩相結合的魅力
從UI 設計談文字藝術
一致性的設計
精準的版型成品
本章結語

Chapter 2 工具與面板
工具的選擇
「選取」工具系列
繪圖作業
文字藝術
變形工具系列
色彩
工作區工具系列
模式
面板
工作區
本章結語

Chapter 3 Illustrator 工作環境
從印刷到像素
運用「工作區域」來處理作業
本章結語

Chapter 4 UI 設計的基礎要素
參考線的物件化
智慧型參考線
格點讓設計變得簡單
達到像素級精確性
開始製作版面
UI 的文字藝術
本章結語

Chapter 5 用圖像著手進行妝點
將樣式加到外觀上
符號的運用
運用像素格點
運用圖層來進行組織作業
本章結語

Chapter 6 最後修飾作業
更上一層樓的「外觀」應用
其它的文字處理技法
圖片的處理
本章結語

Chapter 7 更聰明的工作方式
UI 設計的規劃作業
傳達你的設計巧思
樣式資料庫
將你的作品自Illustrator產生出來
本章結語

作者感言
序文
Chapter 1 如何運用Illustrator 來玩UI 設計
向量架構的優勢
文字藝術與色彩相結合的魅力
從UI 設計談文字藝術
一致性的設計
精準的版型成品
本章結語

Chapter 2 工具與面板
工具的選擇
「選取」工具系列
繪圖作業
文字藝術
變形工具系列
色彩
工作區工具系列
模式
面板
工作區
本章結語

Chapter 3 Illustrator 工作環境
從印刷到像素
運用「工作區域」來處理作業
本章結語

Chapter 4 UI 設計的基礎要素
參考線的物件化
智慧型參考線
格點讓設計變得簡單
達到...