親愛的小伙伴，歡迎你的到來！針對(duì)非專業(yè)想轉(zhuǎn)行設(shè)計(jì)的小伙伴，小A幫大家從6個(gè)方向總結(jié)了成長路徑，包括：

視覺類，交互類，UI類，UX(UE)類，產(chǎn)品類，前端類

希望可以幫助小伙伴們從自身擅長的領(lǐng)域或喜歡的方向，盡早并盡快步入設(shè)計(jì)行業(yè)

如果你看完之后覺得有用，希望可以分享給你身邊的小伙伴哦！

【特別說明】

不管是視覺、前端、UI還是交互、UE、產(chǎn)品，都是一名優(yōu)秀的設(shè)計(jì)師需要了解學(xué)習(xí)的，以下只是根據(jù)側(cè)重方向不同將其分為6大方向，特此說明。

一、視覺類

1、什么是視覺設(shè)計(jì)？

視覺設(shè)計(jì)是通過對(duì)文字，符號(hào)，圖片的有意設(shè)計(jì)達(dá)到視覺上的和諧交流。

視覺設(shè)計(jì)師的工作主要是通過色彩布局、創(chuàng)意構(gòu)思來設(shè)計(jì)易于識(shí)別的、藝術(shù)外觀更完美、更具有視覺吸引力的圖像，并利用一些媒體、元素來形象的表達(dá)出其特定的意義。

2、主要學(xué)習(xí)內(nèi)容

a.入門階段

??三大構(gòu)成：平面構(gòu)成、立體構(gòu)成、色彩構(gòu)成

??素描基礎(chǔ)：光影變化及透視結(jié)構(gòu)變化規(guī)律

??色彩搭配：色彩的基礎(chǔ)概念(色相、明度、純度等)、色彩情緒、色彩心理、配色技巧

??版式基礎(chǔ)：即學(xué)習(xí)如何將文字、圖片（圖形）及色彩等視覺傳達(dá)信息要素，在預(yù)先設(shè)定的有限版面內(nèi)，運(yùn)用造型要素和形式原則進(jìn)行有序組織，從而實(shí)現(xiàn)藝術(shù)與技術(shù)的高度統(tǒng)一。

b.進(jìn)階階段

??字體基礎(chǔ)：應(yīng)用規(guī)范及簡單的字體設(shè)計(jì)

??排版布局：掌握版式形成原理、網(wǎng)格系統(tǒng)理論、網(wǎng)頁的基本元素類型等

??圖形設(shè)計(jì)：練習(xí)抽象概括實(shí)物的能力，如logo設(shè)計(jì)、字體設(shè)計(jì)等

??企業(yè)VI基礎(chǔ)(包括logo，宣傳海報(bào)，名片，三折頁及基礎(chǔ)印刷知識(shí)等)

??各類風(fēng)格海報(bào)設(shè)計(jì)

c.中階階段

??文案技巧

??H5設(shè)計(jì)

??Banner設(shè)計(jì)

??店鋪/官網(wǎng)等網(wǎng)頁界面設(shè)計(jì)

??活動(dòng)/熱點(diǎn)等專題頁設(shè)計(jì)

d.高階階段

??UI設(shè)計(jì)知識(shí)(包括跨平臺(tái)設(shè)計(jì)規(guī)范)

??人機(jī)交互知識(shí)

??產(chǎn)品思維

??用戶心理

??動(dòng)效設(shè)計(jì)

3、基礎(chǔ)軟件

??Photoshop：位圖處理軟件，設(shè)計(jì)師必備軟件。

??Illustrator：矢量圖編輯軟件，Logo, Icon, 插畫的最愛。

??InDesign: 排版軟件，尤其在處理段落字體排版上無出其右。

??After Effects/C4D：動(dòng)效特效軟件

4、階段發(fā)展方向

UI設(shè)計(jì)，平面設(shè)計(jì)(又分為傳統(tǒng)平面印刷與互聯(lián)網(wǎng)視覺設(shè)計(jì)兩個(gè)方向)，品牌設(shè)計(jì)，電商設(shè)計(jì)，插畫師等

二、交互類

1、什么是交互設(shè)計(jì)？

交互設(shè)計(jì)(Interaction Design)，是定義、設(shè)計(jì)人造系統(tǒng)的行為的設(shè)計(jì)領(lǐng)域。

交互可能存在于人與人之間，也可能存在于人于物之間。

對(duì)于交互設(shè)計(jì)師來說，這個(gè)物可以是電腦、手機(jī)、智能手表……一切需要你work on的產(chǎn)品。

「你來我往」謂之「交互」;這里的「你來」指的是「輸入(input)」，「我往」是「反饋(feedback)或輸出(output)」。

如果只有「你來」沒有「我往」就不能稱之為交互。

你點(diǎn)一下鼠標(biāo)，電腦屏幕馬上告訴你「你的資料下載完成了」

這里「點(diǎn)鼠標(biāo)」是「你來」，屏幕的提示是電腦給你回饋的「我往」。

這就是最簡單的一個(gè)交互。

2、主要學(xué)習(xí)內(nèi)容

a.入門階段(適合初入行的小白)

??設(shè)計(jì)美學(xué)知識(shí)

??交互設(shè)計(jì)原則

??平臺(tái)特性及其設(shè)計(jì)規(guī)范

??交互設(shè)計(jì)方案(流程圖、原型圖、交互規(guī)范文檔)

b.進(jìn)階階段(適合有3個(gè)月以上項(xiàng)目經(jīng)驗(yàn)者)

??特定控件設(shè)計(jì)(標(biāo)簽欄、列表界面、彈窗等)

??特定界面設(shè)計(jì)(應(yīng)用程序首頁、個(gè)人資料、數(shù)據(jù)界面等)

??獨(dú)立常用功能設(shè)計(jì)(注冊(cè)登錄、刷新、功能引導(dǎo)等)及其背后的技術(shù)知識(shí)和產(chǎn)品策略

c.中階階段(適合有一個(gè)以上完整項(xiàng)目經(jīng)驗(yàn)者)

??多項(xiàng)功能設(shè)計(jì)及對(duì)應(yīng)的設(shè)計(jì)方法和架構(gòu)思路

??方法和已有的設(shè)計(jì)風(fēng)格研究總結(jié)，并應(yīng)用

??競品和優(yōu)秀產(chǎn)品分析

??最新的系統(tǒng)和產(chǎn)品分析

d.高階階段

??產(chǎn)品架構(gòu)

??設(shè)計(jì)趨勢(shì)研究

??產(chǎn)品趨勢(shì)研究

??互聯(lián)網(wǎng)及相關(guān)行業(yè)發(fā)展動(dòng)態(tài)

??項(xiàng)目管理及團(tuán)隊(duì)管理

3、主要軟件

??PS/AI：圖形圖像處理軟件

??Sketch/Axure/墨刀：交互原型

??AE：動(dòng)效制作

?XMind/MindMannage：思維導(dǎo)圖

4、階段發(fā)展方向

交互設(shè)計(jì)，產(chǎn)品經(jīng)理，產(chǎn)品運(yùn)營等

【相關(guān)專業(yè)/行業(yè)分析】

其實(shí)很多交互設(shè)計(jì)師并不是專業(yè)出身，而是來自計(jì)算機(jī)、醫(yī)學(xué)、生物學(xué)、法律、金融、心理學(xué)、文學(xué)、電影、音樂、電子工程等領(lǐng)域

a.技術(shù)工程類(計(jì)算機(jī)、電子工程、機(jī)械工程等)

這些背景可以帶來縝密的邏輯思維和技術(shù)能力，恰是交互設(shè)計(jì)最關(guān)鍵也最難以掌握的關(guān)鍵部分之一。

b.創(chuàng)意類(音樂、電影、文學(xué)等)

這些創(chuàng)意類專業(yè)的教育方式、思考方式、思考維度，很多都是與交互設(shè)計(jì)相通的。

c.其他(心理學(xué)、醫(yī)學(xué)、金融等)

交互設(shè)計(jì)師設(shè)計(jì)的不是設(shè)計(jì)本身，而是產(chǎn)品，所以來自其他行業(yè)背景的交互設(shè)計(jì)師有先天優(yōu)勢(shì)。

如心理學(xué)、數(shù)據(jù)分析等背景的人在用戶研究上就很有優(yōu)勢(shì)，還有其行業(yè)內(nèi)的優(yōu)勢(shì)

三、UI類

1、什么是UI設(shè)計(jì)？

UI，即User Interface(用戶界面)，是對(duì)軟件的人機(jī)交互、操作邏輯、界面美觀的整體設(shè)計(jì)。

UI是用戶界面，實(shí)際上還包括用戶與界面之間的交互關(guān)系，所以這樣可分為3個(gè)方向，他們分別是：用戶研究、交互設(shè)計(jì)、界面設(shè)計(jì)。

好的UI設(shè)計(jì)不僅是讓軟件變得有個(gè)性有品位，還要讓軟件的操作變得舒適簡單、自由，充分體現(xiàn)軟件的定位和特點(diǎn)。

>>>具體請(qǐng)參閱《什么是UI設(shè)計(jì)？這里有關(guān)于UI的詳細(xì)介紹》

2、主要學(xué)習(xí)內(nèi)容

a.入門階段

??設(shè)計(jì)理論：三大構(gòu)成、基礎(chǔ)美術(shù)知識(shí)(如素描)

??色彩基礎(chǔ)：色彩理論和搭配原則、色彩組成形式等

??設(shè)計(jì)素養(yǎng)：UI發(fā)展史，中外設(shè)計(jì)發(fā)展等設(shè)計(jì)常識(shí)

b.進(jìn)階階段

【平面設(shè)計(jì)】

??字體設(shè)計(jì)

??版式

??色彩搭配

??海報(bào)設(shè)計(jì)

??商業(yè)項(xiàng)目，如企業(yè)VI(logo、名片、折頁等)

【網(wǎng)頁與前端】

??網(wǎng)頁基礎(chǔ)規(guī)范

??Banner設(shè)計(jì)

??專題頁設(shè)計(jì)：節(jié)日熱點(diǎn)、促銷活動(dòng)等

??產(chǎn)品頁設(shè)計(jì)：電商產(chǎn)品、官網(wǎng)產(chǎn)品頁等

??前端實(shí)現(xiàn)基礎(chǔ)：html，CSS、jQuery、H5推廣等

??商業(yè)項(xiàng)目：企業(yè)店鋪、行業(yè)網(wǎng)站、個(gè)人網(wǎng)站等

c.中階階段

??圖標(biāo)設(shè)計(jì)與制作(多類風(fēng)格)

??跨平臺(tái)規(guī)范：IOS/Android/iPad/Apple Watch等

??完整APP界面：首頁，登錄注冊(cè)，引導(dǎo)頁，加載頁，產(chǎn)品詳情，設(shè)置等

??交互動(dòng)效

??商業(yè)項(xiàng)目：電商APP，社交APP，游戲APP，數(shù)據(jù)展示類APP等

d.高階階段

【產(chǎn)品】

??產(chǎn)品策劃

??調(diào)研與需求文檔

??原型與視覺設(shè)計(jì)

??功能設(shè)計(jì)

??交互設(shè)計(jì)

??發(fā)布與運(yùn)營

??數(shù)據(jù)分析

??項(xiàng)目管理

??團(tuán)隊(duì)管理

【特效】

??AE基礎(chǔ)動(dòng)效實(shí)現(xiàn)

??基礎(chǔ)動(dòng)畫：進(jìn)度條，等待動(dòng)態(tài)等

??UI類靜態(tài)3D圖

3、主要軟件

??PS：圖形圖像處理軟件

??AI/Coreldraw：矢量圖軟件

??InDesign：排版工具

??AE/C4D：動(dòng)效特效軟件

??Sketch/Axure/墨刀：交互原型

??XMind/MindMannage：思維導(dǎo)圖

??Cutterman/Pxcook：APP切圖與標(biāo)注工具

4、階段發(fā)展方向

UI設(shè)計(jì)，交互設(shè)計(jì)，UX設(shè)計(jì)，產(chǎn)品經(jīng)理，運(yùn)營等

四、UX(UE)類

1、什么是UX設(shè)計(jì)？

即User Experience，也簡稱為UE，用戶體驗(yàn)。UX設(shè)計(jì)指以用戶體驗(yàn)為中心的設(shè)計(jì)，偏向于研究用戶與系統(tǒng)之間的交互過程，是對(duì)產(chǎn)品和服務(wù)的綜合體驗(yàn)，可以包括UI。

UED(User Experience Design)，用戶體驗(yàn)設(shè)計(jì)，是以用戶為中心的一種設(shè)計(jì)手段，以用戶需求為目標(biāo)而進(jìn)行的設(shè)計(jì)。設(shè)計(jì)過程注重以用戶為中心，用戶體驗(yàn)的概念從開發(fā)的最早期就開始進(jìn)入整個(gè)流程，并貫穿始終。

UED團(tuán)隊(duì)包括：

交互設(shè)計(jì)師(Interaction Designer)、視覺設(shè)計(jì)師(Vision Designer)、用戶體驗(yàn)設(shè)計(jì)師(User Experience Designer)、用戶界面設(shè)計(jì)師(User Interface Designer)和前端開發(fā)工程師(Web Developer)等等。

2、主要學(xué)習(xí)內(nèi)容

a.入門階段

??了解UX發(fā)展歷程與趨勢(shì)

??UX項(xiàng)目流程與基本規(guī)范

??用戶認(rèn)知

b.進(jìn)階階段

??視覺設(shè)計(jì)規(guī)范：排版、配色、字體等

??案例臨摹

??產(chǎn)品研發(fā)流程

??調(diào)研與競品分析

??平臺(tái)規(guī)范：PC端、移動(dòng)端、其他職能設(shè)備端等

??用戶心理研究

c.中階階段

??UI原型

??線框圖

??交互設(shè)計(jì)與實(shí)現(xiàn)

??前端實(shí)現(xiàn)

??設(shè)計(jì)提案

??產(chǎn)品分析與測(cè)試

d.高階階段

??項(xiàng)目實(shí)踐與提升

??項(xiàng)目與團(tuán)隊(duì)管理

……

3、主要軟件

??PS：圖形圖像處理軟件

??AI/Coreldraw：矢量圖軟件

??InDesign：排版工具

??Sketch/Axure/Mockplus：線框和原型設(shè)計(jì)

??AE/C4D：動(dòng)效特效軟件

??XMind/MindMannage：思維導(dǎo)圖

??Cutterman/Pxcook：APP切圖與標(biāo)注工具

……

4、階段發(fā)展方向

UX設(shè)計(jì)，UI設(shè)計(jì)，交互設(shè)計(jì)，產(chǎn)品經(jīng)理，運(yùn)營等

五、產(chǎn)品類

1、什么是產(chǎn)品設(shè)計(jì)？

產(chǎn)品設(shè)計(jì)，就是外型設(shè)計(jì)+結(jié)構(gòu)設(shè)計(jì)+功能設(shè)計(jì)，是將人的某種目的或需要轉(zhuǎn)換為一個(gè)具體的物理或工具的過程。

典型的產(chǎn)品設(shè)計(jì)過程包含四個(gè)階段：概念開發(fā)和產(chǎn)品規(guī)劃階段、詳細(xì)設(shè)計(jì)階段、小規(guī)模生產(chǎn)階段、增量生產(chǎn)階段。

2、主要學(xué)習(xí)內(nèi)容

a.入門階段

??產(chǎn)品經(jīng)理職責(zé)與工作流程

??初步養(yǎng)成產(chǎn)品思維：用戶認(rèn)知與定位、數(shù)據(jù)導(dǎo)向等

??產(chǎn)品設(shè)計(jì)基礎(chǔ)理論

b.進(jìn)階階段

??產(chǎn)品定位

??用戶需求分析挖掘

??數(shù)據(jù)分析

??市場(chǎng)調(diào)研

??產(chǎn)品案例分析：web應(yīng)用及網(wǎng)站，APP產(chǎn)品等的定位及用戶需求、數(shù)據(jù)等

??平臺(tái)規(guī)范：PC端、移動(dòng)端及其他平臺(tái)

c.中階階段

??原型與視覺設(shè)計(jì)

??產(chǎn)品架構(gòu)與功能設(shè)計(jì)：前端、動(dòng)效等

??交互設(shè)計(jì)

??用戶體驗(yàn)優(yōu)化

d.高階階段

??競品分析

??產(chǎn)品策劃與提案

??功能測(cè)試與分析

??發(fā)布與運(yùn)營

??項(xiàng)目與團(tuán)隊(duì)管理

3、主要軟件

??PS：圖形圖像處理軟件

??Sketch/Axure：產(chǎn)品原型

??Visio：流程圖制作

??XMind/MindMannage：思維導(dǎo)圖

4、階段發(fā)展方向

產(chǎn)品經(jīng)理，產(chǎn)品運(yùn)營等

六、前端類

1、什么是前端開發(fā)？

前端即網(wǎng)站前臺(tái)部分，運(yùn)行在PC端，移動(dòng)端等瀏覽器上展現(xiàn)給用戶瀏覽的網(wǎng)頁。

Web前端開發(fā)是從網(wǎng)頁制作演變而來，早期網(wǎng)站主要內(nèi)容都是靜態(tài)，以圖片和文字為主。隨著互聯(lián)網(wǎng)技術(shù)的發(fā)展和HTML5、CSS3的應(yīng)用，現(xiàn)代網(wǎng)頁更加美觀，交互效果顯著，功能更加強(qiáng)大。

前端技術(shù)包括4個(gè)部分：

前端美工、瀏覽器兼容、CSS、HTML「傳統(tǒng)」技術(shù)與Adobe AIR、Google Gears，以及概念性較強(qiáng)的交互式設(shè)計(jì),藝術(shù)性較強(qiáng)的視覺設(shè)計(jì)等等。

2、主要學(xué)習(xí)內(nèi)容

a.入門階段

??前端架構(gòu)流程

??HTML基礎(chǔ)：語法規(guī)范，常用標(biāo)簽及屬性，網(wǎng)頁間的鏈接跳轉(zhuǎn)等

??CSS基礎(chǔ)：基本語法，盒模型，常用布局模型等

??JavaScript基礎(chǔ)：基本語法，數(shù)據(jù)類型及轉(zhuǎn)換，函數(shù)，數(shù)組等

??靜態(tài)網(wǎng)頁設(shè)計(jì)

b.進(jìn)階階段

??HTML5

??CSS3

??JavaScrip進(jìn)階：框架、語言內(nèi)部機(jī)制、demo編程、Ajax編程

??JQuery

??網(wǎng)頁特效實(shí)現(xiàn)

c.中階階段

??服務(wù)端編程：基本概念，服務(wù)器搭建，XML與JSON

??PHP：基礎(chǔ)語法，服務(wù)端編程

??AJAX：基本編程接口，異步數(shù)據(jù)交互，跨域等

??移動(dòng)Web開發(fā)：響應(yīng)式布局，Bootstrap框架等

d.高階階段

??JavaScript精通：通過構(gòu)造函數(shù)創(chuàng)建對(duì)象，原型對(duì)象，原型鏈，作用域鏈，閉包，沙箱模式等

??開發(fā)常見模式與思想：開閉原則，MVC思想，工廠模式等

??框架封裝：選擇器框架，CSS操作封裝，屬性操作封裝，其他DOM操作封裝等

??代碼管理：Svn與Git

??代碼構(gòu)建：Grunt，Gulp等

……

3、主要軟件

主要是編程語言和運(yùn)行環(huán)境配置，比如上面提到的CSS、JavaScript等

4、階段發(fā)展方向

UI設(shè)計(jì)(前端開發(fā)方向)，前端開發(fā)工程師，Android和IOS開發(fā)，交互設(shè)計(jì)等

【學(xué)習(xí)建議】

前端開發(fā)工程師不僅要掌握基本的Web前端開發(fā)技術(shù)，網(wǎng)站性能優(yōu)化、SEO和服務(wù)器端的基礎(chǔ)知識(shí)

而且要學(xué)會(huì)運(yùn)用各種工具進(jìn)行輔助開發(fā)以及理論層面的知識(shí)，包括代碼的可維護(hù)性、組件的易用性、分層語義模板和瀏覽器分級(jí)支持等。

【學(xué)習(xí)資源領(lǐng)取】

學(xué)習(xí)教程+書單推薦/下載+素材網(wǎng)站/下載

公眾號(hào)對(duì)話框回復(fù)【簡書+你想要的階段資源】，小A會(huì)在12小時(shí)內(nèi)將資源鏈接發(fā)送給你哦