UI設(shè)計學(xué)什么?
UI設(shè)計(或稱界面設(shè)計)是指對軟件的人機交互、操作邏輯、界面美觀的整體設(shè)計。UI設(shè)計分為實體UI和虛擬UI,互聯(lián)網(wǎng)常用的UI設(shè)計是虛擬UI,UI即User Interface(用戶界面)的簡稱。
好的UI設(shè)計不僅是讓軟件變得有個性有品位,還要讓軟件的操作變得舒適簡單、自由,充分體現(xiàn)軟件的定位和特點
模塊 | 課程 | 學(xué)習(xí)內(nèi)容 |
美術(shù)訓(xùn)練營 | 藝術(shù)素養(yǎng) | . 素描速寫訓(xùn)練; . 三大構(gòu)成原理; . 透視、構(gòu)圖、造型訓(xùn)練; . 應(yīng)用美術(shù)發(fā)展趨勢; . 綜合案例:擁有基礎(chǔ)藝術(shù)素養(yǎng),為之后的設(shè)計學(xué)習(xí)打下基礎(chǔ); |
色彩設(shè)計 | . 色彩屬性、對比與調(diào)和、色彩的混色配置; . 設(shè)計色彩的表述體系; . 色彩的裝飾美感及色彩的表現(xiàn)方法; . 綜合案例:掌握色彩心理和色彩搭配; | |
手繪基礎(chǔ) | . 學(xué)習(xí)形式美通用法則的量化標(biāo)準,能夠快速獲得程式審美能力; . 掌握視覺分割的發(fā)生原理,進行經(jīng)典案例分析,了解黃金比例等在設(shè)計中的應(yīng)用; . 手繪基礎(chǔ):掌握手繪技巧,利用手繪完成UI的基本構(gòu)圖; . 當(dāng)下流行風(fēng)格:擬物化、扁平化、寫實等繪制技巧; . 綜合案例:利用手繪+構(gòu)圖,繪制各類UI圖標(biāo); | |
字體設(shè)計 | . 了解與認識字體,學(xué)習(xí)字體風(fēng)格; . 字體設(shè)計技法、字體變形、字體效果處理; . 綜合案例:掌握字體的設(shè)計和選擇; | |
軟件基礎(chǔ) | Photoshop平面設(shè)計 | . 學(xué)習(xí)Photoshop軟件界面構(gòu)成與計算機圖像設(shè)計的基本知識; . 掌握各種圖像處理工具的使用和位圖圖像的處理技巧; . 綜合案例: |
Illustrator應(yīng)用技能 | . 學(xué)習(xí)AI的基本功能及應(yīng)用范圍; . 掌握AI常規(guī)操作、 創(chuàng)建基本圖形、 創(chuàng)建并編輯路徑、 創(chuàng)建符號和圖表、 創(chuàng)建和編輯文本、 圖層與剪切蒙版、 效果與濾鏡等; . 矢量圖形繪制的技巧和矢量圖形的注意事項; . 綜合案例:掌握AI在標(biāo)志 、字體、各類UI圖標(biāo)設(shè)計中的制作手法和應(yīng)用手段等等; | |
InDesign應(yīng)用技能 | . 通過報刊雜志設(shè)計,掌握排版中的頁碼設(shè)計、頁面模板設(shè)計、文本和樣式、圖形圖像、表格工具、自適應(yīng)目錄等; . 掌握印前與輸出的相關(guān)應(yīng)用,書籍與長文檔的制作; . 掌握深入挖掘工具背后隱藏的技巧,應(yīng)用軟件教學(xué)規(guī)范化設(shè)計; . 綜合案例:雜志、報紙、書籍; | |
CorelDRAW應(yīng)用技能 | . 了解CorelDRAW軟件的特性并掌握CorelDRAW的基本操作; . 矢量圖形繪制的技巧; . 掌握CorelDRAW和打印排版中的相關(guān)知識點; . 綜合案例:利用CDR完成VI(企業(yè)視覺傳達系統(tǒng))、畫冊排版、海報等的制作; | |
綜合項目實戰(zhàn) | . 通過教員的指導(dǎo)與學(xué)員的練習(xí),每位學(xué)員在規(guī)定的時間內(nèi)完成一套完整移動設(shè)備或穿戴設(shè)備上的界面設(shè)計,公益、商業(yè)海報各一份并制作成品。 . 綜合案例:移動設(shè)備界面設(shè)計、海報設(shè)計制作, | |
UI設(shè)計規(guī)范 | 產(chǎn)品設(shè)計流程及規(guī)范 | . 了解產(chǎn)品設(shè)計的流程及規(guī)范; . 理解產(chǎn)品設(shè)計流程中各環(huán)節(jié)分工及終效果之間的關(guān)系; . 掌握多系統(tǒng)產(chǎn)品設(shè)計的方法; |
用戶中心設(shè)計 | . 理解何為商業(yè)化設(shè)計、實現(xiàn)企業(yè)與個人的雙贏; . 用戶需求分析及用戶需求挖掘; . 利用大數(shù)據(jù)對用戶體驗進行分析總結(jié); . 了解現(xiàn)階段的人工智能設(shè)計; | |
UI設(shè)計 | 圖標(biāo)設(shè)計 | . 學(xué)習(xí)圖標(biāo)的分類,圖標(biāo)的設(shè)計與制作規(guī)范; . 理解不同類型圖標(biāo)的設(shè)計特征; . 設(shè)計制作多系統(tǒng)圖標(biāo)(剪影、扁平化、2.5D、超寫實、3D等); . 綜合案例:設(shè)計PC、移動的各類小圖標(biāo); |
移動APP | . 基礎(chǔ)知識:APP開發(fā)與設(shè)計流程,屏幕尺寸與分辨率介紹及常用的單位介紹; . 平臺規(guī)范:iOS、Android、IPad、Windows Phone7系統(tǒng)特點與標(biāo)準,文字標(biāo)準,框架標(biāo)準; . 界面設(shè)計:移動產(chǎn)口頁面分析,頁面風(fēng)格分析,APP頁面制作,適配、標(biāo)注與切圖規(guī)范; . 綜合案例:安卓、IOS圖標(biāo)制作、界面制作; | |
WebUI | . Banner設(shè)計:banner的種類與風(fēng)格,banner的設(shè)計方法,banner的構(gòu)成思路; . 網(wǎng)頁設(shè)計流程及規(guī)范:網(wǎng)頁的設(shè)計流程,網(wǎng)頁構(gòu)成元素與規(guī)范,網(wǎng)頁的布局模式; . 頁面分析:網(wǎng)站的類型與風(fēng)格,主流行業(yè)網(wǎng)站分析,不同網(wǎng)站的布局與排版方式; . 專題頁設(shè)計:專題頁頭圖設(shè)計,專題頁板塊設(shè)計,各類型專題頁分析與制作,專題頁設(shè)計思路,專題頁實戰(zhàn)練習(xí); . 綜合案例:商業(yè)網(wǎng)頁整站設(shè)計; | |
多媒體界面設(shè)計 | . 智能手機界面設(shè)計:蘋果 iOS 界面設(shè)計、谷歌 Android 界面設(shè)計、谷歌 Android 界面設(shè)計; . 智能電視、機頂盒界面設(shè)計:蘋果 Apple TV 界面設(shè)計、谷歌 Android 智能電視界面設(shè)計; . 智能穿戴設(shè)備界面設(shè)計:蘋果 WatchOS 界面設(shè)計、谷歌 Android Wear 界面設(shè)計; . PC 端軟件界面設(shè)計:應(yīng)用軟件界面設(shè)計、游戲軟件界面設(shè)計; . 綜合案例:了解各種多媒體界面設(shè)計規(guī)范、設(shè)計原理和設(shè)計方法; | |
產(chǎn)品切圖與優(yōu)化(Cutter Man) | . 了解產(chǎn)品效果圖與上線頁面之間的關(guān)系; . 理解產(chǎn)品切圖的原則與規(guī)范; . 掌握主流切圖軟件的使用和優(yōu)化; . 綜合案例:制作出符合開發(fā)人員要求的切圖素材; | |
Dreamweaver PC網(wǎng)頁制作 | Web前端網(wǎng)頁設(shè)計基礎(chǔ)標(biāo)簽 | . 網(wǎng)頁設(shè)計基本流程和工作內(nèi)容; . WEB頁和移動頁面的設(shè)計規(guī)范,網(wǎng)頁的風(fēng)格和色彩; . 網(wǎng)頁的基本結(jié)構(gòu)、元素構(gòu)成(文本、多媒體元素)、標(biāo)簽的組合; . 案例:各類風(fēng)格的商業(yè)網(wǎng)站賞析、新聞頁排版、廣告業(yè)排版; |
表格表單框架 | . 表單的設(shè)計及引用; . 表格及其修飾:寬、高、位置、顏色、背景,行列合并、結(jié)構(gòu)修改、線合并等; . 案例:各類報名表的制作、簡歷表的制作、房產(chǎn)活動頁面制作、游戲頁面制作、登陸頁面、留言頁面制作; | |
DIV+CSS頁面布局 | . 常見的DIV布局案例,DIV的浮動和定位; . CSS的選擇器及屬性詳解:文字、文本、背景、定位、布局、邊框、補丁和補白、浮動等詳解; . CSS:導(dǎo)航等各類CSS; . 案例:學(xué)校網(wǎng)頁、*網(wǎng)頁、商業(yè)網(wǎng)頁、電商網(wǎng)頁的DIV+CSS布局; | |
移動端響應(yīng)式頁面制作 | HTML5+CSS3 | . HTML5移動端頁面設(shè)計的基本流程、設(shè)計原理、設(shè)備支持; . HTML5新增元素、文檔結(jié)構(gòu)、音頻和視頻處理、存儲、離線Web應(yīng)用講解; . CSS3新增屬性詳解:文本、背景、邊框、動畫等詳解; . 案例:利用H5+CSS3的制作頁面; |
Bootstrap前端框架 | . Bootstrap布局容器和柵格系統(tǒng); . Bootstrap排版、表格、表單、按鈕、圖片等 . 案例:Bootstrap布局設(shè)計制作Web頁; | |
架構(gòu)移動端網(wǎng)站 | . Swiper實現(xiàn)觸摸滑動輪播; . 媒體查詢實現(xiàn)響應(yīng)式頁面設(shè)計 . 案例:制作移動端響應(yīng)式星巴克Web前端網(wǎng)站 |
