| 東方博宜UI交互設計一期課程 | ||
| 模塊 | 課程 | 學(xué)習內容 |
| 美術(shù)訓練營(yíng) | 藝術(shù)素養 | . 素描速寫(xiě)訓練; |
| . 三大構成原理; | ||
| . 透視、構圖、造型訓練; | ||
| . 應用美術(shù)發(fā)展趨勢; | ||
| . 綜合案例:擁有基礎藝術(shù)素養,為之后的設計學(xué)習打下基礎; | ||
| 色彩設計 | . 色彩屬性、對比與調和、色彩的混色配置; | |
| 應用技巧 | . 設計色彩的表述體系; | |
| . 色彩的裝飾美感及色彩的表現方法; | ||
| . 綜合案例:掌握色彩心理和色彩搭配; | ||
| 手繪基礎 | . 學(xué)習形式美通用法則的量化標準,能夠快速獲得程式審美能力; | |
| 構圖設計 | . 掌握視覺(jué)分割的發(fā)生原理,進(jìn)行經(jīng)典案例分析,了解黃金比例等在設計中的應用; | |
| . 手繪基礎:掌握手繪技巧,利用手繪完成UI的基本構圖; | ||
| . 當下流行風(fēng)格:擬物化、扁平化、寫(xiě)實(shí)等繪制技巧; | ||
| . 綜合案例:利用手繪+構圖,繪制各類(lèi)UI圖標; | ||
| 字體設計 | . 了解與認識字體,學(xué)習字體風(fēng)格; | |
| . 字體設計技法、字體變形、字體效果處理; | ||
| . 綜合案例:掌握字體的設計和選擇; | ||
| 軟件基礎 | Photoshop平面設計 | . 學(xué)習Photoshop軟件界面構成與計算機圖像設計的基本知識; |
| . 掌握各種圖像處理工具的使用和位圖圖像的處理技巧; | ||
| . 綜合案例: | ||
| 平面設計-----了解平面海報、畫(huà)冊、招貼設計中構成及創(chuàng )意方法。 | ||
| 淘寶網(wǎng)店設計-----網(wǎng)店產(chǎn)品圖片處理、網(wǎng)站廣告(banner)設計。 | ||
| UI界面設計-----簡(jiǎn)單了解UI圖標的設計手法和制作過(guò)程。 | ||
| Illustrator應用技能 | . 學(xué)習AI的基本功能及應用范圍; | |
| . 掌握AI常規操作、 創(chuàng )建基本圖形、 創(chuàng )建并編輯路徑、 創(chuàng )建符號和圖表、 創(chuàng )建和編輯文本、 圖層與剪切蒙版、 效果與濾鏡等; | ||
| . 矢量圖形繪制的技巧和矢量圖形的注意事項; | ||
| . 綜合案例:掌握AI在標志 、字體、各類(lèi)UI圖標設計中的制作手法和應用手段等等; | ||
| InDesign應用技能 | . 通過(guò)報刊雜志設計,掌握排版中的頁(yè)碼設計、頁(yè)面模板設計、文本和樣式、圖形圖像、表格工具、自適應目錄等; | |
| . 掌握印前與輸出的相關(guān)應用,書(shū)籍與長(cháng)文檔的制作; | ||
| . 掌握深入挖掘工具背后隱藏的技巧,應用軟件教學(xué)規范化設計; | ||
| . 綜合案例:雜志、報紙、書(shū)籍; | ||
| CorelDRAW應用技能 | . 了解CorelDRAW軟件的特性并掌握CorelDRAW的基本操作; | |
| . 矢量圖形繪制的技巧; | ||
| . 掌握CorelDRAW和打印排版中的相關(guān)知識點(diǎn); | ||
| . 綜合案例:利用CDR完成VI(企業(yè)視覺(jué)傳達系統)、畫(huà)冊排版、海報等的制作; | ||
| 綜合項目實(shí)戰 | . 通過(guò)教員的指導與學(xué)員的練習,每位學(xué)員在規定的時(shí)間內完成一套完整移動(dòng)設備或穿戴設備上的界面設計,公益、商業(yè)海報各一份并制作成品。 | |
| . 綜合案例:移動(dòng)設備界面設計、海報設計制作, | ||
| UI設計規范 | 產(chǎn)品設計流程及規范 | . 了解產(chǎn)品設計的流程及規范; |
| . 理解產(chǎn)品設計流程中各環(huán)節分工及終效果之間的關(guān)系; | ||
| . 掌握多系統產(chǎn)品設計的方法; | ||
| 用戶(hù)中心設計 | . 理解何為商業(yè)化設計、實(shí)現企業(yè)與個(gè)人的雙贏(yíng); | |
| . 用戶(hù)需求分析及用戶(hù)需求挖掘; | ||
| . 利用大數據對用戶(hù)體驗進(jìn)行分析總結; | ||
| . 了解現階段的人工智能設計; | ||
| UI設計 | 圖標設計 | . 學(xué)習圖標的分類(lèi),圖標的設計與制作規范; |
| . 理解不同類(lèi)型圖標的設計特征; | ||
| . 設計制作多系統圖標(剪影、扁平化、2.5D、超寫(xiě)實(shí)、3D等); | ||
| . 綜合案例:設計PC、移動(dòng)的各類(lèi)小圖標; | ||
| 移動(dòng)APP | . 基礎知識:APP開(kāi)發(fā)與設計流程,屏幕尺寸與分辨率介紹及常用的單位介紹; | |
| . 平臺規范:iOS、Android、IPad、Windows Phone7系統特點(diǎn)與標準,文字標準,框架標準; | ||
| . 界面設計:移動(dòng)產(chǎn)口頁(yè)面分析,頁(yè)面風(fēng)格分析,APP頁(yè)面制作,適配、標注與切圖規范; | ||
| . 綜合案例:安卓、IOS圖標制作、界面制作; | ||
| WebUI | . Banner設計:banner的種類(lèi)與風(fēng)格,banner的設計方法,banner的構成思路; | |
| . 網(wǎng)頁(yè)設計流程及規范:網(wǎng)頁(yè)的設計流程,網(wǎng)頁(yè)構成元素與規范,網(wǎng)頁(yè)的布局模式; | ||
| . 頁(yè)面分析:網(wǎng)站的類(lèi)型與風(fēng)格,主流行業(yè)網(wǎng)站分析,不同網(wǎng)站的布局與排版方式; | ||
| . 專(zhuān)題頁(yè)設計:專(zhuān)題頁(yè)頭圖設計,專(zhuān)題頁(yè)板塊設計,各類(lèi)型專(zhuān)題頁(yè)分析與制作,專(zhuān)題頁(yè)設計思路,專(zhuān)題頁(yè)實(shí)戰練習; | ||
| . 綜合案例:商業(yè)網(wǎng)頁(yè)整站設計; | ||
| 多媒體界面設計 | . 智能手機界面設計:蘋(píng)果 iOS 界面設計、谷歌 Android 界面設計、谷歌 Android 界面設計; | |
| . 智能電視、機頂盒界面設計:蘋(píng)果 Apple TV 界面設計、谷歌 Android 智能電視界面設計; | ||
| . 智能穿戴設備界面設計:蘋(píng)果 WatchOS 界面設計、谷歌 Android Wear 界面設計; | ||
| . PC 端軟件界面設計:應用軟件界面設計、游戲軟件界面設計; | ||
| . 綜合案例:了解各種多媒體界面設計規范、設計原理和設計方法; | ||
| 產(chǎn)品切圖與優(yōu)化(Cutter Man) | . 了解產(chǎn)品效果圖與上線(xiàn)頁(yè)面之間的關(guān)系; | |
| . 理解產(chǎn)品切圖的原則與規范; | ||
| . 掌握主流切圖軟件的使用和優(yōu)化; | ||
| . 綜合案例:制作出符合開(kāi)發(fā)人員要求的切圖素材; | ||
| Dreamweaver PC網(wǎng)頁(yè)制作 | Web前端網(wǎng)頁(yè)設計基礎標簽 | . 網(wǎng)頁(yè)設計基本流程和工作內容; |
| . WEB頁(yè)和移動(dòng)頁(yè)面的設計規范,網(wǎng)頁(yè)的風(fēng)格和色彩; | ||
| . 網(wǎng)頁(yè)的基本結構、元素構成(文本、多媒體元素)、標簽的組合; | ||
| . 案例:各類(lèi)風(fēng)格的商業(yè)網(wǎng)站賞析、新聞頁(yè)排版、廣告業(yè)排版; | ||
| 表格表單框架 | . 表單的設計及引用; | |
| . 表格及其修飾:寬、高、位置、顏色、背景,行列合并、結構修改、線(xiàn)合并等; | ||
| . 案例:各類(lèi)報名表的制作、簡(jiǎn)歷表的制作、房產(chǎn)活動(dòng)頁(yè)面制作、游戲頁(yè)面制作、登陸頁(yè)面、留言頁(yè)面制作; | ||
| DIV+CSS頁(yè)面布局 | . 常見(jiàn)的DIV布局案例,DIV的浮動(dòng)和定位; | |
| . CSS的選擇器及屬性詳解:文字、文本、背景、定位、布局、邊框、補丁和補白、浮動(dòng)等詳解; | ||
| . CSS:導航等各類(lèi)CSS; | ||
| . 案例:學(xué)校網(wǎng)頁(yè)、*網(wǎng)頁(yè)、商業(yè)網(wǎng)頁(yè)、電商網(wǎng)頁(yè)的DIV+CSS布局; | ||
| 移動(dòng)端響應式頁(yè)面制作 | HTML5+CSS3 | . HTML5移動(dòng)端頁(yè)面設計的基本流程、設計原理、設備支持; |
| . HTML5新增元素、文檔結構、音頻和視頻處理、存儲、離線(xiàn)Web應用講解; | ||
| . CSS3新增屬性詳解:文本、背景、邊框、動(dòng)畫(huà)等詳解; | ||
| . 案例:利用H5+CSS3的制作頁(yè)面; | ||
| Bootstrap前端框架 | . Bootstrap布局容器和柵格系統; | |
| . Bootstrap排版、表格、表單、按鈕、圖片等 | ||
| . 案例:Bootstrap布局設計制作Web頁(yè); | ||
| 架構移動(dòng)端網(wǎng)站 | . Swiper實(shí)現觸摸滑動(dòng)輪播; | |
| . 媒體查詢(xún)實(shí)現響應式頁(yè)面設計 | ||
| . 案例:制作移動(dòng)端響應式星巴克Web前端網(wǎng)站 | ||
| Design 東方博宜UI交互設計二期課程 | ||
| 模塊 | 課程 | 學(xué)習內容 |
| UI三維元素設計 | C4D基礎建模 | . 引導學(xué)生熟悉C4D軟件中各項功能的使用和基本模型的創(chuàng )建; |
| . 了解現階段主流立體UI的展現類(lèi)型; | ||
| . 掌握3D立體圖標、APP界面、網(wǎng)站界面中3D元素的設計制作方法; | ||
| . 綜合案例:完成3D立體圖標的制作; | ||
| C4D渲染 | . 理解材質(zhì)、燈光與攝像機在設計中的重要作用; | |
| . 各類(lèi)材質(zhì)的參數設置(如木紋、布料、塑料、金屬、玻璃等等)、材質(zhì)貼圖的編輯、3D產(chǎn)品的燈光構建、不同角度攝影機的架構等等; | ||
| . 調整終渲染參數、輸出高質(zhì)量效果圖; | ||
| . 綜合案例:給3D立體圖標添加材質(zhì)、燈光,進(jìn)行渲染輸出; | ||
| 3D圖片合成處理 | . 熟悉軟件的基本操作; | |
| . 利用圖層調整、遮罩蒙板、色彩調節、設計元素合成等進(jìn)行二次美化; | ||
| . 添加藝術(shù)字、廣告元素; | ||
| . 綜合案例:通過(guò)PS對3D立體圖標進(jìn)行二次美化; | ||
| UI交互動(dòng)畫(huà)設計 | Gif動(dòng)圖設計(Photoshop) | . 認識現階段移動(dòng)端、PC端各類(lèi)gif動(dòng)圖的用途、規范; |
| . 熟悉Photoshop時(shí)間軸面板; | ||
| . 了解視頻時(shí)間軸圖層的基本面板參數(位置、變換、樣式、不透明度、蒙版等); | ||
| . 視頻時(shí)間軸的使用、PS動(dòng)圖的制作流程、注意事項、終動(dòng)圖的輸出; | ||
| . 綜合案例:制作桌面動(dòng)態(tài)圖標效果; | ||
| After Effects | . After Effects界面與基礎; | |
| 動(dòng)效展示設計 | . 了解 AE 軟件功能特點(diǎn),理解設計趨勢與AE 動(dòng)效之間的關(guān)系; | |
| . 制作遮蔽效果、繪制矢量圖形、三維合成、 調色的技巧、摳像技巧、 綜合等; | ||
| . 綜合案例:完成餐飲類(lèi)APP的動(dòng)效展示; | ||
| 階段項目實(shí)訓 | 移動(dòng)WEB端項目開(kāi)發(fā) | . 整體風(fēng)格確定、手繪初步樣式草稿、PS+AI繪制頁(yè)面視覺(jué)傳達效果; |
| . 利用切圖軟件制作出符合開(kāi)發(fā)人員要求的切圖素材; | ||
| . 利用C4D完成項目中所有3D展示效果,包括3D圖標、3D圖片、3D動(dòng)圖等,使項目更符合現代消費者的審美,提高整體競爭力; | ||
| . 利用AE完成項目中所有動(dòng)態(tài)展示效果、提高團隊合作效率; | ||
| . 利用前期所學(xué)的知識點(diǎn)完成整體移動(dòng)WEB端項目開(kāi)發(fā); | ||
| UI動(dòng)態(tài)交互實(shí)現 | Javascript腳本 | . Javascript基本變量定義、常見(jiàn)JS數據類(lèi)型、JS基本運算與表達式; |
| . 基本對話(huà)框、分支、循環(huán)語(yǔ)句(for、while)講解,循環(huán)應用講解; | ||
| . Javascript的 Object、Function、String 和 正則表達式、常用內置對象、時(shí)間控制、常用的函數等; | ||
| . 常見(jiàn)的JS鼠標事件、鍵盤(pán)事件,利用JS修改網(wǎng)頁(yè)中的元素、利用JS修改CSS等效果、JS網(wǎng)頁(yè)端驗證、JS導航、網(wǎng)頁(yè),Ajax詳述; | ||
| . 案例:利用Javascript實(shí)現表單驗證及常見(jiàn)的頁(yè)面; | ||
| . 案例:、抽獎、打分、計算器、游戲人物跑步等小游戲的制作 | ||
| JQuery框架講解 | . JQuery鼠標事件、鍵盤(pán)事件、各類(lèi)效果與動(dòng)畫(huà)講解; | |
| . JQuery的遍歷、JQuery的Ajax; | ||
| . JQuery側邊折疊導航欄; | ||
| . JQuery實(shí)現頁(yè)面炫酷效果和動(dòng)畫(huà); | ||
| . JQuery響應式輪播圖切換; | ||
| . jquery實(shí)現360度全景展示; | ||
| . 案例:利用JQuery實(shí)現主流PC/移動(dòng)端各類(lèi)網(wǎng)頁(yè)的常見(jiàn); | ||
| Bootstrap框架詳解 | . Bootstrap的安裝及自適應; | |
| . Bootstrap網(wǎng)格系統、排版、表單、表格、按鈕、圖片等; | ||
| . Bootstrap組件和插件詳解; | ||
| . 案例:利用Bootstrap編輯自適應移動(dòng)端的頁(yè)面 | ||
| 階段項目實(shí)訓 | 移動(dòng)WEB端項目實(shí)施 | . 利用H5+CSS3標簽和前面設計好的平面素材制作整套手機端項目頁(yè)面; |
| . 通過(guò)各類(lèi)腳本實(shí)現包括菜單欄、展示通欄、狀態(tài)標簽欄、表單驗證、圖片展現等等交互效果; | ||
| . 利用前期所學(xué)的知識點(diǎn)完成整體移動(dòng)WEB端項目開(kāi)發(fā); | ||
全國統一學(xué)習專(zhuān)線(xiàn) 9:00-21:00
