針對零基礎新人,我給出這份可能是最詳細的UI 自學流程總結

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

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

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

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

針對零基礎新人,我給出這份可能是最詳細的UI 自學流程總結

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

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

針對零基礎新人,我給出這份可能是最詳細的UI 自學流程總結

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

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

針對零基礎新人,我給出這份可能是最詳細的UI 自學流程總結

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

一、普遍的工作產出

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

針對零基礎新人,我給出這份可能是最詳細的UI 自學流程總結

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

針對零基礎新人,我給出這份可能是最詳細的UI 自學流程總結

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

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

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

針對零基礎新人,我給出這份可能是最詳細的UI 自學流程總結

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

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

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

二、具體的產出

1. 手機APP UI

APP界面

針對零基礎新人,我給出這份可能是最詳細的UI 自學流程總結

定義:根據產品需求,在界面中設計和排版對應的交互、視覺元素。

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

軟件:Sketch、XD

界面圖標

針對零基礎新人,我給出這份可能是最詳細的UI 自學流程總結

定義:包含 APP 啟動圖標,以及應用內的一般工具圖標。

要求:對圖標的基礎規範有所瞭解,瞭解主流的圖標類型及使用場景,在繪製整套圖標時可以保持基本的風格一致,形式簡約美觀。

軟件: Sketch、Ai、PS

可交互原型

針對零基礎新人,我給出這份可能是最詳細的UI 自學流程總結

定義:用來展示可以點擊並跳轉的交互原型文件。

要求:能清晰表達頁面跳轉邏輯即可。

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

基礎動效(權重較低)

針對零基礎新人,我給出這份可能是最詳細的UI 自學流程總結

定義:可以表達觸發界面交互效果時的動畫。

要求:瞭解可以實現的動畫範圍,並能明白如何具體編寫表達動畫的文檔。

軟件:AE、Flinto、Principle

標註切圖

針對零基礎新人,我給出這份可能是最詳細的UI 自學流程總結

定義:將設計稿的內容進行標註,和將開發過程中需要的圖形進行導出。

要求:瞭解對設計還原中開發人員需要知道的參數,瞭解不同圖片格式的作用與區別,並能對應導出符合規範的切圖。

軟件:藍湖、Sketch、XD、Markman

設計規範

針對零基礎新人,我給出這份可能是最詳細的UI 自學流程總結

定義:設計到開發中要遵守的相關規範文檔。

要求:針對最主要色彩、元素使用的規範,簡潔明瞭,容易被執行。

軟件:任意設計軟件或 Office

2. PC 網頁界面

網頁界面

針對零基礎新人,我給出這份可能是最詳細的UI 自學流程總結

定義:主要是公司官網或產品介紹頁,將需求中的內容合理置入畫布並進行排版和設計。

要求:瞭解基本的網頁畫布設置和規範,網頁的主流結構和交互方式,能設計出簡約美觀,表意清晰的設計。

軟件:XD、Sketch、PS

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

針對零基礎新人,我給出這份可能是最詳細的UI 自學流程總結

定義:根據業務需要,設計在網頁端操作的管理系統,用來管理財務、庫存、客戶信息等的工具。

要求:能瞭解基本的管理界面組件功能和交互規則,網頁拉伸適配方式,和文字、色彩應用。

軟件:XD、Sketch

標註切圖

針對零基礎新人,我給出這份可能是最詳細的UI 自學流程總結

定義:對設計稿的說明和導出開發用的圖片。

要求:能導出正確的切圖,和必要的區域進行說明。

軟件:藍湖、Markman

3. 廣告宣傳圖

Banner 設計

針對零基礎新人,我給出這份可能是最詳細的UI 自學流程總結

定義:根據運營、營銷活動的需求設計出在產品廣告位中展示的廣告圖。

要求:能掌握基本的圖文混排方法,能對文字做出簡單有效的表現,具備入門的合成技巧。

軟件:PS、AI

H5活動頁面(低權重)

針對零基礎新人,我給出這份可能是最詳細的UI 自學流程總結

定義:根據運營、營銷活動的需求設計出在網頁中展示的活動專場頁面。

要求:瞭解活動頁的基本結構,手機端網頁設計的規範,有入門的主視覺設計能力

軟件:PS、AI

三、軟件學習

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

1. PhotoShop

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

創建保存

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

針對零基礎新人,我給出這份可能是最詳細的UI 自學流程總結

相關工具

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

針對零基礎新人,我給出這份可能是最詳細的UI 自學流程總結

鋼筆路徑

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

針對零基礎新人,我給出這份可能是最詳細的UI 自學流程總結

圖層屬性

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

針對零基礎新人,我給出這份可能是最詳細的UI 自學流程總結

調色功能

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

針對零基礎新人,我給出這份可能是最詳細的UI 自學流程總結

濾鏡功能

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

針對零基礎新人,我給出這份可能是最詳細的UI 自學流程總結

布爾運算

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

針對零基礎新人,我給出這份可能是最詳細的UI 自學流程總結

字符設置

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

針對零基礎新人,我給出這份可能是最詳細的UI 自學流程總結

2. Adobe Illustrator

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

創建導出

針對零基礎新人,我給出這份可能是最詳細的UI 自學流程總結

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

鋼筆路徑

針對零基礎新人,我給出這份可能是最詳細的UI 自學流程總結

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

色彩填充

針對零基礎新人,我給出這份可能是最詳細的UI 自學流程總結

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

畫布標尺

針對零基礎新人,我給出這份可能是最詳細的UI 自學流程總結

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

3. Sketch、XD

針對零基礎新人,我給出這份可能是最詳細的UI 自學流程總結

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

4. 藍湖、Markman、SketchMeasure

針對零基礎新人,我給出這份可能是最詳細的UI 自學流程總結

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

5. AE、Flinto 選修

針對零基礎新人,我給出這份可能是最詳細的UI 自學流程總結

6. Powerpoint、Keynote

針對零基礎新人,我給出這份可能是最詳細的UI 自學流程總結

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

四、理論知識

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

1. 美術理論

針對零基礎新人,我給出這份可能是最詳細的UI 自學流程總結

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

光影明暗

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

構圖技巧

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

透視關係

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

色彩原理

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

2. 平面理論

針對零基礎新人,我給出這份可能是最詳細的UI 自學流程總結

平面四要素

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

平面幾何原理

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

字體認識

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

格線系統

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

印刷設置

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

3. UI 理論

針對零基礎新人,我給出這份可能是最詳細的UI 自學流程總結

作品審美

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

分辨率

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

設計規範

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

控件類型

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

組件類型

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

切圖標註

在完成設計以後,如何對設計做出相應的標註,以及切圖的目的和方法。

動畫知識

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

五、工作效率

針對零基礎新人,我給出這份可能是最詳細的UI 自學流程總結

1. 項目流程

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

2. 設計流程

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

3. 時間精力管理

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

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

六、誤區的部分

1. 某個回覆

針對零基礎新人,我給出這份可能是最詳細的UI 自學流程總結

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

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

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

2. 技能樹

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

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

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

3. 關於看書

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

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

結尾

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


分享到:


相關文章: