教育改變生活 嶽麓成就夢想

全國報名咨詢電話:0731-85572692
最詳細的UI學習總結!

2018-09-20

一般人,終究是想要見效快,學習效果回饋周期短的形式來執行。新人直接亂學手繪是沒用的,亂看書并真把看書當成學習,也是沒用的!所以針對這個需求,我給出了新的答案,具體見下文。
 
成為一名 UI設計師,首先得明白,日常工作需要應用什麼樣的技能解決問題。但對于不同的企業,不同的職業階段,我們要處理的問題是不同的,且差異極大。
 
這當中涵蓋了非常廣的技能類型,從印刷廣告到3D建模、動畫特效應有盡有,尤其是在小公司中,需要身兼多職,例如小外包公司,可能設計師除了出圖還得和客戶接觸做項目經理, 或者做網頁的時候得自己寫前端代碼的部分!這是任何一種職業都沒辦法避免的,公司越小層次越低,就越不可能在工作内容中保持單一性。
 
當然,也因為這些公司的工作環境不理想,幹的活雜,和想象的有出入,所以當這些設計師們在發表意見時往往都是大吐苦水,例舉在工作中需要的其它技能,每日疲于奔命。久而久之,就有人把這些相關的技能進行彙總,做成複雜的思維導圖,類似下面這種。
 
 
 
裡面的每一項技能都有用嗎?肯定是有的,甚至可以單獨針對每一項技能寫一篇長文進行分析,列舉各種數據來告訴你們它的重要性。但是,我們不可能在初期階段全部囫囵吞棗的學完,很多技能你也沒辦法評估什麼才是「學完」,要學到什麼「程度」。這是對新人和初級設計師階段最大的陷阱,熱衷于收羅職業可能涉及到的方方面面,然後毫無規劃地亂學。
 
例如,設計心理學,網上對它的解釋整體都很膚淺,不是看了諾曼的《設計心理學》系列,就是學會設計相關心理學知識了。真正與設計相關的心理學要從生理層面開始認知,諸如視網膜是如何成像,視覺皮層如何進行工作的機制,到意識對圖形的反應和關聯的行為。沒有系統性的解構相關知識,就無法順利的将它們應用到真實項目。
 
 
 
尤其是新人,想要比較快的入行,時間如果全花在這些無法直接應用進項目,或是短期内不容易産生效果的技能學習上,那麼你入行的時間會大大加長,而且進步的速度會極其緩慢。
 
新人應該先了解的,是初級設計師最普遍的工作産出和要求是什麼,再制定出核心的技能學習範疇。而諸如設計心理學也好,插畫手繪技能也罷,都是在你已經能達到滿足核心技能條件,可以找到工作以後,再根據實際情況拓展的。
 
 
 
下面,我會從行業最普遍的工作産出内容出發,到需要的水準,以及如何進行學習,來講解初級設計師最應該先學好哪些技能,讓你們少走一些彎路。
 
一、普遍的工作産出
首先,UI設計師最主要的産出包含下面的幾類,APP 相關設計,産品主頁設計,管理界面和廣告圖(在界面廣告位的),占了工作中的絕大部分比例。
 
 
 
然後是 UI設計師在工作中可能要遇到的設計類型,比如 H5,LOGO 和 VI,線下物料,PPT,商品精修等等。
 
 
 
主要的工作産出類型,是判斷初級設計師能力最核心的指标,決定我們的應聘和工作績效。當然,你們可能會說很多公司,寫的崗位是 UI 但完全在做平面或其它工作, 那些屬于特殊的情況是不能代表整體的。即使是招聘者,看見簡曆中屬于 UI 主要産出的表現超過預期,那麼其它次要技能的要求是可以降低的,通常這些東西能做好,那麼其它類型的東西應該學學做一下也差不到哪裡去,這才是招聘者真實的想法。
 
在真實招聘經曆中,招聘方對于程序、手繪、平面的要求如果排在 UI 前面,以那些技能來衡量你的價值,恕我直言,這個職位隻是在招聘一個懂點 UI 的前端(或插畫師、平面設計師),企業從一開始招人的需求可能就沒有想清楚,或者根本沒分清楚 UI 和其它工種的區别,不要被這些狀況擾亂了情緒。
 
實際情況,市面上大多數初級的 UI 設計師,在主要産出的幾種設計類型中,都沒有什麼有用的建樹,水準堪憂,所以在這幾個領域要做到比他們更好超出平均水平,還是相當容易的。類似下面這些案例,能做出這種設計的設計師,就是準備被新人取代和喊行業不行了的那種。
 
 
 
順便提一點,想要設計全面發展最好的方式,是在有一、兩項技能提升到登堂入室,旁人無法輕易替代時,再進行拓展。不僅學起來更輕松,還可以借助其它方向上的知識點和思維方式帶動自己最擅長領域的進步,而不是同時開工。這也是為什麼,優秀的團隊和設計師在處理第一次面對的某些設計類型時,遠勝該類型擁有數年經驗的平庸設計師。
 
大部分人,甚至是成年人,從來沒有在任何領域中達到足夠的技能水平,這使得他們無法像傑出人物那樣感受到心理表征的真正力量,來規劃、執行和評估他們的表現。因此,他們從來沒有真正理解達到這種水平需要做些什麼,不僅僅是花時間,還需要進行高質量的練習。一旦他們懂得了在某個領域中要達到那種足夠高的技能水平必須要做些什麼,那麼他們至少從原則上理解了在其他領域追求卓越也需要做些什麼。——安德斯·艾利克森
 
所以下面我們再好好研究一下,主要産出中,要設計哪些具體的内容。
 
二、具體的産出
1. 手機APP UI
APP界面
 
 
 
定義:根據産品需求,在界面中設計和排版對應的交互、視覺元素。
 
要求:能滿足平面四要素的正确性;知道如何應用标準的系統 Kits;能合理定義字體和元素尺寸;熟悉并能設計主流的組件類型。
 
軟件:Sketch、XD
 
界面圖标
 
 
 
定義:包含 APP 啟動圖标,以及應用内的一般工具圖标。
 
要求:對圖标的基礎規範有所了解,了解主流的圖标類型及使用場景,在繪制整套圖标時可以保持基本的風格一緻,形式簡約美觀。
 
軟件: Sketch、Ai、PS
 
可交互原型
 
 
 
定義:用來展示可以點擊并跳轉的交互原型文件。
 
要求:能清晰表達頁面跳轉邏輯即可。
 
軟件:Sketch、XD、藍湖、墨刀
 
基礎動效(權重較低)
 
 
 
定義:可以表達觸發界面交互效果時的動畫。
 
要求:了解可以實現的動畫範圍,并能明白如何具體編寫表達動畫的文檔。
 
軟件:AE、Flinto、Principle
 
标注切圖
 
 
 
定義:将設計稿的内容進行标注,和将開發過程中需要的圖形進行導出。
 
要求:了解對設計還原中開發人員需要知道的參數,了解不同圖片格式的作用與區别,并能對應導出符合規範的切圖。
 
軟件:藍湖、Sketch、XD、Markman
 
設計規範
 
 
 
定義:設計到開發中要遵守的相關規範文檔。
 
要求:針對最主要色彩、元素使用的規範,簡潔明了,容易被執行。
 
軟件:任意設計軟件或 Office
 
2. PC 網頁界面
網頁界面
 
 
 
定義:主要是公司官網或産品介紹頁,将需求中的内容合理置入畫布并進行排版和設計。
 
要求:了解基本的網頁畫布設置和規範,網頁的主流結構和交互方式,能設計出簡約美觀,表意清晰的設計。
 
軟件:XD、Sketch、PS
 
管理界面(除特定行業權重較低)
 
 
 
定義:根據業務需要,設計在網頁端操作的管理系統,用來管理财務、庫存、客戶信息等的工具。
 
要求:能了解基本的管理界面組件功能和交互規則,網頁拉伸适配方式,和文字、色彩應用。
 
軟件:XD、Sketch
 
 标注切圖
 
 
 
定義:對設計稿的說明和導出開發用的圖片。
 
要求:能導出正确的切圖,和必要的區域進行說明。
 
軟件:藍湖、Markman
 
3. 廣告宣傳圖
Banner 設計
 
 
 
定義:根據運營、營銷活動的需求設計出在産品廣告位中展示的廣告圖。
 
要求:能掌握基本的圖文混排方法,能對文字做出簡單有效的表現,具備入門的合成技巧。
 
軟件:PS、AI
 
H5活動頁面(低權重)
 
 
 
定義:根據運營、營銷活動的需求設計出在網頁中展示的活動專場頁面。
 
要求:了解活動頁的基本結構,手機端網頁設計的規範,有入門的主視覺設計能力
 
軟件:PS、AI
 
三、軟件學習
以上的産出内容,就涵蓋了絕大多數初期 UI設計師的工作,而接下來,我們就要根據這些設計内容的要求,來分析所要掌握的軟件和知識點。
 
1. PhotoShop
PhotoShop 是我們學習設計軟件的開始,熟悉它的交互、功能、思路、專業名詞對我們快速學會其它設計相關軟件有至關重要的作用。并且,在平面相關領域的工作中,PS 也是我們必然會使用的軟件。作為一款巨無霸,我們不可能在前期學會它的所有功能,所以,必須要篩選出适合的功能模塊。
 
創建保存
 
如何創建正确的畫布,分辨率、色彩模式的認知。以及不同的保存模式有哪些知識點。
 
 
 
相關工具
 
工具欄中基礎工具的作用,操作方法。
 
 
 
鋼筆路徑
 
PS中對于鋼筆工具的使用,如何操作貝塞爾曲線。
 
 
 
圖層屬性
 
圖層屬性各個選項的具體作用,和對應的應用場景,主要在拟物設計中深入學習。
 
 
 
調色功能
 
PS 色彩相關的功能,如通道、色相調整、曲線等工具。
 
 
 
濾鏡功能
 
常見的幾種濾鏡類型學習,以及它們相關的應用方式。
 
 
 
布爾運算
 
如何對路徑使用布爾運算進行圖形的繪制。
 
 
 
字符設置
 
關于文本圖層在屬性、段落面闆的所有設置。
 
 
 
2. Adobe Illustrator
AI 是 PS 的孿生兄弟,它們看起來很像,但是面向的目的卻不一樣,隻要熟悉了 PS 學起來就很容易。前期隻需要專注于圖形和圖标的設計即可,那麼篩選過後我們應該掌握的東西就并不多。
 
創建導出
 
 
 
和 PS 一樣關于文件創建的知識,但是相對更複雜的畫闆規則應盡可能的了解清楚,并且要區分出 Ai 保存和導出的不同。
 
鋼筆路徑
 
 
 
相對于 PS ,Ai 對路徑的處理更完整多樣化,路徑查找器,變形工具,操控變形工具,圓角控制器等實用功能。
 
色彩填充
 
 
 
Ai 中對于顔色填充的方式,漸變的應用,以及網格填充的方法。
 
畫布标尺
 
 
 
Ai 畫布相關設置,标尺工具使用的規則,如何輔助我們進行創作。
 
3. Sketch、XD
 
 
這兩款軟件相對前面兩個相當于沒有難度,隻要熟悉了 PS、Ai 以後,幾天時間就能上手。并且它們對于 UI 設計的支持是最友好的,速度快,效率高,選擇其中一個主攻就可以。
 
4. 藍湖、Markman、SketchMeasure
 
 
這些軟件都是用來進行标注、切圖和協作的,在了解切圖相關的知識以後,隻需要花一點點的時間就能學會如何使用它們。
 
5. AE、Flinto 選修
 
 
6. Powerpoint、Keynote
 
 
PPT 是職場必備,而設計師應該用得比普通人更好,可以更好的将我們的思路、設計展現給其他人。
 
四、理論知識
了解了相關的軟件學習目标,接下來我們就該知道,理論的學習應該包含哪些内容。
 
1. 美術理論
 
 
美術理論并不是一定要通過學習素描才可以掌握的東西,在日常的實踐和觀察都可以很好的幫助我們提升美術理論的基礎。
 
光影明暗
 
深刻理解光線會對物體産生什麼樣的影響,高光、背光、反光、暗部等知識。以及懂得如何分析畫面中明暗的強弱與層次。
 
構圖技巧
 
美術構圖和攝影構圖基本一緻,一些基本的幾何構圖方法認知。
 
透視關系
 
平行透視、成角透視、傾斜透視等多種透視類型的理解,能在自己的創作中發現透視使用的錯誤。
 
色彩原理
 
對于色彩的基礎認識,以及如何通過色環進行不同類型的色彩搭配,如對比、鄰近、相似等配色原理。
 
2. 平面理論
 
 
平面四要素
 
對齊、親密、對比、重複四要素是我們設計中最基礎的理論知識,是 UI 設計的重中之重,《寫給大家看的平面設計書》前半部分有比較細緻的說明。
 
平面幾何原理
 
除了黃金比例以外,了解如何通過幾何的數學推導進行設計創作的,這個隻推薦看《平面設計中的幾何原理》。
 
字體認識
 
中英文,襯線非襯線等多種基礎字體的設計原理和認識,以及文字所包含的屬性設置,如行高、字重等對閱讀和界面有什麼影響。
 
格線系統
 
排版中網格是如何設置以及如何發揮作用的知識點,隻需要看 《平面設計中的網格系統》即可。
 
印刷設置
 
設計需要印刷打印的内容時,PS、AI 對畫布如何設置和導出。
 
3. UI 理論
 
 
作品審美
 
能分辨出設計優秀和差勁的作品,并能通過基礎的平面理論對它們進行點評,在開始具體設計前,能有較高的品質追求和分析能力支撐,推薦在花瓣上創建畫闆持續收集優秀作品。
 
分辨率
 
屏幕分辨率相關知識,對于不同系統、手機的像素倍率差異有清晰的認識。
 
設計規範
 
關于網頁、iOS、Android 等平台對應的設計規範,知道如何創建出保守的,不會出錯的設計稿。
 
控件類型
 
了解主流的控件類型,并知道不同控件類型所包含的狀态和實際應用場景。
 
組件類型
 
了解主流的組件類型,知道特定行業或功能,會使用哪種類型的組件以及它們相關的交互邏輯。
 
切圖标注
 
在完成設計以後,如何對設計做出相應的标注,以及切圖的目的和方法。
 
動畫知識
 
APP 中主流的交互動畫類型,以及動畫相關的實現參數類型,包括緩動和動畫曲線等内容。
 
五、工作效率
 
 
1. 項目流程
主流的 APP 團隊項目開發流程,從立項到上線會經曆哪些過程,團隊不同角色負責什麼具體工作。對敏捷、精益、OKR 等協作方式有一定的入門理解。
 
2. 設計流程
在開始我們的設計工作時,如何使用正确的規劃和執行步驟保證能力發揮的最大化和效率的提升。
 
3. 時間精力管理
實際上這個理應寫在最前面的,但為了防止突兀,我把它放在最後一條做個強調,要想保證學習的效率,時間管理比前面任何一樣技能的學習優先度都高,也更重要。
 
在了解怎麼分配時間以後,就要一定要使用一些工具來幫助自己規劃學習的流程和分配任務,如思維導圖工具 Xmind、MindNode,還有 To-Do-List 工具 Things、滴答、瘋狂番茄等。
 
六、誤區的部分
1. 某個回複
 
 
先說有人在評論區丢個這種疑問,基本是沒認真看回答就想開始皮的!先說這個不超過一年淘汰,這些東西對想走的遠的設計師是不夠的,但要記住我前面放的那個思維導圖,核心技能穩固紮實了以後,你再去追求和學習别的東西!為什麼會自己停下來,然後一年後毫無進步等着被淘汰?
 
先不說所謂的 UI 崗位1000人投的環境他自己經曆過幾次還是自己收過簡曆 !就說現在 BAT 低級和實習普遍拿到簡曆的質量,想要完整達到上面我提過要求的,依舊是鳳毛麟角!很多人喜歡人雲亦雲,誇大完環境難度以後,又不給出解決方案,來換各種姿勢側面展示自己!
 
說到底 UI 是視覺性為主的工作,在哪裡投簡曆,我們第一要務看的還是做的作品質量,它的質量代表了你們的專業能力!如果不靠作品判斷,光看學曆?看專業?看所謂的美術素養?那這種團隊壓根不是在招能做事的員工,你們要做的是要能用高效的學習方式鍛煉出紮實的基礎,然後碾壓那些标榜自己有所謂美術素養的人!而自己亂學,那真的就永遠沒機會了!
 
2. 技能樹
很多人看到技能樹說發慌,這點我比較納悶的!那張圖是我拿來做反面案例的!
 
是錯的!是錯的!是錯的!
 
大家一定要接受,每個專業可以拓展的技能都非常龐雜,但對于你們現在的階段毫無作用,以後你們開始進階了,也隻是再選修其中的一部分進行提升,而不是全部需要!
 
3. 關于看書
這個很快我要寫一篇比較正式的回答來講解一下,有很多我群裡的人看完回答第一個反應是去買理論書,但是我提到書的地方都在流程偏後的位置,前面還沒做就要焦慮後面的事,說白了就是抗拒困難的地方隻對簡單的事情下手,因為看書的成本太低太容易了。
 
所以,也不要糾結書的事。好好看完回答,自己花一兩天時間思考,做好學習的規劃,調整好作息,再撸起袖子開幹!
文章來源于網絡

(0)