第1章 UI設(shè)計 1
1.1 用戶界面 2
1.2 圖形 UI 2
1.2.1 Windows操作系統(tǒng)圖形 UI的發(fā)展過程 2
1.2.2 手機(jī)設(shè)備與圖形 UI的發(fā)展 8
1.3 UI設(shè)計 11
1.4 以用戶為中心的設(shè)計 13
1.5 交互設(shè)計 14
第2章 以用戶為中心的設(shè)計 17
2.1 用戶體驗(yàn) 18
2.1.1 用戶體驗(yàn)決定成敗 18
2.1.2 好的用戶體驗(yàn)原則 19
2.2 用戶研究 20
2.2.1 用戶是誰 20
2.2.2 心理模型和表現(xiàn)模型 20
2.2.3 數(shù)字化生活方式 21
2.3 建立用戶角色的重要性 22
2.3.1 開發(fā)者與用戶不同 22
2.3.2 設(shè)計要有針對性 22
2.3.3 人物角色使以用戶為中心落到實(shí)處 22
2.3.4 人物角色可以減少爭論，提高效率 22
2.4 產(chǎn)品規(guī)劃前期 23
2.4.1 產(chǎn)品規(guī)劃時效 23
2.4.2 明確產(chǎn)品價值和定位 23
2.4.3 明確產(chǎn)品生命周期 23
2.4.4 明確產(chǎn)品對象和終端 24
2.5 積累用戶需求池 24
2.5.1 訪談或問卷調(diào)研用戶 24
2.5.2 用戶使用路徑分析 25
2.5.3 根據(jù)業(yè)務(wù)模塊窮舉法 25
2.5.4 其他渠道 25
2.6 建立有價值人物角色類型 25
2.6.1 人物角色數(shù)量 26
2.6.2 人物角色需求分級 26
2.7 人物角色簡介 26
2.7.1 人物角色要具體化 26
2.7.2 編寫人物角色簡介 27
2.8 編寫用戶情境 27
2.8.1 用戶情境的典型一天 27
2.8.2 編寫用戶情境 28
第3章 交互設(shè)計 29
3.1 人機(jī)交互 30
3.1.1 人機(jī)交互三要素 30
3.1.2 人機(jī)交互現(xiàn)狀與未來 30
3.2 UI中的交互設(shè)計思維 32
3.2.1 信息傳遞 32
3.2.2 交互行為 32
3.2.3 交互行為的變革 33
3.2.4 情感化設(shè)計 35
3.3 信息架構(gòu) 36
3.3.1 信息架構(gòu)師 36
3.3.2 信息架構(gòu)目標(biāo) 36
3.3.3 信息的選擇與組織 37
3.3.4 界面導(dǎo)航設(shè)計 39
3.4 流程圖 41
3.4.1 流程圖的基本構(gòu)成和常用符號 41
3.4.2 交互流程圖 42
3.4.3 制作流程圖常用軟件 42
3.5 交互原型設(shè)計 42
3.5.1 低保真原型設(shè)計 42
3.5.2 高保真原型設(shè)計 44
第4章 UI視覺元素 47
4.1 色彩元素 48
4.1.1 色彩屬性 48
4.1.2 色彩搭配的黃金法則 50
4.1.3 色彩搭配與界面風(fēng)格 51
4.2 文字元素 54
4.2.1 標(biāo)題類文字 54
4.2.2 正文類文字 57
4.2.3 提示類文字 60
4.2.4 交互類文字 60
4.2.5 行為召喚語句 61
4.2.6 文字動畫 62
4.3 圖片元素 63
4.3.1 界面中圖片的種類 63
4.3.2 選擇圖片的原則 65
4.3.3 圖片常見比例 67
4.4 圖標(biāo)元素 69
4.4.1 圖標(biāo)的概念 69
4.4.2 圖標(biāo)設(shè)計原則 70
4.4.3 圖標(biāo)設(shè)計的注意事項(xiàng) 72
4.4.4 圖標(biāo)的視覺造型風(fēng)格 72
4.4.5 圖標(biāo)制作 74
4.5 控件元素 75
4.5.1 控件與圖標(biāo)的區(qū)別 75
4.5.2 控件設(shè)計的注意事項(xiàng) 76
4.5.3 常見的控件元素 76
4.6 視覺元素的交互狀態(tài) 79
第5章 軟件 UI設(shè)計 81
5.1 軟件 UI設(shè)計尺寸 82
5.2 軟件的歡迎界面 82
5.3 軟件的主界面 84
5.3.1 Top Frame區(qū) 85
5.3.2 菜單欄和工具欄 85
5.3.3 功能模塊區(qū) 86
5.3.4 工作區(qū) 87
5.3.5 狀態(tài)信息區(qū) 87
5.4 軟件界面的設(shè)計原則 87
5.4.1 界面與功能的適合性 87
5.4.2 界面意圖容易理解 88
5.4.3 及時反饋信息 89
5.4.4 防錯處理 89
5.4.5 風(fēng)格一致和必要的個性化 90
5.4.6 合理的布局 90
5.4.7 合理的色彩 91
5.4.8 適應(yīng)用戶群體和國際化 92
5.4.9 最高效率 92
5.4.10 可復(fù)用 93
5.5 軟件界面各元素設(shè)計的基本規(guī)則 93
5.5.1 字體設(shè)計的基本規(guī)則 93
5.5.2 菜單界面設(shè)計的基本規(guī)則 93
5.5.3 命令按鈕設(shè)計的基本規(guī)則 94
5.5.4 工具條和圖標(biāo)按鈕設(shè)計的基本規(guī)則 94
5.5.5 提示信息設(shè)計的基本規(guī)則 94
5.5.6 單選按鈕設(shè)計的基本規(guī)則 95
5.5.7 復(fù)選按鈕設(shè)計的基本規(guī)則 95
5.5.8 輸入框和文本域設(shè)計的基本規(guī)則 96
5.5.9 組合下拉框和列表框設(shè)計的基本規(guī)則 96
5.5.10 多頁選項(xiàng)板設(shè)計的基本規(guī)則 96
5.5.11 數(shù)據(jù)表格設(shè)計的基本規(guī)則 97
5.5.12 日期控件設(shè)計的基本規(guī)則 97
5.5.13 軟件對話窗口設(shè)計的基本規(guī)則 98
5.5.14 軟件消息框設(shè)計的基本規(guī)則 98
5.6 窗口的交互規(guī)則 100
5.6.1 一般規(guī)則 100
5.6.2 焦點(diǎn)規(guī)則 101
5.6.3 選擇規(guī)則 101
第6章 移動 App UI設(shè)計 103
6.1 移動 App UI設(shè)計概念 104
6.2 移動 App UI設(shè)計的風(fēng)格類型 104
6.3 移動 App UI的設(shè)計原則 106
6.3.1 審美完整性原則 106
6.3.2 一致性原則 106
6.3.3 直接操作原則 106
6.3.4 提供反饋原則 106
6.3.5 隱喻的原則 107
6.3.6 用戶控制原則 107
6.4 移動智能設(shè)備 107
6.5 移動智能設(shè)備的操作系統(tǒng) 107
6.6 iOS系統(tǒng) UI設(shè)計規(guī)范 108
6.6.1 iOS常用術(shù)語 108
6.6.2 iOS設(shè)計尺寸 110
6.6.3 iOS適配 111
6.6.4 iOS界面布局規(guī)范 112
6.6.5 iOS文字規(guī)范 113
6.6.6 iOS圖標(biāo)規(guī)范 114
6.6.7 iOS交互注意事項(xiàng) 117
6.7 Android系統(tǒng) UI設(shè)計規(guī)范 118
6.7.1 Android常用術(shù)語 118
6.7.2 Android設(shè)計尺寸 119
6.7.3 Android適配 120
6.7.4 Android界面布局規(guī)范 120
6.7.5 Android文字規(guī)范 123
6.7.6 Android圖標(biāo)規(guī)范 124
6.7.7 Android交互的注意事項(xiàng) 126
6.7.8 Android的其他設(shè)計建議 126
6.8 Harmony OS系統(tǒng) UI設(shè)計規(guī)范 127
6.8.1 Harmony OS常用術(shù)語 127
6.8.2 Harmony OS界面布局規(guī)范 127
6.8.3 Harmony OS文字規(guī)范 127
6.8.4 Harmony OS圖標(biāo)規(guī)范 128
6.8.5 Harmony OS其他設(shè)計建議 128
6.9 移動 App切圖規(guī)則與規(guī)范 128
6.9.1 切圖類型 129
6.9.2 切圖范圍 129
6.9.3 最小觸擊區(qū)域 129
6.9.4 切圖命名 129
6.9.5 AI切圖演示 130
第7章 網(wǎng)頁 UI設(shè)計 131
7.1 常用術(shù)語 132
7.1.1 網(wǎng)站 132
7.1.2 網(wǎng)頁 132
7.1.3 瀏覽器 132
7.2 網(wǎng)頁界面風(fēng)格 132
7.2.1 嚴(yán)肅穩(wěn)重型 132
7.2.2 綜合流量型 133
7.2.3 簡潔大氣型 133
7.2.4 生動活潑型 134
7.2.5 時尚個性型 134
7.2.6 傳統(tǒng)古樸型 134
7.3 屏幕分辨率與自適應(yīng) 135
7.3.1 橫屏 135
7.3.2 豎屏 140
7.4 網(wǎng)頁的柵格布局 141
7.5 網(wǎng)頁布局參考 142
7.6 網(wǎng)頁字體 145
7.7 網(wǎng)頁切圖 145
7.7.1 切圖的原則 145
7.7.2 切圖的技巧 145
7.7.3 切圖的類型 145
第8章 游戲 UI設(shè)計 147
8.1 游戲的分類 148
8.2 游戲 UI的獨(dú)特性 154
8.2.1 視覺風(fēng)格 154
8.2.2 互動感受 155
8.2.3 復(fù)雜性 155
8.3 游戲 UI的職能 156
8.3.1 實(shí)現(xiàn)功能切換 156
8.3.2 實(shí)現(xiàn)反饋交流 156
8.3.3 實(shí)現(xiàn)沉浸式體驗(yàn) 157
8.4 游戲 UI設(shè)計前期工作 158
8.4.1 明確游戲的世界觀 158
8.4.2 明確游戲的整體風(fēng)格 159
8.5 游戲 UI設(shè)計原則 161
8.5.1 統(tǒng)一性原則 161
8.5.2 易用性原則 162
8.5.3 習(xí)慣與認(rèn)知原則 163
8.5.4 容錯性原則 164
8.5.5 及時信息反饋原則 164
8.6 手游 UI設(shè)計的限制 165
8.6.1 尺寸限制 165
8.6.2 性能限制 165
8.6.3 分辨率限制 165
8.6.4 音效限制 165
8.6.5 操控限制 166
8.6.6 沉浸式體驗(yàn)限制 166
8.7 手游 UI設(shè)計注意事項(xiàng) 166
8.7.1 更高的易用性 166
8.7.2 更及時的反饋 166
8.7.3 更多樣化的操作控制 167
第9章 UI設(shè)計項(xiàng)目案例 169
9.1 找到你App產(chǎn)品定位 170
9.1.1 行業(yè)背景 170
9.1.2 調(diào)研手段 170
9.1.3 用戶需求 171
9.1.4 定位分析 171
9.1.5 建立人物角色與情境 172
9.2 交互設(shè)計 173
9.2.1 產(chǎn)品框架 173
9.2.2 低保真原型圖設(shè)計 173
9.3 視覺設(shè)計 175
9.3.1 標(biāo)志設(shè)計 175
9.3.2 圖標(biāo)設(shè)計 176
9.3.3 高保真原型圖設(shè)計 177
9.4 后期測試與維護(hù) 180
9.4.1 項(xiàng)目評審與測試 180
9.4.2 意見反饋與迭代 184
參考文獻(xiàn) 185
書單推薦
