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