App+軟件+游戲+網(wǎng)站界面設(shè)計(jì)教程

1.1 了解UI界面設(shè)計(jì)1
1.1.1 什么是UI 界面設(shè)計(jì) 1
1.1.2 UI 界面設(shè)計(jì)的發(fā)展歷史 1
1.1.3 UI 界面設(shè)計(jì)的分類 4
1.2 UI界面設(shè)計(jì)中的圖像 6
1.2.1 常見的圖像格式 6
1.2.2 常見的圖像類型 7
1.3 UI界面設(shè)計(jì)中的文字 8
1.3.1 簡化文字內(nèi)容 8
1.3.2 字體設(shè)計(jì)合理 8
1.3.3 安排文字層次 9
1.3.4 信息表達(dá)準(zhǔn)確 9
1.3.5 文字畫面美感設(shè)計(jì) 9
1.4 UI界面設(shè)計(jì)中的黃金法則 10
1.4.1 保持界面的一致性 10
1.4.2 在界面中設(shè)置快捷方式 10
1.4.3 為用戶提供信息反饋 11
1.4.4 提供簡單的錯誤處理 11
1.5 UI界面設(shè)計(jì)的色彩搭配 11
1.5.1 色彩基礎(chǔ) 11
1.5.2 色彩搭配原則 15
1.5.3 色彩搭配方案 18
1.6 UI界面設(shè)計(jì)中的布局 20
1.6.1 構(gòu)圖的基本概念 20
1.6.2 構(gòu)圖的法則 20
1.7 UI界面設(shè)計(jì)的工作流程 21
1.7.1 市場調(diào)研/ 需求分析 21
1.7.2 設(shè)計(jì)分析/ 線框圖繪制 22
1.7.3 界面制作/ 調(diào)研驗(yàn)證 22
1.7.4 測試產(chǎn)品/ 改進(jìn)方案 23
1.7.5 投入市場/ 用戶反饋 23
1.8 常見的UI界面設(shè)計(jì)軟件 23
1.8.1 Axure RP 23
1.8.2 Sketch 24
1.8.3 Photoshop 26
1.8.4 Illustrator 27
1.9 本章小結(jié)28
2.1 UI界面設(shè)計(jì)元素的分類 29
2.2 UI界面中的啟動界面 33
2.2.1 啟動界面的概念 33
2.2.2 啟動界面的作用 33
2.2.3 啟動界面的設(shè)計(jì)技巧 34
2.3 UI界面中的裝飾線條 34
2.3.1 點(diǎn)與線的關(guān)系 35
2.3.2 線條風(fēng)格的變化 35
2.3.3 裝飾線條的作用 38
2.4 UI界面中的按鈕和圖標(biāo) 38
2.4.1 按鈕設(shè)計(jì)的概況 38
實(shí)戰(zhàn)練習(xí)01——制作扁平化按鈕 39
2.4.2 UI 界面中的圖標(biāo) 44
2.4.3 圖標(biāo)的設(shè)計(jì)原則 45
2.4.4 圖標(biāo)的常用格式 47
2.4.5 擬物化風(fēng)格圖標(biāo) 48
實(shí)戰(zhàn)練習(xí)02——設(shè)計(jì)制作逼真的話筒圖標(biāo) 49
2.4.6 扁平化風(fēng)格圖標(biāo) 56
實(shí)戰(zhàn)練習(xí)03——設(shè)計(jì)制作扁平化圖標(biāo) 58
2.5 UI界面中的開關(guān)和進(jìn)度條 64
2.5.1 軟件開關(guān) 65
2.5.2 進(jìn)度條設(shè)計(jì) 65
實(shí)戰(zhàn)練習(xí)04——設(shè)計(jì)制作進(jìn)度條 65
2.6 UI界面中的菜單和工具欄設(shè)計(jì) 71
2.6.1 菜單的重要性 71
2.6.2 菜單的設(shè)計(jì)重點(diǎn) 71
實(shí)戰(zhàn)練習(xí)05——制作UI 界面導(dǎo)航和索引菜單 72
2.6.3 工具欄的作用 76
2.7 本章小結(jié)76
第3章　軟件UI界面設(shè)計(jì)
3.1 軟件界面設(shè)計(jì)基礎(chǔ) 77
3.1.1 軟件界面的概念 77
3.1.2 軟件界面的分類 77
3.1.3 與移動端的差異性 79
3.1.4 軟件包裝及市場化 81
3.2 PC端應(yīng)用軟件設(shè)計(jì)規(guī)范 81
3.2.1 顏色規(guī)范 81
3.2.2 文字規(guī)范 82
3.2.3 控件規(guī)范 83
3.2.4 尺寸規(guī)范 86
3.3 軟件安裝與啟動界面設(shè)計(jì) 87
3.3.1 軟件啟動界面設(shè)計(jì) 87
3.3.2 軟件安裝界面流程 88
3.3.3 安裝界面的細(xì)節(jié)設(shè)計(jì) 89
3.4 軟件面板設(shè)計(jì)91
3.4.1 軟件面板布局 91

實(shí)戰(zhàn)練習(xí)01——制作在線聊天軟件
的界面框架 92
3.4.2 軟件面板布局的合理性 96
實(shí)戰(zhàn)練習(xí)02——制作軟件界面的標(biāo)題欄、頭像
與圖標(biāo) 97
3.4.3 軟件面板的設(shè)計(jì)原則 104
實(shí)戰(zhàn)練習(xí)03——制作聊天軟件界面
的聯(lián)系人列表 106
3.5 軟件皮膚設(shè)計(jì) 110
3.6 播放器軟件界面設(shè)計(jì) 112
3.6.1 播放器界面設(shè)計(jì)原則 113
實(shí)戰(zhàn)練習(xí)04——制作圖片播放器的背景和名稱 115
3.6.2 界面的人性化設(shè)計(jì)119
實(shí)戰(zhàn)練習(xí)05——制作圖片播放器的主體 120
3.7 本章小結(jié) 126
4.1 游戲UI界面設(shè)計(jì)基礎(chǔ) 127
4.1.1 關(guān)于游戲UI 界面設(shè)計(jì) 127
4.1.2 游戲UI 界面中的設(shè)計(jì)理念 128
4.1.3 與其他UI 界面設(shè)計(jì)的區(qū)別 129
4.1.4 認(rèn)知心理學(xué)的作用 130
4.2 游戲UI界面設(shè)計(jì)中的視聽元素 130
4.2.1 圖形元素設(shè)計(jì) 131
實(shí)戰(zhàn)練習(xí)01——制作游戲界面的背景
和圖形元素 133
4.2.2 動態(tài)元素設(shè)計(jì) 137
實(shí)戰(zhàn)練習(xí)02——制作游戲界面的標(biāo)簽欄 140
4.2.3 視聽元素設(shè)計(jì) 146
實(shí)戰(zhàn)練習(xí)03——制作游戲界面的導(dǎo)航欄和裝飾
元素 147
4.3 游戲UI界面設(shè)計(jì)的要求 154
4.3.1 游戲UI 界面設(shè)計(jì)的準(zhǔn)備工作 154
實(shí)戰(zhàn)練習(xí)04——制作游戲的幫助界面 156
4.3.2 游戲UI 界面的設(shè)計(jì)原則 164
4.3.3 游戲UI 界面的設(shè)計(jì)要點(diǎn) 165
4.4 游戲UI界面的類型 168
4.4.1 PC 端游戲UI 界面設(shè)計(jì) 168
4.4.2 移動端游戲UI 界面設(shè)計(jì) 169
4.5 本章小結(jié) 176
第5章　網(wǎng)頁UI界面設(shè)計(jì)
5.1 網(wǎng)頁的類型 177
5.1.1 環(huán)境型界面 177
5.1.2 情感型界面 177
5.1.3 功能型界面 178
5.2 網(wǎng)頁設(shè)計(jì)原則 180
5.2.1 界面美觀 180
實(shí)戰(zhàn)練習(xí)01——制作時(shí)尚簡潔的網(wǎng)站背景 181
5.2.2 優(yōu)秀的用戶體驗(yàn) 185
5.2.3 中心明確 186
5.2.4 整體性與一致性 186
實(shí)戰(zhàn)練習(xí)02——制作時(shí)尚簡潔的網(wǎng)站主體與
版底 186
5.2.5 及時(shí)更新與定期維護(hù) 192
5.3 網(wǎng)頁界面構(gòu)成元素 192
5.3.1 文本 193
5.3.2 圖像 193
實(shí)戰(zhàn)練習(xí)03——制作寬屏網(wǎng)頁的頂部與底部 193
5.3.3 多媒體 197
5.3.4 配色 198
5.4 網(wǎng)頁版式與布局 198
5.4.1 布局方式 198
5.4.2 網(wǎng)頁選圖 201
實(shí)戰(zhàn)練習(xí)04——制作寬屏網(wǎng)頁的主體 203
5.4.3 網(wǎng)頁構(gòu)圖 204
5.5 網(wǎng)頁切圖規(guī)范 205
實(shí)戰(zhàn)練習(xí)05——制作時(shí)尚簡潔地電子商務(wù)
網(wǎng)站切圖 206
5.6 網(wǎng)頁UI界面適配 209
5.6.1 適配的方式方法 209
5.6.2 適配需要注意的點(diǎn) 210
5.7 本章小結(jié) 210
第6章　Android系統(tǒng)UI界面設(shè)計(jì)
6.1 認(rèn)識 Android 系統(tǒng) 211
6.1.1 Android 系統(tǒng)概述211
6.1.2 Android 系統(tǒng)的優(yōu)勢 211
6.1.3 Android 系統(tǒng)的局限性 212
6.1.4 定制 Android 系統(tǒng) 212
6.2 Android 系統(tǒng)UI界面設(shè)計(jì)規(guī)范 214
6.2.1 Android 系統(tǒng)的基本單位 214
6.2.2 Android 系統(tǒng)界面的設(shè)計(jì)尺寸 215
實(shí)戰(zhàn)練習(xí)01——制作購物App 的頂部
和Banner 217
6.2.3 Android 系統(tǒng)的圖標(biāo)與按鈕 221
6.2.4 Android 系統(tǒng)的元素間距 223


6.2.5 App 中的文字規(guī)范 223
實(shí)戰(zhàn)練習(xí)02——制作App 的分類圖標(biāo)
和Banner 225
6.3 Android 系統(tǒng)UI界面設(shè)計(jì)原則 229
6.3.1 界面美觀整潔 229
6.3.2 操作簡便 230
6.3.3 優(yōu)化用戶體驗(yàn) 233
6.3.4 App 界面的整體性 234
實(shí)戰(zhàn)練習(xí)03——制作App 的版本更新彈出框 235
6.4 Android 系統(tǒng)界面輸出 239
6.4.1 設(shè)計(jì)稿標(biāo)注 239
6.4.2 設(shè)計(jì)稿切圖 240
實(shí)戰(zhàn)練習(xí)04——制作App 的優(yōu)惠專區(qū)
和底部導(dǎo)航 242
6.4.3 適配輸出 245
6.5 本章小結(jié) 246
第7章　iOS系統(tǒng)UI界面設(shè)計(jì)
7.1 iOS系統(tǒng)概況 247
7.1.1 了解iOS 系統(tǒng) 247
7.1.2 了解Watch OS 系統(tǒng) 248
7.2 iOS系統(tǒng)界面設(shè)計(jì)規(guī)范 248
7.2.1 界面尺寸規(guī)范 248
7.2.2 欄高尺寸規(guī)范 250
7.2.3 邊距和間距尺寸規(guī)范 250
實(shí)戰(zhàn)練習(xí)01——制作iOS 系統(tǒng)天氣界面 254
7.2.4 圖標(biāo)尺寸規(guī)范 259
7.2.5 字體規(guī)范 260
7.2.6 圖片設(shè)計(jì)規(guī)范 262
實(shí)戰(zhàn)練習(xí)02——制作iOS 系統(tǒng)監(jiān)測界面
上半部分 262
7.3 iOS系統(tǒng)界面設(shè)計(jì)原則 265
7.3.1 審美完整性 265
7.3.2 一致性 267
7.3.3 直接操作 268
7.3.4 反饋 269
7.3.5 隱喻 269
7.3.6 用戶控制 269
實(shí)戰(zhàn)練習(xí)03——制作iOS 系統(tǒng)監(jiān)測界面
下半部分 270
7.4 iOS系統(tǒng)界面輸出 273
7.4.1 項(xiàng)目立項(xiàng) 273
7.4.2 項(xiàng)目制作 274
7.4.3 切圖標(biāo)注 275
7.4.4 切圖輸出 277
實(shí)戰(zhàn)練習(xí)04——制作完美的iOS 系統(tǒng)
天氣界面切圖 279
7.4.5 適配輸出 283
7.5 本章小結(jié) 284