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

 

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

 

在工作能力和實踐經(jīng)驗上：

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

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

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

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

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

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

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

 

學習目標：

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

２.提高視覺設(shè)計的能力，加強商業(yè)廣告設(shè)計的學習；

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

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

 

第二部分 手繪

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

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

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

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

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

 

學習目標：

１.加強透視及光影關(guān)系的學習；

２.學習體會UI圖標的光影細節(jié)；

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

 

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

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

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

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

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

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

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

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

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

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

第四部分 UI設(shè)計

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

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

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

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

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

（六）iOS改版安卓及適配切圖：安卓改版；項目文件整理；輸出標注圖；輸出切圖。

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

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

 

學習目標：

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

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

３.學會如何去把控一個整體設(shè)計項目及角色扮演；

４.更進一步學習界面設(shè)計，掌握多媒體終端界面設(shè)計；

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

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

７.掌握超寫實UI圖標設(shè)計技巧；

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

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

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

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

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

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

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

 

學習目標：

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

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

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

４.學習黃金分割點，掌握優(yōu)秀的排版比例；

 

第二部分 html+css

 

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

（二）列表及表單：無序列表；有序列表；項目列表；熱點新聞；超鏈接；表格基礎(chǔ)；測試表格邊框線；input標  簽；下拉菜單；表單頁面。

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

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

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

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

（六）浮動及常見布局：標準流；浮動屬性；overflow屬性；清除浮動；外邊距合并；行內(nèi)元素垂直內(nèi)外邊距。

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

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

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

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

 

學習目標

１.掌握html標簽及語法；

２.掌握css的語法；

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

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

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

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

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

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

（三）效果展示及動畫：寫實圖標展示；XY軸旋轉(zhuǎn)；中心點；透視；入場動畫；動畫延時；位移；圖文交互；自定義動畫；

CSS3多組動畫；逐幀動畫；單行、多行溢出省略號。

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

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

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

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

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

 

學習目標

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

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

３.掌握移動端的適配原則；

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

 

第四部分 js+jq

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

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

驗函數(shù)返回值。

（三） jq基礎(chǔ)：jq書寫規(guī)范；入口函數(shù)的不同點；jq控制css；jq控制html；jq簡單動畫；選擇器。

（四） 排他思想與索引值：.parents() .parent() ；. children()；動畫排隊 ；jquery中的排他思想；jq的索引值；tab

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

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

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

（七）定時器及動畫：變量作用域；定時器基礎(chǔ)與動畫。

 

可掌握的核心能力：

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

２.掌握了jq的常見語法，并實現(xiàn)網(wǎng)頁中的常見動效；

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

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