項(xiàng)目1 認(rèn)識(shí)UI設(shè)計(jì) 1
1.1 UI設(shè)計(jì)的概念及分類 1
1.1.1 UI設(shè)計(jì)的概念 1
1.1.2 UI設(shè)計(jì)的分類 2
1.2 UI設(shè)計(jì)的行業(yè)現(xiàn)狀 4
1.2.1 UI設(shè)計(jì)的行業(yè)近況 4
1.2.2 UI設(shè)計(jì)的發(fā)展趨勢(shì) 6
1.3 UI設(shè)計(jì)的工作流程 6
1.3.1 目標(biāo)確定 7
1.3.2 競(jìng)品分析 7
1.3.3 草圖設(shè)計(jì) 8
1.3.4 界面設(shè)計(jì) 9
1.3.5 用戶測(cè)試 9
1.3.6 審查批準(zhǔn) 9
1.4 UI設(shè)計(jì)的基本原則 10
1.4.1 統(tǒng)一性原則 10
1.4.2 簡(jiǎn)潔美觀原則 11
1.4.3 布局合理原則 11
1.5 UI設(shè)計(jì)的常用工具 12
1.5.1 UI設(shè)計(jì)工具 12
1.5.2 圖形編輯工具 14
1.5.3 設(shè)計(jì)資源庫(kù) 15
1.6 學(xué)習(xí)反思 15
1.6.1 項(xiàng)目小結(jié) 15
1.6.2 知識(shí)鞏固 15
項(xiàng)目2 了解UI設(shè)計(jì)的基本知識(shí) 16
2.1 基本分類 16
2.1.1 啟動(dòng)頁(yè)、閃屏頁(yè)和引導(dǎo)頁(yè) 16
2.1.2 首頁(yè) 19
2.1.3 詳情頁(yè) 23
2.1.4 個(gè)人中心頁(yè) 24
2.2 基本框架 25
2.2.1 狀態(tài)欄 26
2.2.2 導(dǎo)航欄 26
2.2.3 內(nèi)容區(qū)域 28
2.2.4 標(biāo)簽欄 31
2.3 界面布局 33
2.3.1 宮格式布局 33
2.3.2 卡片式布局 34
2.3.3 列表式布局 34
2.3.4 側(cè)拉式布局 35
2.3.5 混合式布局 35
2.4 平臺(tái)規(guī)范 36
2.4.1 HarmonyOS 36
2.4.2 iOS 39
2.4.3 Android 43
2.5 學(xué)習(xí)反思 44
2.5.1 項(xiàng)目小結(jié) 44
2.5.2 知識(shí)鞏固 44
項(xiàng)目3 掌握UI設(shè)計(jì)的風(fēng)格定位 45
3.1 需求分析和梳理 45
3.1.1 梳理產(chǎn)品屬性 46
3.1.2 了解目標(biāo)用戶 46
3.1.3 競(jìng)品分析 48
3.2 產(chǎn)品風(fēng)格創(chuàng)作 49
3.3 制定設(shè)計(jì)規(guī)范 49
3.3.1 色彩規(guī)范 49
3.3.2 文字規(guī)范 50
3.3.3 圖標(biāo)規(guī)范 51
3.4 制作獨(dú)立界面 51
3.5 學(xué)習(xí)反思 52
3.5.1 項(xiàng)目小結(jié) 52
3.5.2 知識(shí)鞏固 52
項(xiàng)目4 掌握UI設(shè)計(jì)中的關(guān)鍵元素 53
4.1 圖標(biāo)的概述 54
4.1.1 圖標(biāo)的概念 54
4.1.2 圖標(biāo)的分類 54
4.1.3 圖標(biāo)的柵格與尺寸 58
4.2 扁平化風(fēng)格圖標(biāo)設(shè)計(jì) 59
4.2.1 【消息】圖標(biāo)的制作要求與分析 59
4.2.2 【消息】圖標(biāo)設(shè)計(jì)實(shí)操 60
4.3 毛玻璃風(fēng)格圖標(biāo)設(shè)計(jì) 64
4.3.1 【聊天】圖標(biāo)的制作要求與分析 64
4.3.2 【聊天】圖標(biāo)設(shè)計(jì)實(shí)操 64
4.4 組件 67
4.4.1 組件的概念 67
4.4.2 組件的分類 68
4.5 標(biāo)題欄組件設(shè)計(jì) 70
4.5.1 標(biāo)題欄組件的制作要求與分析 70
4.5.2 標(biāo)題欄組件設(shè)計(jì)實(shí)操 71
4.6 輕擬態(tài)開關(guān)組件設(shè)計(jì) 73
4.6.1 輕擬態(tài)開關(guān)組件的制作要求與分析 73
4.6.2 輕擬態(tài)開關(guān)組件設(shè)計(jì)實(shí)操 74
4.7 學(xué)習(xí)反思 76
4.7.1 項(xiàng)目小結(jié) 76
4.7.2 知識(shí)鞏固 77
項(xiàng)目5 熟悉UI的組合設(shè)計(jì) 78
5.1 優(yōu)教App登錄頁(yè)設(shè)計(jì) 79
5.1.1 優(yōu)教App登錄頁(yè)的制作要求與分析 79
5.1.2 優(yōu)教App登錄頁(yè)設(shè)計(jì)實(shí)操 80
5.2 優(yōu)教App首頁(yè)設(shè)計(jì) 83
5.2.1 優(yōu)教App首頁(yè)的制作要求與分析 83
5.2.2 優(yōu)教App首頁(yè)設(shè)計(jì)實(shí)操 84
5.3 優(yōu)教App課程頁(yè)設(shè)計(jì) 94
5.3.1 優(yōu)教App課程頁(yè)的制作要求與分析 94
5.3.2 優(yōu)教App課程頁(yè)設(shè)計(jì)實(shí)操 95
5.4 優(yōu)教網(wǎng)頁(yè)端首頁(yè)設(shè)計(jì) 99
5.4.1 優(yōu)教網(wǎng)頁(yè)端首頁(yè)的制作要求與分析 99
5.4.2 優(yōu)教網(wǎng)頁(yè)端首頁(yè)設(shè)計(jì)實(shí)操 100
5.5 學(xué)習(xí)反思 105
5.5.1 項(xiàng)目小結(jié) 105
5.5.2 知識(shí)鞏固 105
項(xiàng)目6 掌握UI設(shè)計(jì)的標(biāo)注和切圖 106
6.1 標(biāo)注的概述 106
6.1.1 標(biāo)注的概念和作用 106
6.1.2 標(biāo)注的內(nèi)容及規(guī)范 107
6.2 界面標(biāo)注 109
6.2.1 優(yōu)教App首頁(yè)的標(biāo)注要求與分析 109
6.2.2 優(yōu)教App首頁(yè)標(biāo)注實(shí)操 110
6.3 切圖的概述 111
6.3.1 切圖的概念和作用 111
6.3.2 切圖的規(guī)范 112
6.3.3 切圖的工具 114
6.4 優(yōu)教App登錄頁(yè)切圖 115
6.4.1 優(yōu)教App登錄頁(yè)的切圖要求與分析 115
6.4.2 優(yōu)教App登錄頁(yè)切圖實(shí)操 115
6.5 學(xué)習(xí)反思 117
6.5.1 項(xiàng)目小結(jié) 117
6.5.2 知識(shí)鞏固 117
項(xiàng)目7 天氣類App實(shí)訓(xùn) 119
7.1 產(chǎn)品分析與風(fēng)格定位 120
7.1.1 產(chǎn)品分析 120
7.1.2 風(fēng)格定位 121
7.2 草圖及原型圖設(shè)計(jì) 122
7.2.1 草圖繪制 122
7.2.2 原型圖設(shè)計(jì) 123
7.3 啟動(dòng)圖標(biāo)設(shè)計(jì) 123
7.3.1 知天氣App啟動(dòng)圖標(biāo)分析 123
7.3.2 知天氣App啟動(dòng)圖標(biāo)參數(shù)設(shè)置 124
7.3.3 知天氣App啟動(dòng)圖標(biāo)實(shí)踐過(guò)程 124
7.4 閃屏頁(yè)設(shè)計(jì) 126
7.4.1 知天氣App閃屏頁(yè)分析 126
7.4.2 知天氣App閃屏頁(yè)參數(shù)設(shè)置 126
7.4.3 知天氣App閃屏頁(yè)實(shí)踐過(guò)程 127
7.5 引導(dǎo)頁(yè)設(shè)計(jì) 128
7.5.1 知天氣App引導(dǎo)頁(yè)分析 128
7.5.2 知天氣App引導(dǎo)頁(yè)參數(shù)設(shè)置 128
7.5.3 知天氣App引導(dǎo)頁(yè)實(shí)踐過(guò)程 129
7.6 首頁(yè)設(shè)計(jì) 132
7.6.1 知天氣App首頁(yè)分析 132
7.6.2 知天氣App首頁(yè)參數(shù)設(shè)置 132
7.6.3 知天氣App首頁(yè)實(shí)踐過(guò)程 132
7.7 預(yù)測(cè)頁(yè)設(shè)計(jì) 137
7.7.1 知天氣App預(yù)測(cè)頁(yè)分析 137
7.7.2 知天氣App預(yù)測(cè)頁(yè)參數(shù)設(shè)置 138
7.7.3 知天氣App預(yù)測(cè)頁(yè)實(shí)踐過(guò)程 138
7.8 日歷頁(yè)設(shè)計(jì) 141
7.8.1 知天氣App日歷頁(yè)分析 141
7.8.2 知天氣App日歷頁(yè)參數(shù)設(shè)置 141
7.8.3 知天氣App日歷頁(yè)實(shí)踐過(guò)程 142
7.9 學(xué)習(xí)反思 144
7.9.1 項(xiàng)目小結(jié) 144
7.9.2 知識(shí)鞏固 144
項(xiàng)目8 購(gòu)物類App實(shí)訓(xùn) 145
8.1 產(chǎn)品分析與風(fēng)格定位 146
8.1.1 產(chǎn)品分析 146
8.1.2 風(fēng)格定位 147
8.2 草圖及原型圖設(shè)計(jì) 148
8.2.1 草圖繪制 148
8.2.2 原型圖設(shè)計(jì) 149
8.3 啟動(dòng)圖標(biāo)設(shè)計(jì) 150
8.3.1 藝購(gòu)App啟動(dòng)圖標(biāo)分析 150
8.3.2 藝購(gòu)App啟動(dòng)圖標(biāo)參數(shù)設(shè)置 150
8.3.3 藝購(gòu)App啟動(dòng)圖標(biāo)實(shí)踐過(guò)程 151
8.4 閃屏頁(yè)設(shè)計(jì) 154
8.4.1 藝購(gòu)App閃屏頁(yè)分析 154
8.4.2 藝購(gòu)App閃屏頁(yè)參數(shù)設(shè)置 154
8.4.3 藝購(gòu)App閃屏頁(yè)實(shí)踐過(guò)程 155
8.5 登錄頁(yè)設(shè)計(jì) 156
8.5.1 藝購(gòu)App登錄頁(yè)分析 156
8.5.2 藝購(gòu)App登錄頁(yè)參數(shù)設(shè)置 157
8.5.3 藝購(gòu)App登錄頁(yè)實(shí)踐過(guò)程 157
8.6 首頁(yè)設(shè)計(jì) 159
8.6.1 藝購(gòu)App首頁(yè)分析 159
8.6.2 藝購(gòu)App首頁(yè)參數(shù)設(shè)置 159
8.6.3 藝購(gòu)App首頁(yè)實(shí)踐過(guò)程 160
8.7 詳情頁(yè)設(shè)計(jì) 163
8.7.1 藝購(gòu)App詳情頁(yè)分析 163
8.7.2 藝購(gòu)App詳情頁(yè)參數(shù)設(shè)置 164
8.7.3 藝購(gòu)App詳情頁(yè)實(shí)踐過(guò)程 164
8.8 個(gè)人中心頁(yè)設(shè)計(jì) 168
8.8.1 藝購(gòu)App個(gè)人中心頁(yè)分析 168
8.8.2 藝購(gòu)App個(gè)人中心頁(yè)參數(shù)設(shè)置 169
8.8.3 藝購(gòu)App個(gè)人中心頁(yè)實(shí)踐過(guò)程 169
8.9 學(xué)習(xí)反思 172
8.9.1 項(xiàng)目小結(jié) 172
8.9.2 知識(shí)鞏固 172