我要成為UI 設計師！大學畢業生入門篇 - Pixel Perfect

我要成為UI 設計師！ ... 而這些都是一個基本UI 設計師該有的素養。

... 平台，關鍵字：介面、UI、UX，如果你有心建議可以買來聽看看，例如產品設計 ... 直接觀看文章 本身從高職美工設計科到台科商設畢業，出社會後從事介面與網頁設計工作7年＋擔任設計主管＆面試官的經驗，加上身邊朋友也不少人詢問過UI設計相關的問題，所以希望這篇或多或少可以幫助到一些剛出社會的小朋友們，以後再補充大朋友轉職篇。

想更深入了解UI設計？參考這篇👉認識使用者介面（USERINTERFACE） byLydiaHill(dribbble) 該篇文章分為幾個部分，看我娓娓道來：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、AdobeXD，這三種各有優缺，但都非常適合拿來做介面。

它們都有幾個共同優點： 向量繪圖軟體可複用的組件庫更輕量簡潔的操作介面輔助介面設計的外掛原型製作知名網路、科技公司都在使用（面試時常會看到的必備技能 目前Figma非常火熱！因為能透過網路直接協作，前端、設計、產品，都是無縫協作。

並且試用的方案即足夠讓大家嘗試很多種可能性，日後我會特別針對軟體來寫一篇。

二、介面規範 Apple的HIG、Google的MD等大廠提供了完整的規範與組件庫。

世界大廠的規範擺在我們眼前，看啦～哪次不看！可能有的同學不太理解規範跟組件是什麼，其實我有寫過關於規範相關的入門知識喲，參考UI設計的基礎—規範與組件：）好吧～如果你不想離開這裡，下面簡單地說：規範：是定義一個app或網頁的排版、字型、顏色、圖標，讓他們保持一致性與良好的擴展性，好讓使用者更容易理解與操作，例如規範了主要按鈕是藍色的，除非特殊狀況（例如刪除），這個樣式到哪裡都代表可點擊的按鈕。

此外，也讓前端工程師開發更快速！ byRamotion 組件：就像是你瀏覽網頁或app時看到的按鈕、輸入框、下拉選單這些，這些組件是構成網頁的基本要件，並要適切地使用組件來符合使用者的需求，例如開啟與關閉一個功能，比起下拉選單我們會選用「開關」這個組件，因為更直觀，不用點開選單也更快速達成目標。

綜合以上，我們必須先從觀察與模仿開始，認識各種裝置（手機、平板、電腦）的排版佈局、規範如何定義、按鈕與輸入框這些組件的運作方式。

byZhenyaKarapetyan for Renderforest 三、設計原則 這部分其實廣度就比較廣了，例如心智模型、易用性、設計定律（如費茲定率、拇指操作區、閱讀動線）、心理學..等等。

看似一些小細節都會影響轉化率與介面的效率唷，以下是部份案例，之後會針對以上要點補充越來越多文章跟大家分享。

在2006年時候，尼爾森諾曼發表了一篇人們如何掃描和閱讀網站習慣的分享，他們通過研究發現，用戶傾向於一種F模式去查看網站by優社網 byTheThumbZone:DesigningForMobileUsers操作手機時的拇指區域，分為容易–困難，這代表我們設計時須考量重要的功能需要被置於易點擊之處。

四、美感培養 美感的培養需要時間養成，多找優秀的範例能建構對介面的基本手感與審美。

如果對好的設計還沒有清楚的認知，可以參考大廠or大品牌的網頁與app獎項。

例如：UI設計的基礎—規範與組件、Google2020年度最佳應用程式、AppleDesignAwards。

AppleDesignAwards會說明得獎原因，見下圖Darkroom 敘述，他提到「介面好看易用」。

看著特別抽象，什麼是好看？什麼是易用？怎麼連蘋果的得獎理由都那麼籠統呢？沒關係，隨著經驗累積你可慢慢分析。

第一，以「好看」來說，現在的主流UI設計是簡約的（排除電商那種寸土寸金的擁擠版面）。

設計師會移除裝飾性設計來凸顯資訊與功能，減少雜訊，如太多框線、漸層填色、明顯的色塊..等。

對比繁瑣寫實的擬物設計，簡約相對符合現代的流行美感，你可以發現近代logo都越趨扁平。

並且這個app的圖標都有統一設計，例如它們基本上是矩形構圖，線條粗細有所規範，顏色也一致，別忘了「統一」也是美的形式原理之一，這讓他看著「更舒服」，清楚並有規律。

第二，易用性，應該不難發現他的按鈕清晰以外，調整亮度、對比與彩度的滑動條，調節的按鈕顯得大小適中，手不會感覺彆扭，又不會大到失衡，所有按鈕的點擊範圍都是合宜的。

AppleDesignAward獲獎者：AppDarkroom (出自BergenCo.)這款功能強大的照片與影片編輯工具，介面好看易用。

效能出色且控制項目與佈局極為直覺，大受業餘與專業攝影師讚賞。

採用的Apple技術包括照片與相機API、「主畫面」快速動作、項目特色選單及觸覺回饋，Darkroom堪稱高階行動編輯工具的傑作。

另外在此特別推薦文章圖片管理軟體👉素材管理神器EAGLE為什麼推薦Eagle呢？Eagle可以相當有條理地管理你的圖片，讓你一目了然，你會更有動力蒐集好範例。

除了蒐集好的範例，更進一步的是勤於分析，甚至也一併蒐集不好的範例，一起比對，講出介面好在哪、哪裡可以改善等等，試著分析下方這組介面吧！ byMichalMalewicz 五、基礎前端概念 基本了解前端開發的運作原理，也就是設計圖交由工程師轉變為網頁的HTML、CSS、RWD、Javascript，不用能寫（會一點當然好），才不會做出天馬行空的設計稿，本身因為工作經驗，執行過從設計圖到網頁前端切版，是個基本的html跟RWD專案，雖然不是很難的項目，但了解到工程師大致是怎麼coding的，會讓協作過程順利許多，而且勢必會遇到唷。

下面我簡單的聊聊到底HTML、CSS、Javascript這些是什麼：）如果不要太講究執行細節，只是概觀的話，HTML、CSS、Javascript三者的關係像是下圖。

By: AlexisSanders 組成網頁的骨架是html（HypertextMarkupLanguage） 就像是網頁的架構，有header（頭部，常會放上logo、導航等資訊）、main（主要內容區，如圖片、文字段落..等）、footer（頁腳，放上版權聲明、聯絡資訊..等）等這些基本區分（只是擷取部分，有濃厚興趣可參考W3C喲），讓各種內容有個家，讓整個架構更清晰、便於分享、查詢、增強網頁SEO等的效果。

by網頁設計筆記。

中國科大視傳系 定義外在樣式的是CSS（CascadingStyleSheets） 了解到骨架之後，下一步開始長肉穿衣服！也就是定義網頁的外在樣式。

可以調整區域的寬度高度、字體顏色、按鈕的圓角形狀、滑入滑出連結時的顏色定義、簡單的變形動畫、圖片的透明度..等等，這些都是透過CSS完成唷！看看這個網頁，展示了許多CSS語法的特效，點擊側選單可看到效果，完全是程式寫出來的Animate.css byVoicuApostol 定義行為的javascript Javascript這個語言就更為複雜了，因為他會涉及到條件判斷（如：網拍定義金額小於多少是需要負擔運費的）、行為觸發（按了按鈕後觸發了購買行為）、動態的特殊效果等等，已經不單單是外皮換膚這種等級的事情，目前為了好維護、提高效能、模組化等等原因，以js為基底整合而成的主流框架有React、Vue、Angular..等等，再說下去就脫離UI了，但JS能做到的事情真的很多很豐富。

日後會遇到的狀況是公司的前端工程師採用某個框架與規範，你就可以去閱讀他們的規範並與工程師配合討論，例如React的框架著名的有ANTD，Vue則有Element，透過組件庫與規範可以跟前端更無縫地溝通。

如果真的很有興趣，可以參考這篇詳細的說明唷理解Javascript前端框架。

最後分享綜合HTML、CSS、Javascript的coding社群平台，高手雲集，創意無限的Codepen 六、溝通協作與理解 依公司規模不同，你必須周旋在產品經理、前端工程師、其他設計師，相互協調並完成專案，甚至可能要直接跟大咖展示提案。

前面幾點是基礎的工具，壓軸的溝通能力其實特別重要，有的人就是聽不懂人話、需求搞不清楚，如果我們是團隊的一員，必須盡量降低這種狀況的發生，與同事溝通也跟設計介面的精神一樣，讓狀況明朗、讓對方理解，甚至必要時做一些簡單的圖片示意。

通常工作流程中最重要的事情，就是弄懂需求。

很常時候我們以為達成共識了，最後看到結果才發現原來講的事情根本不同。

我自己本身所處的團隊也有過這樣的事，好比主管交代設計師只要換掉主視覺、其他架構不更動，但就是有人會去改動架構、調整功能..等，這些求好心切的行為最後反而造成開發延誤，過之猶不及。

弄懂需求對一開始踏入職場的人來說其實不一定都很容易，如果你真的想更進入狀況，以下幾點可以多注意：1.業務研究gogoro跟麥當勞的業務類型完全不同，入職前就對公司做過功課，入職後積極了解業務與各項專案，例如網頁與實體產品、用戶在googleplay的評論..等等。

2.預習與提問在新需求會議前跟產品經理拿到文件，先研究或是先想好要問的問題，包含需求的目標是什麼？會在哪些裝置上出現？3.進一步優化如果弄懂需求，更進一步你可以提出優化，讓自己更顯得專業，例如會議上的文件只說明雙11優惠透過會員中心可領取，PM也詳細地解釋了領取流程，但關於這個資訊透過什麼方式曝光沒有進一步說明，此時就可以提出是否透過首頁的廣告或郵件告知用戶？領取後如何引領用戶消費？例如立即推薦熱門商品留著客戶..等等的意見。

以上幾個點是我認為可以優先準備的，為了讓產品更進一步，對規格溫和堅定地提出懷疑或不足是合理的，而這個過程也是需要多磨練的。

byUnini 七、練習實作 最後免不了要進行實作啦！為了日後面試能脫穎而出，作品對UI設計師真的是非常重要。

如果你在學校有專案或有實習機會，一定要好好把握住每個專案、積極參與。

若是你真的沒有資源與機會，就由自己開始，筆者認為一份好的設計作品集有3-4個很完整的作品是加分的。

初學者可以從臨摹開始，可以從最基本的登入頁面開始。

之後自己嘗試執行一整個專案，例如一個美食app的所有介面。

有些facebook社團，例如UI/UXDesigners、UI/UXDesigners(worldwide)，加入後你可以把你的作品po出來讓大家給你建議。

另一種是參加講座，例如UI/UX台中聚，最好的方式還是有一個專業的人是可以提供你意見，透過加入社團或是講座，主動交朋友互相切磋吧。

byKevinDukkon 結語 礙於篇幅，這篇不特別提到面試方向，日後會特別準備一篇。

總結以上，UI設計是一門專業領域，有人可以做得很好，也有人做得馬馬虎虎，通過上面的方式努力，相信專業上會有大幅的進步，學生最珍貴的就是還有時間，不要浪費囉！ 分享此文：TwitterFacebook請按讚：喜歡正在載入... 相關 文章分頁導航 發表迴響取消回覆 在此輸入你的回應… 在下方填入你的資料或按右方圖示以社群網站登入： 電子郵件（必須填寫）（電子郵件地址不會公開） 名稱（必須填寫） 個人網站 您的留言將使用WordPress.com帳號。

( 登出 /  變更 ) 您的留言將使用Google帳號。

( 登出 /  變更 ) 您的留言將使用Twitter帳號。

( 登出 /  變更 ) 您的留言將使用Facebook帳號。

( 登出 /  變更 ) 取消 連結到%s 透過電子郵件通知我後續回應。

有新文章時用Email通知我。

Δ 搜尋： 近期文章 清醒地進步💪養成保留設計版本的習慣 UI字級怎麼定？透過Wireframe 快速搞定 不會C4D👉用Sketch畫出3D 立體風格（蝦皮為例） UI設計必修！認識心智模型 數位產品與服務的開發流程 分類 職場大小事(4) 視覺設計(5) 資源分享(2) UI入門(8) UI探索(2) 近期迴響 pixiechoco在認識使用者介面（UserInterface） kira在認識使用者介面（UserInterface） 關注Pixie LinkedIn Dribbble Behance FollowPixelPerfectonWordPress.com 追蹤 已追蹤 PixelPerfect 我要註冊 已經有WordPress.com帳號了？立即登入。

PixelPerfect 自訂 追蹤 已追蹤 註冊 登入 複製短網址 回報此內容 以閱讀器檢視 管理訂閱 收合此列   載入迴響中...   發表迴響… 電子郵件(必要) 名稱(必要) 網站 %d位部落客按了讚：