網(wǎng)路上相關(guān)資源很多，但也因此資訊爆炸亂，如果剛開(kāi)始想學(xué)習(xí)UI 設(shè)計(jì)，該怎么開(kāi)始怎么走呢？目前國(guó)內(nèi)專(zhuān)院校也尚無(wú)完整的課程體系可以讓你學(xué)習(xí)UI/UX設(shè)計(jì)，因此大多數(shù)的設(shè)計(jì)師都是從其他領(lǐng)域轉(zhuǎn)職過(guò)來(lái)，不用擔(dān)心非相關(guān)背景會(huì)不適應(yīng)，找到自己的學(xué)習(xí)地圖，就不會(huì)太難。
這邊整理了在學(xué)習(xí)路上重要的觀念與資源，希望能夠讓想入門(mén)UI 設(shè)計(jì)的同學(xué)們一些參考:
UI設(shè)計(jì)跟平面設(shè)計(jì)最大的不同是，因?yàn)榫哂泄δ?、要被操作且須遵守一些易用性?guī)范，雖然難啃但不失為初心者必備武器。
設(shè)計(jì)規(guī)范是怎么來(lái)的？閱讀了幾家平臺(tái)釋出的版本，不難發(fā)現(xiàn)其中很多是使用者們已經(jīng)習(xí)慣介面或操作，形成一種跟「中秋節(jié)就是要烤肉」、「端午節(jié)要吃粽子」那樣子的約定，照著規(guī)則走準(zhǔn)不會(huì)錯(cuò)。
也許在剛開(kāi)始接觸設(shè)計(jì)的時(shí)候先知道這些規(guī)則跟框架，更可以讓之后的創(chuàng)意與技術(shù)得已突破。
值得注意的是，游戲化體驗(yàn)APP、敘事游戲類(lèi)網(wǎng)頁(yè)等設(shè)計(jì)，屬于設(shè)計(jì)規(guī)范外，目的是讓使用者覺(jué)得「特別」。但如果明明是一般的資訊傳達(dá)類(lèi)產(chǎn)品，沒(méi)按照規(guī)范會(huì)讓使用者覺(jué)得「靠北」，然后被刪除或回到上一頁(yè)。
必讀規(guī)范：Google Material Design、Ant Design、Apple Developer
當(dāng)這些大廠規(guī)范都已經(jīng)完食，接著，你可以制定一份專(zhuān)案或公司專(zhuān)屬的設(shè)計(jì)規(guī)范（Design Principles）。
為什么呢？主要有兩個(gè)原因：
保持產(chǎn)品統(tǒng)一性：跟企業(yè)會(huì)打造視覺(jué)識(shí)別（VI）的原因相同，尤其是在長(zhǎng)期或多人團(tuán)隊(duì)維護(hù)下，若是充滿(mǎn)不同元素會(huì)讓使用者感到困惑。
提升團(tuán)隊(duì)工作效率：工程師都是喜歡模組化的元件，當(dāng)今天已經(jīng)制定好一套清楚的標(biāo)準(zhǔn)，日后就不需要再進(jìn)行重工開(kāi)發(fā)或重新定義視覺(jué)。
UI/UX這行目前在臺(tái)灣沒(méi)什么相關(guān)的大學(xué)科系可選擇，與IT 產(chǎn)業(yè)相同的是需仰賴(lài)大量的閱讀與自學(xué)，不管是新手或職業(yè)人士都是要每天持續(xù)學(xué)習(xí)。
因此，取得管道以及過(guò)濾資料的能力就相當(dāng)重要了，掌握更多Know How 可以讓你變得更難以取代，不論是找工作或談薪資都很重要。
使用者體驗(yàn)（User Experience） 與使用者介面（User Interface） 的領(lǐng)域?qū)嵲谑怯行┎煌?，這邊僅點(diǎn)破一個(gè)常見(jiàn)誤會(huì)：UX設(shè)計(jì)師每天面對(duì)的是更多的統(tǒng)計(jì)資料、調(diào)研與分析，爬梳脈絡(luò)與心理預(yù)測(cè)，跟不少同學(xué)響往的「設(shè)計(jì)師（Designer）」的華麗工作日常不太一樣。盯著螢?zāi)划?huà)設(shè)計(jì)稿、著重視覺(jué)與美感，創(chuàng)造讓心情愉悅的畫(huà)面相關(guān)工作才是UI設(shè)計(jì)師的工作內(nèi)容。
萬(wàn)事都有體驗(yàn)，只有好的跟不好的差別，具備UX思維可以對(duì)你的專(zhuān)業(yè)度大大加分，分辨什么是好用的、適合的。知道商業(yè)市場(chǎng)需要什么，略懂產(chǎn)品脈絡(luò)，這些會(huì)決定UI設(shè)計(jì)師的技能廣度。
設(shè)計(jì)思考（Design Thinking）是一個(gè)以人為本的解決問(wèn)題方法論，透過(guò)從人的需求出發(fā)，為各種議題尋求創(chuàng)新解決方案，并創(chuàng)造更多的可能性。IDEO設(shè)計(jì)公司總裁提姆·布朗曾在《哈佛商業(yè)評(píng)論》定義：「設(shè)計(jì)思考是以人為本的設(shè)計(jì)精神與方法，考慮人的需求、行為，也考量科技或商業(yè)的可行性?！?/span>
設(shè)計(jì)師跟美工在工作上最大的差異就是其產(chǎn)出有沒(méi)有解決問(wèn)題、符合需求且有思考脈絡(luò)可以跟共事者溝通想法。
相關(guān)資料Google很多了，這邊僅推薦一部2012年的紀(jì)錄片——《 Design & Thinking 設(shè)計(jì)與思考》
推薦書(shū)籍：
1. 設(shè)計(jì)的方法：100個(gè)分析難題，跟成功商品取經(jīng)，讓設(shè)計(jì)更棒、更好的有效方法
2. 圖解設(shè)計(jì)思考：好設(shè)計(jì)，原來(lái)是這樣「想」出來(lái)的！
著名的人因工程學(xué)者，同時(shí)也是世紀(jì)最有影響力之一的設(shè)計(jì)師Donald A. Norman在《設(shè)計(jì)的心理學(xué)》中呼吁，設(shè)計(jì)師應(yīng)該為了產(chǎn)品的「易用性」而奮斗，否則費(fèi)盡心思制造出功能多變、使用繁雜的產(chǎn)品，即使外觀漂亮，也只會(huì)讓消費(fèi)者徒增困擾。這本書(shū)也解釋了這些基于心理學(xué)的設(shè)計(jì)原則，如何在日新月異的科技進(jìn)化中歷久彌新。
幾個(gè)以使用者為中心的設(shè)計(jì)原則：
指不用多說(shuō)就可以知道的互動(dòng)關(guān)系。比如說(shuō)出現(xiàn)按鈕代表它可以按、Medium拍手icon是表示拍手等等；當(dāng)該物件無(wú)法腦補(bǔ)用途時(shí)，則需要第二原則。
門(mén)把上的「推」或「拉」，或是中正紀(jì)念堂站星巴克廁所由于馬桶蓋掀起時(shí)看不到拉把，而在墻壁上貼了A4標(biāo)語(yǔ)寫(xiě)著紅色按鈕在馬桶側(cè)邊，等等。
「照道理來(lái)說(shuō)應(yīng)該是這樣?！沟母拍睢１热缯f(shuō)去吃三媽臭臭鍋，離你最近的火爐的旁邊應(yīng)該就是旋鈕可以開(kāi)火，如果開(kāi)下去是打開(kāi)對(duì)面的火，會(huì)很靠北對(duì)吧！
就是最有感的貼心。音量關(guān)到最小變靜音的時(shí)候會(huì)震動(dòng)、網(wǎng)頁(yè)滑到最下面的時(shí)候會(huì)回彈、按住這篇文章旁的拍手鍵的時(shí)候會(huì)有噴發(fā)特效??等。但要避免過(guò)于重復(fù)的回饋，會(huì)搞暈使用者的。
熟知相關(guān)原則及規(guī)范后，再進(jìn)行設(shè)計(jì)規(guī)劃時(shí)會(huì)感受到滿(mǎn)滿(mǎn)地踏實(shí)。
其實(shí)就是設(shè)計(jì)草稿，只是在產(chǎn)品設(shè)計(jì)上為了更擬真，一般指的線框稿（Wireframe）都會(huì)是需要可以點(diǎn)擊交互的，制作線框稿的目的著重在畫(huà)面間的流程與操作，并透過(guò)這份由簡(jiǎn)單線條與去視覺(jué)化的草圖去與工程師、專(zhuān)案經(jīng)理等團(tuán)隊(duì)成員溝通，確保大家對(duì)產(chǎn)品最后的想像是一致的。
插畫(huà)在今年的網(wǎng)頁(yè)視覺(jué)上存在感愈來(lái)愈重，愈來(lái)愈多的科技公司官網(wǎng)及產(chǎn)品流程皆采用插畫(huà)來(lái)取代以往的扁平、簡(jiǎn)約風(fēng)格，像是Slack、Dropbox跟Shopify等，帶來(lái)更有溫度的使用體驗(yàn)，而且也更有趣。如果你是平面設(shè)計(jì)出身或本來(lái)就喜歡插畫(huà)，在設(shè)計(jì)介面的時(shí)候可以選擇自產(chǎn)素材，創(chuàng)作更具備個(gè)人風(fēng)格的作品。
不論是什么樣的數(shù)位產(chǎn)品（Web , App??等），視覺(jué)都是接觸用戶(hù)的第一道關(guān)卡。每個(gè)物件的陰影、大小到圓角的處理，以及每個(gè)項(xiàng)目之間的間距及整體配色，都是魔鬼的關(guān)鍵細(xì)節(jié)，也是設(shè)計(jì)師的基本素養(yǎng)。
不多說(shuō)，請(qǐng)用眼睛去體會(huì)。
每日必逛養(yǎng)眼睛網(wǎng)站書(shū)簽：Dribble、Pinterest、Behance
蘋(píng)果打到牛頓的頭，達(dá)文西賞鳥(niǎo)展翅，這些靈光乍現(xiàn)的瞬間對(duì)設(shè)計(jì)師來(lái)說(shuō)是稀貴的寶石，只是靈感不單是稍縱即逝的瞬間，也是自發(fā)的學(xué)習(xí)勉強(qiáng)積累。成功的設(shè)計(jì)師除了具備軟體技能外，每天更需要維持汲取靈感、搜集想法，以在專(zhuān)案來(lái)臨時(shí)發(fā)揮實(shí)力，讓眾同事發(fā)出「哇！果然是設(shè)計(jì)師」的贊嘆。
每日必逛滋潤(rùn)腦袋書(shū)簽：awwwards、lapa、Illustration ui
搜集美感儲(chǔ)藏靈感— Eagle （國(guó)產(chǎn)，支持一下）。
許多公司或品牌會(huì)定義出VI（企業(yè)視覺(jué)識(shí)別），其中可能涵蓋了主要的色碼，但大多是平面設(shè)計(jì)適用，但網(wǎng)頁(yè)上由于多了互動(dòng)操作的部分，需要更多用色靈活性，像是漸層、陰影、Hover及Click的轉(zhuǎn)換??等，設(shè)計(jì)師們也會(huì)運(yùn)用一些工作去輔助思考配色：
配色參考工具：Adobe Color CC、Coolors、NIPPON COLORS -日本の伝統(tǒng)色
網(wǎng)頁(yè)漸層配色：Webgradients、EGGRADIENTS
雖然說(shuō)文案可能已經(jīng)有其他部門(mén)會(huì)準(zhǔn)備，但更常遇到的狀況是，他們也不知道你制作網(wǎng)頁(yè)會(huì)需要什么樣的內(nèi)容，或是今天是你要獨(dú)自完成一個(gè)網(wǎng)站的上架。其實(shí)當(dāng)架站與設(shè)計(jì)技術(shù)經(jīng)驗(yàn)到一定門(mén)檻后，產(chǎn)文案反而是最難的，吸引人的文案是需要大量時(shí)間爬梳整理才能夠?qū)懗鰜?lái)。
網(wǎng)頁(yè)中會(huì)用到大量的實(shí)拍照片、或是作為背景的情境照，如果客戶(hù)那邊提供的素材不盡人意，這時(shí)候你就得自己準(zhǔn)備了，做好美美的設(shè)計(jì)稿才能有說(shuō)服力。
推薦圖庫(kù)：pexels、pakutaso、findaphoto
終于進(jìn)入到界面設(shè)計(jì)的環(huán)節(jié)啦！前面的些準(zhǔn)備及技巧，都是為了在這一階段能有更精彩的表現(xiàn)。坦白說(shuō)現(xiàn)在的UI 設(shè)計(jì)軟件的操作愈做愈簡(jiǎn)單，功能也幾乎愈來(lái)愈像，挑一款適合你的工具就可以啰。
「完成度真高?。 咕褪荘rototype（原型）的主要目標(biāo)，透過(guò)接近最后成品的模擬，可以更確切的定義出團(tuán)隊(duì)協(xié)作上對(duì)產(chǎn)品的最終想像，可以點(diǎn)擊、切換頁(yè)面，并加入一點(diǎn)微特效，也能讓開(kāi)發(fā)者們更清楚知道設(shè)計(jì)師的想法，為團(tuán)隊(duì)省下重工的時(shí)間（產(chǎn)品開(kāi)發(fā)很燒錢(qián)也好花時(shí)間的）。
Sketch 、Adobe Xd目前都有支援簡(jiǎn)易原型產(chǎn)出功能，如果需要更方便的工具可以選擇Marvel APP或Invision，若是更針對(duì)微互動(dòng)效果，則是 Protopie、Principle、墨刀等
這也是一個(gè)可以讓工程師提早下班的技能，透過(guò)包含字體、大小、顏色及間劇等在內(nèi)的標(biāo)注文件，可以讓工程師更清楚地知道設(shè)計(jì)稿的真實(shí)模樣。
可選用Zeplin、Sketch Measure及Adobe XD 內(nèi)建的spec功能。
Adobe XD 的spec （beta） 畫(huà)面
一個(gè)專(zhuān)案有時(shí)會(huì)需要多名設(shè)計(jì)師合作，如何存放檔案、命名、分工內(nèi)容都是開(kāi)發(fā)流程中常遇到的問(wèn)題?；蚴荘M 想掌握每位設(shè)計(jì)師的進(jìn)度、客戶(hù)想了解前后設(shè)計(jì)稿差異，這都讓設(shè)計(jì)師需要花額外的精力去處理。
設(shè)計(jì)師可以認(rèn)識(shí)什么是基礎(chǔ)的版本控制，進(jìn)一步去了解工程師使用的Git flow，達(dá)到團(tuán)隊(duì)協(xié)作的效益最大化。
懂一點(diǎn)Code （像是Html5 / CSS3/JS..） 知道其網(wǎng)頁(yè)構(gòu)成對(duì)于設(shè)計(jì)上也能帶來(lái)很大幫助，也能更靈活的做出想要的視覺(jué)與創(chuàng)意、并且是實(shí)務(wù)上可以被實(shí)踐的，也甭讓工程師加班QAQ。
職場(chǎng)、商場(chǎng)上與人共事如此險(xiǎn)峻，有時(shí)候面臨到的是公司內(nèi)部與主管、工程師們的協(xié)作，并不是做好份內(nèi)的事就可以達(dá)成專(zhuān)案目標(biāo)，初入職場(chǎng)的你會(huì)感受到非常大的挫折，這時(shí)候你會(huì)需要懂一點(diǎn)技巧去維持設(shè)計(jì)師的立場(chǎng)，包括人際相處與溝通技巧，但記得：我們都是為了打造更好的產(chǎn)品，別走火入魔拉。
恭喜你！抵達(dá)這里已經(jīng)擁有UI設(shè)計(jì)師的基本職能，但才正要開(kāi)始而已呢，這職好玩的是必須每天都要學(xué)習(xí)新東西，并且從四處搜集靈感與資源，以及持續(xù)創(chuàng)作累積屬于自己的作品。
聯(lián)系客服
