幾年前寫過一個長篇的零基礎(chǔ)學 UI 回答《超實用新手指南!零基礎(chǔ)如何自學UI設(shè)計?》，這么長時間過去了，陸陸續(xù)續(xù)接觸了不少新人，包括我自己課程里的學生，想法已經(jīng)發(fā)生了比較大的改變。那一個體系更適合的是毅力高時間充足心態(tài)良好的同學使用(說白了幾乎就適用于大一、大二學生)。

一般人，終究是想要見效快，學習效果回饋周期短的形式來執(zhí)行。新人直接亂學手繪是沒用的，亂看書并真把看書當成學習，也是沒用的!所以針對這個需求，我給出了新的答案，具體見下文。

成為一名 UI設(shè)計師，首先得明白，日常工作需要應用什么樣的技能解決問題。但對于不同的企業(yè)，不同的職業(yè)階段，我們要處理的問題是不同的，且差異極大。

這當中涵蓋了非常廣的技能類型，從印刷廣告到3D建模、動畫特效應有盡有，尤其是在小公司中，需要身兼多職，例如小外包公司，可能設(shè)計師除了出圖還得和客戶接觸做項目經(jīng)理， 或者做網(wǎng)頁的時候得自己寫前端代碼的部分!這是任何一種職業(yè)都沒辦法避免的，公司越小層次越低，就越不可能在工作內(nèi)容中保持單一性。

當然，也因為這些公司的工作環(huán)境不理想，干的活雜，和想象的有出入，所以當這些設(shè)計師們在發(fā)表意見時往往都是大吐苦水，例舉在工作中需要的其它技能，每日疲于奔命。久而久之，就有人把這些相關(guān)的技能進行匯總，做成復雜的思維導圖，類似下面這種。 

里面的每一項技能都有用嗎?肯定是有的，甚至可以單獨針對每一項技能寫一篇長文進行分析，列舉各種數(shù)據(jù)來告訴你們它的重要性。但是，我們不可能在初期階段全部囫圇吞棗的學完，很多技能你也沒辦法評估什么才是「學完」，要學到什么「程度」。這是對新人和初級設(shè)計師階段***的陷阱，熱衷于收羅職業(yè)可能涉及到的方方面面，然后毫無規(guī)劃地亂學。

例如，設(shè)計心理學，網(wǎng)上對它的解釋整體都很膚淺，不是看了諾曼的《設(shè)計心理學》系列，就是學會設(shè)計相關(guān)心理學知識了。真正與設(shè)計相關(guān)的心理學要從生理層面開始認知，諸如視網(wǎng)膜是如何成像，視覺皮層如何進行工作的機制，到意識對圖形的反應和關(guān)聯(lián)的行為。沒有系統(tǒng)性的解構(gòu)相關(guān)知識，就無法順利的將它們應用到真實項目。 

尤其是新人，想要比較快的入行，時間如果全花在這些無法直接應用進項目，或是短期內(nèi)不容易產(chǎn)生效果的技能學習上，那么你入行的時間會大大加長，而且進步的速度會極其緩慢。

新人應該先了解的，是初級設(shè)計師最普遍的工作產(chǎn)出和要求是什么，再制定出核心的技能學習范疇。而諸如設(shè)計心理學也好，插畫手繪技能也罷，都是在你已經(jīng)能達到滿足核心技能條件，可以找到工作以后，再根據(jù)實際情況拓展的。 

下面，我會從行業(yè)最普遍的工作產(chǎn)出內(nèi)容出發(fā)，到需要的水準，以及如何進行學習，來講解初級設(shè)計師最應該先學好哪些技能，讓你們少走一些彎路。

一、普遍的工作產(chǎn)出

首先，UI設(shè)計師最主要的產(chǎn)出包含下面的幾類，APP 相關(guān)設(shè)計，產(chǎn)品主頁設(shè)計，管理界面和廣告圖(在界面廣告位的)，占了工作中的絕大部分比例。 

然后是 UI設(shè)計師在工作中可能要遇到的設(shè)計類型，比如 H5，LOGO 和 VI，線下物料，PPT，商品精修等等。 

主要的工作產(chǎn)出類型，是判斷初級設(shè)計師能力最核心的指標，決定我們的應聘和工作績效。當然，你們可能會說很多公司，寫的崗位是 UI 但完全在做平面或其它工作， 那些屬于特殊的情況是不能代表整體的。即使是招聘者，看見簡歷中屬于 UI 主要產(chǎn)出的表現(xiàn)超過預期，那么其它次要技能的要求是可以降低的，通常這些東西能做好，那么其它類型的東西應該學學做一下也差不到哪里去，這才是招聘者真實的想法。

在真實招聘經(jīng)歷中，招聘方對于程序、手繪、平面的要求如果排在 UI 前面，以那些技能來衡量你的價值，恕我直言，這個職位只是在招聘一個懂點 UI 的前端(或插畫師、平面設(shè)計師)，企業(yè)從一開始招人的需求可能就沒有想清楚，或者根本沒分清楚 UI 和其它工種的區(qū)別，不要被這些狀況擾亂了情緒。

實際情況，市面上大多數(shù)初級的 UI 設(shè)計師，在主要產(chǎn)出的幾種設(shè)計類型中，都沒有什么有用的建樹，水準堪憂，所以在這幾個領(lǐng)域要做到比他們更好超出平均水平，還是相當容易的。類似下面這些案例，能做出這種設(shè)計的設(shè)計師，就是準備被新人取代和喊行業(yè)不行了的那種。 

順便提一點，想要設(shè)計全面發(fā)展***的方式，是在有一、兩項技能提升到登堂入室，旁人無法輕易替代時，再進行拓展。不僅學起來更輕松，還可以借助其它方向上的知識點和思維方式帶動自己最擅長領(lǐng)域的進步，而不是同時開工。這也是為什么，優(yōu)秀的團隊和設(shè)計師在處理***次面對的某些設(shè)計類型時，遠勝該類型擁有數(shù)年經(jīng)驗的平庸設(shè)計師。

大部分人，甚至是成年人，從來沒有在任何領(lǐng)域中達到足夠的技能水平，這使得他們無法像杰出人物那樣感受到心理表征的真正力量，來規(guī)劃、執(zhí)行和評估他們的表現(xiàn)。因此，他們從來沒有真正理解達到這種水平需要做些什么，不僅僅是花時間，還需要進行高質(zhì)量的練習。一旦他們懂得了在某個領(lǐng)域中要達到那種足夠高的技能水平必須要做些什么，那么他們至少從原則上理解了在其他領(lǐng)域追求卓越也需要做些什么。——安德斯·艾利克森

所以下面我們再好好研究一下，主要產(chǎn)出中，要設(shè)計哪些具體的內(nèi)容。

二、具體的產(chǎn)出

1. 手機APP UI

APP界面 

• 定義：根據(jù)產(chǎn)品需求，在界面中設(shè)計和排版對應的交互、視覺元素。
• 要求：能滿足平面四要素的正確性;知道如何應用標準的系統(tǒng) Kits;能合理定義字體和元素尺寸;熟悉并能設(shè)計主流的組件類型。
• 軟件：Sketch、XD

界面圖標 

• 定義：包含 APP 啟動圖標，以及應用內(nèi)的一般工具圖標。
• 要求：對圖標的基礎(chǔ)規(guī)范有所了解，了解主流的圖標類型及使用場景，在繪制整套圖標時可以保持基本的風格一致，形式簡約美觀。
• 軟件: Sketch、Ai、PS

可交互原型 

• 定義：用來展示可以點擊并跳轉(zhuǎn)的交互原型文件。
• 要求：能清晰表達頁面跳轉(zhuǎn)邏輯即可。
• 軟件：Sketch、XD、藍湖、墨刀

基礎(chǔ)動效(權(quán)重較低) 

• 定義：可以表達觸發(fā)界面交互效果時的動畫。
• 要求：了解可以實現(xiàn)的動畫范圍，并能明白如何具體編寫表達動畫的文檔。
• 軟件：AE、Flinto、Principle

標注切圖 

• 定義：將設(shè)計稿的內(nèi)容進行標注，和將開發(fā)過程中需要的圖形進行導出。
• 要求：了解對設(shè)計還原中開發(fā)人員需要知道的參數(shù)，了解不同圖片格式的作用與區(qū)別，并能對應導出符合規(guī)范的切圖。
• 軟件：藍湖、Sketch、XD、Markman

設(shè)計規(guī)范 

• 定義：設(shè)計到開發(fā)中要遵守的相關(guān)規(guī)范文檔。
• 要求：針對最主要色彩、元素使用的規(guī)范，簡潔明了，容易被執(zhí)行。
• 軟件：任意設(shè)計軟件或 Office

2. PC 網(wǎng)頁界面

網(wǎng)頁界面 

• 定義：主要是公司官網(wǎng)或產(chǎn)品介紹頁，將需求中的內(nèi)容合理置入畫布并進行排版和設(shè)計。
• 要求：了解基本的網(wǎng)頁畫布設(shè)置和規(guī)范，網(wǎng)頁的主流結(jié)構(gòu)和交互方式，能設(shè)計出簡約美觀，表意清晰的設(shè)計。
• 軟件：XD、Sketch、PS

管理界面(除特定行業(yè)權(quán)重較低) 

• 定義：根據(jù)業(yè)務(wù)需要，設(shè)計在網(wǎng)頁端操作的管理系統(tǒng)，用來管理財務(wù)、庫存、客戶信息等的工具。
• 要求：能了解基本的管理界面組件功能和交互規(guī)則，網(wǎng)頁拉伸適配方式，和文字、色彩應用。
• 軟件：XD、Sketch

標注切圖 

• 定義：對設(shè)計稿的說明和導出開發(fā)用的圖片。
• 要求：能導出正確的切圖，和必要的區(qū)域進行說明。
• 軟件：藍湖、Markman

3. 廣告宣傳圖

Banner 設(shè)計 

• 定義：根據(jù)運營、營銷活動的需求設(shè)計出在產(chǎn)品廣告位中展示的廣告圖。
• 要求：能掌握基本的圖文混排方法，能對文字做出簡單有效的表現(xiàn)，具備入門的合成技巧。
• 軟件：PS、AI

H5活動頁面(低權(quán)重) 

• 定義：根據(jù)運營、營銷活動的需求設(shè)計出在網(wǎng)頁中展示的活動專場頁面。
• 要求：了解活動頁的基本結(jié)構(gòu)，手機端網(wǎng)頁設(shè)計的規(guī)范，有入門的主視覺設(shè)計能力
• 軟件：PS、AI

三、軟件學習

以上的產(chǎn)出內(nèi)容，就涵蓋了絕大多數(shù)初期 UI設(shè)計師的工作，而接下來，我們就要根據(jù)這些設(shè)計內(nèi)容的要求，來分析所要掌握的軟件和知識點。

1. PhotoShop

PhotoShop 是我們學習設(shè)計軟件的開始，熟悉它的交互、功能、思路、專業(yè)名詞對我們快速學會其它設(shè)計相關(guān)軟件有至關(guān)重要的作用。并且，在平面相關(guān)領(lǐng)域的工作中，PS 也是我們必然會使用的軟件。作為一款巨無霸，我們不可能在前期學會它的所有功能，所以，必須要篩選出適合的功能模塊。

創(chuàng)建保存

如何創(chuàng)建正確的畫布，分辨率、色彩模式的認知。以及不同的保存模式有哪些知識點。 

相關(guān)工具

工具欄中基礎(chǔ)工具的作用，操作方法。 

鋼筆路徑

PS中對于鋼筆工具的使用，如何操作貝塞爾曲線。 

圖層屬性

圖層屬性各個選項的具體作用，和對應的應用場景，主要在擬物設(shè)計中深入學習。 

調(diào)色功能

PS 色彩相關(guān)的功能，如通道、色相調(diào)整、曲線等工具。 

濾鏡功能

常見的幾種濾鏡類型學習，以及它們相關(guān)的應用方式。 

布爾運算

如何對路徑使用布爾運算進行圖形的繪制。 

字符設(shè)置

關(guān)于文本圖層在屬性、段落面板的所有設(shè)置。 

2. Adobe Illustrator

AI 是 PS 的孿生兄弟，它們看起來很像，但是面向的目的卻不一樣，只要熟悉了 PS 學起來就很容易。前期只需要專注于圖形和圖標的設(shè)計即可，那么篩選過后我們應該掌握的東西就并不多。

創(chuàng)建導出 

和 PS 一樣關(guān)于文件創(chuàng)建的知識，但是相對更復雜的畫板規(guī)則應盡可能的了解清楚，并且要區(qū)分出 Ai 保存和導出的不同。

鋼筆路徑 

相對于 PS ，Ai 對路徑的處理更完整多樣化，路徑查找器，變形工具，操控變形工具，圓角控制器等實用功能。

色彩填充 

Ai 中對于顏色填充的方式，漸變的應用，以及網(wǎng)格填充的方法。

畫布標尺 

Ai 畫布相關(guān)設(shè)置，標尺工具使用的規(guī)則，如何輔助我們進行創(chuàng)作。

3. Sketch、XD 

這兩款軟件相對前面兩個相當于沒有難度，只要熟悉了 PS、Ai 以后，幾天時間就能上手。并且它們對于 UI 設(shè)計的支持是最友好的，速度快，效率高，選擇其中一個主攻就可以。

4. 藍湖、Markman、SketchMeasure 

[[240046]]

這些軟件都是用來進行標注、切圖和協(xié)作的，在了解切圖相關(guān)的知識以后，只需要花一點點的時間就能學會如何使用它們。

5. AE、Flinto 選修 

[[240047]]

6. Powerpoint、Keynote 

[[240048]]

PPT 是職場必備，而設(shè)計師應該用得比普通人更好，可以更好的將我們的思路、設(shè)計展現(xiàn)給其他人。

四、理論知識

了解了相關(guān)的軟件學習目標，接下來我們就該知道，理論的學習應該包含哪些內(nèi)容。

1. 美術(shù)理論 

[[240049]]

美術(shù)理論并不是一定要通過學習素描才可以掌握的東西，在日常的實踐和觀察都可以很好的幫助我們提升美術(shù)理論的基礎(chǔ)。

光影明暗

深刻理解光線會對物體產(chǎn)生什么樣的影響，高光、背光、反光、暗部等知識。以及懂得如何分析畫面中明暗的強弱與層次。

構(gòu)圖技巧

美術(shù)構(gòu)圖和攝影構(gòu)圖基本一致，一些基本的幾何構(gòu)圖方法認知。

透視關(guān)系

平行透視、成角透視、傾斜透視等多種透視類型的理解，能在自己的創(chuàng)作中發(fā)現(xiàn)透視使用的錯誤。

色彩原理

對于色彩的基礎(chǔ)認識，以及如何通過色環(huán)進行不同類型的色彩搭配，如對比、鄰近、相似等配色原理。

2. 平面理論 

[[240050]]

平面四要素

對齊、親密、對比、重復四要素是我們設(shè)計中最基礎(chǔ)的理論知識，是 UI 設(shè)計的重中之重，《寫給大家看的平面設(shè)計書》前半部分有比較細致的說明。

平面幾何原理

除了黃金比例以外，了解如何通過幾何的數(shù)學推導進行設(shè)計創(chuàng)作的，這個只推薦看《平面設(shè)計中的幾何原理》。

字體認識

中英文，襯線非襯線等多種基礎(chǔ)字體的設(shè)計原理和認識，以及文字所包含的屬性設(shè)置，如行高、字重等對閱讀和界面有什么影響。

格線系統(tǒng)

排版中網(wǎng)格是如何設(shè)置以及如何發(fā)揮作用的知識點，只需要看 《平面設(shè)計中的網(wǎng)格系統(tǒng)》即可。

印刷設(shè)置

設(shè)計需要印刷打印的內(nèi)容時，PS、AI 對畫布如何設(shè)置和導出。

3. UI 理論 

作品審美

能分辨出設(shè)計優(yōu)秀和差勁的作品，并能通過基礎(chǔ)的平面理論對它們進行點評，在開始具體設(shè)計前，能有較高的品質(zhì)追求和分析能力支撐，推薦在花瓣上創(chuàng)建畫板持續(xù)收集優(yōu)秀作品。

分辨率

屏幕分辨率相關(guān)知識，對于不同系統(tǒng)、手機的像素倍率差異有清晰的認識。

設(shè)計規(guī)范

關(guān)于網(wǎng)頁、iOS、Android 等平臺對應的設(shè)計規(guī)范，知道如何創(chuàng)建出保守的，不會出錯的設(shè)計稿。

控件類型

了解主流的控件類型，并知道不同控件類型所包含的狀態(tài)和實際應用場景。

組件類型

了解主流的組件類型，知道特定行業(yè)或功能，會使用哪種類型的組件以及它們相關(guān)的交互邏輯。

切圖標注

在完成設(shè)計以后，如何對設(shè)計做出相應的標注，以及切圖的目的和方法。

動畫知識

APP 中主流的交互動畫類型，以及動畫相關(guān)的實現(xiàn)參數(shù)類型，包括緩動和動畫曲線等內(nèi)容。

五、工作效率 

[[240051]]

1. 項目流程

主流的 APP 團隊項目開發(fā)流程，從立項到上線會經(jīng)歷哪些過程，團隊不同角色負責什么具體工作。對敏捷、精益、OKR 等協(xié)作方式有一定的入門理解。

2. 設(shè)計流程

在開始我們的設(shè)計工作時，如何使用正確的規(guī)劃和執(zhí)行步驟保證能力發(fā)揮的***化和效率的提升。

3. 時間精力管理

實際上這個理應寫在最前面的，但為了防止突兀，我把它放在***一條做個強調(diào)，要想保證學習的效率，時間管理比前面任何一樣技能的學習優(yōu)先度都高，也更重要。

在了解怎么分配時間以后，就要一定要使用一些工具來幫助自己規(guī)劃學習的流程和分配任務(wù)，如思維導圖工具 Xmind、MindNode，還有 To-Do-List 工具 Things、滴答、瘋狂番茄等。

六、誤區(qū)的部分

1. 某個回復 

先說有人在評論區(qū)丟個這種疑問，基本是沒認真看回答就想開始皮的!先說這個不超過一年淘汰，這些東西對想走的遠的設(shè)計師是不夠的，但要記住我前面放的那個思維導圖，核心技能穩(wěn)固扎實了以后，你再去追求和學習別的東西!為什么會自己停下來，然后一年后毫無進步等著被淘汰?

先不說所謂的 UI 崗位1000人投的環(huán)境他自己經(jīng)歷過幾次還是自己收過簡歷 !就說現(xiàn)在 BAT 低級和實習普遍拿到簡歷的質(zhì)量，想要完整達到上面我提過要求的，依舊是鳳毛麟角!很多人喜歡人云亦云，夸大完環(huán)境難度以后，又不給出解決方案，來換各種姿勢側(cè)面展示自己!

說到底 UI 是視覺性為主的工作，在哪里投簡歷，我們***要務(wù)看的還是做的作品質(zhì)量，它的質(zhì)量代表了你們的專業(yè)能力!如果不靠作品判斷，光看學歷?看專業(yè)?看所謂的美術(shù)素養(yǎng)?那這種團隊壓根不是在招能做事的員工，你們要做的是要能用高效的學習方式鍛煉出扎實的基礎(chǔ)，然后碾壓那些標榜自己有所謂美術(shù)素養(yǎng)的人!而自己亂學，那真的就永遠沒機會了!

2. 技能樹

很多人看到技能樹說發(fā)慌，這點我比較納悶的!那張圖是我拿來做反面案例的!

是錯的!是錯的!是錯的!

大家一定要接受，每個專業(yè)可以拓展的技能都非常龐雜，但對于你們現(xiàn)在的階段毫無作用，以后你們開始進階了，也只是再選修其中的一部分進行提升，而不是全部需要!

3. 關(guān)于看書

這個很快我要寫一篇比較正式的回答來講解一下，有很多我群里的人看完回答***個反應是去買理論書，但是我提到書的地方都在流程偏后的位置，前面還沒做就要焦慮后面的事，說白了就是抗拒困難的地方只對簡單的事情下手，因為看書的成本太低太容易了。

所以，也不要糾結(jié)書的事。好好看完回答，自己花一兩天時間思考，做好學習的規(guī)劃，調(diào)整好作息，再擼起袖子開干!

結(jié)尾

以上就是我對最快提升自己 UI 設(shè)計能力和轉(zhuǎn)行的思考，只有擁有明確的目標，我們才知道應該怎么實踐，才有勇氣去征服這些知識的盲區(qū)。