本身從高職美工設計科到台科商設畢業，出社會後從事介面與網頁設計工作 7 年＋擔任設計主管＆面試官的經驗，加上身邊朋友也不少人詢問過 UI 設計相關的問題，所以希望這篇或多或少可以幫助到一些剛出社會的小朋友們，以後再補充大朋友轉職篇。
想更深入了解 UI 設計？參考這篇 👉 認識使用者介面（USER INTERFACE）
該篇文章分為幾個部分，看我娓娓道來：
1. 設計系畢跟非設計系畢的差別？
2. 能力地圖
3. 總結
設計系畢跟非設計系畢的差別？
以設計科系來說，如果是商業設計或視覺傳達相關學系畢業的，跨入 UI 設計比較容易上手。因為設計系還是分為很多種設計專業，製作 2D / 3D 動畫的、立體產品的、室內設計、建築設計等等，在我印象裡台灣設計學院規模較大的是雲科，參考一下它的學系架構，真的是有夠多。
商業設計、視覺傳達相關科系較易入門的原因，不外乎是對排版佈局的掌握、顏色的配置、插畫表現力、素材的處理合成..等。
雖然設計系所一般都有通識課程，例如色彩學、基本設計、立體素描、基礎攝影等等（下方有台科的課程地圖可參考），但一樣是色彩學，應用在各個設計領域還是有極大的差異，一般來說設計系會培養共同的美感基礎，但我們很少拿做平面設計的配色直接用在建築或室內設計上，每個專業都有不同的用色習慣與定律。
但像我前面提到的，就算是平面設計出身要轉換到介面設計還是有段路要走。 如果光看市面上的 app 介面或許覺得：不難啊，按鈕就拉個矩形、分隔線畫個線條、簡單乾淨就行吧？現在還流行扁平化，UI 看上去真是太容易了～
但其實介面設計本來就不是在視覺上炫技，介面設計的本質與重點是：
呈現資訊、可以互動操作的視覺元素，著重在解決問題，必須圍繞用戶目標與產品目標，引導使用者並提升易用性，也須考慮心智模型與用戶習慣..等等。
以上都是與平面設計很大的不同，光是可以「操作」這個特性就會衍伸出許多不同的設計流程與狀態。而這些都是一個基本 UI 設計師該有的素養。
建議如果有興趣大學時期就多選修接觸、或是爭取實習機會，雖然我不知道現在大學的介面設計課發展到哪了，但我相信應該比我那個時期要好多了，我那個年代修的課就是時代的眼淚（仔細刻畫的金屬質感的介面、Flash、Dreamweaver、老師的 domo 是 8bit 動畫..🥲），以台科課綱為例，可以選修「網頁設計」、「互動介面設計」、「圖形化介面設計」、「用戶體驗設計」..等。
看到用陸續完善、新增的課程，覺得台科後輩好幸福。
如果你真的沒機會實習或選修，除了我分享的個人經驗外，坊間也有像 HAHOW 這樣的線上付費平台，關鍵字：介面、UI、UX，如果你有心建議可以買來聽看看，例如 產品設計實戰：用Figma打造絕佳UI/UX，都可以先試看再決定要不要購買唷！會對 UI 設計的生態更了解，但最重要的還是持之以恆～
至於非本科系的同學，就需要加倍努力了，第一是美感方面比起設計本科生，較缺少實作經驗與環境的薰陶，另外則是軟體操做可能會有段陣痛期，設計本科高職生至少操作過 Photoshop、illustrator 甚至其他設計軟體等，對於介面設計的軟體會比較容易上手。
但我也遇過即使是設計系表現還是差強人意，而有些人即使非本科生也表現地非常好！ 他們做到了哪些事情呢？下面我們跟著能力地圖，一起看看哪些是介面設計的必須技能。
能力地圖
剛畢業的新鮮人們如果想進入 UI 設計領域，以下幾個要點是我認為很重要的。 無論你是什麼科系，即使是視覺傳達等本科生，一樣要重新適應與學習喲 🤟
ps. 日後針對這些要點會有更多文章詳細補充，目前我們先認清方向，朝目標努力！
一、設計軟體
在介面設計領域蓬勃發展的今天，我們不能繼續使用 Photoshop、Illustrator 等非為介面而生的工具了～為什麼呢？因為 ps 是專門做影像處理的，illustrator 是拿來畫插畫的，針對領域功能會完全不同，目前主流的有：Figma、Sketch、Adobe XD，這三種各有優缺，但都非常適合拿來做介面。
它們都有幾個共同優點：
- 向量繪圖軟體
- 可複用的組件庫
- 更輕量簡潔的操作介面
- 輔助介面設計的外掛
- 原型製作
- 知名網路、科技公司都在使用（面試時常會看到的必備技能
目前 Figma 非常火熱！因為能透過網路直接協作，前端、設計、產品，都是無縫協作。 並且試用的方案即足夠讓大家嘗試很多種可能性，日後我會特別針對軟體來寫一篇。
二、介面規範
Apple 的 HIG 、Google 的 MD 等大廠提供了完整的規範與組件庫。
世界大廠的規範擺在我們眼前，看啦～哪次不看！
可能有的同學不太理解規範跟組件是什麼，其實我有寫過關於規範相關的入門知識喲，參考 UI 設計的基礎—規範與組件 ：）
好吧～如果你不想離開這裡，下面簡單地說：
規範：
是定義一個 app 或網頁的排版、字型、顏色、圖標，讓他們保持一致性與良好的擴展性，好讓使用者更容易理解與操作，例如規範了主要按鈕是藍色的，除非特殊狀況（例如刪除），這個樣式到哪裡都代表可點擊的按鈕。此外，也讓前端工程師開發更快速！
組件：
就像是你瀏覽網頁或 app 時看到的按鈕、輸入框、下拉選單這些，這些組件是構成網頁的基本要件，並要適切地使用組件來符合使用者的需求，例如開啟與關閉一個功能，比起下拉選單我們會選用「開關」這個組件，因為更直觀，不用點開選單也更快速達成目標。
綜合以上，我們必須先從觀察與模仿開始，認識各種裝置（手機、平板、電腦）的排版佈局、規範如何定義、按鈕與輸入框這些組件的運作方式。
三、設計原則
這部分其實廣度就比較廣了，例如 心智模型、易用性、設計定律（如費茲定率、拇指操作區、閱讀動線）、心理學..等等。看似一些小細節都會影響轉化率與介面的效率唷，以下是部份案例，之後會針對以上要點補充越來越多文章跟大家分享。
操作手機時的拇指區域，分為容易 – 困難，這代表我們設計時須考量重要的功能需要被置於易點擊之處。
四、美感培養
美感的培養需要時間養成，多找優秀的範例能建構對介面的基本手感與審美。
如果對好的設計還沒有清楚的認知，可以參考大廠 or 大品牌的網頁與 app 獎項。
例如： UI 設計的基礎—規範與組件、Google 2020 年度最佳應用程式、Apple Design Awards。
Apple Design Awards 會說明得獎原因，見下圖 Darkroom 敘述，他提到「介面好看易用」。看著特別抽象，什麼是好看？什麼是易用？怎麼連蘋果的得獎理由都那麼籠統呢？
沒關係，隨著經驗累積你可慢慢分析。
第一，以「好看」來說，現在的主流 UI 設計是簡約的（排除電商那種寸土寸金的擁擠版面）。設計師會移除裝飾性設計來凸顯資訊與功能，減少雜訊，如太多框線、漸層填色、明顯的色塊..等。對比繁瑣寫實的擬物設計，簡約相對符合現代的流行美感，你可以發現 近代 logo 都越趨扁平。
並且這個 app 的圖標都有統一設計，例如它們基本上是矩形構圖，線條粗細有所規範，顏色也一致，別忘了「統一」也是 美的形式原理之一，這讓他看著「更舒服」，清楚並有規律。
第二，易用性，應該不難發現他的按鈕清晰以外，調整亮度、對比與彩度的滑動條，調節的按鈕顯得大小適中，手不會感覺彆扭，又不會大到失衡，所有按鈕的點擊範圍都是合宜的。
Darkroom (出自 Bergen Co.) 這款功能強大的照片與影片編輯工具，介面好看易用。
效能出色且控制項目與佈局極為直覺，大受業餘與專業攝影師讚賞。
採用的 Apple 技術包括照片與相機 API、「主畫面」快速動作、項目特色選單及觸覺回饋，Darkroom 堪稱高階行動編輯工具的傑作。
另外在此特別推薦文章圖片管理軟體 👉 素材管理神器 EAGLE
為什麼推薦 Eagle 呢？Eagle 可以相當有條理地管理你的圖片，讓你一目了然，你會更有動力蒐集好範例。
除了蒐集好的範例，更進一步的是勤於分析，甚至也一併蒐集不好的範例，一起比對，講出介面好在哪、哪裡可以改善等等，試著分析下方這組介面吧！
五、基礎前端概念
基本了解前端開發的運作原理，也就是設計圖交由工程師轉變為網頁的 HTML、CSS、RWD、Javascript，不用能寫（會一點當然好），才不會做出天馬行空的設計稿，本身因為工作經驗，執行過從設計圖到網頁前端切版，是個基本的 html 跟 RWD 專案，雖然不是很難的項目，但了解到工程師大致是怎麼 coding 的，會讓協作過程順利許多，而且勢必會遇到唷。
下面我簡單的聊聊到底 HTML、CSS、Javascript 這些是什麼：）
如果不要太講究執行細節，只是概觀的話，HTML、CSS、Javascript 三者的關係像是下圖。
組成網頁的骨架是 html（Hypertext Markup Language）
就像是網頁的架構，有 header（頭部，常會放上 logo、導航等資訊）、main（主要內容區，如圖片、文字段落..等）、footer（頁腳，放上版權聲明、聯絡資訊..等） 等這些基本區分（只是擷取部分，有濃厚興趣可參考 W3C 喲），讓各種內容有個家，讓整個架構更清晰、便於分享、查詢、增強網頁 SEO 等的效果。
定義外在樣式的是 CSS（Cascading Style Sheets）
了解到骨架之後，下一步開始長肉穿衣服！也就是定義網頁的外在樣式。可以調整區域的寬度高度、字體顏色、按鈕的圓角形狀、滑入滑出連結時的顏色定義、簡單的變形動畫、圖片的透明度..等等，這些都是透過 CSS 完成唷！
看看這個網頁，展示了許多 CSS 語法的特效，點擊側選單可看到效果，完全是程式寫出來的 Animate.css
定義行為的 javascript
Javascript 這個語言就更為複雜了，因為他會涉及到條件判斷（如：網拍定義金額小於多少是需要負擔運費的）、行為觸發（按了按鈕後觸發了購買行為）、動態的特殊效果等等，已經不單單是外皮換膚這種等級的事情，目前為了好維護、提高效能、模組化等等原因，以 js 為基底整合而成的主流框架有 React、Vue、Angular..等等，再說下去就脫離 UI 了，但 JS 能做到的事情真的很多很豐富。
日後會遇到的狀況是公司的前端工程師採用某個框架與規範，你就可以去閱讀他們的規範並與工程師配合討論，例如 React 的框架著名的有 ANTD，Vue 則有 Element，透過組件庫與規範可以跟前端更無縫地溝通。
如果真的很有興趣，可以參考這篇詳細的說明唷 理解 Javascript 前端框架。
最後分享綜合 HTML、CSS、Javascript 的 coding 社群平台，高手雲集，創意無限的 Codepen
六、溝通協作與理解
依公司規模不同，你必須周旋在產品經理、前端工程師、其他設計師，相互協調並完成專案，甚至可能要直接跟大咖展示提案。
前面幾點是基礎的工具，壓軸的溝通能力其實特別重要，有的人就是聽不懂人話、需求搞不清楚，如果我們是團隊的一員，必須盡量降低這種狀況的發生，與同事溝通也跟設計介面的精神一樣，讓狀況明朗、讓對方理解，甚至必要時做一些簡單的圖片示意。
通常工作流程中最重要的事情，就是弄懂需求。很常時候我們以為達成共識了，最後看到結果才發現原來講的事情根本不同。我自己本身所處的團隊也有過這樣的事，好比主管交代設計師只要換掉主視覺、其他架構不更動，但就是有人會去改動架構、調整功能..等，這些求好心切的行為最後反而造成開發延誤，過之猶不及。
弄懂需求對一開始踏入職場的人來說其實不一定都很容易，如果你真的想更進入狀況，以下幾點可以多注意：
1. 業務研究
gogoro 跟 麥當勞的業務類型完全不同，入職前就對公司做過功課，入職後積極了解業務與各項專案，例如網頁與實體產品、用戶在 google play 的評論..等等。
2. 預習與提問
在新需求會議前跟產品經理拿到文件，先研究或是先想好要問的問題，包含需求的目標是什麼？會在哪些裝置上出現？
3. 進一步優化
如果弄懂需求，更進一步你可以提出優化，讓自己更顯得專業，例如會議上的文件只說明雙 11 優惠透過會員中心可領取，PM 也詳細地解釋了領取流程，但關於這個資訊透過什麼方式曝光沒有進一步說明，此時就可以提出是否透過首頁的廣告或郵件告知用戶？領取後如何引領用戶消費？例如立即推薦熱門商品留著客戶..等等的意見。
以上幾個點是我認為可以優先準備的，為了讓產品更進一步，對規格溫和堅定地提出懷疑或不足是合理的，而這個過程也是需要多磨練的。
七、練習實作
最後免不了要進行實作啦！
為了日後面試能脫穎而出，作品對 UI 設計師真的是非常重要。
如果你在學校有專案或有實習機會，一定要好好把握住每個專案、積極參與。
若是你真的沒有資源與機會，就由自己開始，筆者認為一份好的設計作品集有 3-4 個很完整的作品是加分的。
初學者可以從臨摹開始，可以從最基本的登入頁面開始。
之後自己嘗試執行一整個專案，例如一個美食 app 的所有介面。
有些 facebook 社團，例如 UI/UX Designers、UI/UX Designers (worldwide)，加入後你可以把你的作品 po 出來讓大家給你建議。
另一種是參加講座，例如 UI/UX 台中聚，最好的方式還是有一個專業的人是可以提供你意見，透過加入社團或是講座，主動交朋友互相切磋吧。
結語
礙於篇幅，這篇不特別提到面試方向，日後會特別準備一篇。
總結以上，UI 設計是一門專業領域，有人可以做得很好，也有人做得馬馬虎虎，通過上面的方式努力，相信專業上會有大幅的進步，學生最珍貴的就是還有時間，不要浪費囉！
Pixel Perfect 