UI學(xué)習(xí)路線圖

準(zhǔn)備篇

PS軟件操作基礎(chǔ)階段

適用/適合人群：適合小白，零基礎(chǔ)

目標(biāo)：掌握PS軟件基本技術(shù)

●界面認(rèn)識(shí)

1.配色搭配關(guān)系    2.工具的使用    3.快捷鍵操作的練習(xí)    4.圖形的提取    5.鋼筆基礎(chǔ)摳    6.圖美學(xué)應(yīng)用    7.模特配色+認(rèn)識(shí)色環(huán)+色相飽和度    8.光暈、影子、質(zhì)感訓(xùn)練*延伸難點(diǎn)摳圖    9.頭發(fā)的摳取    10.水滴的摳取    11.云霧的提取

●文字組合與樣式效果

1.樣式效果思考    2.剪切蒙版疊加    3.文字效果難度訓(xùn)練

●頁面控制權(quán)

1.頁面控制權(quán)的關(guān)系 —— 主次與構(gòu)圖    2.頁面控制權(quán)手法模擬 —— 技術(shù)要點(diǎn)    3.主次關(guān)系-模糊手法    4.主次關(guān)系-調(diào)色、半透手法    5.主次關(guān)系-混合模式之顏色疊透手法

●學(xué)會(huì)利用網(wǎng)絡(luò)查找資源

1.優(yōu)秀素材網(wǎng)址分享

●字體深入學(xué)習(xí)

1.文字字體的認(rèn)識(shí)    2.關(guān)于主題排版的關(guān)系    3.字圖組合的美學(xué)關(guān)系    4.比例美學(xué)的量化關(guān)系

●主題層次邏輯關(guān)系

1.模擬排版

●基礎(chǔ)修圖

1.模特面部立體修圖    2.化妝品精修    3.合圖創(chuàng)作

基礎(chǔ)篇

電商設(shè)計(jì)與運(yùn)營(yíng)管理

適用/適合人群：適合小白，零基礎(chǔ)

目標(biāo)：掌握淘寶開店基本技術(shù)、達(dá)到獨(dú)立開店、獨(dú)立裝修店鋪

●開店指南

1.開店流程    2.開店入口    3.開店注意事項(xiàng)    4.一件代發(fā)的流程    5.0成本進(jìn)貨運(yùn)營(yíng)個(gè)人店鋪鉆展及直通車的位置及區(qū)別

●淘寶后臺(tái)講解

1.淘寶整個(gè)后臺(tái)的分析和介紹    2.淘寶后臺(tái)模塊介紹    3.淘寶首頁布局介紹

●首頁設(shè)計(jì)

1.首頁分段練習(xí)    2.首頁設(shè)計(jì)分析

●寶貝詳情頁的設(shè)計(jì)

1.關(guān)聯(lián)營(yíng)銷    2.詳情頁設(shè)計(jì)分析

●詳情頁上傳

1.修改代發(fā)產(chǎn)品詳情注意事項(xiàng)    2.發(fā)布新品的詳情頁上傳

●店面首頁裝修

1.Dreamweaver軟件的使用    2.HTML代碼介紹    3.CSS樣式講解    4.代碼完成全屏店鋪裝修    5.運(yùn)用裝修網(wǎng)站進(jìn)行后臺(tái)上傳專題頁／分類頁的新建及裝修

●手機(jī)移動(dòng)端的裝修

1.手機(jī)端后臺(tái)模塊介紹    2.手機(jī)端整體布局的介紹    3.專業(yè)術(shù)語的介紹

核心篇

AI軟件的操作基礎(chǔ)階段

適用/適合人群：適合小白，零基礎(chǔ)

目標(biāo)：掌握AI軟件基本技術(shù)

●基本工具的使用

●線形icon繪制

●面形icon繪制

●執(zhí)行力操作練習(xí)

●AI文字排版訓(xùn)練

平面視覺設(shè)計(jì)階段

●CI的基本概念與VI的基本關(guān)系

1.VI規(guī)范    2.基礎(chǔ)部分規(guī)范    3.應(yīng)用部分

●VIS物料類設(shè)計(jì)

1.工作證的分類    2.工作證的設(shè)計(jì)規(guī)范    3.工作證的制作印刷    5.易拉寶、展板、海報(bào)    6.版面布局+編排規(guī)劃    7.內(nèi)容細(xì)節(jié)的層次關(guān)系    8.X展架的設(shè)計(jì)規(guī)范    9.易拉寶的誰規(guī)范    10.展板的設(shè)計(jì)規(guī)范    11.案例分析    12.三折頁的設(shè)計(jì)規(guī)范    13.三折頁的印刷    14.三折頁的案例分析    15.畫冊(cè)    16.平面印刷流程與工藝規(guī)范    17.主視覺海報(bào)深入合圖

進(jìn)階篇

WEB UI階段

適用/適合人群：有一定的軟件基礎(chǔ)與設(shè)計(jì)美感
目標(biāo)：ui設(shè)計(jì)師必備技能

●網(wǎng)頁入門基礎(chǔ)知識(shí)

1.平面設(shè)計(jì)與UI設(shè)計(jì)的區(qū)別    2.認(rèn)識(shí)網(wǎng)站界面的區(qū)域組成    3.屏幕大小與屏幕分辨率    4.網(wǎng)站設(shè)計(jì)基準(zhǔn)尺寸    5.網(wǎng)頁設(shè)計(jì)屏幕大小適配    6.網(wǎng)頁網(wǎng)格系統(tǒng)運(yùn)用    7.網(wǎng)頁視覺布局規(guī)范

●網(wǎng)頁頁眉設(shè)計(jì)

1.網(wǎng)站頁眉版塊組成    2.頁眉區(qū)域需設(shè)計(jì)的內(nèi)容    3.導(dǎo)航基礎(chǔ)知識(shí)    4.導(dǎo)航表現(xiàn)形式    5.導(dǎo)航類型及應(yīng)用    6.導(dǎo)航設(shè)計(jì)要點(diǎn)

●網(wǎng)頁排版布局設(shè)計(jì)

1.網(wǎng)站頁腳版塊組成    2.頁腳區(qū)域需設(shè)計(jì)的內(nèi)容    3.如何豐富頁腳區(qū)    4.頁腳區(qū)域設(shè)計(jì)要點(diǎn)

●網(wǎng)站界面風(fēng)格設(shè)計(jì)

1.網(wǎng)站常用風(fēng)格類型    2.網(wǎng)站風(fēng)格混搭

●網(wǎng)站界面色彩

1.色彩基礎(chǔ)知識(shí)    2.色彩情感    3.配色原則    4.配色方法

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

1.Banner與網(wǎng)站風(fēng)格的關(guān)系    2.Banner尺寸設(shè)定原則    3.Banner組成三大要素    4.Banner常見三大類型    5.Banner設(shè)計(jì)要點(diǎn)

●WEB專題界面設(shè)計(jì)

1.主視覺創(chuàng)作技法雙絕

●立實(shí)戰(zhàn)項(xiàng)目

1.項(xiàng)目框架    2.定色彩字號(hào)    3.填色加效果    4.設(shè)計(jì)圖標(biāo)

高級(jí)篇

APP UI階段

適用/適合人群：有一定的軟件基礎(chǔ)與設(shè)計(jì)美感
目標(biāo)：ui設(shè)計(jì)師必備技能

●了解課程關(guān)系與UI設(shè)計(jì)

1.第二階段課程與第一階段的關(guān)系    2.UI設(shè)計(jì)的工作流程    3.ui設(shè)計(jì)注意的要點(diǎn)    4.平臺(tái)介紹    5.移動(dòng)端布局規(guī)范

●移動(dòng)端設(shè)計(jì)規(guī)范

1.分割線有些是貫通    2.有些是不貫通的    3.圖標(biāo)線與面的強(qiáng)調(diào)性 觀察同一區(qū)域內(nèi)圖標(biāo)有什么共性    4.圖標(biāo)的作用

●移動(dòng)端界面設(shè)計(jì)規(guī)律

1.分割線的作用 如何利用它    2.割線有些是貫通 有些是不貫通的    3.圖標(biāo)線與面的強(qiáng)調(diào)性    4.觀察同一區(qū)域內(nèi)圖標(biāo)有什么共性    5.圖標(biāo)的作用    6.觀察大部分移動(dòng)端產(chǎn)品界面背景為什么都是灰白    7.為什么很多信息列表它的核心視覺點(diǎn)都是在左邊

●移動(dòng)端信息梳理把控要點(diǎn)

1.移動(dòng)端界面信息特點(diǎn)    2.根據(jù)移動(dòng)端信息特點(diǎn)如何梳理我們的信息    3.圖標(biāo)線與面的強(qiáng)調(diào)性    4.頁面信息關(guān)系分析    5.信息梳理思考

●移動(dòng)端頁面的配色

1.色彩帶給我們的感受及體驗(yàn)    2.app色彩分析    3.色彩的規(guī)范    4.界面細(xì)節(jié)配色思考    5.系統(tǒng)默認(rèn)控件層與內(nèi)容區(qū)配色思考    6.界面色彩分配規(guī)律（跳色：反饋 提示 觸控 …關(guān)注要點(diǎn)）

●Axure原型軟件初級(jí)課程

1.軟件使用目的及人群    2.了解軟件界面布局功能    3.根據(jù)界面模仿搭建原型圖

●獨(dú)立實(shí)戰(zhàn)項(xiàng)目

1.項(xiàng)目介紹    2.項(xiàng)目原型圖    3.項(xiàng)目框架    4.填色加效果    5.標(biāo)注切圖

●廣告圖設(shè)計(jì)

1.常用廣告圖設(shè)計(jì)手法    2.疊加字體設(shè)計(jì)    3.柔和字體設(shè)計(jì)    4.強(qiáng)硬字體設(shè)計(jì)    5.選圖與快速完成廣告設(shè)計(jì)

●啟動(dòng)頁引導(dǎo)頁的認(rèn)識(shí),引導(dǎo)頁構(gòu)成分析及技巧

1.好的app引導(dǎo)頁欣賞    2.畫面組成關(guān)系    3.常見的圖文構(gòu)成形式    4.圖形的運(yùn)用及常見構(gòu)成    5.如何正確選擇風(fēng)格創(chuàng)建引導(dǎo)頁

●小組實(shí)戰(zhàn)項(xiàng)目

1.定產(chǎn)品    2.小組討論    3.定規(guī)范    4.搭建框架    5.填色與設(shè)計(jì)    6.標(biāo)注與切圖

AE交互動(dòng)效設(shè)計(jì)階段

●AE軟件基礎(chǔ)操作知識(shí)點(diǎn)梳理:

1.軟件的應(yīng)用，行業(yè)中的商業(yè)價(jià)值    2.關(guān)于軟件的初始設(shè)置    3.關(guān)于屏幕尺寸設(shè)置的講解    4.關(guān)于文件導(dǎo)出的設(shè)置    5.關(guān)于AI PS軟件之間的對(duì)接方式    6.關(guān)于時(shí)間和幀之間的轉(zhuǎn)換介紹    7.關(guān)于動(dòng)畫版面構(gòu)成部分詳解    8.關(guān)于動(dòng)畫曲線的認(rèn)識(shí)    9.關(guān)快捷鍵的介紹和記憶    10.關(guān)于渲染輸出保存格式的介紹

●動(dòng)效設(shè)計(jì)思路梳理

1.講解設(shè)計(jì)誤區(qū)與建議方向    2.講解常用動(dòng)效的幾種設(shè)計(jì)手法

●緩動(dòng)曲線詳解及其適用范圍,AE實(shí)操動(dòng)效課題訓(xùn)練

1.小球彈跳入門（練習(xí)軟件快捷方式）    2.Loading 動(dòng)畫（學(xué)會(huì)調(diào)節(jié)圖形自帶屬性動(dòng)畫）    3.UI界面動(dòng)畫詳解（結(jié)合PS圖層制作UI交互動(dòng)效）    4.WATCH 界面動(dòng)畫制作（不同平臺(tái)動(dòng)畫的制作方式）