用戶體驗設計

第１章　用戶體驗設計基礎
1．1　關于用戶體驗設計　2
1．1．1　用戶體驗概述　2
1．1．2　用戶體驗設計的發(fā)展　2
1．1．3　用戶體驗設計相關術語　3
1．2　網(wǎng)站與用戶體驗設計　3
1．2．1　網(wǎng)站結(jié)構(gòu)　3
1．2．2　網(wǎng)站頁面的構(gòu)成元素　4
1．2．3　網(wǎng)站頁面的視覺層次　6
1．2．4　基于用戶體驗的網(wǎng)站設計原則　10
1．3　用戶體驗設計范疇及其特點　13
1．3．1　6 種基礎體驗　13
1．3．2　用戶體驗設計范疇　15
1．3．3　用戶體驗設計特點　16
1．3．4　用戶體驗設計的 5個著手點　17
1．4　用戶體驗設計的原則　18
1．4．1　快速引導用戶找到需要的內(nèi)容　18
1．4．2　設置期望并提供反饋　20
1．4．3　基于人類工程學設計　21
1．4．4　頁面設計的一致性　21
1．4．5　及時提供錯誤提示　21
1．4．6　幫助用戶記憶　22
1．4．7　考慮用戶的操作水平　22
1．4．8　為用戶提供實用的幫助　22
1．5　用戶體驗設計的一般流程　23
1．6　本章小結(jié)　24
第　2章 用戶體驗設計要素
2．1　用戶體驗分類　26
2．1．1　信息架構(gòu)　26
2．1．2　交互設計　30
2．1．3　視覺形象設計　31
2．2　用戶體驗的要素模型　32
2．2．1　用戶體驗的 5個層面　33
2．2．2　用戶體驗要素模型　35
2．3　戰(zhàn)略層　36
2．3．1　確定產(chǎn)品定位　36
2．3．2　了解用戶需求　37
2．4　范圍層　37
2．4．1　獲得需求　38
2．4．2　對需求進行分析篩選　38
2．4．3　確定需求優(yōu)先級　39
2．5　結(jié)構(gòu)層　39
2．5．1　交互設計　39
2．5．2　信息架構(gòu)　40
2．6　框架層　41
2．6．1　界面設計　41
2．6．2　導航設計　41
2．6．3　信息設計　42
2．6．4　線框圖　43
2．6．5　實戰(zhàn)分析：設計企業(yè)宣傳網(wǎng)站頁面　44
2．7　表現(xiàn)層　46
2．7．1　評估網(wǎng)站的視覺設計　46
2．7．2　對比　47
2．7．3　一致性　47
2．7．4　配色方案　48
2．7．5　字體選擇　49
2．7．6　實戰(zhàn)分析：設計運動服飾促銷頁面　50
2．8　本章小結(jié)　52
第3　章 視覺體驗要素
3．1　網(wǎng)站圖標　54
3．1．1　圖標的應用　54
3．1．2　圖標的設計原則　55
3．2　網(wǎng)站Logo　56
3．2．1　網(wǎng)站常見Logo 表現(xiàn)形式　57
3．2．2　設計網(wǎng)站Logo 的一般流程　58
3．3　網(wǎng)站導航　60
3．3．1　網(wǎng)站導航的作用　60
3．3．2　網(wǎng)站中常見的導航形式　61
3．3．3　交互導航的優(yōu)勢與劣勢　63
3．4　網(wǎng)站廣告　64
3．4．1　網(wǎng)站常見廣告形式　64
3．4．2　廣告應該放置在頁面中哪些位置　66
3．4．3　需要什么樣式的廣告　67
3．4．4　做網(wǎng)頁廣告需要注意的問題　68
3．5　多媒體元素　69
3．5．1　網(wǎng)頁動畫的應用類型　69
3．5．2　網(wǎng)頁動畫的用戶體驗原則　71
3．5．3　音頻元素的應用　72
3．5．4　視頻元素的應用　73
3．5．5　實戰(zhàn)分析：設計網(wǎng)店促銷活動頁面　73
3．6　網(wǎng)站頁面的布局　75
3．6．1　符合用戶的瀏覽習慣　76
3．6．2　常見的網(wǎng)頁布局形式　76
3．6．3　網(wǎng)頁布局的要點　80
3．6．4　實戰(zhàn)分析：設計兒童網(wǎng)站　81
3．7　網(wǎng)站常見的設計風格　83
3．8　本章小結(jié)　87
第4　章 交互體驗要素
4．1　可用性設計　89
4．1．1　什么是可用性　89
4．1．2　可用性的表現(xiàn)　89
4．2　表單的交互體驗設計　90
4．2．1　表單設計元素　90
4．2．2　登錄表單細節(jié)　90
4．2．3　注冊表單細節(jié)　93
4．2．4　登錄/ 注冊頁面需要注意的常見問題　94
4．2．5　提交表單按鈕的視覺層次　97
4．2．6　提高表單可用性　98
4．2．7　實戰(zhàn)分析：設計簡約登錄頁面　101
4．3　網(wǎng)站搜索的交互體驗設計　103
4．3．1　創(chuàng)建合理的搜索功能　103
4．3．2　用戶需求的起點——搜索入口　103
4．3．3　滿足用戶潛在需求——搜索提示　105
4．3．4　用戶操作便捷化與簡潔化——搜索過程　108
4．3．5　用戶的目標——搜索結(jié)果　109
4．4　文字交互體驗設計　109
4．4．1　關于文字交互　110
4．4．2　常見文字交互方式　110
4．4．3　超鏈接文字交互　112
4．5　按鈕交互體驗設計　113
4．5．1　網(wǎng)頁按鈕的功能與表現(xiàn)　113
4．5．2　關于幽靈按鈕　114
4．5．3　如何設計出色的交互按鈕　115
4．5．4　實戰(zhàn)分析：設計手機宣傳網(wǎng)站　119
4．6　網(wǎng)站頁面中其他交互體驗細節(jié)　121
4．6．1　在線咨詢　121
4．6．2　意見反饋　123
4．6．3　面包屑路徑　124
4．6．4　頁面刷新　126
4．7　本章小結(jié)　127
第5　章 內(nèi)容體驗要素
5．1　網(wǎng)站結(jié)構(gòu)與欄目規(guī)劃　129
5．1．1　網(wǎng)站結(jié)構(gòu)對用戶體驗的影響　129
5．1．2　網(wǎng)站的物理結(jié)構(gòu)與邏輯結(jié)構(gòu)　129
5．1．3　常規(guī)網(wǎng)站欄目設置存在的問題　131
5．1．4　如何設置“誘惑”的網(wǎng)站欄目　132
5．2　網(wǎng)站內(nèi)容　134
5．2．1　內(nèi)容分類名稱簡單明了　134
5．2．2　不同類型網(wǎng)站的內(nèi)容分類　134
5．2．3　網(wǎng)站內(nèi)容的豐富性和原創(chuàng)性　135
5．2．4　網(wǎng)站內(nèi)容的更新　136
5．3　文字內(nèi)容排版　138
5．3．1　網(wǎng)頁文字的5 個重要屬性　138
5．3．2　網(wǎng)頁文字使用規(guī)范　141
5．3．3　易讀性規(guī)范　142
5．3．4　在文字排版中應用設計4原則　144
5．4　圖片排版技巧　146
5．4．1　圖片展示方式　147
5．4．2　圖片展示技巧　149
5．5　網(wǎng)站內(nèi)容編排技巧　150
5．5．1　突出文章標題　151
5．5．2　合理使用導讀　151
5．5．3　使用數(shù)字加深用戶印象　152
5．5．4　圖文并茂的表現(xiàn)技巧　152
5．5．5　網(wǎng)站內(nèi)容編寫的其他技巧　153
5．5．6　實戰(zhàn)分析：設計手機促銷頁面　154
5．6　本章小結(jié)　156
第6　章 情感體驗要素
6．1　用戶認知心理　158
6．1．1　設計心理學　158
6．1．2　基于設計心理學的原則　160
6．2　心流體驗　163
6．2．1　什么是心流體驗　163
6．2．2　兩種不同的心流體驗類型　164
6．2．3　心流體驗設計方法　164
6．2．4　用戶體驗的經(jīng)驗設計　168
6．3　沉浸感設計　168
6．3．1　什么是沉浸感　168
6．3．2　沉浸感設計原則　169
6．3．3　沉浸感在游戲網(wǎng)站中的應用　171
6．3．4　實戰(zhàn)分析：設計休閑游戲網(wǎng)站　172
6．4　情感化設計　174
6．4．1　什么是情感化設計　174
6．4．2　網(wǎng)站情感化設計的3個層次　174
6．4．3　網(wǎng)站情感化設計方法　176
6．5　美感設計　178
6．5．1　什么是美感設計　178
6．5．2　交互設計中的美感體驗　178
6．6　善用色彩情感　179
6．6．1　色彩屬性　179
6．6．2　網(wǎng)頁的基本配色方法　180
6．6．3　色彩的情感意義　182
6．6．4　色彩情感在網(wǎng)站設計中的應用　185
6．6．5　網(wǎng)頁配色的常見問題　188
6．6．6　實戰(zhàn)分析：設計數(shù)碼產(chǎn)品宣傳網(wǎng)站　191
6．7　本章小結(jié)　192
第7　章 移動端用戶體驗
7．1　了解移動端用戶體驗　194
7．1．1　移動端與PC 端的區(qū)別　194
7．1．2　常見移動設備尺寸標準　195
7．1．3　移動端與PC 端不同的交互方式　198
7．1．4　移動端用戶體驗發(fā)展趨勢　198
7．1．5　移動端設計流程　199
7．2　移動端用戶體驗設計　201
7．2．1　移動端用戶體驗設計的要點　201
7．2．2　如何提升移動端應用的用戶體驗　203
7．2．3　實戰(zhàn)分析：設計移動端應用登錄界面　205
7．3　移動端界面配色　207
7．3．1　色彩在移動端界面設計中的作用　207
7．3．2　移動端界面配色原則　208
7．4　移動端界面設計　210
7．4．1　視覺設計　210
7．4．2　版式設計　211
7．4．3　界面元素設計　213
7．4．4　實戰(zhàn)分析：設計移動端音樂App 界面　221
7．5　移動端界面設計原則　222
7．5．1　實用性　222
7．5．2　統(tǒng)一的色彩與風格　223
7．5．3　合理的配色　223
7．5．4　規(guī)范的操作流程　224
7．5．5　視覺元素規(guī)范　224
7．6　本章小結(jié)　224