原創(chuàng)：「超人的電話亭」
轉載：https://www.uisdc.com/ui-self-learning-process
幾年前寫過一個長篇的零基礎學 UI 回答《超實用新手指南！零基礎如何自學UI設計？》馆类，這么長時間過去了，陸陸續(xù)續(xù)接觸了不少新人缀去，包括我自己課程里的學生软舌，想法已經發(fā)生了比較大的改變羽圃。那一個體系更適合的是毅力高時間充足心態(tài)良好的同學使用（說白了幾乎就適用于大一欢搜、大二學生）封豪。
一般人，終究是想要見效快炒瘟，學習效果回饋周期短的形式來執(zhí)行吹埠。新人直接亂學手繪是沒用的，亂看書并真把看書當成學習疮装，也是沒用的缘琅！所以針對這個需求，我給出了新的答案廓推，具體見下文刷袍。
成為一名 UI設計師，首先得明白樊展，日常工作需要應用什么樣的技能解決問題呻纹。但對于不同的企業(yè)鸽心，不同的職業(yè)階段，我們要處理的問題是不同的居暖，且差異極大。
這當中涵蓋了非常廣的技能類型藤肢，從印刷廣告到3D建模太闺、動畫特效應有盡有，尤其是在小公司中嘁圈，需要身兼多職省骂，例如小外包公司，可能設計師除了出圖還得和客戶接觸做項目經理最住， 或者做網頁的時候得自己寫前端代碼的部分钞澳！這是任何一種職業(yè)都沒辦法避免的，公司越小層次越低涨缚，就越不可能在工作內容中保持單一性轧粟。
當然，也因為這些公司的工作環(huán)境不理想脓魏，干的活雜兰吟，和想象的有出入，所以當這些設計師們在發(fā)表意見時往往都是大吐苦水茂翔，例舉在工作中需要的其它技能混蔼，每日疲于奔命。久而久之珊燎，就有人把這些相關的技能進行匯總惭嚣，做成復雜的思維導圖，類似下面這種悔政。
里面的每一項技能都有用嗎晚吞？肯定是有的，甚至可以單獨針對每一項技能寫一篇長文進行分析卓箫，列舉各種數據來告訴你們它的重要性载矿。但是，我們不可能在初期階段全部囫圇吞棗的學完烹卒，很多技能你也沒辦法評估什么才是「學完」闷盔，要學到什么「程度」。這是對新人和初級設計師階段最大的陷阱旅急，熱衷于收羅職業(yè)可能涉及到的方方面面逢勾，然后毫無規(guī)劃地亂學。
例如藐吮，設計心理學溺拱，網上對它的解釋整體都很膚淺逃贝，不是看了諾曼的《設計心理學》系列，就是學會設計相關心理學知識了迫摔。真正與設計相關的心理學要從生理層面開始認知沐扳，諸如視網膜是如何成像，視覺皮層如何進行工作的機制句占，到意識對圖形的反應和關聯(lián)的行為沪摄。沒有系統(tǒng)性的解構相關知識，就無法順利的將它們應用到真實項目纱烘。
尤其是新人杨拐，想要比較快的入行，時間如果全花在這些無法直接應用進項目擂啥，或是短期內不容易產生效果的技能學習上哄陶，那么你入行的時間會大大加長，而且進步的速度會極其緩慢哺壶。
新人應該先了解的屋吨，是初級設計師最普遍的工作產出和要求是什么，再制定出核心的技能學習范疇变骡。而諸如設計心理學也好离赫，插畫手繪技能也罷，都是在你已經能達到滿足核心技能條件，可以找到工作以后，再根據實際情況拓展的房轿。
下面权纤，我會從行業(yè)最普遍的工作產出內容出發(fā)，到需要的水準，以及如何進行學習，來講解初級設計師最應該先學好哪些技能，讓你們少走一些彎路切厘。
一、普遍的工作產出
首先懊缺，UI設計師最主要的產出包含下面的幾類疫稿，APP 相關設計，產品主頁設計鹃两，管理界面和廣告圖（在界面廣告位的）遗座，占了工作中的絕大部分比例。
然后是 UI設計師在工作中可能要遇到的設計類型俊扳，比如 H5途蒋，LOGO 和 VI，線下物料馋记，PPT号坡，商品精修等等懊烤。
主要的工作產出類型，是判斷初級設計師能力最核心的指標宽堆，決定我們的應聘和工作績效腌紧。當然，你們可能會說很多公司畜隶，寫的崗位是 UI 但完全在做平面或其它工作寄啼， 那些屬于特殊的情況是不能代表整體的。即使是招聘者代箭，看見簡歷中屬于 UI 主要產出的表現超過預期，那么其它次要技能的要求是可以降低的涕刚，通常這些東西能做好嗡综，那么其它類型的東西應該學學做一下也差不到哪里去，這才是招聘者真實的想法杜漠。
在真實招聘經歷中极景，招聘方對于程序、手繪驾茴、平面的要求如果排在 UI 前面盼樟，以那些技能來衡量你的價值，恕我直言锈至，這個職位只是在招聘一個懂點 UI 的前端（或插畫師晨缴、平面設計師），企業(yè)從一開始招人的需求可能就沒有想清楚峡捡，或者根本沒分清楚 UI 和其它工種的區(qū)別击碗，不要被這些狀況擾亂了情緒。
實際情況们拙，市面上大多數初級的 UI 設計師稍途，在主要產出的幾種設計類型中，都沒有什么有用的建樹砚婆，水準堪憂械拍，所以在這幾個領域要做到比他們更好超出平均水平，還是相當容易的装盯。類似下面這些案例坷虑，能做出這種設計的設計師，就是準備被新人取代和喊行業(yè)不行了的那種验夯。
順便提一點猖吴，想要設計全面發(fā)展最好的方式，是在有一挥转、兩項技能提升到登堂入室海蔽，旁人無法輕易替代時共屈，再進行拓展。不僅學起來更輕松党窜，還可以借助其它方向上的知識點和思維方式帶動自己最擅長領域的進步拗引，而不是同時開工。這也是為什么幌衣，優(yōu)秀的團隊和設計師在處理第一次面對的某些設計類型時矾削，遠勝該類型擁有數年經驗的平庸設計師。
大部分人豁护，甚至是成年人哼凯，從來沒有在任何領域中達到足夠的技能水平，這使得他們無法像杰出人物那樣感受到心理表征的真正力量楚里，來規(guī)劃断部、執(zhí)行和評估他們的表現。因此班缎，他們從來沒有真正理解達到這種水平需要做些什么蝴光，不僅僅是花時間，還需要進行高質量的練習达址。一旦他們懂得了在某個領域中要達到那種足夠高的技能水平必須要做些什么蔑祟，那么他們至少從原則上理解了在其他領域追求卓越也需要做些什么〕吝耄——安德斯·艾利克森
所以下面我們再好好研究一下疆虚，主要產出中，要設計哪些具體的內容满葛。
二装蓬、具體的產出
1. 手機APP UI
APP界面
定義：根據產品需求，在界面中設計和排版對應的交互纱扭、視覺元素牍帚。
要求：能滿足平面四要素的正確性；知道如何應用標準的系統(tǒng) Kits乳蛾；能合理定義字體和元素尺寸暗赶；熟悉并能設計主流的組件類型。
軟件：Sketch肃叶、XD
界面圖標
定義：包含 APP 啟動圖標蹂随，以及應用內的一般工具圖標。
要求：對圖標的基礎規(guī)范有所了解因惭，了解主流的圖標類型及使用場景岳锁，在繪制整套圖標時可以保持基本的風格一致，形式簡約美觀蹦魔。
軟件: Sketch激率、Ai咳燕、PS
可交互原型
定義：用來展示可以點擊并跳轉的交互原型文件。
要求：能清晰表達頁面跳轉邏輯即可乒躺。
軟件：Sketch招盲、XD、藍湖嘉冒、墨刀
基礎動效（權重較低）
定義：可以表達觸發(fā)界面交互效果時的動畫曹货。
要求：了解可以實現的動畫范圍，并能明白如何具體編寫表達動畫的文檔讳推。
軟件：AE顶籽、Flinto、Principle
標注切圖
定義：將設計稿的內容進行標注银觅，和將開發(fā)過程中需要的圖形進行導出蜕衡。
要求：了解對設計還原中開發(fā)人員需要知道的參數，了解不同圖片格式的作用與區(qū)別设拟，并能對應導出符合規(guī)范的切圖。
軟件：藍湖久脯、Sketch纳胧、XD、Markman
設計規(guī)范
定義：設計到開發(fā)中要遵守的相關規(guī)范文檔帘撰。
要求：針對最主要色彩跑慕、元素使用的規(guī)范，簡潔明了摧找，容易被執(zhí)行核行。
軟件：任意設計軟件或 Office
2. PC 網頁界面
網頁界面
定義：主要是公司官網或產品介紹頁，將需求中的內容合理置入畫布并進行排版和設計蹬耘。
要求：了解基本的網頁畫布設置和規(guī)范芝雪，網頁的主流結構和交互方式，能設計出簡約美觀综苔，表意清晰的設計惩系。
軟件：XD、Sketch如筛、PS
管理界面（除特定行業(yè)權重較低）
定義：根據業(yè)務需要堡牡，設計在網頁端操作的管理系統(tǒng)，用來管理財務杨刨、庫存晤柄、客戶信息等的工具。
要求：能了解基本的管理界面組件功能和交互規(guī)則妖胀，網頁拉伸適配方式芥颈，和文字惠勒、色彩應用。
軟件：XD浇借、Sketch
** 標注切圖**
定義：對設計稿的說明和導出開發(fā)用的圖片捉撮。
要求：能導出正確的切圖，和必要的區(qū)域進行說明妇垢。
軟件：藍湖巾遭、Markman
3. 廣告宣傳圖
Banner 設計
定義：根據運營、營銷活動的需求設計出在產品廣告位中展示的廣告圖闯估。
要求：能掌握基本的圖文混排方法灼舍，能對文字做出簡單有效的表現，具備入門的合成技巧涨薪。
軟件：PS骑素、AI
H5活動頁面（低權重）
定義：根據運營、營銷活動的需求設計出在網頁中展示的活動專場頁面刚夺。
要求：了解活動頁的基本結構献丑，手機端網頁設計的規(guī)范，有入門的主視覺設計能力
軟件：PS侠姑、AI
三创橄、軟件學習
以上的產出內容，就涵蓋了絕大多數初期 UI設計師的工作莽红，而接下來妥畏，我們就要根據這些設計內容的要求，來分析所要掌握的軟件和知識點安吁。
1. PhotoShop
PhotoShop 是我們學習設計軟件的開始醉蚁，熟悉它的交互、功能鬼店、思路网棍、專業(yè)名詞對我們快速學會其它設計相關軟件有至關重要的作用。并且妇智，在平面相關領域的工作中确沸，PS 也是我們必然會使用的軟件。作為一款巨無霸俘陷，我們不可能在前期學會它的所有功能罗捎，所以，必須要篩選出適合的功能模塊拉盾。
創(chuàng)建保存
如何創(chuàng)建正確的畫布桨菜，分辨率、色彩模式的認知。以及不同的保存模式有哪些知識點倒得。
相關工具
工具欄中基礎工具的作用泻红，操作方法。
鋼筆路徑
PS中對于鋼筆工具的使用霞掺，如何操作貝塞爾曲線谊路。
圖層屬性
圖層屬性各個選項的具體作用，和對應的應用場景菩彬，主要在擬物設計中深入學習缠劝。
調色功能
PS 色彩相關的功能，如通道骗灶、色相調整惨恭、曲線等工具。
濾鏡功能
常見的幾種濾鏡類型學習耙旦，以及它們相關的應用方式脱羡。
布爾運算
如何對路徑使用布爾運算進行圖形的繪制。
字符設置
關于文本圖層在屬性免都、段落面板的所有設置锉罐。
2. Adobe Illustrator
AI 是 PS 的孿生兄弟，它們看起來很像绕娘，但是面向的目的卻不一樣脓规，只要熟悉了 PS 學起來就很容易。前期只需要專注于圖形和圖標的設計即可业舍，那么篩選過后我們應該掌握的東西就并不多。
創(chuàng)建導出
和 PS 一樣關于文件創(chuàng)建的知識升酣，但是相對更復雜的畫板規(guī)則應盡可能的了解清楚舷暮，并且要區(qū)分出 Ai 保存和導出的不同。
鋼筆路徑
相對于 PS 噩茄，Ai 對路徑的處理更完整多樣化下面，路徑查找器，變形工具绩聘，操控變形工具沥割，圓角控制器等實用功能。
色彩填充
Ai 中對于顏色填充的方式凿菩，漸變的應用机杜，以及網格填充的方法。
畫布標尺
Ai 畫布相關設置衅谷，標尺工具使用的規(guī)則椒拗，如何輔助我們進行創(chuàng)作。
3. Sketch、XD
這兩款軟件相對前面兩個相當于沒有難度蚀苛，只要熟悉了 PS在验、Ai 以后，幾天時間就能上手堵未。并且它們對于 UI 設計的支持是最友好的腋舌，速度快，效率高渗蟹，選擇其中一個主攻就可以块饺。
4. 藍湖、Markman拙徽、SketchMeasure
這些軟件都是用來進行標注刨沦、切圖和協(xié)作的，在了解切圖相關的知識以后膘怕，只需要花一點點的時間就能學會如何使用它們想诅。
5. AE、Flinto 選修
6. Powerpoint岛心、Keynote
PPT 是職場必備来破，而設計師應該用得比普通人更好，可以更好的將我們的思路忘古、設計展現給其他人徘禁。
四、理論知識
了解了相關的軟件學習目標髓堪，接下來我們就該知道送朱，理論的學習應該包含哪些內容。
1. 美術理論
美術理論并不是一定要通過學習素描才可以掌握的東西干旁，在日常的實踐和觀察都可以很好的幫助我們提升美術理論的基礎驶沼。
光影明暗
深刻理解光線會對物體產生什么樣的影響，高光争群、背光回怜、反光、暗部等知識换薄。以及懂得如何分析畫面中明暗的強弱與層次玉雾。
構圖技巧
美術構圖和攝影構圖基本一致，一些基本的幾何構圖方法認知轻要。
透視關系
平行透視复旬、成角透視、傾斜透視等多種透視類型的理解冲泥，能在自己的創(chuàng)作中發(fā)現透視使用的錯誤赢底。
色彩原理
對于色彩的基礎認識，以及如何通過色環(huán)進行不同類型的色彩搭配，如對比幸冻、鄰近粹庞、相似等配色原理。
2. 平面理論
平面四要素
對齊洽损、親密庞溜、對比、重復四要素是我們設計中最基礎的理論知識碑定，是 UI 設計的重中之重流码，《寫給大家看的平面設計書》前半部分有比較細致的說明。
平面幾何原理
除了黃金比例以外延刘，了解如何通過幾何的數學推導進行設計創(chuàng)作的漫试，這個只推薦看《平面設計中的幾何原理》。
字體認識
中英文碘赖，襯線非襯線等多種基礎字體的設計原理和認識驾荣，以及文字所包含的屬性設置，如行高普泡、字重等對閱讀和界面有什么影響播掷。
格線系統(tǒng)
排版中網格是如何設置以及如何發(fā)揮作用的知識點，只需要看 《平面設計中的網格系統(tǒng)》即可撼班。
印刷設置
設計需要印刷打印的內容時歧匈，PS、AI 對畫布如何設置和導出砰嘁。
3. UI 理論
作品審美
能分辨出設計優(yōu)秀和差勁的作品件炉，并能通過基礎的平面理論對它們進行點評，在開始具體設計前矮湘，能有較高的品質追求和分析能力支撐斟冕，推薦在花瓣上創(chuàng)建畫板持續(xù)收集優(yōu)秀作品。
分辨率
屏幕分辨率相關知識板祝，對于不同系統(tǒng)宫静、手機的像素倍率差異有清晰的認識走净。
設計規(guī)范
關于網頁券时、iOS、Android 等平臺對應的設計規(guī)范伏伯，知道如何創(chuàng)建出保守的橘洞，不會出錯的設計稿。
控件類型
了解主流的控件類型说搅，并知道不同控件類型所包含的狀態(tài)和實際應用場景炸枣。
組件類型
了解主流的組件類型，知道特定行業(yè)或功能，會使用哪種類型的組件以及它們相關的交互邏輯适肠。
切圖標注
在完成設計以后霍衫，如何對設計做出相應的標注，以及切圖的目的和方法侯养。
動畫知識
APP 中主流的交互動畫類型敦跌，以及動畫相關的實現參數類型，包括緩動和動畫曲線等內容逛揩。
五柠傍、工作效率
1. 項目流程
主流的 APP 團隊項目開發(fā)流程，從立項到上線會經歷哪些過程辩稽，團隊不同角色負責什么具體工作惧笛。對敏捷、精益逞泄、OKR 等協(xié)作方式有一定的入門理解患整。
2. 設計流程
在開始我們的設計工作時，如何使用正確的規(guī)劃和執(zhí)行步驟保證能力發(fā)揮的最大化和效率的提升炭懊。
3. 時間精力管理
實際上這個理應寫在最前面的并级，但為了防止突兀，我把它放在最后一條做個強調侮腹，要想保證學習的效率嘲碧，時間管理比前面任何一樣技能的學習優(yōu)先度都高，也更重要父阻。
在了解怎么分配時間以后愈涩，就要一定要使用一些工具來幫助自己規(guī)劃學習的流程和分配任務，如思維導圖工具 Xmind加矛、MindNode履婉，還有 To-Do-List 工具 Things、滴答斟览、瘋狂番茄等毁腿。
六、誤區(qū)的部分
1. 某個回復
先說有人在評論區(qū)丟個這種疑問苛茂，基本是沒認真看回答就想開始皮的已烤！先說這個不超過一年淘汰，這些東西對想走的遠的設計師是不夠的妓羊，但要記住我前面放的那個思維導圖胯究，核心技能穩(wěn)固扎實了以后，你再去追求和學習別的東西躁绸！為什么會自己停下來裕循，然后一年后毫無進步等著被淘汰臣嚣？
先不說所謂的 UI 崗位1000人投的環(huán)境他自己經歷過幾次還是自己收過簡歷 ！就說現在 BAT 低級和實習普遍拿到簡歷的質量剥哑，想要完整達到上面我提過要求的硅则，依舊是鳳毛麟角！很多人喜歡人云亦云株婴，夸大完環(huán)境難度以后抢埋，又不給出解決方案，來換各種姿勢側面展示自己督暂！
說到底 UI 是視覺性為主的工作揪垄，在哪里投簡歷，我們第一要務看的還是做的作品質量逻翁，它的質量代表了你們的專業(yè)能力饥努！如果不靠作品判斷，光看學歷八回？看專業(yè)酷愧？看所謂的美術素養(yǎng)？那這種團隊壓根不是在招能做事的員工缠诅，你們要做的是要能用高效的學習方式鍛煉出扎實的基礎溶浴，然后碾壓那些標榜自己有所謂美術素養(yǎng)的人！而自己亂學管引，那真的就永遠沒機會了士败！
2. 技能樹
很多人看到技能樹說發(fā)慌，這點我比較納悶的褥伴！那張圖是我拿來做反面案例的谅将！
是錯的！是錯的重慢！是錯的饥臂！
大家一定要接受，每個專業(yè)可以拓展的技能都非常龐雜似踱，但對于你們現在的階段毫無作用隅熙，以后你們開始進階了，也只是再選修其中的一部分進行提升核芽，而不是全部需要囚戚！
3. 關于看書
這個很快我要寫一篇比較正式的回答來講解一下，有很多我群里的人看完回答第一個反應是去買理論書狞洋，但是我提到書的地方都在流程偏后的位置弯淘，前面還沒做就要焦慮后面的事绿店，說白了就是抗拒困難的地方只對簡單的事情下手吉懊，因為看書的成本太低太容易了庐橙。
所以，也不要糾結書的事借嗽。好好看完回答态鳖，自己花一兩天時間思考，做好學習的規(guī)劃恶导，調整好作息浆竭，再擼起袖子開干！
結尾
以上就是我對最快提升自己 UI 設計能力和轉行的思考惨寿，只有擁有明確的目標邦泄，我們才知道應該怎么實踐，才有勇氣去征服這些知識的盲區(qū)裂垦。
