從第一篇，也是最早的一篇零基礎(chǔ)學(xué) UI 文章《設(shè)計干貨 | 從零基礎(chǔ)學(xué)習(xí) UI 設(shè)計》到現(xiàn)在已經(jīng)過去很多年了，UI 設(shè)計師的職能、工具、知識體系，都經(jīng)歷了大量的變更和革新。不僅越來越碎片化，也越來越難上手學(xué)習(xí)，零基礎(chǔ)入門成本大幅提升了。

所以，我們打算開啟一個新的系列，輸出一部完整的 UI 零基礎(chǔ)學(xué)習(xí)指南。根據(jù) UI 新手系統(tǒng)學(xué)習(xí) UI 設(shè)計的順序，陸續(xù)會輸出 12-15 篇不同模塊的系列性文章。

系列文章聲明

1. 寫作目標(biāo)：

我們的目標(biāo)是通過這個系列，幫助新手高效、系統(tǒng)性地完成對 UI 職業(yè)的知識的入門。

UI 是一個完全面向職場的工作技能，它基本無法成為個人陶冶性情的愛好。學(xué)習(xí)這個技能，就是為了在真實的工作環(huán)境中進行應(yīng)用，是一門以實用主義為內(nèi)核的學(xué)科。

所以，在內(nèi)容制定上我會避開過于概念、學(xué)術(shù)性的內(nèi)容，完全以職業(yè)市場的實際需要為導(dǎo)向。同時我自己也非常討厭 “不講人話” 的寫作風(fēng)格，全篇避免 “高大上” 的專業(yè)詞匯和行業(yè)黑話過度使用。

2. 面向人群：

這套干貨內(nèi)容，適合從零開始想接觸或?qū)W習(xí) UI 的同學(xué)。當(dāng)然，如果已經(jīng)接觸過一段時間但感覺自己的基礎(chǔ)知識體系還是非常不牢固的同學(xué)也適合。

同時，如果是和 UI 相關(guān)聯(lián)的崗位，如產(chǎn)品、交互、用研、運營、前端開發(fā)，也可以通過這套分享來了解 UI 設(shè)計師的知識體系、工作方法和思維邏輯，更好的配合 UI 設(shè)計師完成工作。

3. 內(nèi)容聲明：

除用來舉例的線上案例外，所有知識點和圖文內(nèi)容都由我們原創(chuàng)輸出，會整合部分我們以前創(chuàng)作過的內(nèi)容進來。如 UI 尺寸、字體規(guī)范、項目管理等。

因為網(wǎng)上有大量洗稿、抄襲和無聲明轉(zhuǎn)載我們的內(nèi)容的賬號，所以如果當(dāng)你覺得看到的內(nèi)容好像在別的地方看過，那只可能是我寫的或者別人轉(zhuǎn)載的。

4. 免費聲明：

這套分享將是完全免費的，不用擔(dān)心寫到一半變成付費內(nèi)容。同時，文章中包含的各類網(wǎng)盤素材，一方面受不可抗力的影響，鏈接會不斷失效，另一方面我們會持續(xù)變動更新（如軟件安裝包）。

整篇內(nèi)容完成以后，也會合并成一篇完整的 PDF 電子文檔供大家查閱。

UI相關(guān)概念知識掃盲

1. UI 與設(shè)計

UI (User Interface) 也叫交互界面、圖形界面、人機界面，是我們今天無時無刻不在接觸不受影響的偉大發(fā)明。

理解 UI 是什么，我們只要關(guān)注 2 個重點（敲黑板，劃重點）：

• 如何有效輸入信息
• 如何有效獲取信息

計算機是一個用來輸入指令，完成處理，返回結(jié)果的設(shè)備。比如問計算機 1 1 等于幾，你就要考慮你怎么輸入 1 1 并讓計算機處理結(jié)果，計算機又要通過什么形式告訴你結(jié)果是什么？有效的把指令、結(jié)果進行傳遞是非常困難的事情。

早期人類使用打孔卡片的方式做信息的媒介，人類和機器通過打孔來完成信息的輸入和識別。隨著技術(shù)的進步，屏幕成為新的媒介，我們可以直接往計算機中輸入更復(fù)雜的英文字母了。

于是，計算機開始支持命令行的輸入形式，即使用一些固定的單詞、語法，來完成信息的輸入，計算機再以文本形式返回對應(yīng)的計算結(jié)果。

雖然這一步大大優(yōu)化了信息輸入、獲取的流程，但是依舊不能讓我們滿足。因為它的門檻太高了，需要背下一整本操作指令手冊，而且用途非常有局限性。

再往后，就是圖形界面被發(fā)明了出來。比如桌面有個我的硬盤圖標(biāo)，你使用鼠標(biāo)或鍵盤打開，那么打開的窗口就會顯示該硬盤下級包含的文件或文件夾，你可以輕松選中這些文件再進行操作。

這個發(fā)明是跨越性的，因為它讓信息輸入、獲取變得更高效，也讓使用計算機設(shè)備的門檻更低，為計算機設(shè)備進入普通群眾生活提供了必要條件。

之后伴隨智能手機的興起，智能設(shè)備的普及。UI 界面已經(jīng)成為了我們?nèi)粘Ｉ畈豢苫蛉钡囊徊糠?，我們通過界面來操控設(shè)備、獲取信息，它是我們駕馭智能硬件、復(fù)雜程序的橋梁。

圖形界面的本質(zhì)是信息的載體，完成信息的輸入和獲取的 “使用價值” 才是它的核心價值。UI 設(shè)計的目標(biāo)，即根據(jù)信息輸入和獲取的需要，設(shè)計相關(guān)圖形樣式和排版的設(shè)計。

所以，UI 設(shè)計是一個輔助用戶來使用硬件、程序的工具，觀賞性并不是它的唯一指標(biāo)。理解 UI 設(shè)計最大的誤區(qū)就是僅僅以美觀角度切入，而忽視它的使用價值（后面會重點解釋）。

雖然 UI 設(shè)計是針對所有電子設(shè)備圖形界面設(shè)計的統(tǒng)稱，包括穿戴設(shè)備、智能家電、車機系統(tǒng)等，但它在國內(nèi)主流語境指的是移動端 APP 界面的設(shè)計。

在后續(xù)的內(nèi)容中，我們的核心也將圍繞 APP 的界面設(shè)計展開解釋。

2. 交互設(shè)計是什么

前面聲明了，UI 界面本質(zhì)上是一種工具，它為什么不像平面海報、卡片一樣僅僅是用來輸出信息或展示視覺效果的？

因為 UI 界面是可以進行 “交互” 的視覺內(nèi)容。交互（Interaction Design，IXD）這個詞匯對于新手來說一直是理解的重災(zāi)區(qū)，因為它的概念太模糊，且牽扯的其它領(lǐng)域太多。

簡單解釋，交互就是人和設(shè)備相交（產(chǎn)生接觸）并進行互動的過程。比如你拿起手機解鎖，就是一次交互，打開 APP 是一次交互，點擊購買按鈕也是一次交互。

交互設(shè)計，雖然用的也是 “設(shè)計” 一詞，但它指的是制定這些交互事件的方法和過程，并不是指視覺樣式的制作。

比如關(guān)注按鈕，在視覺領(lǐng)域中，在意的是它的長寬比、圖標(biāo)樣式、文字占比。但在交互領(lǐng)域，關(guān)注的是它包含的所有狀態(tài)和互動反饋。

當(dāng)然，只關(guān)注這些最初級的交互元素非常簡單，很難對它展開獨立的設(shè)計。

難點在于，產(chǎn)品提供的服務(wù)往往需要非常多的操作步驟才能完成，且整個操作流程中包含了各種狀況，需要我們獨立展開制定，才能確保后續(xù) UI 界面設(shè)計的流暢性。

例如，用購物流程來舉例，我們要做一個購物流程的交互設(shè)計。先假定產(chǎn)品本身的一些要求：

• 暫不支持購物車，但商品可以一次購買多個
• 任何商品都有配送范圍和庫存，超出就不能購買

根據(jù)上面的要求進行交互層面的考慮，就要想在哪個環(huán)節(jié)增加數(shù)量選擇，是直接進訂單頁還是商品頁？什么時候判斷商品配送范圍到?jīng)]到，如果配送超了怎么讓用戶知道？庫存不夠的狀態(tài)該怎么顯示，如果是在訂單未付款狀態(tài)最后一個庫存先被別人買了，怎么提示？

可以發(fā)現(xiàn)，這些問題和設(shè)計出什么視覺風(fēng)格、配色、創(chuàng)意，并沒有什么直接關(guān)系，我們要給出的解決方案，就是交互設(shè)計的輸出內(nèi)容。

交互設(shè)計主要輸出的產(chǎn)物是交互原型，用來表現(xiàn)交互流程、事件的原型圖例。比如下方，我針對配送范圍判斷的原型案例：

在這個簡單的產(chǎn)品功能中，就需要一系列的交互方案進行配合。

隨著產(chǎn)品的復(fù)雜度增加，交互的難度也就成幾何倍數(shù)增加，如果交互沒有制定清楚，那么就無法保證產(chǎn)品正常運作或產(chǎn)生系統(tǒng) BUG（庫存沒有了還能下單）。

這也是為什么我們不得不重視交互的原因。

3. 體驗設(shè)計是什么

體驗設(shè)計（User Experience Design）在網(wǎng)上搜解釋，是以用戶為中心的一種設(shè)計手段，以用戶需求為目標(biāo)而進行的設(shè)計。

但用戶體驗是一個比交互還抽象的詞匯，它描述的范圍太模糊，各行各業(yè)始終把用戶體驗掛在嘴邊，對我們理解會產(chǎn)生非常大的障礙。

簡單來說，用戶體驗，就是使用產(chǎn)品服務(wù)過程中產(chǎn)生的實際感受。這個感受可好可差，受產(chǎn)品的服務(wù)質(zhì)量與各方面細節(jié)影響。而體驗設(shè)計，即通過有目的性的調(diào)整產(chǎn)品服務(wù)、細節(jié)，提升用戶實際感受。

例如上方案例，交互層面我們提供了各種防御性措施，提示用戶商品沒有庫存、配送超出范圍。雖然在功能上滿足業(yè)務(wù)要求，但不代表它們產(chǎn)生的用戶體驗一定是優(yōu)異的。

所以這時候就有兩個關(guān)鍵的問題產(chǎn)生了：

• 如何確定用戶對這套方案體驗的優(yōu)劣
• 如果體驗不佳，應(yīng)該如何進行的優(yōu)化

第一個問題就是整個體驗設(shè)計中的核心問題，我們要獲取用戶對某些定向功能、流程的體驗評價。那么你就需要展開用戶研究，通過制定一個測試、研究方案，來獲得想要的結(jié)果。到這一步，讓人眼花繚亂的科學(xué)方法論、研究方式就輪番上陣了。

假設(shè)我通過制定了一些用研的方式獲取了用戶對這套方案的評價，普遍反應(yīng)體驗較差，興沖沖的要下單結(jié)果過一會兒沒貨，或是填了老半天收貨信息結(jié)果告訴他沒貨。

于是，我就定位到了影響體驗的關(guān)鍵因素，在后面我就可以思考該問題的體驗改進方案：

• 用戶點擊進入下單頁面鎖商品庫存，有 5 分鐘的鎖單時間。如果該商品是最后一件，在鎖單期間其它用戶看到該頁面也是無庫存的狀態(tài)，不能點擊購買。
• 配送范圍要在下單前就給能否配送提示，直接在商品詳情頁露出，填寫過地址根據(jù)上次購買地址判斷，沒有填寫過就以手機當(dāng)前定位。

這兩個改進是今天普遍應(yīng)用在自營配送的電商、外賣、生鮮等產(chǎn)品，相信大家一點也不陌生。而這些改進，完全是基于改善體驗出發(fā)，而不是僅僅解決交互的問題，或者界面視覺問題。

上述案例只應(yīng)用了 “提出問題 – 進行論證 – 給出解決方案” 的基礎(chǔ)線性流程，雖然它很實用，但遠不足以覆蓋真實項目的所有體驗設(shè)計實踐。

所以，為了讓體驗設(shè)計的本身具備更清晰、細致的流程，不同的企業(yè)、組織、團隊都開始搭建體驗設(shè)計的標(biāo)準化（花里胡哨）流程和方法論。

不管你看到的方法論有多復(fù)雜，添加了多少輔助線、介紹圖形。它們都只是社會科學(xué)研究方法的不同拓展形式，沒有本質(zhì)上的區(qū)別。

在學(xué)習(xí) UI 的前期階段，并不需要真的去深入理解各個大廠的體驗設(shè)計流程和思路。只需要知道，體驗設(shè)計不是直接動手做設(shè)計的設(shè)計類型，而是一種通過研究分析行為來找出提升用戶體驗，再輸出相關(guān)方案的設(shè)計。

當(dāng)前就業(yè)形式分析

1. UI 對口崗位分析

學(xué)習(xí) UI 可以入職的崗位不僅僅是 UI 設(shè)計師一種，到目前已經(jīng)發(fā)展出包含 UE、UX、全鏈路等不同崗位。我們首先要認識一下具體有哪些，以及他們各自的職能。

UI / 界面設(shè)計師：

首先介紹老本行，UI 設(shè)計師也叫界面設(shè)計師。核心職能就是根據(jù)老板、產(chǎn)品的需求，提供界面的視覺方案。并輸出相關(guān)的設(shè)計規(guī)范、設(shè)計說明、設(shè)計切圖。

UE / 交互設(shè)計師：

理論上，UE 是 User Experience 用戶體驗的縮寫，但在國內(nèi)招聘中，UE 一直被當(dāng)成交互設(shè)計師頭銜來使用。交互設(shè)計師的主要輸出內(nèi)容，就是在獲得產(chǎn)品需求后輸出交互原型和文檔。

UX / 體驗設(shè)計師：

UX 設(shè)計師，體驗設(shè)計師，就是專門針對體驗進行設(shè)計的崗位。理論上體驗設(shè)計師是做用戶研究和制定體驗方案。但不同公司對體驗設(shè)計師的要求完全不一樣，實際工作的內(nèi)容重心可能是用研，也可能是交互或者界面。

體驗設(shè)計師是目前職責(zé)最難清晰定義的崗位，完全取決于用人企業(yè)對體驗設(shè)計本身的理解（參差不齊）。

全鏈路 / 產(chǎn)品設(shè)計師：

之前阿里提出了設(shè)計全鏈路的概念，很多人理解成是全知全能的 “全棧設(shè)計師”。實際上指的是可以深度參與產(chǎn)品業(yè)務(wù)和決策中，更好發(fā)揮設(shè)計商業(yè)價值的 UI 或 UX 設(shè)計師。

雖然輸出內(nèi)容很接近，但對于業(yè)務(wù)參與的要求會更高。

UI 動效設(shè)計師：

動效設(shè)計是 UI 設(shè)計的其中一個環(huán)節(jié)，普通項目對動效的需求和難度要求都不高。但在如直播、社交等特定項目中，需要大量的動效堆砌，這時候就需要有獨立的動效的設(shè)計師來負責(zé)，專注在和產(chǎn)品有關(guān)的動效和視覺特效上。

2. 當(dāng)前的就業(yè)形式

第二個問題，就是新手非常感興趣的就業(yè)形式了。網(wǎng)上對 UI 行業(yè)前景的分析大多充滿抱怨和負面情緒，認為對新手不友好，對沒有背景、基礎(chǔ)的人關(guān)閉大門等。

一條條反駁這些內(nèi)容是沒有意義的，如果只是聽信這些負面情緒而退步，那么確實不適合學(xué)習(xí)和進入這個行業(yè)。因為連自己的立場和堅持也沒有，又怎么能順利面對后面必然會出現(xiàn)的挫折和苦難（任何職業(yè)都有）。

UI 設(shè)計師是一個完全和互聯(lián)網(wǎng)行業(yè)深度捆綁的職業(yè)，現(xiàn)狀隨互聯(lián)網(wǎng)行業(yè)的起伏而波動。探討 UI 設(shè)計前景，就一定要結(jié)合互聯(lián)網(wǎng)發(fā)展的趨勢來分析。

首先，撇開宏觀的各種政策和分析，我們可以確定一個觀點，就是互聯(lián)網(wǎng)技術(shù)的發(fā)展與應(yīng)用，在未來幾十年里依舊會突飛猛進。UI 設(shè)計師不可能在這個期間被取代和拋棄，要駕馭越復(fù)雜的技術(shù)和硬件，就越需要優(yōu)秀的界面作為載體。

其次，UI 設(shè)計和編程，都是非常容易衡量真實水平的職業(yè)。企業(yè)招聘的目的是為了讓職業(yè)人才輸出高質(zhì)量的成果賺取利潤，如果只靠學(xué)歷和科班，消費者是不買賬的。

相比編程來說，UI 設(shè)計領(lǐng)域還有個優(yōu)點（其實應(yīng)該是悲劇），那就是新人 —— 眾生平等。科班設(shè)計教育……懂得都懂。

總之，完全不需要擔(dān)心科班生在 UI 產(chǎn)出上能有什么特殊的優(yōu)勢，他們需要學(xué)習(xí)的 UI 基礎(chǔ)，和你沒有任何區(qū)別，并且依舊要依仗自學(xué)或者培訓(xùn)班。這些外因確保了 UI 設(shè)計是互聯(lián)網(wǎng)產(chǎn)品團隊中綜合門檻最低的那一個，如果多接觸和分析大廠團隊，你們就會發(fā)現(xiàn)設(shè)計永遠是團隊中學(xué)歷最差的那一個……

因為門檻低，所以沖高薪想轉(zhuǎn)行的人數(shù)也是最多的。經(jīng)?？梢栽诰W(wǎng)上搜索幾百個人競爭一個 UI 職位的新聞，但實際上，90% 以上的新人，真實水平是慘不忍睹的，直接可以體現(xiàn)在求職的作品集上。

面向大眾渠道招聘收上來的簡歷，是一場大型的 “菜雞互啄” 現(xiàn)場，只有頭部 10% 以內(nèi)的人是有機會的。這里并不是強調(diào)競爭有多激烈，而是大多數(shù)新手不是學(xué)習(xí)的方向不對，就是作品集濫竽充數(shù)，只有剩下的 10% 不到的人，處于真正的競爭狀態(tài)。

在 UI 行業(yè)，“菜” 才是原罪，實力就是硬通貨。而后面的系列內(nèi)容，就是要幫助大家在學(xué)習(xí)中走上正確的道路……

3. 職業(yè)的薪資發(fā)展

受互聯(lián)網(wǎng)行業(yè)影響，UI 設(shè)計師的平均工資遠高于一般設(shè)計行業(yè)。在網(wǎng)上各個渠道搜索 UI 薪資的統(tǒng)計，都可以得出這樣的結(jié)論。

以阿里 P6 的職級來區(qū)分，1 線城市 15K 以下的設(shè)計師，基本只能屬于入門階段。15-30K 的設(shè)計師，屬于資深階段。到達 30K 以上的，就進入專家以上水平。當(dāng)然，這還只是說月薪，不包含年終獎、股票等其它福利。

當(dāng)然，很多新手 UI 設(shè)計師會說自己工資怎么就沒那么高，我和姚明平均身高兩米，有意義嘛？

答案是有意義。因為工資不是身高，除去天花板，行業(yè)中上水平工資，是普通人可以通過努力獲得的。高工資也不是 BAT 大廠特有的，有大量中小型規(guī)模的優(yōu)質(zhì)互聯(lián)網(wǎng)團隊，是會開出有競爭力的工資的。

那么為什么還有很多 UI 設(shè)計師處于低薪狀態(tài)？因為公司的三六九等并不是單純從規(guī)模上來考量的，而是 “互聯(lián)網(wǎng)化” 程度。

會用心打磨產(chǎn)品的團隊，和吃人情關(guān)系的外包公司、老板腦子一熱做的家族企業(yè)是完全不同的。前者和后者的設(shè)計師水平，必然也有非常大的差異。就像在廣告平面行業(yè)，路邊廣告文印店也有平面設(shè)計師，國際 4A 廣告公司也有平面設(shè)計師，都是平面設(shè)計，兩者平均下來有價值嘛？

想要獲得高薪，除了大廠，就是面向這些圍繞在互聯(lián)網(wǎng)產(chǎn)業(yè)輸出有價值，有競爭力的產(chǎn)品團隊上，他們才能代表這個行業(yè)的真實情況和水平。而如果你所有的面試、Offer，都是來自老板家族型企業(yè)、有上頓沒下頓的小外包公司，并且薪水微薄。那么主要的問題，不要怨環(huán)境，而是因為 —— 菜。

有很多新手，包括我自己，在我們剛開始入行的時候，確實只能進入到這些一言難盡的公司和團隊中。但這不是職業(yè)的全部，不要將未來和現(xiàn)狀捆綁起來。我們是可以通過持續(xù)提升自己的硬實力切換所處的環(huán)境，提升自己薪資水平的。如果現(xiàn)在只有 5-6 千，可以朝 1 W 進發(fā)，如果已經(jīng)過 1W 了，就往 1W5 的水平努力，以此類推。這個行業(yè)有充分的上升空間和拓展的彈性。

樹立正確的認識，建立長遠的目標(biāo)，你才可以在這個行業(yè)中走的更遠，獲得更多的回報。