UI設計與實踐（微課版）

項目1 認識UI設計 1
1.1 UI設計的概念及分類 1
1.1.1 UI設計的概念 1
1.1.2 UI設計的分類 2
1.2 UI設計的行業現狀 4
1.2.1 UI設計的行業近況 4
1.2.2 UI設計的發展趨勢 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 統一性原則 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 狀態欄 26
2.2.2 導航欄 26
2.2.3 內容區域 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 平臺規範 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 梳理產品屬性 46
3.1.2 瞭解目標用戶 46
3.1.3 競品分析 48
3.2 產品風格創作 49
3.3 制定設計規範 49
3.3.1 色彩規範 49
3.3.2 文字規範 50
3.3.3 圖標規範 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 輕擬態開關組件設計 73
4.6.1 輕擬態開關組件的製作要求與分析 73
4.6.2 輕擬態開關組件設計實操 74
4.7 學習反思 76
4.7.1 項目小結 76
4.7.2 知識鞏固 77
項目5 熟悉UI的組合設計 78
5.1 優教App登錄頁設計 79
5.1.1 優教App登錄頁的製作要求與分析 79
5.1.2 優教App登錄頁設計實操 80
5.2 優教App首頁設計 83
5.2.1 優教App首頁的製作要求與分析 83
5.2.2 優教App首頁設計實操 84
5.3 優教App課程頁設計 94
5.3.1 優教App課程頁的製作要求與分析 94
5.3.2 優教App課程頁設計實操 95
5.4 優教網頁端首頁設計 99
5.4.1 優教網頁端首頁的製作要求與分析 99
5.4.2 優教網頁端首頁設計實操 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 標註的內容及規範 107
6.2 界面標註 109
6.2.1 優教App首頁的標註要求與分析 109
6.2.2 優教App首頁標註實操 110
6.3 切圖的概述 111
6.3.1 切圖的概念和作用 111
6.3.2 切圖的規範 112
6.3.3 切圖的工具 114
6.4 優教App登錄頁切圖 115
6.4.1 優教App登錄頁的切圖要求與分析 115
6.4.2 優教App登錄頁切圖實操 115
6.5 學習反思 117
6.5.1 項目小結 117
6.5.2 知識鞏固 117
項目7 天氣類App實訓 119
7.1 產品分析與風格定位 120
7.1.1 產品分析 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啟動圖標參數設置 124
7.3.3 知天氣App啟動圖標實踐過程 124
7.4 閃屏頁設計 126
7.4.1 知天氣App閃屏頁分析 126
7.4.2 知天氣App閃屏頁參數設置 126
7.4.3 知天氣App閃屏頁實踐過程 127
7.5 引導頁設計 128
7.5.1 知天氣App引導頁分析 128
7.5.2 知天氣App引導頁參數設置 128
7.5.3 知天氣App引導頁實踐過程 129
7.6 首頁設計 132
7.6.1 知天氣App首頁分析 132
7.6.2 知天氣App首頁參數設置 132
7.6.3 知天氣App首頁實踐過程 132
7.7 預測頁設計 137
7.7.1 知天氣App預測頁分析 137
7.7.2 知天氣App預測頁參數設置 138
7.7.3 知天氣App預測頁實踐過程 138
7.8 日歷頁設計 141
7.8.1 知天氣App日歷頁分析 141
7.8.2 知天氣App日歷頁參數設置 141
7.8.3 知天氣App日歷頁實踐過程 142
7.9 學習反思 144
7.9.1 項目小結 144
7.9.2 知識鞏固 144
項目8 購物類App實訓 145
8.1 產品分析與風格定位 146
8.1.1 產品分析 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啟動圖標參數設置 150
8.3.3 藝購App啟動圖標實踐過程 151
8.4 閃屏頁設計 154
8.4.1 藝購App閃屏頁分析 154
8.4.2 藝購App閃屏頁參數設置 154
8.4.3 藝購App閃屏頁實踐過程 155
8.5 登錄頁設計 156
8.5.1 藝購App登錄頁分析 156
8.5.2 藝購App登錄頁參數設置 157
8.5.3 藝購App登錄頁實踐過程 157
8.6 首頁設計 159
8.6.1 藝購App首頁分析 159
8.6.2 藝購App首頁參數設置 159
8.6.3 藝購App首頁實踐過程 160
8.7 詳情頁設計 163
8.7.1 藝購App詳情頁分析 163
8.7.2 藝購App詳情頁參數設置 164
8.7.3 藝購App詳情頁實踐過程 164
8.8 個人中心頁設計 168
8.8.1 藝購App個人中心頁分析 168
8.8.2 藝購App個人中心頁參數設置 169
8.8.3 藝購App個人中心頁實踐過程 169
8.9 學習反思 172
8.9.1 項目小結 172
8.9.2 知識鞏固 172