第一部分 UI基礎(chǔ)設(shè)計(jì)

項(xiàng)目1 UI基礎(chǔ)與規(guī)范
任務(wù)1 什么是UI設(shè)計(jì)
一、UI設(shè)計(jì)概述
二、UI設(shè)計(jì)的分類(lèi)
三、UI設(shè)計(jì)的發(fā)展趨勢(shì)
任務(wù)2 UI設(shè)計(jì)的常用工具和工作流程
一、UI設(shè)計(jì)的常用工具
二、UI設(shè)計(jì)的流程
任務(wù)3 UI設(shè)計(jì)的原則和規(guī)范
一、UI設(shè)計(jì)的原則
二、UI設(shè)計(jì)的規(guī)范
三、設(shè)計(jì)規(guī)范分析

項(xiàng)目2 UI設(shè)計(jì)常用控件
任務(wù)1 控制元素制作
一、各類(lèi)常用控制器
二、控制元素案例制作
任務(wù)2 篩選器制作
一、各類(lèi)常用篩選器
二、篩選器案例制作
任務(wù)3 表單控件制作
一、各類(lèi)常用表單控件
二、表單控件案例制作
任務(wù)4 按鈕制作
一、按鈕規(guī)范
二、國(guó)潮藝術(shù)
三、按鈕案例制作
任務(wù)5 其他控件制作
一、模態(tài)浮層
二、非模態(tài)浮層
三、其他控件之模態(tài)浮層案例制作

項(xiàng)目3 圖標(biāo)設(shè)計(jì)
任務(wù)1 圖標(biāo)設(shè)計(jì)的準(zhǔn)備
一、圖標(biāo)的含義
二、圖標(biāo)的分類(lèi)
三、圖標(biāo)的設(shè)計(jì)原則
四、圖標(biāo)的設(shè)計(jì)創(chuàng)意
五、圖標(biāo)的設(shè)計(jì)要點(diǎn)
六、圖標(biāo)的設(shè)計(jì)規(guī)范
任務(wù)2 線性化圖標(biāo)設(shè)計(jì)
一、線性化風(fēng)格圖標(biāo)的特征
二、線性化風(fēng)格圖標(biāo)的分類(lèi)
三、線性化風(fēng)格圖標(biāo)的繪畫(huà)準(zhǔn)備
四、 兩種常用線性化圖標(biāo)的繪畫(huà)技法
五、線性化圖標(biāo)案例制作
任務(wù)3 扁平化圖標(biāo)設(shè)計(jì)
一、什么是扁平化風(fēng)格
二、扁平化風(fēng)格的特征
三、扁平化風(fēng)格的四種類(lèi)型
四、扁平化圖標(biāo)案例制作
任務(wù)4 擬物化圖標(biāo)設(shè)計(jì)
一、擬物化風(fēng)格的特征
二、擬物化風(fēng)格與扁平化風(fēng)格的比較
三、擬物化風(fēng)格圖標(biāo)的設(shè)計(jì)分析
四、擬物化風(fēng)格圖標(biāo)的繪畫(huà)技法
五、擬物化圖標(biāo)案例制作




第二部分 UI創(chuàng)意設(shè)計(jì)

項(xiàng)目4 “寅虎”手機(jī)主題界面設(shè)計(jì)
任務(wù)1 “寅虎”手機(jī)主題界面設(shè)計(jì)的準(zhǔn)備
一、手機(jī)主題UI界面設(shè)計(jì)概要
二、“寅虎”主題界面設(shè)計(jì)思路
任務(wù)2 “寅虎”主題形象和壁紙制作
一、“寅虎”主題形象設(shè)計(jì)
二、手機(jī)壁紙?jiān)O(shè)計(jì)
三、“寅虎”主題形象制作
四、手機(jī)壁紙制作
任務(wù)3 時(shí)鐘天氣Widget制作
一、Widget的含義
二、時(shí)鐘天氣Widget的結(jié)構(gòu)組成
三、時(shí)鐘天氣Widget制作
任務(wù)4 “計(jì)算器”圖標(biāo)設(shè)計(jì)與制作
一、通用背板設(shè)計(jì)
二、圖標(biāo)內(nèi)容設(shè)計(jì)
三、“計(jì)算器”圖標(biāo)制作
任務(wù)5 安卓系統(tǒng)界面布局
一、界面組成
二、操作要點(diǎn)
三、安卓系統(tǒng)界面布局操作
任務(wù)6 鴻蒙系統(tǒng)界面布局
一、界面特點(diǎn)
二、操作要點(diǎn)
三、鴻蒙系統(tǒng)界面布局操作

項(xiàng)目5 實(shí)用型APP --“四時(shí)”天氣界面設(shè)計(jì)
任務(wù)1 “四時(shí)”天氣APP產(chǎn)品定位和界面設(shè)計(jì)
一、認(rèn)識(shí)實(shí)用型APP
二、幾款天氣APP比較
三、“四時(shí)”天氣APP的產(chǎn)品定位
四、“四時(shí)”天氣APP的界面規(guī)范
任務(wù)2 “四時(shí)”天氣APP圖標(biāo)設(shè)計(jì)
一、“四時(shí)”天氣APP的小圖標(biāo)種類(lèi)
二、“四時(shí)”天氣APP圖標(biāo)案例制作
任務(wù)3 “四時(shí)”天氣APP閃屏設(shè)計(jì)
一、閃屏的作用
二、閃屏的常見(jiàn)類(lèi)型
三、 閃屏的設(shè)計(jì)手法
四、“四時(shí)”天氣APP閃屏頁(yè)面的實(shí)現(xiàn)
五、“四時(shí)”天氣APP閃屏案例制作
任務(wù)4 “四時(shí)”天氣APP主頁(yè)面設(shè)計(jì)
一、主頁(yè)面的功能
二、 “四時(shí)” 天氣APP主頁(yè)面的組成
三、“四時(shí)”天氣APP主頁(yè)面案例制作
任務(wù)5 “四時(shí)”天氣APP近5日天氣頁(yè)面設(shè)計(jì)
一、“四時(shí)”天氣APP近5日天氣頁(yè)面的組成元素
二、“四時(shí)”天氣APP近5日天氣頁(yè)面制作

項(xiàng)目6 新聞?lì)怉PP --“悅”新聞界面設(shè)計(jì)
任務(wù)1 “悅”新聞APP產(chǎn)品定位和界面設(shè)計(jì)
一、認(rèn)識(shí)新聞?lì)怉PP
二、“悅”新聞APP的產(chǎn)品定位
三、 “悅”新聞APP的界面設(shè)計(jì)
任務(wù)2 “悅”新聞APP首頁(yè)設(shè)計(jì)
一、新聞?lì)怉PP首頁(yè)排版
二、“悅”新聞APP首頁(yè)案例制作
任務(wù)3 “悅”新聞APP詳情頁(yè)設(shè)計(jì)
一、“悅”新聞APP詳情頁(yè)的布局
二、“悅”新聞APP詳情頁(yè)案例制作
任?4 “悅”新聞APP登錄頁(yè)面設(shè)計(jì)
?、 注冊(cè)登錄方式
二、 登錄頁(yè)面設(shè)計(jì)要點(diǎn)
三、登錄頁(yè)面常用風(fēng)格
四、“悅”新聞APP登錄頁(yè)面布局
五、“悅”新聞APP登錄頁(yè)面案例制作
任務(wù)5 “悅”新聞APP我的頁(yè)面設(shè)計(jì)
一、什么是我的頁(yè)面
二、我的頁(yè)面設(shè)計(jì)原則
三、我的頁(yè)面設(shè)計(jì)風(fēng)格
四、“悅”新聞APP我的頁(yè)面布局
五、“悅”新聞APP我的頁(yè)面案例制作

項(xiàng)目7 社交類(lèi)APP --“輕說(shuō)”界面設(shè)計(jì)
任務(wù)1 “輕說(shuō)”APP產(chǎn)品定位和界面設(shè)計(jì)
一、社交類(lèi)APP的功能
二、社交類(lèi)APP的種類(lèi)
三、社交類(lèi)APP的設(shè)計(jì)風(fēng)格
四、社交類(lèi)APP賞析--以“微信”“QQ”和“抖音”為例
五、“輕說(shuō)”APP的產(chǎn)品定位
六、“輕說(shuō)”APP的界面規(guī)范
任務(wù)2 “輕說(shuō)”APP圖標(biāo)與啟動(dòng)頁(yè)界面設(shè)計(jì)
一、社交類(lèi)APP啟動(dòng)頁(yè)界面的類(lèi)型
二、 “輕說(shuō)”APP圖標(biāo)與啟動(dòng)頁(yè)界面設(shè)計(jì)
三、“輕說(shuō)”APP圖標(biāo)與啟動(dòng)頁(yè)界面案例制作
任務(wù)3 “輕說(shuō)”APP個(gè)人中心界面設(shè)計(jì)
一、社交類(lèi)APP個(gè)人中心界面的功能
二、“輕說(shuō)” APP個(gè)人中心界面的組成
三、“輕說(shuō)”APP個(gè)人中心界面案例制作
任務(wù)4 “輕說(shuō)”APP圈聊界面設(shè)計(jì)
一、社交類(lèi)APP聊天界面的組成元素
二、“輕說(shuō)”APP圈聊界面案例制作
任務(wù)5 “輕說(shuō)”APP通訊錄界面設(shè)計(jì)
一、社交類(lèi)APP通訊錄界面的組成元素
二、“輕說(shuō)”APP通訊錄界面案例制作
任務(wù)6 “輕說(shuō)”APP圈子界面設(shè)計(jì)
一、社交類(lèi)APP朋友圈界面的功能
二、“輕說(shuō)”APP圈子界面案例制作
參考文獻(xiàn)