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

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

系列文章聲明

1. 寫作目標：

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

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

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

2. 面向人群：

這套干貨內容，適合從零開始想接觸或學習 UI 的同學。當然，如果已經接觸過一段時間但感覺自己的基礎知識體系還是非常不牢固的同學也適合。

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

3. 內容聲明：

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

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

4. 免費聲明：

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

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

UI相關概念知識掃盲

1. UI 與設計

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

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

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

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

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

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

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

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

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

之后伴隨智能手機的興起，智能設備的普及。UI 界面已經成為了我們日常生活不可或缺的一部分，我們通過界面來操控設備、獲取信息，它是我們駕馭智能硬件、復雜程序的橋梁。

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

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

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

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

2. 交互設計是什么

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

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

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

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

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

當然，只關注這些最初級的交互元素非常簡單，很難對它展開獨立的設計。

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

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

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

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

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

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

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

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

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

3. 體驗設計是什么

體驗設計（User Experience Design）在網上搜解釋，是以用戶為中心的一種設計手段，以用戶需求為目標而進行的設計。

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

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

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

所以這時候就有兩個關鍵的問題產生了：

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

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

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

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

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

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

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

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

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

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

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

1. UI 對口崗位分析

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

UI / 界面設計師：

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

UE / 交互設計師：

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

UX / 體驗設計師：

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

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

全鏈路 / 產品設計師：

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

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

UI 動效設計師：

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

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

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

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

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

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

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

相比編程來說，UI 設計領域還有個優(yōu)點（其實應該是悲?。?，那就是新人 —— 眾生平等?？瓢嘣O計教育……懂得都懂。

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

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

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

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

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

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

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

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

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

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

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

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

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

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