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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

1. 手機APP UI

APP界面

定義：根據(jù)產(chǎn)品需求，在界面中設計和排版對應的交互、視覺元素。

要求：能滿足平面四要素的正確性；知道如何應用標準的系統(tǒng) Kits；能合理定義字體和元素尺寸；熟悉并能設計主流的組件類型。

軟件：Sketch、XD

界面圖標

定義：包含 APP 啟動圖標，以及應用內(nèi)的一般工具圖標。

要求：對圖標的基礎規(guī)范有所了解，了解主流的圖標類型及使用場景，在繪制整套圖標時可以保持基本的風格一致，形式簡約美觀。

軟件: Sketch、Ai、PS

可交互原型

定義：用來展示可以點擊并跳轉(zhuǎn)的交互原型文件。

要求：能清晰表達頁面跳轉(zhuǎn)邏輯即可。

軟件：Sketch、XD、藍湖、墨刀

基礎動效（權重較低）

定義：可以表達觸發(fā)界面交互效果時的動畫。

要求：了解可以實現(xiàn)的動畫范圍，并能明白如何具體編寫表達動畫的文檔。

軟件：AE、Flinto、Principle

標注切圖

定義：將設計稿的內(nèi)容進行標注，和將開發(fā)過程中需要的圖形進行導出。

要求：了解對設計還原中開發(fā)人員需要知道的參數(shù)，了解不同圖片格式的作用與區(qū)別，并能對應導出符合規(guī)范的切圖。

軟件：藍湖、Sketch、XD、Markman

設計規(guī)范

定義：設計到開發(fā)中要遵守的相關規(guī)范文檔。

要求：針對最主要色彩、元素使用的規(guī)范，簡潔明了，容易被執(zhí)行。

軟件：任意設計軟件或 Office

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

網(wǎng)頁界面

定義：主要是公司官網(wǎng)或產(chǎn)品介紹頁，將需求中的內(nèi)容合理置入畫布并進行排版和設計。

要求：了解基本的網(wǎng)頁畫布設置和規(guī)范，網(wǎng)頁的主流結構和交互方式，能設計出簡約美觀，表意清晰的設計。

軟件：XD、Sketch、PS

管理界面（除特定行業(yè)權重較低）

定義：根據(jù)業(yè)務需要，設計在網(wǎng)頁端操作的管理系統(tǒng)，用來管理財務、庫存、客戶信息等的工具。

要求：能了解基本的管理界面組件功能和交互規(guī)則，網(wǎng)頁拉伸適配方式，和文字、色彩應用。

軟件：XD、Sketch

?標注切圖

定義：對設計稿的說明和導出開發(fā)用的圖片。

要求：能導出正確的切圖，和必要的區(qū)域進行說明。

軟件：藍湖、Markman

3. 廣告宣傳圖

Banner 設計

定義：根據(jù)運營、營銷活動的需求設計出在產(chǎn)品廣告位中展示的廣告圖。

要求：能掌握基本的圖文混排方法，能對文字做出簡單有效的表現(xiàn)，具備入門的合成技巧。

軟件：PS、AI

H5活動頁面（低權重）

定義：根據(jù)運營、營銷活動的需求設計出在網(wǎng)頁中展示的活動專場頁面。

要求：了解活動頁的基本結構，手機端網(wǎng)頁設計的規(guī)范，有入門的主視覺設計能力

軟件：PS、AI

三、軟件學習

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

1. PhotoShop

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

創(chuàng)建保存

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

相關工具

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

鋼筆路徑

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

圖層屬性

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

調(diào)色功能

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

濾鏡功能

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

布爾運算

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

字符設置

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

2. Adobe Illustrator

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

創(chuàng)建導出

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

鋼筆路徑

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

色彩填充

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

畫布標尺

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

3. Sketch、XD

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

4. 藍湖、Markman、SketchMeasure

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

5. AE、Flinto 選修

6. Powerpoint、Keynote

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

四、理論知識

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

1. 美術理論

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

光影明暗

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

構圖技巧

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

透視關系

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

色彩原理

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

2. 平面理論

平面四要素

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

平面幾何原理

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

字體認識

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

格線系統(tǒng)

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

印刷設置

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

3. UI 理論

作品審美

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

分辨率

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

設計規(guī)范

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

控件類型

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

組件類型

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

切圖標注

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

動畫知識

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

五、工作效率

1. 項目流程

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

2. 設計流程

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

3. 時間精力管理

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

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

六、誤區(qū)的部分

1. 某個回復

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

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

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

2. 技能樹

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

是錯的！是錯的！是錯的！

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

3. 關于看書

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

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

結尾

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

歡迎關注作者的微信公眾號：「超人的電話亭」

「如何持續(xù)輸出優(yōu)秀的設計作品」

• 《網(wǎng)易高級設計師：如何通過刻意練習提升自己？》
• 《設計師沒原創(chuàng)靈感？試試這個方法！》
• 《9個小技巧，讓你的作品也能上Behance 熱門！》