介面設計師轉職之路

YOTTA 你最專業的學習夥伴，提供優質內容與有趣觀點，擴大豐富你的視野。
訂閱林育正的專欄，閱讀更多內容。

網路上相關資源很多，但也因此資訊爆炸亂，如果剛開始想學習 UI 設計，該怎麼開始怎麼走呢？目前台灣各大專院校也尚無完整的科系課程可以讓你學習UI/UX設計，因此大多數的設計師都是從其他領域轉職過來，甭擔心非相關背景會不適應，找到自己的學習地圖，就不會太難。

這邊整理了在學習路上重要的觀念與資源，希望能夠讓想入門 UI 設計的同學們一些參考 :D

[12/12更新]感謝大家踴躍的回饋與分享！技能樹上的內容皆是汲取自己的學習過程與業界所需的實務技能，加上由於工作關係很長被問到底成為 UI 設計師該具備哪些能力？儘管每次都竭盡所能仔細回答，但尚缺乏全面系統性的彙整。

因此我們籌備了數月，在 YOTTA 上發布了募資型線上課程：

「Adobe Xd設計實務｜成為UI設計師的8項核心技能」

我是Riven，目前是 Adobe Xd 官方合作講師，定期舉辦巡迴台灣的實體工作坊與線上直播推廣UI/UX設計，這次規劃讓你可以一次點滿所有技能的線上課程，起手以 Adobe Xd 軟體技能，搭配專案式與遊戲化的教學模式，不論你是平面設計師，抑或是在其他領域努力的朋友，都可以透過這個新手友善且零基礎適用的內容，通往 UI 設計師的轉職之路。=>前往頁面

感謝學員支持，上線第一天即成功達標！

設計規範

UI設計跟平面設計最大的不同是，因為具有功能、要被操作且須遵守一些易用性規範，雖然難啃但不失為初心者必備武器。

設計規範是怎麼來的？閱讀了幾家平台釋出的版本，不難發現其中很多是使用者們已經習慣介面或操作，形成一種跟「中秋節就是要烤肉」、「端午節要吃粽子」那樣子的約定，照著規則走準不會錯。

也許在剛開始接觸設計的時候先知道這些規則跟框架，更可以讓之後的創意與技術得已突破。

值得注意的是，遊戲化體驗APP、敘事遊戲類網頁等設計，屬於設計規範外，目的是讓使用者覺得「特別」。但如果明明是一般的資訊傳達類產品，沒按照規範會讓使用者覺得「靠北」，然後被刪除或回到上一頁。

必讀規範：Google Material Design 、Ant Design、Apple Developer

爬梳乾貨

UI/UX這行目前在台灣沒什麼相關的大學科系可選擇，與 IT 產業相同的是需仰賴大量的閱讀與自學，不管是新手村或職業人士都是要每天持續學習。

因此，取得管道以及過濾資料的能力就相當重要了，掌握更多 Know How 可以讓你變得更難以取代，不論是找工作或談薪資都很重要。

在這邊推薦中文的 Medium 平台：AAPD ，裡面有不少相關文章。

UX思維

使用者體驗（User Experience）與使用者介面（User Interface）的領域實在是有些不同，這邊僅點破一個常見誤會：UX設計師每天面對的是更多的統計資料、調研與分析，爬梳脈絡與心理預測，跟不少同學響往的「設計師（Designer）」的華麗工作日常不太一樣。盯著螢幕畫設計稿、著重視覺與美感，創造讓心情愉悅的畫面相關工作才是 UI設計師的工作內容。

萬事都有體驗，只有好的跟不好的差別，具備 UX思維可以對你的專業度大大加分，分辨什麼是好用的、適合的。知道商業市場需要什麼，略懂產品脈絡，這些會決定 UI設計師的技能廣度。

推薦中文的 Medium 平台：UX四神湯。

本〈介面設計師轉職之路〉地圖僅適用於 UID （User Interface Design）領域的技能及知識需求。若尚不明瞭 UI/UX 定義與差異的朋友，可以先參考相關推薦書籍：2018年書櫃上該有的 UX 新手設計推薦書單

設計思考

設計思考（Design Thinking）是一個以人為本的解決問題方法論，透過從人的需求出發，為各種議題尋求創新解決方案，並創造更多的可能性。IDEO設計公司總裁提姆·布朗曾在《哈佛商業評論》定義：「設計思考是以人為本的設計精神與方法，考慮人的需求、行為，也考量科技或商業的可行性。」

設計師跟美工在工作上最大的差異就是其產出有沒有解決問題、符合需求且有思考脈絡可以跟共事者溝通想法。

相關資料Google很多了，這邊僅推薦一部 2012年的紀錄片——《 Design & Thinking 設計與思考》：

推薦書籍：

1. 設計的方法：100個分析難題，跟成功商品取經，讓設計更棒、更好的有效方法

2. 圖解設計思考：好設計，原來是這樣「想」出來的！

心理學

著名的人因工程學者，同時也是世紀最有影響力之一的設計師 Donald A. Norman 在《設計的心理學》中呼籲，設計師應該為了產品的「易用性」而奮鬥，否則費盡心思製造出功能多變、使用繁雜的產品，即使外觀漂亮，也只會讓消費者徒增困擾。這本書也解釋了這些基於心理學的設計原則，如何在日新月異的科技進化中歷久彌新。

幾個以使用者為中心的設計原則：

壹、「腦補用途」

指不用多說就可以知道的互動關係。比如說出現按鈕代表它可以按、Medium拍手icon是表示拍手等等；當該物件無法腦補用途時，則需要第二原則。

貳、「標示說明」

門把上的「推」或「拉」，或是中正紀念堂站星巴克廁所由於馬桶蓋掀起時看不到拉把，而在牆壁上貼了A4標語寫著紅色按鈕在馬桶側邊，等等。

參、「對應性」

「照道理來說應該是這樣。」的概念。比如說去吃三媽臭臭鍋，離你最近的火爐的旁邊應該就是旋鈕可以開火，如果開下去是打開對面的火，會很靠北對吧！

肆、「回饋機制」

就是最有感的貼心。音量關到最小變靜音的時候會震動、網頁滑到最下面的時候會回彈、按住這篇文章旁的拍手鍵的時候會有噴發特效⋯⋯等。但要避免過於重複的回饋，會搞暈使用者的。

熟知相關原則及規範後，再進行設計規劃時會感受到滿滿地踏實。

線框稿

其實就是設計草稿，只是在產品設計上為了更擬真，一般指的線框稿（Wireframe）都會是需要可以點擊交互的，製作線框稿的目的著重在畫面間的流程與操作，並透過這份由簡單線條與去視覺化的草圖去與工程師、專案經理等團隊成員溝通，確保大家對產品最後的想像是一致的。

插畫

插畫在今年的網頁視覺上存在感愈來愈重，愈來愈多的科技公司官網及產品流程皆採用插畫來取代以往的扁平、簡約風格，像是 Slack 、Dropbox跟 Shopify等，帶來更有溫度的使用體驗，而且也更有趣。如果你是平面設計出身或本來就喜歡插畫，在設計介面的時候可以選擇自產素材，創作更具備個人風格的作品。

美感

不論是什麼樣的數位產品（Web , App⋯⋯等），視覺都是接觸用戶的第一道關卡。每個物件的陰影、大小到圓角的處理，以及每個項目之間的間距及整體配色，都是魔鬼的關鍵細節，也是設計師的基本素養。

不多說，請用眼睛去體會。

每日必逛養眼睛網站書籤：Dribble 、Pinterest、Behance

靈感

蘋果打到牛頓的頭，達文西賞鳥展翅，這些靈光乍現的瞬間對設計師來說是稀貴的寶石，只是靈感不單是稍縱即逝的瞬間，也是自發的學習勉強積累。成功的設計師除了具備軟體技能外，每天更需要維持汲取靈感、蒐集想法，以在專案來臨時發揮實力，讓眾同事發出「哇！果然是設計師」的讚嘆。

每日必逛滋潤腦袋書籤：awwwards、lapa、Illustration ui
蒐集美感儲藏靈感 —Eagle （國產，支持一下）。

配色

許多公司或品牌會定義出 VI（企業視覺識別），其中可能涵蓋了主要的色碼，但大多是平面設計適用，但網頁上由於多了互動操作的部分，需要更多用色靈活性，像是漸層、陰影、Hover及Click的轉換⋯⋯，等。設計師們也會運用一些工作去輔助思考配色：

配色參考工具：Adobe Color CC、Coolors、NIPPON COLORS - 日本の伝統色
網頁漸層配色：Webgradients、EGGRADIENTS

文案

雖然說文案可能已經有其他部門會準備，但更常遇到的狀況是，他們也不知道你製作網頁會需要什麼樣的內容，或是今天是你要獨自完成一個網站的上架。其實當架站與設計技術經驗到一定門檻後，產文案反而是最難的，吸引人的文案是需要大量時間爬梳整理才能夠寫出來。

有一個心法是我在網頁設計上的時候常常用到「黃金圈」（Golden Circle）：

由Why、How、What的順序排出文案，能比單純在吹產品多好有效太多。

需要假文假字的時候再搭配產生器：Lorem Ipsum

圖庫

網頁中會用到大量的實拍照片、或是作為背景的情境照，如果客戶那邊提供的素材不盡人意，這時候你就得自己準備了，做好美美的設計稿才能有說服力。

推薦圖庫：pexels、pakutaso、findaphoto

UI設計

終於進入到介面設計的環節啦！前面的些準備及技巧，都是為了在這一階段能有更精彩的表現。坦白說現在的 UI 設計軟體的操作愈做愈簡單，功能也幾乎愈來愈像，挑一款適合你的工具就可以囉。

Mac 系統電腦: Sketch （學生另有優惠），目前作為主流設計使用，自學推薦由 Monospace 與美勞哥超佛心共同舉辦的 UI Design Meetup #4 ｜美勞哥直播帶你 Sketch 基礎教學。

另外，這裡也有一些小撇步：由子龍發起的 Tips for Design — Sketch 。

PC 電腦（Windows）沒得選 — Adobe Xd ，這是一款較新的 UI/UX整合設計工具，如果已經會使用 Illustrator 、Photoshop的話上手會更快，而且目前有 Adobe XD起步方案可免費下載使用，如果想透過 Xd 完整學習 UI 設計與職業技能，我們已經彙整了大家的常見問題與業界知識，製作這門內容：