本書針對網(wǎng)站用戶體驗的概念和設(shè)計要點(diǎn)進(jìn)行了深入的介紹和分析。全書共分為7章,從用戶體驗相關(guān)理論和設(shè)計基礎(chǔ)開始,逐步講解了用戶體驗設(shè)計的要素、視覺體驗要素、交互體驗要素、內(nèi)容體驗要素、情感體驗要素以及移動端的用戶體驗等專業(yè)知識。通過知識點(diǎn)的講解與商業(yè)案例分析相結(jié)合的方式,使用戶能夠更輕松地理解和應(yīng)用,培養(yǎng)讀者在網(wǎng)站用戶體驗設(shè)計方面分析問題和解決問題的能力。
什么是用戶體驗?用戶主要在乎什么樣的使用體驗?用戶體驗是心理需求還是功能需求?我想這些問題一定困擾著很多網(wǎng)站設(shè)計人員。
本書在借鑒國內(nèi)外交互設(shè)計和用戶體驗的前沿理念和實(shí)踐成果的基礎(chǔ)上,對用戶體驗設(shè)計進(jìn)行了全面而詳細(xì)的介紹。內(nèi)容涵蓋了網(wǎng)站用戶體驗設(shè)計的方方面面,全部章節(jié)均圍繞網(wǎng)站用戶體驗設(shè)計的主題進(jìn)行展開,并結(jié)合案例的分析講解,使讀者能夠更加容易理解,在了解用戶體驗設(shè)計基礎(chǔ)的同時,能夠綜合運(yùn)用所學(xué)內(nèi)容
本書作者編寫過多本設(shè)計類、前端開發(fā)類暢銷圖書,包括《7天精通Photoshop CS6 UI交互設(shè)計》、《網(wǎng)站用戶體驗設(shè)計全程揭秘》、《中文版Photoshop CS6完全自學(xué)一本通》等,重印多次,深受讀者好評。
第1章 用戶體驗設(shè)計基礎(chǔ)
1.1 關(guān)于用戶體驗設(shè)計 2
1.1.1 用戶體驗概述 2
1.1.2 用戶體驗設(shè)計的發(fā)展 2
1.1.3 用戶體驗設(shè)計相關(guān)術(shù)語 3
1.2 網(wǎng)站與用戶體驗設(shè)計 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)站設(shè)計原則 10
1.3 用戶體驗設(shè)計范疇及其特點(diǎn) 13
1.3.1 6 種基礎(chǔ)體驗 13
1.3.2 用戶體驗設(shè)計范疇 15
1.3.3 用戶體驗設(shè)計特點(diǎn) 16
1.3.4 用戶體驗設(shè)計的 5個著手點(diǎn) 17
1.4 用戶體驗設(shè)計的原則 18
1.4.1 快速引導(dǎo)用戶找到需要的內(nèi)容 18
1.4.2 設(shè)置期望并提供反饋 20
1.4.3 基于人類工程學(xué)設(shè)計 21
1.4.4 頁面設(shè)計的一致性 21
1.4.5 及時提供錯誤提示 21
1.4.6 幫助用戶記憶 22
1.4.7 考慮用戶的操作水平 22
1.4.8 為用戶提供實(shí)用的幫助 22
1.5 用戶體驗設(shè)計的一般流程 23
1.6 本章小結(jié) 24
第 2章 用戶體驗設(shè)計要素
2.1 用戶體驗分類 26
2.1.1 信息架構(gòu) 26
2.1.2 交互設(shè)計 30
2.1.3 視覺形象設(shè)計 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 對需求進(jìn)行分析篩選 38
2.4.3 確定需求優(yōu)先級 39
2.5 結(jié)構(gòu)層 39
2.5.1 交互設(shè)計 39
2.5.2 信息架構(gòu) 40
2.6 框架層 41
2.6.1 界面設(shè)計 41
2.6.2 導(dǎo)航設(shè)計 41
2.6.3 信息設(shè)計 42
2.6.4 線框圖 43
2.6.5 實(shí)戰(zhàn)分析:設(shè)計企業(yè)宣傳網(wǎng)站頁面 44
2.7 表現(xiàn)層 46
2.7.1 評估網(wǎng)站的視覺設(shè)計 46
2.7.2 對比 47
2.7.3 一致性 47
2.7.4 配色方案 48
2.7.5 字體選擇 49
2.7.6 實(shí)戰(zhàn)分析:設(shè)計運(yùn)動服飾促銷頁面 50
2.8 本章小結(jié) 52
第3 章 視覺體驗要素
3.1 網(wǎng)站圖標(biāo) 54
3.1.1 圖標(biāo)的應(yīng)用 54
3.1.2 圖標(biāo)的設(shè)計原則 55
3.2 網(wǎng)站Logo 56
3.2.1 網(wǎng)站常見Logo 表現(xiàn)形式 57
3.2.2 設(shè)計網(wǎng)站Logo 的一般流程 58
3.3 網(wǎng)站導(dǎo)航 60
3.3.1 網(wǎng)站導(dǎo)航的作用 60
3.3.2 網(wǎng)站中常見的導(dǎo)航形式 61
3.3.3 交互導(dǎo)航的優(yōu)勢與劣勢 63
3.4 網(wǎng)站廣告 64
3.4.1 網(wǎng)站常見廣告形式 64
3.4.2 廣告應(yīng)該放置在頁面中哪些位置 66
3.4.3 需要什么樣式的廣告 67
3.4.4 做網(wǎng)頁廣告需要注意的問題 68
3.5 多媒體元素 69
3.5.1 網(wǎng)頁動畫的應(yīng)用類型 69
3.5.2 網(wǎng)頁動畫的用戶體驗原則 71
3.5.3 音頻元素的應(yīng)用 72
3.5.4 視頻元素的應(yīng)用 73
3.5.5 實(shí)戰(zhàn)分析:設(shè)計網(wǎng)店促銷活動頁面 73
3.6 網(wǎng)站頁面的布局 75
3.6.1 符合用戶的瀏覽習(xí)慣 76
3.6.2 常見的網(wǎng)頁布局形式 76
3.6.3 網(wǎng)頁布局的要點(diǎn) 80
3.6.4 實(shí)戰(zhàn)分析:設(shè)計兒童網(wǎng)站 81
3.7 網(wǎng)站常見的設(shè)計風(fēng)格 83
3.8 本章小結(jié) 87
第4 章 交互體驗要素
4.1 可用性設(shè)計 89
4.1.1 什么是可用性 89
4.1.2 可用性的表現(xiàn) 89
4.2 表單的交互體驗設(shè)計 90
4.2.1 表單設(shè)計元素 90
4.2.2 登錄表單細(xì)節(jié) 90
4.2.3 注冊表單細(xì)節(jié) 93
4.2.4 登錄/ 注冊頁面需要注意的常見問題 94
4.2.5 提交表單按鈕的視覺層次 97
4.2.6 提高表單可用性 98
4.2.7 實(shí)戰(zhàn)分析:設(shè)計簡約登錄頁面 101
4.3 網(wǎng)站搜索的交互體驗設(shè)計 103
4.3.1 創(chuàng)建合理的搜索功能 103
4.3.2 用戶需求的起點(diǎn)搜索入口 103
4.3.3 滿足用戶潛在需求搜索提示 105
4.3.4 用戶操作便捷化與簡潔化搜索過程 108
4.3.5 用戶的目標(biāo)搜索結(jié)果 109
4.4 文字交互體驗設(shè)計 109
4.4.1 關(guān)于文字交互 110
4.4.2 常見文字交互方式 110
4.4.3 超鏈接文字交互 112
4.5 按鈕交互體驗設(shè)計 113
4.5.1 網(wǎng)頁按鈕的功能與表現(xiàn) 113
4.5.2 關(guān)于幽靈按鈕 114
4.5.3 如何設(shè)計出色的交互按鈕 115
4.5.4 實(shí)戰(zhàn)分析:設(shè)計手機(jī)宣傳網(wǎng)站 119
4.6 網(wǎng)站頁面中其他交互體驗細(xì)節(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)站欄目設(shè)置存在的問題 131
5.1.4 如何設(shè)置誘惑的網(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 在文字排版中應(yīng)用設(shè)計4原則 144
5.4 圖片排版技巧 146
5.4.1 圖片展示方式 147
5.4.2 圖片展示技巧 149
5.5 網(wǎng)站內(nèi)容編排技巧 150
5.5.1 突出文章標(biāo)題 151
5.5.2 合理使用導(dǎo)讀 151
5.5.3 使用數(shù)字加深用戶印象 152
5.5.4 圖文并茂的表現(xiàn)技巧 152
5.5.5 網(wǎng)站內(nèi)容編寫的其他技巧 153
5.5.6 實(shí)戰(zhàn)分析:設(shè)計手機(jī)促銷頁面 154
5.6 本章小結(jié) 156
第6 章 情感體驗要素
6.1 用戶認(rèn)知心理 158
6.1.1 設(shè)計心理學(xué) 158
6.1.2 基于設(shè)計心理學(xué)的原則 160
6.2 心流體驗 163
6.2.1 什么是心流體驗 163
6.2.2 兩種不同的心流體驗類型 164
6.2.3 心流體驗設(shè)計方法 164
6.2.4 用戶體驗的經(jīng)驗設(shè)計 168
6.3 沉浸感設(shè)計 168
6.3.1 什么是沉浸感 168
6.3.2 沉浸感設(shè)計原則 169
6.3.3 沉浸感在游戲網(wǎng)站中的應(yīng)用 171
6.3.4 實(shí)戰(zhàn)分析:設(shè)計休閑游戲網(wǎng)站 172
6.4 情感化設(shè)計 174
6.4.1 什么是情感化設(shè)計 174
6.4.2 網(wǎng)站情感化設(shè)計的3個層次 174
6.4.3 網(wǎng)站情感化設(shè)計方法 176
6.5 美感設(shè)計 178
6.5.1 什么是美感設(shè)計 178
6.5.2 交互設(shè)計中的美感體驗 178
6.6 善用色彩情感 179
6.6.1 色彩屬性 179
6.6.2 網(wǎng)頁的基本配色方法 180
6.6.3 色彩的情感意義 182
6.6.4 色彩情感在網(wǎng)站設(shè)計中的應(yīng)用 185
6.6.5 網(wǎng)頁配色的常見問題 188
6.6.6 實(shí)戰(zhàn)分析:設(shè)計數(shù)碼產(chǎn)品宣傳網(wǎng)站 191
6.7 本章小結(jié) 192
第7 章 移動端用戶體驗
7.1 了解移動端用戶體驗 194
7.1.1 移動端與PC 端的區(qū)別 194
7.1.2 常見移動設(shè)備尺寸標(biāo)準(zhǔn) 195
7.1.3 移動端與PC 端不同的交互方式 198
7.1.4 移動端用戶體驗發(fā)展趨勢 198
7.1.5 移動端設(shè)計流程 199
7.2 移動端用戶體驗設(shè)計 201
7.2.1 移動端用戶體驗設(shè)計的要點(diǎn) 201
7.2.2 如何提升移動端應(yīng)用的用戶體驗 203
7.2.3 實(shí)戰(zhàn)分析:設(shè)計移動端應(yīng)用登錄界面 205
7.3 移動端界面配色 207
7.3.1 色彩在移動端界面設(shè)計中的作用 207
7.3.2 移動端界面配色原則 208
7.4 移動端界面設(shè)計 210
7.4.1 視覺設(shè)計 210
7.4.2 版式設(shè)計 211
7.4.3 界面元素設(shè)計 213
7.4.4 實(shí)戰(zhàn)分析:設(shè)計移動端音樂App 界面 221
7.5 移動端界面設(shè)計原則 222
7.5.1 實(shí)用性 222
7.5.2 統(tǒng)一的色彩與風(fēng)格 223
7.5.3 合理的配色 223
7.5.4 規(guī)范的操作流程 224
7.5.5 視覺元素規(guī)范 224
7.6 本章小結(jié) 224