UI交互設計師大師班

 

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

 

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

 

在工作能力和實踐經驗上：

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

二是要求對通用類軟件或互聯網應用產品的人機交互有自己的理解和認識。

三是具備良好的審美能力、深厚的美術功底，有較強的平面設計和網頁設計能力。

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

第一部分　平面設計

（一）PhotoshopCS5圖像處理：PhotoshopCS5操作基礎、圖象優化處理、網頁頁面設計、經典實例分析與制作。

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

 

學習目標：

１.PS與AI、coreldrawX4的完美結合；

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

３.掌握平面設計規范及印刷原理；

４.戶內外廣告設計規范與技巧；

 

第二部分 手繪

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

（二）繪畫形態及明暗關系的掌握：手繪排調子；繪制正方體；三大面表現；繪制球體；五大調子及注意事項。

（三）彩鉛上色與創意表現：頭腦風暴模式；頭腦風暴應用；頭腦風暴與創意；表現抽象事物；表現復雜的文字；彩鉛上色。

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

（五）APP用戶端草圖繪制：做APP界面與手繪的關系；原型圖設計；項目流程分析；繪制原型圖經驗法則；原型圖關系梳理。

 

學習目標：

１.加強透視及光影關系的學習；

２.學習體會UI圖標的光影細節；

３.學會APP產品草圖的繪制方法與規范；

 

第三部分 電商設計

（一）電商工作環境及字體設計排版：字體認知與字體應用情景；字體排版方法及技巧；字體效果表現形式。

（二）配色與設計構思：配色基礎；色彩意向；色彩三屬性搭配（強中弱對比原則）的應用；顏色輕重遠近應用；版式平衡與版式分割的實際應用。

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

（四）詳情設計分析與制作：詳情頁結構分析；運營需求梳理；詳情頁標題排版形式匯總；運營專業術語講解及查看方式。

（五）詳情頁設計與主圖設計：詳情頁后期制作；主圖設計規范；主圖設計方法；詳情頁和主圖的應用。

（六）gif動畫及專題設計：詳情及導航常見動效；時間軸基礎；幀動畫及時間軸動畫；視頻轉GIF格式；切圖及詳情上傳；專題介紹及基本制作。

（七）活動專題設計：專題設計應用方向；專題需求分析；店招及導航設計；專題banner設計及字體變形設計方法；立體空間深入及應用。

（八）服裝首頁設計、詳情及主圖設計：首頁設計店招及店招常用設計元素及方式；首頁導航；專區版塊設計。

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

第四部分 UI設計

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

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

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

（四）保真原型及交互說明：axure繪制低保真原型圖；axure實現基礎交互效果；交互細節說明。

（五）ios移動端界面設計：app行業分類及現狀；iOS平臺規范；啟動圖標設計；啟動頁設計；引導頁設計；主頁面設計；導航樣式；常見版式特征。

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

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

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

 

學習目標：

１.掌握精美UI圖標的創意方法和技巧；

２.掌握UI設計規范與應用；

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

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

５.視覺效果打造提升，可進行復雜的視覺效果表現；

６.培養學員抽象思維及邏輯思維，擁有設計項目實戰能力；

７.掌握超寫實UI圖標設計技巧；

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

第一部分 網頁實戰

（一）網站基礎：網站特征、功能分析與風格表現分析；網站從0到1的實現過程，包括產品定位、人群分析、競品分析、架構-交互-設計等；設計需求思路整理；視覺、配色、設計規范。

（二）網站前臺頁面設計：如何根據原型功能合理制作界面；從設計角度分析版塊之間的聯系與區別；合理布局與配色；風格確定及元素的設計（扁平、質感、立體）。

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

（四）網站HTML5設計制作：HTML5設計與實現過程；HTML5設計與前端的溝通；HTML5布局方法及形式；交互方

法；界面設計；HTML5動態效果的常見形式總結；創意的來源；交互效果的可用性用戶體驗。

 

學習目標：

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

２.熟練掌握網頁頁面配色及排版設計；

３.掌握網頁設計配色技巧及常用搭配；

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

 

第二部分 html+css

 

（一）html基礎：體驗html；標簽；標題；標簽屬性；網頁基本結構；bui標簽；body屬性；插入圖；下級查找路徑；上級查找路徑。

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

（三）css基礎 ：體驗h5；H5自動補全標簽；html骨架與結構標簽；數據列表標簽；模擬input選中效果的提示文本；

驗證表單數據；表單類型；audio標簽；video視頻標簽；CSS語法；實體化三屬性；顯示模式及轉換；類選擇器及應用。

（四）選擇器及CSS引入方式：id選擇器；頁面布局；行內式；外鏈式；導入式；權重對比；復合選擇器；CSS層疊性和繼承性；CSS文字控制常用屬性；行高屬性；超鏈接偽類基礎。

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

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

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

（八）CSS透明：opacity屬性；background：rgba（）寫法；應用CSS透明屬性。

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

（十）實戰知識點：seo搜索引擎優化；兼容性語法；服務器；域名；ftp詳解。

 

學習目標

１.掌握html標簽及語法；

２.掌握css的語法；

３.掌握seo搜索引擎優化技術；

４.掌握兼容性調試；

５.學習服務器、域名相關知識；

第三部分 HTML5+CSS3響應式

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

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

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

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

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

（五）Fullpage：基本api；回調函數；CSS3綜合案例

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

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

（七）app制作：混合app介紹；hbulider + mui + html5plus；搭建基本結構；app綜合頁面

 

學習目標

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

２.掌握響應式設計原理；

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

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

 

第四部分 js+jq

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

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

驗函數返回值。

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

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

欄切換；滑動動畫；判斷html內容；類名控制。

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

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

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

 

可掌握的核心能力：

１.掌握了js基礎語法；

２.掌握了jq的常見語法，并實現網頁中的常見動效；

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

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