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

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

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

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




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

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

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

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

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