本書以項目導(dǎo)向、任務(wù)驅(qū)動的方式進(jìn)行內(nèi)容設(shè)計，基于UI設(shè)計崗位的工作流程分析典型工作情境、解構(gòu)關(guān)鍵工作任務(wù)，實操案例采用UI設(shè)計主流工具Figma。本書包括認(rèn)識UI設(shè)計、了解UI設(shè)計的基本知識、掌握UI設(shè)計的風(fēng)格定位、掌握UI設(shè)計中的關(guān)鍵元素、熟悉UI的組合設(shè)計、掌握UI設(shè)計的標(biāo)注和切圖、天氣類App實訓(xùn)、購物類App實訓(xùn)8個項目，帶領(lǐng)讀者全方位練習(xí)UI設(shè)計，強(qiáng)化崗位技能。
項目1 認(rèn)識UI設(shè)計 1
1.1 UI設(shè)計的概念及分類 1
1.1.1 UI設(shè)計的概念 1
1.1.2 UI設(shè)計的分類 2
1.2 UI設(shè)計的行業(yè)現(xiàn)狀 4
1.2.1 UI設(shè)計的行業(yè)近況 4
1.2.2 UI設(shè)計的發(fā)展趨勢 6
1.3 UI設(shè)計的工作流程 6
1.3.1 目標(biāo)確定 7
1.3.2 競品分析 7
1.3.3 草圖設(shè)計 8
1.3.4 界面設(shè)計 9
1.3.5 用戶測試 9
1.3.6 審查批準(zhǔn) 9
1.4 UI設(shè)計的基本原則 10
1.4.1 統(tǒng)一性原則 10
1.4.2 簡潔美觀原則 11
1.4.3 布局合理原則 11
1.5 UI設(shè)計的常用工具 12
1.5.1 UI設(shè)計工具 12
1.5.2 圖形編輯工具 14
1.5.3 設(shè)計資源庫 15
1.6 學(xué)習(xí)反思 15
1.6.1 項目小結(jié) 15
1.6.2 知識鞏固 15
項目2 了解UI設(shè)計的基本知識 16
2.1 基本分類 16
2.1.1 啟動頁、閃屏頁和引導(dǎo)頁 16
2.1.2 首頁 19
2.1.3 詳情頁 23
2.1.4 個人中心頁 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 平臺規(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 項目小結(jié) 44
2.5.2 知識鞏固 44
項目3 掌握UI設(shè)計的風(fēng)格定位 45
3.1 需求分析和梳理 45
3.1.1 梳理產(chǎn)品屬性 46
3.1.2 了解目標(biāo)用戶 46
3.1.3 競品分析 48
3.2 產(chǎn)品風(fēng)格創(chuàng)作 49
3.3 制定設(shè)計規(guī)范 49
3.3.1 色彩規(guī)范 49
3.3.2 文字規(guī)范 50
3.3.3 圖標(biāo)規(guī)范 51
3.4 制作獨立界面 51
3.5 學(xué)習(xí)反思 52
3.5.1 項目小結(jié) 52
3.5.2 知識鞏固 52
項目4 掌握UI設(shè)計中的關(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è)計 59
4.2.1 【消息】圖標(biāo)的制作要求與分析 59
4.2.2 【消息】圖標(biāo)設(shè)計實操 60
4.3 毛玻璃風(fēng)格圖標(biāo)設(shè)計 64
4.3.1 【聊天】圖標(biāo)的制作要求與分析 64
4.3.2 【聊天】圖標(biāo)設(shè)計實操 64
4.4 組件 67
4.4.1 組件的概念 67
4.4.2 組件的分類 68
4.5 標(biāo)題欄組件設(shè)計 70
4.5.1 標(biāo)題欄組件的制作要求與分析 70
4.5.2 標(biāo)題欄組件設(shè)計實操 71
4.6 輕擬態(tài)開關(guān)組件設(shè)計 73
4.6.1 輕擬態(tài)開關(guān)組件的制作要求與分析 73
4.6.2 輕擬態(tài)開關(guān)組件設(shè)計實操 74
4.7 學(xué)習(xí)反思 76
4.7.1 項目小結(jié) 76
4.7.2 知識鞏固 77
項目5 熟悉UI的組合設(shè)計 78
5.1 優(yōu)教App登錄頁設(shè)計 79
5.1.1 優(yōu)教App登錄頁的制作要求與分析 79
5.1.2 優(yōu)教App登錄頁設(shè)計實操 80
5.2 優(yōu)教App首頁設(shè)計 83
5.2.1 優(yōu)教App首頁的制作要求與分析 83
5.2.2 優(yōu)教App首頁設(shè)計實操 84
5.3 優(yōu)教App課程頁設(shè)計 94
5.3.1 優(yōu)教App課程頁的制作要求與分析 94
5.3.2 優(yōu)教App課程頁設(shè)計實操 95
5.4 優(yōu)教網(wǎng)頁端首頁設(shè)計 99
5.4.1 優(yōu)教網(wǎng)頁端首頁的制作要求與分析 99
5.4.2 優(yōu)教網(wǎng)頁端首頁設(shè)計實操 100
5.5 學(xué)習(xí)反思 105
5.5.1 項目小結(jié) 105
5.5.2 知識鞏固 105
項目6 掌握UI設(shè)計的標(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)注實操 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登錄頁切圖實操 115
6.5 學(xué)習(xí)反思 117
6.5.1 項目小結(jié) 117
6.5.2 知識鞏固 117
項目7 天氣類App實訓(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è)計 122
7.2.1 草圖繪制 122
7.2.2 原型圖設(shè)計 123
7.3 啟動圖標(biāo)設(shè)計 123
7.3.1 知天氣App啟動圖標(biāo)分析 123
7.3.2 知天氣App啟動圖標(biāo)參數(shù)設(shè)置 124
7.3.3 知天氣App啟動圖標(biāo)實踐過程 124
7.4 閃屏頁設(shè)計 126
7.4.1 知天氣App閃屏頁分析 126
7.4.2 知天氣App閃屏頁參數(shù)設(shè)置 126
7.4.3 知天氣App閃屏頁實踐過程 127
7.5 引導(dǎo)頁設(shè)計 128
7.5.1 知天氣App引導(dǎo)頁分析 128
7.5.2 知天氣App引導(dǎo)頁參數(shù)設(shè)置 128
7.5.3 知天氣App引導(dǎo)頁實踐過程 129
7.6 首頁設(shè)計 132
7.6.1 知天氣App首頁分析 132
7.6.2 知天氣App首頁參數(shù)設(shè)置 132
7.6.3 知天氣App首頁實踐過程 132
7.7 預(yù)測頁設(shè)計 137
7.7.1 知天氣App預(yù)測頁分析 137
7.7.2 知天氣App預(yù)測頁參數(shù)設(shè)置 138
7.7.3 知天氣App預(yù)測頁實踐過程 138
7.8 日歷頁設(shè)計 141
7.8.1 知天氣App日歷頁分析 141
7.8.2 知天氣App日歷頁參數(shù)設(shè)置 141
7.8.3 知天氣App日歷頁實踐過程 142
7.9 學(xué)習(xí)反思 144
7.9.1 項目小結(jié) 144
7.9.2 知識鞏固 144
項目8 購物類App實訓(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è)計 148
8.2.1 草圖繪制 148
8.2.2 原型圖設(shè)計 149
8.3 啟動圖標(biāo)設(shè)計 150
8.3.1 藝購App啟動圖標(biāo)分析 150
8.3.2 藝購App啟動圖標(biāo)參數(shù)設(shè)置 150
8.3.3 藝購App啟動圖標(biāo)實踐過程 151
8.4 閃屏頁設(shè)計 154
8.4.1 藝購App閃屏頁分析 154
8.4.2 藝購App閃屏頁參數(shù)設(shè)置 154
8.4.3 藝購App閃屏頁實踐過程 155
8.5 登錄頁設(shè)計 156
8.5.1 藝購App登錄頁分析 156
8.5.2 藝購App登錄頁參數(shù)設(shè)置 157
8.5.3 藝購App登錄頁實踐過程 157
8.6 首頁設(shè)計 159
8.6.1 藝購App首頁分析 159
8.6.2 藝購App首頁參數(shù)設(shè)置 159
8.6.3 藝購App首頁實踐過程 160
8.7 詳情頁設(shè)計 163
8.7.1 藝購App詳情頁分析 163
8.7.2 藝購App詳情頁參數(shù)設(shè)置 164
8.7.3 藝購App詳情頁實踐過程 164
8.8 個人中心頁設(shè)計 168
8.8.1 藝購App個人中心頁分析 168
8.8.2 藝購App個人中心頁參數(shù)設(shè)置 169
8.8.3 藝購App個人中心頁實踐過程 169
8.9 學(xué)習(xí)反思 172
8.9.1 項目小結(jié) 172
8.9.2 知識鞏固 172
書單推薦
