第１章　用戶體驗(yàn)設(shè)計(jì)基礎(chǔ)

1.1　關(guān)于用戶體驗(yàn)設(shè)計(jì)　2

1.1.1　用戶體驗(yàn)概述　2

1.1.2　用戶體驗(yàn)設(shè)計(jì)的發(fā)展　2

1.1.3　用戶體驗(yàn)設(shè)計(jì)相關(guān)術(shù)語(yǔ)　3

1.2　網(wǎng)站與用戶體驗(yàn)設(shè)計(jì)　3

1.2.1　網(wǎng)站結(jié)構(gòu)　3

1.2.2　網(wǎng)站頁(yè)面的構(gòu)成元素　4

1.2.3　網(wǎng)站頁(yè)面的視覺層次　6

1.2.4　基于用戶體驗(yàn)的網(wǎng)站設(shè)計(jì)原則　10

1.3　用戶體驗(yàn)設(shè)計(jì)范疇及其特點(diǎn)　13

1.3.1　6 種基礎(chǔ)體驗(yàn)　13

1.3.2　用戶體驗(yàn)設(shè)計(jì)范疇　15

1.3.3　用戶體驗(yàn)設(shè)計(jì)特點(diǎn)　16

1.3.4　用戶體驗(yàn)設(shè)計(jì)的 5個(gè)著手點(diǎn)　17

1.4　用戶體驗(yàn)設(shè)計(jì)的原則　18

1.4.1　快速引導(dǎo)用戶找到需要的內(nèi)容　18

1.4.2　設(shè)置期望并提供反饋　20

1.4.3　基于人類工程學(xué)設(shè)計(jì)　21

1.4.4　頁(yè)面設(shè)計(jì)的一致性　21

1.4.5　及時(shí)提供錯(cuò)誤提示　21

1.4.6　幫助用戶記憶　22

1.4.7　考慮用戶的操作水平　22

1.4.8　為用戶提供實(shí)用的幫助　22

1.5　用戶體驗(yàn)設(shè)計(jì)的一般流程　23

1.6　本章小結(jié)　24

第　2章 用戶體驗(yàn)設(shè)計(jì)要素

2.1　用戶體驗(yàn)分類　26

2.1.1　信息架構(gòu)　26

2.1.2　交互設(shè)計(jì)　30

2.1.3　視覺形象設(shè)計(jì)　31

2.2　用戶體驗(yàn)的要素模型　32

2.2.1　用戶體驗(yàn)的 5個(gè)層面　33

2.2.2　用戶體驗(yàn)要素模型　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　對(duì)需求進(jìn)行分析篩選　38

2.4.3　確定需求優(yōu)先級(jí)　39

2.5　結(jié)構(gòu)層　39

2.5.1　交互設(shè)計(jì)　39

2.5.2　信息架構(gòu)　40

2.6　框架層　41

2.6.1　界面設(shè)計(jì)　41

2.6.2　導(dǎo)航設(shè)計(jì)　41

2.6.3　信息設(shè)計(jì)　42

2.6.4　線框圖　43

2.6.5　實(shí)戰(zhàn)分析：設(shè)計(jì)企業(yè)宣傳網(wǎng)站頁(yè)面　44

2.7　表現(xiàn)層　46

2.7.1　評(píng)估網(wǎng)站的視覺設(shè)計(jì)　46

2.7.2　對(duì)比　47

2.7.3　一致性　47

2.7.4　配色方案　48

2.7.5　字體選擇　49

2.7.6　實(shí)戰(zhàn)分析：設(shè)計(jì)運(yùn)動(dòng)服飾促銷頁(yè)面　50

2.8　本章小結(jié)　52

第3　章 視覺體驗(yàn)要素

3.1　網(wǎng)站圖標(biāo)　54

3.1.1　圖標(biāo)的應(yīng)用　54

3.1.2　圖標(biāo)的設(shè)計(jì)原則　55

3.2　網(wǎng)站Logo　56

3.2.1　網(wǎng)站常見Logo 表現(xiàn)形式　57

3.2.2　設(shè)計(jì)網(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)勢(shì)與劣勢(shì)　63

3.4　網(wǎng)站廣告　64

3.4.1　網(wǎng)站常見廣告形式　64

3.4.2　廣告應(yīng)該放置在頁(yè)面中哪些位置　66

3.4.3　需要什么樣式的廣告　67

3.4.4　做網(wǎng)頁(yè)廣告需要注意的問(wèn)題　68

3.5　多媒體元素　69

3.5.1　網(wǎng)頁(yè)動(dòng)畫的應(yīng)用類型　69

3.5.2　網(wǎng)頁(yè)動(dòng)畫的用戶體驗(yàn)原則　71

3.5.3　音頻元素的應(yīng)用　72

3.5.4　視頻元素的應(yīng)用　73

3.5.5　實(shí)戰(zhàn)分析：設(shè)計(jì)網(wǎng)店促銷活動(dòng)頁(yè)面　73

3.6　網(wǎng)站頁(yè)面的布局　75

3.6.1　符合用戶的瀏覽習(xí)慣　76

3.6.2　常見的網(wǎng)頁(yè)布局形式　76

3.6.3　網(wǎng)頁(yè)布局的要點(diǎn)　80

3.6.4　實(shí)戰(zhàn)分析：設(shè)計(jì)兒童網(wǎng)站　81

3.7　網(wǎng)站常見的設(shè)計(jì)風(fēng)格　83

3.8　本章小結(jié)　87

第4　章 交互體驗(yàn)要素

4.1　可用性設(shè)計(jì)　89

4.1.1　什么是可用性　89

4.1.2　可用性的表現(xiàn)　89

4.2　表單的交互體驗(yàn)設(shè)計(jì)　90

4.2.1　表單設(shè)計(jì)元素　90

4.2.2　登錄表單細(xì)節(jié)　90

4.2.3　注冊(cè)表單細(xì)節(jié)　93

4.2.4　登錄/ 注冊(cè)頁(yè)面需要注意的常見問(wèn)題　94

4.2.5　提交表單按鈕的視覺層次　97

4.2.6　提高表單可用性　98

4.2.7　實(shí)戰(zhàn)分析：設(shè)計(jì)簡(jiǎn)約登錄頁(yè)面　101

4.3　網(wǎng)站搜索的交互體驗(yàn)設(shè)計(jì)　103

4.3.1　創(chuàng)建合理的搜索功能　103

4.3.2　用戶需求的起點(diǎn)搜索入口　103

4.3.3　滿足用戶潛在需求搜索提示　105

4.3.4　用戶操作便捷化與簡(jiǎn)潔化搜索過(guò)程　108

4.3.5　用戶的目標(biāo)搜索結(jié)果　109

4.4　文字交互體驗(yàn)設(shè)計(jì)　109

4.4.1　關(guān)于文字交互　110

4.4.2　常見文字交互方式　110

4.4.3　超鏈接文字交互　112

4.5　按鈕交互體驗(yàn)設(shè)計(jì)　113

4.5.1　網(wǎng)頁(yè)按鈕的功能與表現(xiàn)　113

4.5.2　關(guān)于幽靈按鈕　114

4.5.3　如何設(shè)計(jì)出色的交互按鈕　115

4.5.4　實(shí)戰(zhàn)分析：設(shè)計(jì)手機(jī)宣傳網(wǎng)站　119

4.6　網(wǎng)站頁(yè)面中其他交互體驗(yàn)細(xì)節(jié)　121

4.6.1　在線咨詢　121

4.6.2　意見反饋　123

4.6.3　面包屑路徑　124

4.6.4　頁(yè)面刷新　126

4.7　本章小結(jié)　127

第5　章 內(nèi)容體驗(yàn)要素

5.1　網(wǎng)站結(jié)構(gòu)與欄目規(guī)劃　129

5.1.1　網(wǎng)站結(jié)構(gòu)對(duì)用戶體驗(yàn)的影響　129

5.1.2　網(wǎng)站的物理結(jié)構(gòu)與邏輯結(jié)構(gòu)　129

5.1.3　常規(guī)網(wǎng)站欄目設(shè)置存在的問(wèn)題　131

5.1.4　如何設(shè)置誘惑的網(wǎng)站欄目　132

5.2　網(wǎng)站內(nèi)容　134

5.2.1　內(nèi)容分類名稱簡(jiǎn)單明了　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)頁(yè)文字的5 個(gè)重要屬性　138

5.3.2　網(wǎng)頁(yè)文字使用規(guī)范　141

5.3.3　易讀性規(guī)范　142

5.3.4　在文字排版中應(yīng)用設(shè)計(jì)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ì)手機(jī)促銷頁(yè)面　154

5.6　本章小結(jié)　156

第6　章 情感體驗(yàn)要素

6.1　用戶認(rèn)知心理　158

6.1.1　設(shè)計(jì)心理學(xué)　158

6.1.2　基于設(shè)計(jì)心理學(xué)的原則　160

6.2　心流體驗(yàn)　163

6.2.1　什么是心流體驗(yàn)　163

6.2.2　兩種不同的心流體驗(yàn)類型　164

6.2.3　心流體驗(yàn)設(shè)計(jì)方法　164

6.2.4　用戶體驗(yàn)的經(jīng)驗(yàn)設(shè)計(jì)　168

6.3　沉浸感設(shè)計(jì)　168

6.3.1　什么是沉浸感　168

6.3.2　沉浸感設(shè)計(jì)原則　169

6.3.3　沉浸感在游戲網(wǎng)站中的應(yīng)用　171

6.3.4　實(shí)戰(zhàn)分析：設(shè)計(jì)休閑游戲網(wǎng)站　172

6.4　情感化設(shè)計(jì)　174

6.4.1　什么是情感化設(shè)計(jì)　174

6.4.2　網(wǎng)站情感化設(shè)計(jì)的3個(gè)層次　174

6.4.3　網(wǎng)站情感化設(shè)計(jì)方法　176

6.5　美感設(shè)計(jì)　178

6.5.1　什么是美感設(shè)計(jì)　178

6.5.2　交互設(shè)計(jì)中的美感體驗(yàn)　178

6.6　善用色彩情感　179

6.6.1　色彩屬性　179

6.6.2　網(wǎng)頁(yè)的基本配色方法　180

6.6.3　色彩的情感意義　182

6.6.4　色彩情感在網(wǎng)站設(shè)計(jì)中的應(yīng)用　185

6.6.5　網(wǎng)頁(yè)配色的常見問(wèn)題　188

6.6.6　實(shí)戰(zhàn)分析：設(shè)計(jì)數(shù)碼產(chǎn)品宣傳網(wǎng)站　191

6.7　本章小結(jié)　192

第7　章 移動(dòng)端用戶體驗(yàn)

7.1　了解移動(dòng)端用戶體驗(yàn)　194

7.1.1　移動(dòng)端與PC 端的區(qū)別　194

7.1.2　常見移動(dòng)設(shè)備尺寸標(biāo)準(zhǔn)　195

7.1.3　移動(dòng)端與PC 端不同的交互方式　198

7.1.4　移動(dòng)端用戶體驗(yàn)發(fā)展趨勢(shì)　198

7.1.5　移動(dòng)端設(shè)計(jì)流程　199

7.2　移動(dòng)端用戶體驗(yàn)設(shè)計(jì)　201

7.2.1　移動(dòng)端用戶體驗(yàn)設(shè)計(jì)的要點(diǎn)　201

7.2.2　如何提升移動(dòng)端應(yīng)用的用戶體驗(yàn)　203

7.2.3　實(shí)戰(zhàn)分析：設(shè)計(jì)移動(dòng)端應(yīng)用登錄界面　205

7.3　移動(dòng)端界面配色　207

7.3.1　色彩在移動(dòng)端界面設(shè)計(jì)中的作用　207

7.3.2　移動(dòng)端界面配色原則　208

7.4　移動(dòng)端界面設(shè)計(jì)　210

7.4.1　視覺設(shè)計(jì)　210

7.4.2　版式設(shè)計(jì)　211

7.4.3　界面元素設(shè)計(jì)　213

7.4.4　實(shí)戰(zhàn)分析：設(shè)計(jì)移動(dòng)端音樂App 界面　221

7.5　移動(dòng)端界面設(shè)計(jì)原則　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