圖解交互設(shè)計(jì)：UI設(shè)計(jì)師的必修課

第1章 從“惱人的交互設(shè)計(jì)”說起001
1.1　淋浴花灑和水龍頭之間的切換003
1.2　洗手間的標(biāo)志004
1.3　開關(guān)的一致性005
1.4　智能手機(jī)的接聽按鈕位置007
1.5　“確定”按鈕008

第2章 交互設(shè)計(jì)理論概述011
2.1　交互設(shè)計(jì)的“初心”012
2.1.1　交互設(shè)計(jì)的前世012
2.1.2　交互設(shè)計(jì)的今生015
2.2　與交互設(shè)計(jì)相關(guān)的一些基本概念017
2.2.1　交互設(shè)計(jì)的概念017
2.2.2　交互設(shè)計(jì)體系018
2.2.3　UE——用戶體驗(yàn)設(shè)計(jì)019
2.2.4　interaction——交互設(shè)計(jì)020
2.2.5　HCI——人機(jī)交互021
2.2.6　UI——用戶界面022
2.3　交互系統(tǒng)的5個(gè)要素024
2.3.1　用戶025
2.3.2　行為和目標(biāo)025
2.3.3　媒介026
2.3.4　場景026

第3章 交互設(shè)計(jì)的理念與方法027
3.1　前田約翰（John Maeda）的10個(gè)精簡定律028
3.1.1　縮減028
3.1.2　組織與安排029
3.1.3　差異029
3.1.4　感情030
3.1.5　信任031
3.1.6　時(shí)間031
3.1.7　學(xué)習(xí)032
3.1.8　失敗033
3.1.9　脈絡(luò)033
3.1.10　唯一033
3.2　本·施耐德（Ben Shneiderman）界面交互設(shè)計(jì)的8大黃金法則034
3.2.1　一致性034
3.2.2　常用用戶使用快捷操作034
3.2.3　“完結(jié)”設(shè)計(jì)034
3.2.4　提供有用信息的反饋035
3.2.5　提供簡單的錯(cuò)誤操作的解決方案035
3.2.6　允許撤銷操作035
3.2.7　給用戶掌控感035
3.2.8　減少短時(shí)記憶負(fù)擔(dān)035
3.2.9　本·施耐德的8大黃金法則在蘋果產(chǎn)品設(shè)計(jì)中的應(yīng)用036
3.3　交互設(shè)計(jì)的8大策略支柱039
3.3.1　制約040
3.3.2　反饋042
3.3.3　關(guān)聯(lián)對應(yīng)044
3.3.4　能見度046
3.3.5　慣例048
3.3.6　一致性050
3.3.7　個(gè)性化051
3.3.8　脆弱環(huán)節(jié)053
3.4　成功的交互設(shè)計(jì)要縝密考量的5個(gè)“W”因子053
3.4.1　Who——給誰用054
3.4.2　Why——為何用055
3.4.3　Where——在哪里用056
3.4.4　When——何時(shí)使用057
3.4.5　What——如何用058

第4章 用戶體驗(yàn)設(shè)計(jì)061
4.1　用戶體驗(yàn)設(shè)計(jì)的概念062
4.2　用戶體驗(yàn)設(shè)計(jì)的4個(gè)基礎(chǔ)062
4.2.1　獨(dú)特性063
4.2.2　可實(shí)現(xiàn)性066
4.2.3　關(guān)聯(lián)066
4.2.4　空間066
4.3　用戶體驗(yàn)設(shè)計(jì)的5個(gè)層面067
4.3.1　用戶體驗(yàn)設(shè)計(jì)的5個(gè)層面067
4.3.2　5個(gè)層面的關(guān)系069
4.3.3　需求和問題管理的3個(gè)要點(diǎn)071
4.3.4　案例　知乎App用戶體驗(yàn)設(shè)計(jì)層次分析071
4.4　用戶體驗(yàn)的衡量指標(biāo)078
4.4.1　行為忠誠派079
4.4.2　態(tài)度忠誠派079
4.4.3　綜合派081

第5章 交互設(shè)計(jì)的心理學(xué)083
5.1　交互設(shè)計(jì)的5個(gè)認(rèn)知因素084
5.1.1　感知因素084
5.1.2　視覺因素085
5.1.3　注意因素086
5.1.4　記憶因素087
5.1.5　思維因素088
5.2　記憶與交互設(shè)計(jì)089
5.2.1　記憶的基本類型089
5.2.2　2個(gè)記憶定律091
5.2.3　記憶特點(diǎn)與交互設(shè)計(jì)原則093
5.2.4　心智模型096
5.2.5　創(chuàng)造利于記憶的用戶體驗(yàn)的7種訣竅099
5.3　affordance——交互設(shè)計(jì)界最夯的字103
5.4　產(chǎn)品體驗(yàn)設(shè)計(jì)的3大心理效應(yīng)105
5.4.1　鳥籠效應(yīng)105
5.4.2　福格行為模型106
5.4.3　心流理論108
5.4.4　沉浸感119
5.5　巴萊特的圖式理論124
5.5.1　圖式理論124
5.5.2　圖式理論的要點(diǎn)125
5.5.3　圖式理論有助于提升游戲的趣味性126
5.6　普拉切克的情緒心理進(jìn)化論129
5.7　評估交互設(shè)計(jì)三個(gè)“E”指標(biāo)131
5.7.1　Effective131
5.7.2　Easy134
5.7.3　Enjoyable140
5.8　障礙設(shè)計(jì)的4種方法142
5.8.1　可以有效組織用戶思考的障礙143
5.8.2　幫助用戶更好地學(xué)習(xí)技能的障礙143
5.8.3　能讓用戶感覺更好的障礙144
5.8.4　對質(zhì)量有提升的障礙145

第6章 用戶需求研究147
6.1　用戶148
6.1.1　用戶研究的目的148
6.1.2　用戶分類148
6.1.3　用戶特征150
6.2　獲取用戶信息的18個(gè)有效方法151
6.2.1　用戶觀察151
6.2.2　問卷153
6.2.3　面談155
6.2.4　實(shí)地調(diào)查156
6.2.5　知覺地圖156
6.2.6　焦點(diǎn)小組158
6.2.7　親和圖159
6.2.8　拼貼161
6.2.9　關(guān)鍵事件法163
6.2.10　文化探測164
6.2.11　用戶模型165
6.2.12　場景描述170
6.2.13　故事板171
6.2.14　情緒板172
6.2.15　期望值測試173
6.2.16　卡片分類法175
6.2.17　眼動(dòng)追蹤177
6.2.18　應(yīng)用型用戶故事地圖178

第7章 交互設(shè)計(jì)的視覺界面設(shè)計(jì)183
7.1　視覺界面設(shè)計(jì)概述185
7.1.1　視覺設(shè)計(jì)的過程185
7.1.2　符號(hào)學(xué)相關(guān)知識(shí)187
7.1.3　視覺界面設(shè)計(jì)的7個(gè)組成要素190
7.1.4　視覺設(shè)計(jì)元素的整合194
7.2　版面編排197
7.2.1　版面編排的設(shè)計(jì)要點(diǎn)197
7.2.2　視覺界面排版設(shè)計(jì)4大原則204
7.2.3　案例Facebook改版前后的視覺界面設(shè)計(jì)對比206
7.3　文案211
7.3.1　交互文案設(shè)計(jì)的3個(gè)原則212
7.3.2　微文案的設(shè)計(jì)要點(diǎn)214
7.4　字體218
7.4.1　常用的幾種字體219
7.4.2　具有戲劇效果的5種字體222
7.4.3　常用的字號(hào)226
7.4.4　常用的字體顏色229
7.4.5　字體細(xì)節(jié)設(shè)計(jì)策略229
7.5　色彩233
7.5.1　色彩在交互中的作用233
7.5.2　交互設(shè)計(jì)中的色彩印象237
7.5.3　用戶界面交互設(shè)計(jì)的配色243
7.6　圖片262
7.6.1　圖片的位置262
7.6.2　圖片的數(shù)量262
7.6.3　圖片的面積264
7.6.4　圖片的組合265
7.6.5　圖片與文字的組合267
7.7　信息圖形設(shè)計(jì)268
7.7.1　信息圖形設(shè)計(jì)概述268
7.7.2　信息圖形設(shè)計(jì)的原因269
7.7.3　信息圖形的分類271
7.7.4　好的信息圖形設(shè)計(jì)的特點(diǎn)274
7.8　動(dòng)效設(shè)計(jì)277
7.8.1　動(dòng)效的概述277
7.8.2　動(dòng)效的功能277
7.8.3　動(dòng)效體驗(yàn)的12條原則282
7.8.4　動(dòng)效設(shè)計(jì)的四種趨勢294
7.9　隱喻300
7.9.1　隱喻的概述300
7.9.2　文案中的隱喻300
7.9.3　設(shè)計(jì)中的隱喻301
7.9.4　隱喻如何應(yīng)用301
7.9.5　隱喻的學(xué)習(xí)303
7.10　應(yīng)用在視覺界面設(shè)計(jì)中的10個(gè)用戶心理學(xué)原理304
7.10.1　80/20規(guī)則304
7.10.2　3秒原則307
7.10.3　防錯(cuò)原則307
7.10.4　費(fèi)茲定律309
7.10.5　操縱定律312
7.10.6　泰思勒定律315
7.10.7　奧卡姆剃刀原理317
7.10.8　馮·雷斯托夫效應(yīng)320
7.10.9　系列位置效應(yīng)320
7.10.10　認(rèn)知負(fù)荷原理321
7.11　視錯(cuò)覺在交互設(shè)計(jì)中的應(yīng)用322
7.11.1　視錯(cuò)覺的概念322
7.11.2　經(jīng)典視錯(cuò)覺與交互設(shè)計(jì)322
7.11.3　視錯(cuò)覺在版面設(shè)計(jì)中的應(yīng)用336
7.11.4　格式塔理論338

第8章 網(wǎng)站UI交互設(shè)計(jì)355
8.1　網(wǎng)頁基本概念356
8.2　網(wǎng)站UI設(shè)計(jì)原則356
8.2.1　以用戶為中心356
8.2.2　視覺美觀357
8.2.3　主題明確357
8.2.4　內(nèi)容與形式統(tǒng)一361
8.2.5　有機(jī)的整體362
8.3　網(wǎng)站UI版式設(shè)計(jì)的形式美363
8.3.1　主次關(guān)系363
8.3.2　虛實(shí)對比364
8.3.3　比例尺度365
8.3.4　對稱與均衡365
8.3.5　對比與調(diào)和366
8.3.6　節(jié)奏和韻律367
8.3.7　量感369
8.3.8　空間感370
8.3.9　尺度感371
8.4　網(wǎng)站UI交互細(xì)節(jié)設(shè)計(jì)372
8.4.1　登錄頁372
8.4.2　“關(guān)于我們”375
8.4.3　彈窗376
8.4.4　404頁面384

第9章 移動(dòng)端交互設(shè)計(jì)387
9.1　移動(dòng)UI388
9.2　從桌面端到移動(dòng)端的內(nèi)容遷移時(shí)用戶體驗(yàn)的優(yōu)化388
9.2.1　每屏只完成一項(xiàng)任務(wù)388
9.2.2　精簡并優(yōu)化導(dǎo)航體系389
9.2.3　基于搜索引擎的設(shè)計(jì)模式389
9.2.4　更大的字體390
9.2.5　意義清晰的微文案390
9.2.6　去掉不必要的特效391
9.2.7　尺寸適配391
9.3　App的UI交互設(shè)計(jì)392
9.3.1　App的UI版式設(shè)計(jì)393
9.3.2　App交互細(xì)節(jié)設(shè)計(jì)案例404

第10章 交互設(shè)計(jì)團(tuán)隊(duì)407
10.1　交互設(shè)計(jì)師的工作職責(zé)408
10.1.1　需求分析階段409
10.1.2　交互設(shè)計(jì)階段410
10.1.3　視覺設(shè)計(jì)階段411
10.1.4　開發(fā)與測試驗(yàn)收階段412
10.1.5　搜集用戶反饋階段412
10.2　交互設(shè)計(jì)師必備素質(zhì)412
10.2.1　能力素質(zhì)要求412
10.2.2　設(shè)計(jì)體驗(yàn)感412
10.2.3　專注與激情413
10.2.4　團(tuán)隊(duì)協(xié)作415
10.2.5　利用新技術(shù)415
10.3　設(shè)計(jì)記錄415
10.4　交互設(shè)計(jì)師要知道的問題清單417
10.4.1　召集開局會(huì)議時(shí)417
10.4.2　對利益關(guān)系人訪談時(shí)418
10.4.3　用戶調(diào)研時(shí)418
10.4.4　用戶測試時(shí)419
10.4.5　設(shè)計(jì)評審時(shí)420
10.4.6　接受利益關(guān)系人的反饋時(shí)421

參考文獻(xiàn)422