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

項(xiàng)目1 UI基礎(chǔ)與規(guī)范
任務(wù)1 什么是UI設(shè)計(jì)
一、UI設(shè)計(jì)概述
二、UI設(shè)計(jì)的分類
三、UI設(shè)計(jì)的發(fā)展趨勢
任務(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 控制元素制作
一、各類常用控制器
二、控制元素案例制作
任務(wù)2 篩選器制作
一、各類常用篩選器
二、篩選器案例制作
任務(wù)3 表單控件制作
一、各類常用表單控件
二、表單控件案例制作
任務(wù)4 按鈕制作
一、按鈕規(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)的分類
三、圖標(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)的分類
三、線性化風(fēng)格圖標(biāo)的繪畫準(zhǔn)備
四、 兩種常用線性化圖標(biāo)的繪畫技法
五、線性化圖標(biāo)案例制作
任務(wù)3 扁平化圖標(biāo)設(shè)計(jì)
一、什么是扁平化風(fēng)格
二、扁平化風(fēng)格的特征
三、扁平化風(fēng)格的四種類型
四、扁平化圖標(biāo)案例制作
任務(wù)4 擬物化圖標(biāo)設(shè)計(jì)
一、擬物化風(fēng)格的特征
二、擬物化風(fēng)格與扁平化風(fēng)格的比較
三、擬物化風(fēng)格圖標(biāo)的設(shè)計(jì)分析
四、擬物化風(fēng)格圖標(biāo)的繪畫技法
五、擬物化圖標(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í)用型APP
二、幾款天氣APP比較
三、“四時(shí)”天氣APP的產(chǎn)品定位
四、“四時(shí)”天氣APP的界面規(guī)范
任務(wù)2 “四時(shí)”天氣APP圖標(biāo)設(shè)計(jì)
一、“四時(shí)”天氣APP的小圖標(biāo)種類
二、“四時(shí)”天氣APP圖標(biāo)案例制作
任務(wù)3 “四時(shí)”天氣APP閃屏設(shè)計(jì)
一、閃屏的作用
二、閃屏的常見類型
三、 閃屏的設(shè)計(jì)手法
四、“四時(shí)”天氣APP閃屏頁面的實(shí)現(xiàn)
五、“四時(shí)”天氣APP閃屏案例制作
任務(wù)4 “四時(shí)”天氣APP主頁面設(shè)計(jì)
一、主頁面的功能
二、 “四時(shí)” 天氣APP主頁面的組成
三、“四時(shí)”天氣APP主頁面案例制作
任務(wù)5 “四時(shí)”天氣APP近5日天氣頁面設(shè)計(jì)
一、“四時(shí)”天氣APP近5日天氣頁面的組成元素
二、“四時(shí)”天氣APP近5日天氣頁面制作

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

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