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

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

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

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

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

1.2　網(wǎng)站與用戶體驗(yàn)設(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　基于用戶體驗(yàn)的網(wǎng)站設(shè)計原則　10

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

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

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

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

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

1.4　用戶體驗(yàn)設(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　用戶體驗(yàn)設(shè)計的一般流程　23

1.6　本章小結(jié)　24

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

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

2.1.1　信息架構(gòu)　26

2.1.2　交互設(shè)計　30

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

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

2.2.1　用戶體驗(yàn)的 5個層面　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　對需求進(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　章 視覺體驗(yàn)要素

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)頁動畫的用戶體驗(yàn)原則　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　章 交互體驗(yàn)要素

4.1　可用性設(shè)計　89

4.1.1　什么是可用性　89

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

4.2　表單的交互體驗(yàn)設(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)站搜索的交互體驗(yàn)設(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　文字交互體驗(yàn)設(shè)計　109

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

4.4.2　常見文字交互方式　110

4.4.3　超鏈接文字交互　112

4.5　按鈕交互體驗(yàn)設(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)站頁面中其他交互體驗(yàn)細(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)容體驗(yàn)要素

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

5.1.1　網(wǎng)站結(jié)構(gòu)對用戶體驗(yàn)的影響　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　章 情感體驗(yàn)要素

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

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

6.1.2　基于設(shè)計心理學(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è)計方法　164

6.2.4　用戶體驗(yàn)的經(jīng)驗(yàn)設(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è)計中的美感體驗(yàn)　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　章 移動端用戶體驗(yàn)

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

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

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

7.1.3　移動端與PC 端不同的交互方式　198

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

7.1.5　移動端設(shè)計流程　199

7.2　移動端用戶體驗(yàn)設(shè)計　201

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

7.2.2　如何提升移動端應(yīng)用的用戶體驗(yàn)　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