圖解交互設計：UI設計師的必修課

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

第2章 交互設計理論概述011
2.1　交互設計的“初心”012
2.1.1　交互設計的前世012
2.1.2　交互設計的今生015
2.2　與交互設計相關的一些基本概念017
2.2.1　交互設計的概念017
2.2.2　交互設計體系018
2.2.3　UE——用戶體驗設計019
2.2.4　interaction——交互設計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章 交互設計的理念與方法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　學習032
3.1.8　失敗033
3.1.9　脈絡033
3.1.10　唯一033
3.2　本·施耐德（Ben Shneiderman）界面交互設計的8大黃金法則034
3.2.1　一致性034
3.2.2　常用用戶使用快捷操作034
3.2.3　“完結”設計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大黃金法則在蘋果產品設計中的應用036
3.3　交互設計的8大策略支柱039
3.3.1　制約040
3.3.2　反饋042
3.3.3　關聯(lián)對應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　成功的交互設計要縝密考量的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章 用戶體驗設計061
4.1　用戶體驗設計的概念062
4.2　用戶體驗設計的4個基礎062
4.2.1　獨特性063
4.2.2　可實現(xiàn)性066
4.2.3　關聯(lián)066
4.2.4　空間066
4.3　用戶體驗設計的5個層面067
4.3.1　用戶體驗設計的5個層面067
4.3.2　5個層面的關系069
4.3.3　需求和問題管理的3個要點071
4.3.4　案例　知乎App用戶體驗設計層次分析071
4.4　用戶體驗的衡量指標078
4.4.1　行為忠誠派079
4.4.2　態(tài)度忠誠派079
4.4.3　綜合派081

第5章 交互設計的心理學083
5.1　交互設計的5個認知因素084
5.1.1　感知因素084
5.1.2　視覺因素085
5.1.3　注意因素086
5.1.4　記憶因素087
5.1.5　思維因素088
5.2　記憶與交互設計089
5.2.1　記憶的基本類型089
5.2.2　2個記憶定律091
5.2.3　記憶特點與交互設計原則093
5.2.4　心智模型096
5.2.5　創(chuàng)造利于記憶的用戶體驗的7種訣竅099
5.3　affordance——交互設計界最夯的字103
5.4　產品體驗設計的3大心理效應105
5.4.1　鳥籠效應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　評估交互設計三個“E”指標131
5.7.1　Effective131
5.7.2　Easy134
5.7.3　Enjoyable140
5.8　障礙設計的4種方法142
5.8.1　可以有效組織用戶思考的障礙143
5.8.2　幫助用戶更好地學習技能的障礙143
5.8.3　能讓用戶感覺更好的障礙144
5.8.4　對質量有提升的障礙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　實地調查156
6.2.5　知覺地圖156
6.2.6　焦點小組158
6.2.7　親和圖159
6.2.8　拼貼161
6.2.9　關鍵事件法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　應用型用戶故事地圖178

第7章 交互設計的視覺界面設計183
7.1　視覺界面設計概述185
7.1.1　視覺設計的過程185
7.1.2　符號學相關知識187
7.1.3　視覺界面設計的7個組成要素190
7.1.4　視覺設計元素的整合194
7.2　版面編排197
7.2.1　版面編排的設計要點197
7.2.2　視覺界面排版設計4大原則204
7.2.3　案例Facebook改版前后的視覺界面設計對比206
7.3　文案211
7.3.1　交互文案設計的3個原則212
7.3.2　微文案的設計要點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é)設計策略229
7.5　色彩233
7.5.1　色彩在交互中的作用233
7.5.2　交互設計中的色彩印象237
7.5.3　用戶界面交互設計的配色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　信息圖形設計268
7.7.1　信息圖形設計概述268
7.7.2　信息圖形設計的原因269
7.7.3　信息圖形的分類271
7.7.4　好的信息圖形設計的特點274
7.8　動效設計277
7.8.1　動效的概述277
7.8.2　動效的功能277
7.8.3　動效體驗的12條原則282
7.8.4　動效設計的四種趨勢294
7.9　隱喻300
7.9.1　隱喻的概述300
7.9.2　文案中的隱喻300
7.9.3　設計中的隱喻301
7.9.4　隱喻如何應用301
7.9.5　隱喻的學習303
7.10　應用在視覺界面設計中的10個用戶心理學原理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　馮·雷斯托夫效應320
7.10.9　系列位置效應320
7.10.10　認知負荷原理321
7.11　視錯覺在交互設計中的應用322
7.11.1　視錯覺的概念322
7.11.2　經(jīng)典視錯覺與交互設計322
7.11.3　視錯覺在版面設計中的應用336
7.11.4　格式塔理論338

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

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

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

參考文獻422