爭(zhēng)論點(diǎn)：用戶體驗(yàn)設(shè)計(jì)師的交互指南

第 1 章 用戶體驗(yàn)入門 ／ 001
1.1 什么是用戶體驗(yàn) ／ 002
1.1.1 產(chǎn)品 ／ 002
1.1.2 純主觀感受 / 心理反饋 ／ 003
1.1.3 用戶體驗(yàn)的評(píng)價(jià)模型 ／ 004
1.2 有用性 ／ 006
1.2.1 需求分類 ／ 006
1.2.2 用戶體驗(yàn)地圖 ／ 008
1.2.3 用戶視角 ／ 009
1.3 可見(jiàn)性 ／ 012
1.3.1 合理的信息架構(gòu) ／ 012
1.3.2 跳轉(zhuǎn)動(dòng)作 ／ 015
1.3.3 快捷入口 ／ 015
1.4 易感知 ／ 020
1.4.1 信息優(yōu)先級(jí) ／ 020
1.4.2 縮短路徑 ／ 021
1.4.3 信息可視化 ／ 023
1.4.4 化繁為簡(jiǎn) ／ 024
1.4.5 隱藏機(jī)制 ／ 026
1.5 易用性 ／ 028
1.5.1 減少操作步驟 ／ 028
1.5.2 降低交互成本 ／ 031
1.5.3 減少場(chǎng)景轉(zhuǎn)換 ／ 033
1.5.4 合理的限制 ／ 036
1.5.5 定制化 ／ 037
1.6 容錯(cuò)性 ／ 039
1.6.1 引導(dǎo) ／ 039
1.6.2 報(bào)錯(cuò) ／ 042
1.6.3 解決 ／ 046
1.7 一致性 ／ 050
1.7.1 品牌基因 ／ 051
1.7.2 平臺(tái)的差異性 ／ 053
1.7.3 終端一致性 ／ 054
1.7.4 有用大于統(tǒng)一 ／ 055
1.7.5 設(shè)計(jì)規(guī)范 ／ 055

第 2 章 概念 ／ 057
2.1 MD 和 iOS 設(shè)計(jì)規(guī)范 ／ 058
2.1.1 陰影 ／ 058
2.1.2 導(dǎo)航體系 ／ 060
2.1.3 配色 ／ 064
2.1.4 組件 ／ 066
2.2 適配 ／ 068
2.2.1 像素與分辨率 ／ 068
2.2.2 適配原則 ／ 070
2.2.3 全面屏手機(jī)適配 ／ 072
2.2.4 小結(jié) ／ 074
2.3 手勢(shì) ／ 076
2.3.1 “拇指法則” ／ 077
2.3.2 功能可見(jiàn)性 ／ 078
2.3.3 滑動(dòng)優(yōu)先 ／ 081
2.3.4 場(chǎng)景 ／ 083
2.4 異常場(chǎng)景 ／ 086
2.4.1 網(wǎng)絡(luò)故障 ／ 086
2.4.2 空頁(yè)面 ／ 094
2.4.3 超越臨界值 ／ 098

第 3 章 元素 ／ 099
3.1 色彩 ／ 100
3.1.1 為什么要配色 ／ 100
3.1.2 配色規(guī)范 ／ 108
3.2 布局 ／ 112
3.2.1 視覺(jué)吸引力 ／ 113
3.2.2 可拓展性 ／ 114
3.2.3 信息量 ／ 117
3.3 文字 ／ 119
3.3.1 標(biāo)題類文字 ／ 119
3.3.2 正文類文字 ／ 121
3.3.3 提示類文字 ／ 121
3.3.4 交互類文字 ／ 122
3.3.5 文案的力量 ／ 124
3.4 圖標(biāo) ／ 127
3.4.1 可識(shí)別性 ／ 127
3.4.2 網(wǎng)格 ／ 127
3.4.3 視覺(jué)統(tǒng)一 ／ 129
3.5 按鈕 ／ 130
3.5.1 形狀 ／ 130
3.5.2 填充 ／ 132
3.5.3 內(nèi)容 ／ 135
3.5.4 狀態(tài) ／ 135
3.5.5 按鈕組 ／ 137
3.6 間距 ／ 140
3.6.1 塊內(nèi)間距和塊外間距 ／ 140
3.6.2 間距與分割線 ／ 142
3.6.3 間距的替代品 ／ 143
3.6.4 慎用間距 ／ 144
3.7 插畫 ／ 146
3.7.1 提升信息傳達(dá)效率 ／ 146
3.7.2 插畫 or 圖像 ／ 147
3.7.3 尺寸比例 ／ 147
3.8 動(dòng)畫 ／ 151
3.8.1 引導(dǎo) ／ 151
3.8.2 吸引用戶的注意力 ／ 153
3.8.3 轉(zhuǎn)場(chǎng)過(guò)渡 ／ 154
3.8.4 對(duì)“花瓶”說(shuō)“不” ／ 154

第 4 章 體系 ／ 157
4.1 導(dǎo)航體系 ／ 158
4.1.1 基本元素 ／ 158
4.1.2 組合樣式 ／ 160
4.1.3 容器 ／ 163
4.2 搜索功能 ／ 166
4.2.1 搜索入口 ／ 167
4.2.2 信息錄入 ／ 170
4.2.3 搜索結(jié)果 ／ 173
4.3 返回功能 ／ 176
4.3.1 兩種返回 ／ 176
4.3.2 返回路徑 ／ 178
4.3.3 手勢(shì) ／ 180
4.4 反饋機(jī)制 ／ 183
4.4.1 為什么要反饋 ／ 183
4.4.2 實(shí)時(shí)性 ／ 184
4.4.3 自身反饋 ／ 186
4.4.4 輕量化 ／ 187
4.4.5 反饋的種類 ／ 189
4.5 分享功能 ／ 194
4.5.1 動(dòng)機(jī) ／ 194
4.5.2 能力 ／ 195
4.5.3 觸發(fā)器 ／ 197
4.5.4 載體 ／ 198
4.6 引導(dǎo)頁(yè) ／ 200
4.6.1 啟動(dòng)頁(yè)、引導(dǎo)頁(yè)和開(kāi)屏廣告 ／ 200
4.6.2 引導(dǎo)頁(yè)設(shè)計(jì)要素 ／ 202
4.6.3 不只是引導(dǎo)頁(yè) ／ 204
4.7 頂部欄 ／ 206
4.7.1 去標(biāo)題化 ／ 206
4.7.2 可點(diǎn)擊 ／ 208
4.7.3 背景色 ／ 209
4.7.4 導(dǎo)航欄 ／ 212
4.7.5 隱藏 ／ 213

第 5 章 組件 ／ 215
5.1 彈框 ／ 216
5.1.1 模態(tài)彈框 ／ 216
5.1.2 非模態(tài)彈框 ／ 222
5.1.3 彈框體系的建立 ／ 226
5.2 表單 ／ 228
5.2.1 標(biāo)簽 ／ 228
5.2.2 輸入框 ／ 231
5.2.3 容錯(cuò)性設(shè)計(jì) ／ 232
5.2.4 按鈕 ／ 234
5.3 tab ／ 238
5.3.1 位置 ／ 238
5.3.2 狀態(tài) ／ 241
5.3.3 使用場(chǎng)景 ／ 243
5.3.4 tab 與 Segment Control ／ 244
5.4 標(biāo)記系統(tǒng) ／ 246
5.4.1 角標(biāo) ／ 246
5.4.2 標(biāo)簽 ／ 247
5.4.3 紅點(diǎn) ／ 248
5.4.4 印章 ／ 249
5.4.5 場(chǎng)景和層級(jí) ／ 250

5.5 信息錄入 ／ 252
5.5.1 列表 ／ 252
5.5.2 單選按鈕 ／ 253
5.5.3 開(kāi)關(guān) ／ 255
5.5.4 計(jì)數(shù)器和滑塊 257