UI界面設計與製作標準教程(全彩微課版)
張博文、張亞瓊、職秀梅
商品描述
"本書圍繞UI界面設計展開創作,以“理論+實操”為寫作原則,用通俗易懂的語言對UI界面設計的相關 知識進行詳細介紹。 全書共9章,內容涵蓋UI設計基礎知識,界面設計在線工具—MasterGo,界面圖標設計,基礎控件 設計,常用組件設計,移動端App界面設計,PC端界面設計,小程序界面設計以及界面的標註、輸出與動 效製作,等等。在介紹理論知識的同時,穿插了大量的實操演示,部分章結尾安排“案例實戰”或“新手 答疑”板塊,旨在讓讀者學會並掌握,達到舉一反三的目的。 全書結構編排合理,所選案例貼合UI界面設計實際需求,可操作性強。案例講解詳細,一步一圖,即 學即用。本書適合高等院校師生、UI設計師等閱讀使用,也適合作為社會培訓機構相關課程的教材。"
目錄大綱
目 錄
第1章
UI設計基礎知識
1.1 認識UI設計 2
1.2 UI設計方向 2
1.2.1 用戶研究 2
1.2.2 交互設計 3
1.2.3 界面設計 3
1.3 UI設計規範 4
1.3.1 一致性原則 4
1.3.2 準確性原則 5
1.3.3 可讀性原則 6
1.3.4 佈局合理化原則 6
1.3.5 操作合理性 7
1.3.6 系統響應時間 7
1.4 UI設計的項目流程 8
1.4.1 需求分析 8
1.4.2 設計研究 9
1.4.3 原型設計 9
1.4.4 界面設計 10
1.4.5 用戶測試 11
1.4.6 方案優化 12
1.4.7 交付結果 13
1.5 AIGC在UI中的應用 13
1.5.1 AIGC的基本功能 13
1.5.2 AIGC在UI中的應用方式 14
1.5.3 常用的AIGC工具 17
1.6 UI設計元素應用規範 18
1.6.1 文字應用解析 18
1.6.2 圖片應用解析 23
1.6.3 色彩應用解析 25
新手答疑 29
第2章
界面設計在線工具——MasterGo
2.1 認識MasterGo 31
2.1.1 操作界面 31
2.1.2 標尺與參考線 32
2.1.3 基礎工具 34
2.1.4 協同評論 37
2.1.5 切圖和導出 39
2.2 組件與樣式 41
2.2.1 創建組件 41
2.2.2 應用默認組件 42
2.2.3 創建樣式 42
2.3 原型交互 44
2.3.1 交互 45
2.3.2 溢出行為 47
案例實戰:原型交互效果製作 48
新手答疑 56
第3章
界面圖標設計
3.1 認識圖標 58
3.1.1 圖標的類型 58
3.1.2 圖標的設計風格 60
3.1.3 輔助繪制網格 62
3.2 iOS圖標設計規範 64
3.2.1 iOS應用圖標設計 64
3.2.2 iOS系統圖標設計 65
3.3 Android圖標設計規範 66
3.3.1 Android應用圖標設計 66
3.3.2 Android系統圖標設計 67
3.4 HarmonyOS圖標設計規範 68
3.4.1 HarmonyOS應用圖標設計 68
3.4.2 HarmonyOS系統圖標設計 70
案例實戰:製作天氣類功能圖標 72
新手答疑 88
第4章
基礎控件設計
4.1 認識控件 90
4.2 按鈕控件 90
4.2.1 按鈕控件的類型 90
4.2.2 按鈕控件設計規範 93
4.3 選擇控件 95
4.3.1 選擇控件的類型 96
4.3.2 選擇控件設計規範 97
4.4 分段控件 98
4.4.1 分段控件的類型 98
4.4.2 分段控件設計規範 99
4.5 信息反饋控件 99
4.5.1 反饋控件的類型 99
4.5.2 反饋控件設計規範 100
4.6 文本框控件 102
4.6.1 文本框控件的類型 102
4.6.2 文本框控件設計規範 103
案例實戰:製作美食App登錄頁控件 103
新手答疑 106
第5章
常用組件設計
5.1 認識組件 108
5.2 基礎組件 108
5.2.1 基礎組件解析 108
5.2.2 基礎組件設計規範 109
5.3 導航類組件 111
5.3.1 導航類組件解析 111
5.3.2 導航類組件設計規範 113
5.4 輸入類組件 116
5.4.1 輸入類組件解析 116
5.4.2 輸入類組件設計規範 118
5.5 展示類組件 119
5.5.1 展示類組件解析 119
5.5.2 展示類組件設計規範 121
5.6 反饋類組件 122
5.6.1 反饋類組件解析 122
5.6.2 反饋類組件設計規範 124
案例實戰:製作App系統更新對話框 126
新手答疑 133
第6章
移動端App界面設計
6.1 App常用界面類型 135
6.1.1 閃屏頁 135
6.1.2 引導頁 136
6.1.3 註冊登錄頁 137
6.1.4 空白頁 137
6.1.5 首頁 138
6.1.6 個人中心頁 138
6.1.7 其他界面 139
6.2 App原型設計 140
6.2.1 草圖的繪制 140
6.2.2 原型的設計 141
6.3 App設計規範 142
6.3.1 iOS設計規範 142
6.3.2 Android設計規範 144
6.3.3 HarmonyOS設計規範 146
案例實戰:製作美食App首頁界面 147
新手答疑 158
第7章
PC端界面設計
7.1 PC端界面設計簡介 160
7.2 PC源生界面 161
7.3 客戶端界面 162
7.3.1 客戶端界面的類型 162
7.3.2 客戶端界面設計規範 167
7.4 網頁端界面 169
7.4.1 網頁端界面類型 169
7.4.2 網頁端界面設計規範 173
案例實戰:製作聊天類客戶端首頁 175
新手答疑 184
第8章
小程序界面設計
8.1 關於微信小程序 186
8.1.1 移動端微信小程序 186
8.1.2 PC端微信小程序 186
8.1.3 微信小程序的創建 187
8.2 微信小程序界面設計規範 188
8.2.1 微信小程序界面尺寸 188
8.2.2 微信小程序視覺設計 189
8.2.3 微信小程序文字設計 193
案例實戰:製作旅行類小程序界面 194
新手答疑 202
第9章 界面的標註、輸出與動效製作
9.1 界面標註 204
9.1.1 界面標註的作用 204
9.1.2 界面標註的內容 204
9.1.3 界面標註的規範 205
9.1.4 界面標註的常用工具 206
9.2 界面的切圖 207
9.2.1 界面切圖的原則 207
9.2.2 界面切圖的要點 208
9.2.3 界面切圖的命名規範 209
9.2.4 界面切圖的常用工具 211
9.3 界面的動效製作 212
9.3.1 界面動效的屬性 212
9.3.2 界面動效的作用 212
9.3.3 界面動效的類型 213
9.3.4 動效製作的常用工具 217
案例實戰:標註App登錄界面 218
新手答疑 224