UI設計基礎與應用標準教程（全彩微課版）

目 錄

第1章 UI設計學習入門

1.1 瞭解UI設計 2

1.1.1 UI設計簡介 2

1.1.2 UI設計原則 3

1.1.3 UI設計流程 4

1.1.4 UI設計常用軟件 5

註意事項 在線製作網站 7

1.1.5 UI設計行業的發展 7

1.2 UI設計方向 8

1.2.1 用戶研究 8

1.2.2 交互設計 8

1.2.3 界面設計 8

1.3 UI設計的設計規範 9

1.3.1 一致性 9

1.3.2 準確性 9

1.3.3 可讀性 10

1.3.4 佈局合理化 10

1.3.5 系統操作合理性 10

1.3.6 系統響應時間 11

1.4 UI設計的色彩基礎 11

1.4.1 色彩的基礎知識 11

知識點撥 色相環的色彩構成 12

1.4.2 色彩搭配 14

實戰演練：UI設計欣賞 16

新手答疑 18

第2章 圖標設計

2.1 圖標的設計規範 20

2.1.1 圖標的尺寸規範 20

註意事項 圖標切圖 21

2.1.2 圖標的視覺規範 21

動手練 製作視頻播放器圖標 23

2.2 圖標的基礎知識 26

2.2.1 圖標的概念 26

2.2.2 圖標的設計原則 27

動手練 製作文件袋圖標 28

2.3 圖標的風格類型 33

2.3.1 像素風格 33

2.3.2 扁平化風格 33

知識點撥 線性圖標分類 34

知識點撥 面性圖標分類 34

2.3.3 擬物風格 35

2.3.4 立體風格 35

動手練 製作面性圖標 35

實戰演練：製作扁平化風格圖標 39

新手答疑 44

第3章 控件設計

3.1 控件的基礎知識 46

3.1.1 控件的概念 46

註意事項 控件和組件 46

3.1.2 控件的規範 47

動手練 製作搜索框控件 48

3.2 常見控件類型 50

3.2.1 按鈕控件 50

動手練 製作不同狀態的按鈕控件 52

3.2.2 選擇控件 55

知識點撥 單選按鈕 56

3.2.3 文本輸入框控件 56

3.2.4 彈框控件 57

實戰演練：製作升級彈框 58

新手答疑 62

第4章 動效設計

4.1 UI動效簡介 64

4.1.1 認識UI動效 64

4.1.2 UI動效類型 64

動手練 製作掃碼動效 65

4.2 製作UI動效 70

4.2.1 After Effects的工作界面 70

知識點撥 工作區設置 71

4.2.2 UI動效製作 71

知識點撥 重新設置合成 72

知識點撥 添加關鍵幀 74

註意事項 關鍵幀應用 74

4.2.3 蒙版和形狀 74

知識點撥 鍵盤↑↓鍵的妙用 75

4.2.4 輸出動效 76

動手練 製作logo的出現動效 76

實戰演練：製作加載動效 79

新手答疑 84

第5章 App界面設計

5.1 App界面設計規範 86

5.1.1 iOS系統設計規範 86

知識點撥 最小點擊區域 88

註意事項 最小字號 89

5.1.2 Android系統設計規範 89

註意事項 Android界面常用尺寸 90

5.2 App界面常見類型 91

5.2.1 閃屏頁 91

5.2.2 引導頁 92

註意事項 功能介紹型引導頁分類 92

5.2.3 註冊登錄頁 93

註意事項 註冊登錄頁分類 94

動手練 製作食味App登錄註冊頁 94

5.2.4 空白頁 97

5.2.5 首頁 98

5.2.6 個人中心頁 99

註意事項 其他常見頁面 99

動手練 製作食味App個人中心頁 99

實戰演練：製作旅行客App常用頁面 103

新手答疑 112

第6章 網頁界面設計

6.1 網頁界面設計規範 114

6.1.1 網頁尺寸規範 114

註意事項 首屏高度 115

6.1.2 網頁界面結構規範 115

6.1.3 網頁界面佈局規範 115

註意事項 網格列數 116

6.1.4 網頁界面字體規範 116

動手練 製作花間集網站首頁 116

6.2 網頁界面常見類型 125

6.2.1 首頁 125

6.2.2 欄目頁 126

6.2.3 詳情頁 127

動手練 製作花間集網站詳情頁 128

6.2.4 專題頁 133

實戰演練：製作飲炊美食網站首頁 133

新手答疑 142

第7章 軟件界面設計

7.1 軟件界面設計規範 144

7.1.1 軟件界面結構佈局規範 144

7.1.2 軟件界面尺寸規範 145

知識點撥 斷點 145

7.1.3 軟件界面字體規範 145

知識點撥 常見無襯線體和襯線體 146

註意事項 文字間距 147

7.1.4 軟件圖標規範 147

動手練 製作繪圖軟件啟動頁 148

7.2 軟件界面常見類型 151

7.2.1 啟動頁 151

7.2.2 著陸頁 151

7.2.3 集合頁 152

動手練 製作繪圖軟件集合頁 152

7.2.4 主/細節頁 157

7.2.5 詳細信息頁 158

7.2.6 表單頁 158

實戰演練：製作視頻軟件界面 159

新手答疑 168

第8章 界面的標註與切圖

8.1 界面標註 170

8.1.1 標註內容 170

註意事項 極限值 170

註意事項 圖標標註 171

知識點撥 其他需要標註的內容 171

註意事項 標註單位 171

8.1.2 標註工具 171

動手練 標註App註冊登錄頁 172

8.2 界面切圖 175

8.2.1 切圖原則 176

知識點撥 點九切圖 176

知識點撥 圖標切圖 176

註意事項 不需要切圖元素 176

8.2.2 切圖命名規範 176

註意事項 切圖命名原因 177

8.2.3 切圖工具 177

動手練 切圖並輸出網頁界面 178

實戰演練：標註軟件界面並進行切圖 181

新手答疑 188

第9章 綜合實戰案例

9.1 設計美食App界面 190

9.1.1 設計思路 190

9.1.2 製作閃屏頁 190

註意事項 參考線的區別 191

9.1.3 製作首頁 193

9.1.4 製作詳情頁 201

9.2 設計移動端創意圖標 208

9.2.1 設計思路 208

9.2.2 設計準備之畫板的創建 208

9.2.3 繪制界面圖標 210

9.2.4 繪制交流類應用圖標 214

9.2.5 繪制其他常見圖標 216