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

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

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

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

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

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

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

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

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

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

一、普遍的工作產出

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

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

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

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

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

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

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

所以下面我們再好好研究一下，主要產出中，要設計哪些具體的內容。

二、具體的產出

1. 手機APP UI

APP界面 

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

界面圖標 

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

可交互原型 

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

基礎動效(權重較低) 

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

標注切圖 

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

設計規范 

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

2. PC 網頁界面

網頁界面 

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

管理界面(除特定行業權重較低) 

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

標注切圖 

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

3. 廣告宣傳圖

Banner 設計 

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

H5活動頁面(低權重) 

• 定義：根據運營、營銷活動的需求設計出在網頁中展示的活動專場頁面。
• 要求：了解活動頁的基本結構，手機端網頁設計的規范，有入門的主視覺設計能力
• 軟件：PS、AI

三、軟件學習

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

1. PhotoShop

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

創建保存

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

相關工具

工具欄中基礎工具的作用，操作方法。 

鋼筆路徑

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

圖層屬性

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

調色功能

PS 色彩相關的功能，如通道、色相調整、曲線等工具。 

濾鏡功能

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

布爾運算

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

字符設置

關于文本圖層在屬性、段落面板的所有設置。 

2. Adobe Illustrator

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

創建導出 

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

鋼筆路徑 

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

色彩填充 

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

畫布標尺 

Ai 畫布相關設置，標尺工具使用的規則，如何輔助我們進行創作。

3. Sketch、XD 

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

4. 藍湖、Markman、SketchMeasure 

[[240046]]

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

5. AE、Flinto 選修 

[[240047]]

6. Powerpoint、Keynote 

[[240048]]

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

四、理論知識

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

1. 美術理論 

[[240049]]

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

光影明暗

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

構圖技巧

美術構圖和攝影構圖基本一致，一些基本的幾何構圖方法認知。

透視關系

平行透視、成角透視、傾斜透視等多種透視類型的理解，能在自己的創作中發現透視使用的錯誤。

色彩原理

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

2. 平面理論 

[[240050]]

平面四要素

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

平面幾何原理

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

字體認識

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

格線系統

排版中網格是如何設置以及如何發揮作用的知識點，只需要看 《平面設計中的網格系統》即可。

印刷設置

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

3. UI 理論 

作品審美

能分辨出設計優秀和差勁的作品，并能通過基礎的平面理論對它們進行點評，在開始具體設計前，能有較高的品質追求和分析能力支撐，推薦在花瓣上創建畫板持續收集優秀作品。

分辨率

屏幕分辨率相關知識，對于不同系統、手機的像素倍率差異有清晰的認識。

設計規范

關于網頁、iOS、Android 等平臺對應的設計規范，知道如何創建出保守的，不會出錯的設計稿。

控件類型

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

組件類型

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

切圖標注

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

動畫知識

APP 中主流的交互動畫類型，以及動畫相關的實現參數類型，包括緩動和動畫曲線等內容。

五、工作效率 

[[240051]]

1. 項目流程

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

2. 設計流程

在開始我們的設計工作時，如何使用正確的規劃和執行步驟保證能力發揮的***化和效率的提升。

3. 時間精力管理

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

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

六、誤區的部分

1. 某個回復 

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

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

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

2. 技能樹

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

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

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

3. 關于看書

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

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

結尾

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