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

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

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

第3章 交互設(shè)計的理念與方法027
3.1　前田約翰（John Maeda）的10個精簡定律028
3.1.1　縮減028
3.1.2　組織與安排029
3.1.3　差異029
3.1.4　感情030
3.1.5　信任031
3.1.6　時間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è)計的8大黃金法則034
3.2.1　一致性034
3.2.2　常用用戶使用快捷操作034
3.2.3　“完結(jié)”設(shè)計034
3.2.4　提供有用信息的反饋035
3.2.5　提供簡單的錯誤操作的解決方案035
3.2.6　允許撤銷操作035
3.2.7　給用戶掌控感035
3.2.8　減少短時記憶負擔035
3.2.9　本·施耐德的8大黃金法則在蘋果產(chǎn)品設(shè)計中的應(yīng)用036
3.3　交互設(shè)計的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　個性化051
3.3.8　脆弱環(huán)節(jié)053
3.4　成功的交互設(shè)計要縝密考量的5個“W”因子053
3.4.1　Who——給誰用054
3.4.2　Why——為何用055
3.4.3　Where——在哪里用056
3.4.4　When——何時使用057
3.4.5　What——如何用058

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

第5章 交互設(shè)計的心理學(xué)083
5.1　交互設(shè)計的5個認知因素084
5.1.1　感知因素084
5.1.2　視覺因素085
5.1.3　注意因素086
5.1.4　記憶因素087
5.1.5　思維因素088
5.2　記憶與交互設(shè)計089
5.2.1　記憶的基本類型089
5.2.2　2個記憶定律091
5.2.3　記憶特點與交互設(shè)計原則093
5.2.4　心智模型096
5.2.5　創(chuàng)造利于記憶的用戶體驗的7種訣竅099
5.3　affordance——交互設(shè)計界最夯的字103
5.4　產(chǎn)品體驗設(shè)計的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　圖式理論的要點125
5.5.3　圖式理論有助于提升游戲的趣味性126
5.6　普拉切克的情緒心理進化論129
5.7　評估交互設(shè)計三個“E”指標131
5.7.1　Effective131
5.7.2　Easy134
5.7.3　Enjoyable140
5.8　障礙設(shè)計的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個有效方法151
6.2.1　用戶觀察151
6.2.2　問卷153
6.2.3　面談155
6.2.4　實地調(diào)查156
6.2.5　知覺地圖156
6.2.6　焦點小組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　眼動追蹤177
6.2.18　應(yīng)用型用戶故事地圖178

第7章 交互設(shè)計的視覺界面設(shè)計183
7.1　視覺界面設(shè)計概述185
7.1.1　視覺設(shè)計的過程185
7.1.2　符號學(xué)相關(guān)知識187
7.1.3　視覺界面設(shè)計的7個組成要素190
7.1.4　視覺設(shè)計元素的整合194
7.2　版面編排197
7.2.1　版面編排的設(shè)計要點197
7.2.2　視覺界面排版設(shè)計4大原則204
7.2.3　案例Facebook改版前后的視覺界面設(shè)計對比206
7.3　文案211
7.3.1　交互文案設(shè)計的3個原則212
7.3.2　微文案的設(shè)計要點214
7.4　字體218
7.4.1　常用的幾種字體219
7.4.2　具有戲劇效果的5種字體222
7.4.3　常用的字號226
7.4.4　常用的字體顏色229
7.4.5　字體細節(jié)設(shè)計策略229
7.5　色彩233
7.5.1　色彩在交互中的作用233
7.5.2　交互設(shè)計中的色彩印象237
7.5.3　用戶界面交互設(shè)計的配色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è)計268
7.7.1　信息圖形設(shè)計概述268
7.7.2　信息圖形設(shè)計的原因269
7.7.3　信息圖形的分類271
7.7.4　好的信息圖形設(shè)計的特點274
7.8　動效設(shè)計277
7.8.1　動效的概述277
7.8.2　動效的功能277
7.8.3　動效體驗的12條原則282
7.8.4　動效設(shè)計的四種趨勢294
7.9　隱喻300
7.9.1　隱喻的概述300
7.9.2　文案中的隱喻300
7.9.3　設(shè)計中的隱喻301
7.9.4　隱喻如何應(yīng)用301
7.9.5　隱喻的學(xué)習(xí)303
7.10　應(yīng)用在視覺界面設(shè)計中的10個用戶心理學(xué)原理304
7.10.1　80/20規(guī)則304
7.10.2　3秒原則307
7.10.3　防錯原則307
7.10.4　費茲定律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　認知負荷原理321
7.11　視錯覺在交互設(shè)計中的應(yīng)用322
7.11.1　視錯覺的概念322
7.11.2　經(jīng)典視錯覺與交互設(shè)計322
7.11.3　視錯覺在版面設(shè)計中的應(yīng)用336
7.11.4　格式塔理論338

第8章 網(wǎng)站UI交互設(shè)計355
8.1　網(wǎng)頁基本概念356
8.2　網(wǎng)站UI設(shè)計原則356
8.2.1　以用戶為中心356
8.2.2　視覺美觀357
8.2.3　主題明確357
8.2.4　內(nèi)容與形式統(tǒng)一361
8.2.5　有機的整體362
8.3　網(wǎng)站UI版式設(shè)計的形式美363
8.3.1　主次關(guān)系363
8.3.2　虛實對比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交互細節(jié)設(shè)計372
8.4.1　登錄頁372
8.4.2　“關(guān)于我們”375
8.4.3　彈窗376
8.4.4　404頁面384

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

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

參考文獻422