UI設(shè)計(jì)的三大具體分類——圖形設(shè)計(jì)、交互設(shè)計(jì)和用戶測(cè)試/研究的工作職能——分別對(duì)應(yīng)的是美術(shù)設(shè)計(jì)的專業(yè)知識(shí)，軟件設(shè)計(jì)工程師背景和相應(yīng)的編程能力，以及社會(huì)學(xué)心理學(xué)等人文學(xué)科儲(chǔ)備。

 

當(dāng)然，實(shí)際工作中，這幾種職能也不是截然分開(kāi)的。而今，這一涵蓋諸多領(lǐng)域的職位，也越來(lái)越要求從業(yè)人員同時(shí)具備跨學(xué)科、綜合性的理論素養(yǎng)和實(shí)際操作能力。

 

在工作能力和實(shí)踐經(jīng)驗(yàn)上：

一是要求從業(yè)人員精通Photoshop、Illustrator、Axure等圖形軟件，Html等前端腳本語(yǔ)言Dreamweaver等網(wǎng)頁(yè)制作工具，能夠獨(dú)立完成靜態(tài)網(wǎng)頁(yè)設(shè)計(jì)工作；熟練操作常用辦公軟件，且具備其他軟件應(yīng)用能力；熟悉Html，CSS，Javascript，Ajax。

二是要求對(duì)通用類軟件或互聯(lián)網(wǎng)應(yīng)用產(chǎn)品的人機(jī)交互有自己的理解和認(rèn)識(shí)。

三是具備良好的審美能力、深厚的美術(shù)功底，有較強(qiáng)的平面設(shè)計(jì)和網(wǎng)頁(yè)設(shè)計(jì)能力。

四是具有敏銳的用戶體驗(yàn)觀察力，富有創(chuàng)新精神。

第一部分　平面設(shè)計(jì)

（一）PhotoshopCS5圖像處理：PhotoshopCS5操作基礎(chǔ)、圖象優(yōu)化處理、網(wǎng)頁(yè)頁(yè)面設(shè)計(jì)、經(jīng)典實(shí)例分析與制作。

（二）CorelDrawX4、Illustrator圖形設(shè)計(jì)：包裝盒的設(shè)計(jì)、宣傳單、海報(bào)及名片的制作、產(chǎn)品及商業(yè)廣告設(shè)計(jì)。

 

學(xué)習(xí)目標(biāo)：

１.PS與AI、coreldrawX4的完美結(jié)合；

２.提高視覺(jué)設(shè)計(jì)的能力，加強(qiáng)商業(yè)廣告設(shè)計(jì)的學(xué)習(xí)；

３.掌握平面設(shè)計(jì)規(guī)范及印刷原理；

４.戶內(nèi)外廣告設(shè)計(jì)規(guī)范與技巧；

 

第二部分 手繪

（一）繪畫(huà)中的透視：透視概念；手繪基礎(chǔ)；一點(diǎn)透視原理；兩點(diǎn)透視畫(huà)法；兩點(diǎn)透視特點(diǎn)；兩點(diǎn)透視注意事項(xiàng)。

（二）繪畫(huà)形態(tài)及明暗關(guān)系的掌握：手繪排調(diào)子；繪制正方體；三大面表現(xiàn)；繪制球體；五大調(diào)子及注意事項(xiàng)。

（三）彩鉛上色與創(chuàng)意表現(xiàn)：頭腦風(fēng)暴模式；頭腦風(fēng)暴應(yīng)用；頭腦風(fēng)暴與創(chuàng)意；表現(xiàn)抽象事物；表現(xiàn)復(fù)雜的文字；彩鉛上色。

（四）UI扁平、擬物ICON繪制：扁平化概念；圖標(biāo)的表現(xiàn)形式（用針管筆描邊）；擬物圖標(biāo)注意問(wèn)題。

（五）APP用戶端草圖繪制：做APP界面與手繪的關(guān)系；原型圖設(shè)計(jì)；項(xiàng)目流程分析；繪制原型圖經(jīng)驗(yàn)法則；原型圖關(guān)系梳理。

 

學(xué)習(xí)目標(biāo)：

１.加強(qiáng)透視及光影關(guān)系的學(xué)習(xí)；

２.學(xué)習(xí)體會(huì)UI圖標(biāo)的光影細(xì)節(jié)；

３.學(xué)會(huì)APP產(chǎn)品草圖的繪制方法與規(guī)范；

 

第三部分 電商設(shè)計(jì)

（一）電商工作環(huán)境及字體設(shè)計(jì)排版：字體認(rèn)知與字體應(yīng)用情景；字體排版方法及技巧；字體效果表現(xiàn)形式。

（二）配色與設(shè)計(jì)構(gòu)思：配色基礎(chǔ)；色彩意向；色彩三屬性搭配（強(qiáng)中弱對(duì)比原則）的應(yīng)用；顏色輕重遠(yuǎn)近應(yīng)用；版式平衡與版式分割的實(shí)際應(yīng)用。

（三）場(chǎng)景合成及立體表現(xiàn)：版面布局方式；版面分割；Banner形式講解。

（四）詳情設(shè)計(jì)分析與制作：詳情頁(yè)結(jié)構(gòu)分析；運(yùn)營(yíng)需求梳理；詳情頁(yè)標(biāo)題排版形式匯總；運(yùn)營(yíng)專業(yè)術(shù)語(yǔ)講解及查看方式。

（五）詳情頁(yè)設(shè)計(jì)與主圖設(shè)計(jì)：詳情頁(yè)后期制作；主圖設(shè)計(jì)規(guī)范；主圖設(shè)計(jì)方法；詳情頁(yè)和主圖的應(yīng)用。

（六）gif動(dòng)畫(huà)及專題設(shè)計(jì)：詳情及導(dǎo)航常見(jiàn)動(dòng)效；時(shí)間軸基礎(chǔ)；幀動(dòng)畫(huà)及時(shí)間軸動(dòng)畫(huà)；視頻轉(zhuǎn)GIF格式；切圖及詳情上傳；專題介紹及基本制作。

（七）活動(dòng)專題設(shè)計(jì)：專題設(shè)計(jì)應(yīng)用方向；專題需求分析；店招及導(dǎo)航設(shè)計(jì)；專題banner設(shè)計(jì)及字體變形設(shè)計(jì)方法；立體空間深入及應(yīng)用。

（八）服裝首頁(yè)設(shè)計(jì)、詳情及主圖設(shè)計(jì)：首頁(yè)設(shè)計(jì)店招及店招常用設(shè)計(jì)元素及方式；首頁(yè)導(dǎo)航；專區(qū)版塊設(shè)計(jì)。

（九）無(wú)線端店鋪裝修：無(wú)線端版塊講解；無(wú)線端首頁(yè)結(jié)構(gòu)；無(wú)線端各部分模塊及尺寸要求；整理運(yùn)營(yíng)需求進(jìn)行設(shè)計(jì)；無(wú)線端詳情頁(yè)設(shè)計(jì)；無(wú)線端店招設(shè)計(jì)。

第四部分 UI設(shè)計(jì)

（一）UI圖標(biāo)創(chuàng)意：圖標(biāo)的作用與分類；圖標(biāo)常見(jiàn)風(fēng)格；圖標(biāo)創(chuàng)意方法。

（二）圖標(biāo)抽象及繪制技法：像素圖標(biāo)應(yīng)用場(chǎng)景與技法；金屬質(zhì)感技法；玻璃質(zhì)感技法；塑料質(zhì)感技法；木質(zhì)質(zhì)感技法。

（三）交互設(shè)計(jì)：什么是交互；交互設(shè)計(jì)師工作流程和產(chǎn)出；xmind（思維導(dǎo)圖軟件）軟件繪制腦圖；axure（Axure RP專業(yè)的快速原型設(shè)計(jì)工具）軟件繪制流程圖。

（四）保真原型及交互說(shuō)明：axure繪制低保真原型圖；axure實(shí)現(xiàn)基礎(chǔ)交互效果；交互細(xì)節(jié)說(shuō)明。

（五）ios移動(dòng)端界面設(shè)計(jì)：app行業(yè)分類及現(xiàn)狀；iOS平臺(tái)規(guī)范；啟動(dòng)圖標(biāo)設(shè)計(jì)；啟動(dòng)頁(yè)設(shè)計(jì)；引導(dǎo)頁(yè)設(shè)計(jì)；主頁(yè)面設(shè)計(jì)；導(dǎo)航樣式；常見(jiàn)版式特征。

（六）iOS改版安卓及適配切圖：安卓改版；項(xiàng)目文件整理；輸出標(biāo)注圖；輸出切圖。

（七）app高保真原型制作：高保真原型制作流程與規(guī)范。

（八）用戶體驗(yàn)及項(xiàng)目迭代：何為用戶體驗(yàn)；優(yōu)秀體驗(yàn)的設(shè)計(jì)原則；不良體驗(yàn)優(yōu)化；項(xiàng)目2.0迭代。

 

學(xué)習(xí)目標(biāo)：

１.掌握精美UI圖標(biāo)的創(chuàng)意方法和技巧；

２.掌握UI設(shè)計(jì)規(guī)范與應(yīng)用；

３.學(xué)會(huì)如何去把控一個(gè)整體設(shè)計(jì)項(xiàng)目及角色扮演；

４.更進(jìn)一步學(xué)習(xí)界面設(shè)計(jì)，掌握多媒體終端界面設(shè)計(jì)；

５.視覺(jué)效果打造提升，可進(jìn)行復(fù)雜的視覺(jué)效果表現(xiàn)；

６.培養(yǎng)學(xué)員抽象思維及邏輯思維，擁有設(shè)計(jì)項(xiàng)目實(shí)戰(zhàn)能力；

７.掌握超寫(xiě)實(shí)UI圖標(biāo)設(shè)計(jì)技巧；

８.掌握Axure、xmind等軟件繪制圖；

第一部分 網(wǎng)頁(yè)實(shí)戰(zhàn)

（一）網(wǎng)站基礎(chǔ)：網(wǎng)站特征、功能分析與風(fēng)格表現(xiàn)分析；網(wǎng)站從0到1的實(shí)現(xiàn)過(guò)程，包括產(chǎn)品定位、人群分析、競(jìng)品分析、架構(gòu)-交互-設(shè)計(jì)等；設(shè)計(jì)需求思路整理；視覺(jué)、配色、設(shè)計(jì)規(guī)范。

（二）網(wǎng)站前臺(tái)頁(yè)面設(shè)計(jì)：如何根據(jù)原型功能合理制作界面；從設(shè)計(jì)角度分析版塊之間的聯(lián)系與區(qū)別；合理布局與配色；風(fēng)格確定及元素的設(shè)計(jì)（扁平、質(zhì)感、立體）。

（三）后臺(tái)模塊設(shè)計(jì)：用戶后臺(tái)設(shè)計(jì)；后臺(tái)與前臺(tái)功能的聯(lián)系分析；后臺(tái)布局技巧；如何合理的布局增強(qiáng)用戶體驗(yàn)。

（四）網(wǎng)站HTML5設(shè)計(jì)制作：HTML5設(shè)計(jì)與實(shí)現(xiàn)過(guò)程；HTML5設(shè)計(jì)與前端的溝通；HTML5布局方法及形式；交互方

法；界面設(shè)計(jì)；HTML5動(dòng)態(tài)效果的常見(jiàn)形式總結(jié)；創(chuàng)意的來(lái)源；交互效果的可用性用戶體驗(yàn)。

 

學(xué)習(xí)目標(biāo)：

１.了解網(wǎng)站公司組成（部門），人員配備，工作職責(zé)；

２.熟練掌握網(wǎng)頁(yè)頁(yè)面配色及排版設(shè)計(jì)；

３.掌握網(wǎng)頁(yè)設(shè)計(jì)配色技巧及常用搭配；

４.學(xué)習(xí)黃金分割點(diǎn)，掌握優(yōu)秀的排版比例；

 

第二部分 html+css

 

（一）html基礎(chǔ)：體驗(yàn)html；標(biāo)簽；標(biāo)題；標(biāo)簽屬性；網(wǎng)頁(yè)基本結(jié)構(gòu)；bui標(biāo)簽；body屬性；插入圖；下級(jí)查找路徑；上級(jí)查找路徑。

（二）列表及表單：無(wú)序列表；有序列表；項(xiàng)目列表；熱點(diǎn)新聞；超鏈接；表格基礎(chǔ)；測(cè)試表格邊框線；input標(biāo)  簽；下拉菜單；表單頁(yè)面。

（三）css基礎(chǔ) ：體驗(yàn)h5；H5自動(dòng)補(bǔ)全標(biāo)簽；html骨架與結(jié)構(gòu)標(biāo)簽；數(shù)據(jù)列表標(biāo)簽；模擬input選中效果的提示文本；

驗(yàn)證表單數(shù)據(jù)；表單類型；audio標(biāo)簽；video視頻標(biāo)簽；CSS語(yǔ)法；實(shí)體化三屬性；顯示模式及轉(zhuǎn)換；類選擇器及應(yīng)用。

（四）選擇器及CSS引入方式：id選擇器；頁(yè)面布局；行內(nèi)式；外鏈?zhǔn)?；?dǎo)入式；權(quán)重對(duì)比；復(fù)合選擇器；CSS層疊性和繼承性；CSS文字控制常用屬性；行高屬性；超鏈接偽類基礎(chǔ)。

（五）盒子模型：盒子模型組成；盒子模型在火狐顯示樣式；border和padding的不同方向設(shè)置；padding多屬性寫(xiě)法；margin多屬性寫(xiě)法；內(nèi)邊距撐大盒子問(wèn)題；CSS初始化；外邊距合并。

（六）浮動(dòng)及常見(jiàn)布局：標(biāo)準(zhǔn)流；浮動(dòng)屬性；overflow屬性；清除浮動(dòng)；外邊距合并；行內(nèi)元素垂直內(nèi)外邊距。

（七）定位 ：相對(duì)定位；絕對(duì)定位；定位的使用；z-index；固定定位。

（八）CSS透明：opacity屬性；background：rgba（）寫(xiě)法；應(yīng)用CSS透明屬性。

（九）CSS精靈：CSS精靈詳解；background屬性拆解；CSS精靈應(yīng)用；滑動(dòng)門；文字陰影；凹凸文字效果；盒子陰影；圓角屬性；線性漸變；徑向漸變。

（十）實(shí)戰(zhàn)知識(shí)點(diǎn)：seo搜索引擎優(yōu)化；兼容性語(yǔ)法；服務(wù)器；域名；ftp詳解。

 

學(xué)習(xí)目標(biāo)

１.掌握html標(biāo)簽及語(yǔ)法；

２.掌握css的語(yǔ)法；

３.掌握seo搜索引擎優(yōu)化技術(shù)；

４.掌握兼容性調(diào)試；

５.學(xué)習(xí)服務(wù)器、域名相關(guān)知識(shí)；

第三部分 HTML5+CSS3響應(yīng)式

（一）標(biāo)簽及選擇器：Change事件；Html5方法；對(duì)象轉(zhuǎn)換；本地存儲(chǔ)方法；CSS3屬性選擇器；結(jié)構(gòu)偽類選擇器；CSS3的常用偽類；偽類配合圖標(biāo)字體。

（二）CSS3屬性:背景屬性；精靈圖尺寸與坐標(biāo)；新增顏色模式；CSS3內(nèi)減模式；CSS3過(guò)度屬性；CSS3位移屬性；CSS3變形屬性。

（三）效果展示及動(dòng)畫(huà)：寫(xiě)實(shí)圖標(biāo)展示；XY軸旋轉(zhuǎn)；中心點(diǎn)；透視；入場(chǎng)動(dòng)畫(huà)；動(dòng)畫(huà)延時(shí)；位移；圖文交互；自定義動(dòng)畫(huà)；

CSS3多組動(dòng)畫(huà)；逐幀動(dòng)畫(huà)；單行、多行溢出省略號(hào)。

（四）視口、輪播圖、插件與判斷終端：視口標(biāo)簽設(shè)置和默認(rèn)大?。籰ib-flexible.js ；利用rem適配所有設(shè)備；用插件實(shí)現(xiàn)移動(dòng)端輪播圖；less常用語(yǔ)法； iscroll插件；Hbuilder打包 ；判斷終端。

（五）Fullpage：基本api；回調(diào)函數(shù)；CSS3綜合案例

（六）bootstrap框架：Media 語(yǔ)法；關(guān)鍵字；外鏈； bootstrap框架介紹；bootstrap 全局CSS樣式bootstrap組

件；bootstrap JS插件；圖表插件。

（七）app制作：混合app介紹；hbulider + mui + html5plus；搭建基本結(jié)構(gòu)；app綜合頁(yè)面

 

學(xué)習(xí)目標(biāo)

１.掌握時(shí)下最流行的h5+CSS3技術(shù)；

２.掌握響應(yīng)式設(shè)計(jì)原理；

３.掌握移動(dòng)端的適配原則；

４.掌握流行框架的使用。

 

第四部分 js+jq

（一）js基礎(chǔ)：alert；prompt；函數(shù)（方法）；參數(shù)；變量；js控制html；事件；下拉菜單；js的書(shū)寫(xiě)位置。

（二）函數(shù)及循環(huán)語(yǔ)句：入口函數(shù)；this；數(shù)據(jù)類型的檢測(cè)；自定義函數(shù)；條件判斷語(yǔ)句；邏輯運(yùn)算符；循環(huán)；數(shù)組；體

驗(yàn)函數(shù)返回值。

（三） jq基礎(chǔ)：jq書(shū)寫(xiě)規(guī)范；入口函數(shù)的不同點(diǎn)；jq控制css；jq控制html；jq簡(jiǎn)單動(dòng)畫(huà)；選擇器。

（四） 排他思想與索引值：.parents() .parent() ；. children()；動(dòng)畫(huà)排隊(duì) ；jquery中的排他思想；jq的索引值；tab

欄切換；滑動(dòng)動(dòng)畫(huà)；判斷html內(nèi)容；類名控制。

（五）節(jié)點(diǎn)操作及各種效果展示：添加節(jié)點(diǎn)；節(jié)點(diǎn)的移除；會(huì)員標(biāo)簽效果；淡入淡出；突出展示；自定義動(dòng)畫(huà)；回調(diào)函數(shù)；模態(tài)窗口；animate。

（六）精靈圖及事件：事件坐標(biāo) ；鼠標(biāo)跟隨；滾動(dòng)跟隨；導(dǎo)航跟隨。

（七）定時(shí)器及動(dòng)畫(huà)：變量作用域；定時(shí)器基礎(chǔ)與動(dòng)畫(huà)。

 

可掌握的核心能力：

１.掌握了js基礎(chǔ)語(yǔ)法；

２.掌握了jq的常見(jiàn)語(yǔ)法，并實(shí)現(xiàn)網(wǎng)頁(yè)中的常見(jiàn)動(dòng)效；

３.掌握了插件的使用方法；

４.掌握了程序中的邏輯思維