本書以項(xiàng)目導(dǎo)向、任務(wù)驅(qū)動(dòng)的方式進(jìn)行內(nèi)容設(shè)計(jì)，基于UI設(shè)計(jì)崗位的工作流程分析典型工作情境、解構(gòu)關(guān)鍵工作任務(wù)，實(shí)操案例采用UI設(shè)計(jì)主流工具Figma。本書包括認(rèn)識(shí)UI設(shè)計(jì)、了解UI設(shè)計(jì)的基本知識(shí)、掌握UI設(shè)計(jì)的風(fēng)格定位、掌握UI設(shè)計(jì)中的關(guān)鍵元素、熟悉UI的組合設(shè)計(jì)、掌握UI設(shè)計(jì)的標(biāo)注和切圖、天氣類App實(shí)訓(xùn)、購物類App實(shí)訓(xùn)8個(gè)項(xiàng)目，帶領(lǐng)讀者全方位練習(xí)UI設(shè)計(jì)，強(qiáng)化崗位技能。
項(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ì)資源庫 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)頁、閃屏頁和引導(dǎo)頁 16
2.1.2 首頁 19
2.1.3 詳情頁 23
2.1.4 個(gè)人中心頁 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登錄頁設(shè)計(jì) 79
5.1.1 優(yōu)教App登錄頁的制作要求與分析 79
5.1.2 優(yōu)教App登錄頁設(shè)計(jì)實(shí)操 80
5.2 優(yōu)教App首頁設(shè)計(jì) 83
5.2.1 優(yōu)教App首頁的制作要求與分析 83
5.2.2 優(yōu)教App首頁設(shè)計(jì)實(shí)操 84
5.3 優(yōu)教App課程頁設(shè)計(jì) 94
5.3.1 優(yōu)教App課程頁的制作要求與分析 94
5.3.2 優(yōu)教App課程頁設(shè)計(jì)實(shí)操 95
5.4 優(yōu)教網(wǎng)頁端首頁設(shè)計(jì) 99
5.4.1 優(yōu)教網(wǎng)頁端首頁的制作要求與分析 99
5.4.2 優(yōu)教網(wǎng)頁端首頁設(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首頁的標(biāo)注要求與分析 109
6.2.2 優(yōu)教App首頁標(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登錄頁切圖 115
6.4.1 優(yōu)教App登錄頁的切圖要求與分析 115
6.4.2 優(yōu)教App登錄頁切圖實(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í)踐過程 124
7.4 閃屏頁設(shè)計(jì) 126
7.4.1 知天氣App閃屏頁分析 126
7.4.2 知天氣App閃屏頁參數(shù)設(shè)置 126
7.4.3 知天氣App閃屏頁實(shí)踐過程 127
7.5 引導(dǎo)頁設(shè)計(jì) 128
7.5.1 知天氣App引導(dǎo)頁分析 128
7.5.2 知天氣App引導(dǎo)頁參數(shù)設(shè)置 128
7.5.3 知天氣App引導(dǎo)頁實(shí)踐過程 129
7.6 首頁設(shè)計(jì) 132
7.6.1 知天氣App首頁分析 132
7.6.2 知天氣App首頁參數(shù)設(shè)置 132
7.6.3 知天氣App首頁實(shí)踐過程 132
7.7 預(yù)測(cè)頁設(shè)計(jì) 137
7.7.1 知天氣App預(yù)測(cè)頁分析 137
7.7.2 知天氣App預(yù)測(cè)頁參數(shù)設(shè)置 138
7.7.3 知天氣App預(yù)測(cè)頁實(shí)踐過程 138
7.8 日歷頁設(shè)計(jì) 141
7.8.1 知天氣App日歷頁分析 141
7.8.2 知天氣App日歷頁參數(shù)設(shè)置 141
7.8.3 知天氣App日歷頁實(shí)踐過程 142
7.9 學(xué)習(xí)反思 144
7.9.1 項(xiàng)目小結(jié) 144
7.9.2 知識(shí)鞏固 144
項(xiàng)目8 購物類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 藝購App啟動(dòng)圖標(biāo)分析 150
8.3.2 藝購App啟動(dòng)圖標(biāo)參數(shù)設(shè)置 150
8.3.3 藝購App啟動(dòng)圖標(biāo)實(shí)踐過程 151
8.4 閃屏頁設(shè)計(jì) 154
8.4.1 藝購App閃屏頁分析 154
8.4.2 藝購App閃屏頁參數(shù)設(shè)置 154
8.4.3 藝購App閃屏頁實(shí)踐過程 155
8.5 登錄頁設(shè)計(jì) 156
8.5.1 藝購App登錄頁分析 156
8.5.2 藝購App登錄頁參數(shù)設(shè)置 157
8.5.3 藝購App登錄頁實(shí)踐過程 157
8.6 首頁設(shè)計(jì) 159
8.6.1 藝購App首頁分析 159
8.6.2 藝購App首頁參數(shù)設(shè)置 159
8.6.3 藝購App首頁實(shí)踐過程 160
8.7 詳情頁設(shè)計(jì) 163
8.7.1 藝購App詳情頁分析 163
8.7.2 藝購App詳情頁參數(shù)設(shè)置 164
8.7.3 藝購App詳情頁實(shí)踐過程 164
8.8 個(gè)人中心頁設(shè)計(jì) 168
8.8.1 藝購App個(gè)人中心頁分析 168
8.8.2 藝購App個(gè)人中心頁參數(shù)設(shè)置 169
8.8.3 藝購App個(gè)人中心頁實(shí)踐過程 169
8.9 學(xué)習(xí)反思 172
8.9.1 項(xiàng)目小結(jié) 172
8.9.2 知識(shí)鞏固 172
書單推薦
