圖書簡介
該書主要介紹如何撰寫網頁內容和如何布局網頁元素。為網站內容的創建和修改提供了相應的策略、過程和方法，幫助設計人員對網站內容進行計畫、組織、撰寫、設計和測試，並提高網頁易訪問性，從而吸引用戶瀏覽網站。
本書適合網頁內容編寫人員、網頁設計人員等參考。
譯者簡介
王冬妮，可用性工程師，現從事產品設計流程及可用性工程方法的研究工作。現對以用戶為中心的軟體產品工程的實踐頗感興趣，正致力於嘗試與體驗在產品工程的各個階段將用戶體驗工作與其他工作相互銜接與融合。
目錄
推薦序一
推薦序二
推薦序三
推薦序四
譯者序
序
致謝
作譯者簡介
第1章 內容！內容！內容！ 1
人們是衝著“內容”而訪問網站的 1
用戶在網上通常是瀏覽和找尋 2
用戶會在網上閱讀，但是 2
他們不會閱讀太多內容，因為 3
什麼是有效的網站內容 3
優秀的網站內容像在與人對話 3
優秀的網站內容可以解答人們的疑問 4
優秀的網站內容可以讓人們從網站中
汲取信息，並不斷前行 4
本書簡介 5
本書在講撰寫和設計，不談技術 5
實例豐富 5
“以用戶為中心的設計流程”是本書的基礎 5
可以從多處啟動該流程 5
可以按任何順序閱讀本書 6
加入我們的網上社區 6
第2章 用戶！用戶！用戶！ 7
我們都會對所讀內容作解釋 7
成功的內容編寫者會以他們的用戶為中心 7
了解用戶的七步曲 8
1. 列出主要用戶 8
2. 收集用戶信息 9
3. 列出每個用戶的關鍵特徵 9
關鍵短語或語錄 10
經驗和專業知識 10
性情 10
價值觀 11
技術水平 11
社會及文化背景 12
人口統計學信息（年齡、體能等） 12
4. 收集用戶的問題、任務和背景情況 12
5. 利用以上信息創建人物角色 13
人物角色應包含哪些信息 14
人物角色是怎樣和項目團隊合作的 15
6. 人物角色中要包含該角色的目標和任務 16
7. 利用這些信息為網站建立使用場景 16
場景讓你了解人們將發起的對話 17
場景有助於理解所有類型的用戶 17
網站中的每一部分都是在實現一個場景 18
場景能幫助你編寫出好的網站內容 18
第3章 好的開始：主頁 20
主頁—10分鐘“迷你”旅行 21
標識網站，建立品牌 21
設定網站的基調和特點 22
幫助人們了解網站主題 25
一個好的主頁可以迅速闡明網站主題 25
一個好的主頁主要由連結和簡短描述組成 26
允許人們立即執行關鍵任務 28
將人們急需的表單放在主頁上 29
表單一定要位於頁面的上方 29
將搜尋放在訪問者期望的位置—頁面頂部 30
不要讓用戶填寫他們不需要的表單 30
有效且高效地將每位用戶引向正確的路徑 31
使用用戶的語言 31
避免讓用戶猜測該點擊哪個連結 32
匯總：案例研究 32
從內容開始“自底向上”創建網站—
不只是從主頁開始“自頂向下”的方式 35
第4章 向目標行進：瀏覽路徑頁面 37
多數用戶是在查詢信息或完成任務，瀏覽路
徑頁面只是為了將他們引領到最終的目的地 38
人們不希望在查找過程中閱讀太多內容 38
瀏覽路徑頁面就像書的“目錄”一樣 41
有時，簡短的描述對用戶還是很有幫助的 42
瀏覽路徑頁面中或許應該忽略掉行銷類信息 44
路徑的順暢要比（合理的）點擊次數更重要 46
不要讓用戶思考 46
讓用戶不再需要後退按鈕 47
許多人首先會選擇點擊那些看上去比較
合適的選項 47
很多用戶會直接進入網站內的某個頁面 47
第5章 編寫的是信息，而非文檔 50
將較大的文檔分解 50
優先考慮按“主題”形式呈現內容，
而不是按“書本”的形式來呈現 51
將網頁內容劃分成一系列主題和子主題 52
確定一個頁面中要有多少內容 58
用戶訪問一次網站想要獲取多少信息？
信息之間如何關聯？ 58
網站提供的信息對用戶來說是否過多？
網頁有多長？ 60
頁面載入時間是多少？ 60
用戶是否會進行列印？他們想列印多少內容 61
PDF——到底用不用 61
是否應該使用PDF文檔來呈現網站內容 61
什麼時候應該使用PDF文檔 62
什麼時候不應該使用PDF文檔 62
當網站的易訪問性比較重要時 64
不採用PDF文檔還有其他三個原因 64
有些情況下，可以提供兩個內容版本
（網頁版和PDF版） 65
第6章 聚焦關鍵信息 67
6大原則幫你聚焦關鍵信息 68
1. 只提供用戶需要的內容 68
2. 我刪，我刪，我刪刪刪！ 70
3. 從關鍵信息入手，按倒金字塔邏輯進行
編寫 73
4. 拆分“文字牆” 77
5. 提供有用信息，打響網站品牌 79
所有網站都在推銷—推銷商品或自我推銷 80
網路主要採用“拉”技術，行銷則主要
基於“推”技術 80
把握“推銷時機”—至少要在用戶需求
得到部分滿足後才能開始推銷 80
6. 根據不同需要對內容分層 81
“從概要描述到完整信息”的分層方式 82
“從一個信息頁面到其他頁面中的更多信息”
的分層方式 82
“從頁面局部到簡短說明”的分層方式 83
以創新方式進行分層 84
第7章 設計易用的網頁 90
14條原則助你做出有益的設計 91
1. 選用合適的模式和對齊方式，使頁面
元素清晰明顯 91
2. 做設計計畫時，要對網站進行整體考慮 93
實例1：電子商務網站 94
實例2：資訊類網站 94
拿出一套“整體設計一致”的網站計畫 94
了解“從計畫到實施”的整個過程 95
在設計之初，就要不斷將內容與設計
相互融合 96
3. 使用模板 97
4. 有效使用留白，內容中要有專門的留白 97
了解“無心的留白”和“專門的留白” 97
網站內容中主要使用“專門的留白” 98
5. 小心造成“頁面已到底”的假象 100
6. 不要讓標題“漂蕩”在兩段文字之間 100
7. 文本內容不要居中顯示 101
8. 選擇一種無襯線字型作為默認字型 102
早年對於紙面的研究 103
對於網站的新近研究—雖然採用無襯線
字型的內容沒有在閱讀速度和理解程度上
勝出，但是人們還是喜歡無襯線字型 103
選擇一種易讀的無襯線字型 104
9. 設定字號時，要廣泛地考慮用戶及其使用
環境 104
設定的默認字號對用戶來說要足夠大 104
調整內容，以便能在足夠大的字號下，
將內容安放在僅有空間內 105
讓用戶選擇適合自己的字號 105
調整字號後，所有文字都應該隨之變化，
而不只是主內容區域中的文字發生變化 105
10. 行的默認長度要適中，且採用
“流動布局” 105
11. 不要用全大寫的方式編寫內容 107
12. 除了連結，不要在其他文字中使用下劃線；
斜體也要少用 107
13. 文字與背景的對比要鮮明 108
保持背景清晰，以便文字易讀 108
頁面中要使用淺色背景和深色文字 109
在深色背景中使用淺色文字時要慎重 109
14. 選擇顏色時要考慮到所有的用戶 110
考慮顏色的文化含意 110
檢查網站中的顏色，避免給色盲用戶造成
困難 110
匯總：案例研究 111
插文 新聞稿的“新生” 115
古老的、並一直延續著的新聞稿形式 115
什麼發生了變化 115
人們如何在網路中使用新聞稿 116
故事1：總結型新聞稿 116
故事2：內容概要型新聞稿 116
故事3：基本信息型新聞稿 116
故事4：致電了解新聞 116
我們該怎么做 117
這是否會帶來些變化 117
有什麼樣的變化 118
第8章 調整語句 120
調整語句的十大原則 120
1. 使用第二人稱“你”與用戶對話 121
保持一致，不要混合使用名詞和第二人稱
“你”來指代同一個人 122
使用合適的名詞來指代其他人 122
用祈使語句來編寫操作指南 123
使用“你”，而不是“他/她” 123
2. 要顯示出你是一個“人”，你們公司
是一群“人” 124
如果你在寫部落格，用“我”就可以 124
如果你在撰寫文章，用“我”也不錯 125
如果你為某公司編寫內容，可以使用
“我們” 125
有時用公司名稱來稱呼公司也很恰當 126
在問答內容中，用“我”和“你”來指
代網站用戶，用“我們”來指代公司 127
3. （多數時候）用主動語態進行寫作 128
4. 編寫簡單、短小、易懂的語句 130
非常短的句子也可以 130
不完整語句也可能很有效 130
即使在非常嚴肅的內容中，忙碌的用戶們
同樣也需要易於理解的語句 131
5. 去掉不必要的詞語 132
6. 在句子中為多餘的信息選擇合適的位置 132
7. 段落要保持簡短 134
在網站中，”一句一段”效果不錯 134
“列表”和“表格”形式或許比段落形式更好 134
8. 從上下文背景信息開始，按順序說明 135
9. 用動詞而不是名詞來表達行為 137
10. 使用網站用戶的語言 138
我們都是閱讀簡單、短小、通俗的詞語時
速度更快 139
考慮廣泛的網站客群 140
匯總 140
第9章 使用列表和表格 145
九條原則助你編寫出有用的網站列表 145
六條原則助你創建有用的網站表格 145
1. 使用列表，讓信息易於獲取 146
2. 保持大部分列表簡短 147
對於不熟悉的列表，保持簡短（5～10項）
很必要 147
如果是熟悉的列表，長一點也可以 147
3. 將列表格式化，讓其更好地發揮作用 148
去除列表內容介紹與列表之間的留白 148
在較長列表項之間設定間隔空間 149
換行要以內容文字的起始位置為基準，
而不是以列表符號為基準 149
4. 選用的列表符號要與網站特點相符 150
與同事合作，確定列表符號的風格 152
不要讓用戶猜想除了原始意義以外列表
符號是否還具有更多含意 152
5. 使用編號列表來呈現操作指南 153
6. 將段落分解為步驟 155
7. 即使再複雜的操作指南，也要以步驟
形式呈現 157
8. 保持各項列表內容的句子結構相同 158
9. 不要使用編號列表來呈現非步驟類信息，
這樣人們會把它們和步驟信息弄混 158
對比“列表”與“表格” 160
10. 使用表格來對比數字 160
11. 使用表格來呈現一組條件（如果……，
則……）句 161
12. 考慮用表格來回答問題 161
13. 仔細考慮表格最左邊一列中應放置
哪些內容 162
14. 表格要保持簡潔 163
考慮表格的寬度 164
考慮表格的長度 164
15. 網站中表格的格式要能讓用戶關注信息
而不是關注表格線 164
表格的各列和各行之間不要使用較粗
的線條 164
表格中的文字不要採用居中格式 165
第10章 使用標題分解文字內容 167
好的標題能夠以多種方式來幫助用戶 168
斟酌標題對內容編寫人員自身也有幫助 168
不要只是單純地將標題加到原有內容中 169
12條原則助你編寫有用的標題 169
1. 首先，用標題來概括內容大意 170
2. 當用戶帶著問題訪問網站時，就用他們
的問題作為標題 170
將用戶帶來的問題寫成標題 172
思考網站與用戶的對話，從用戶角度提出
問題 173
保持問題短小精悍 174
考慮用一個關鍵字開頭，以便用戶能夠
（而且是快速的）找到這些標題 175
3. 使用陳述性標題傳達關鍵信息 175
4. 使用行為短語作為操作指南中的標題 176
5. 少用名詞或名詞短語作為標題 177
6. 標題中要使用用戶的語言 180
7. 充分利用排比的效果 181
8. 標題層級不宜過深，（在頁面標題之下）
不要多於兩級 181
9. 標題的層級關係要明顯 182
10. 利用字號、粗體或顏色來區分標題
和內容 182
11. 使用頁內連結幫助用戶跳轉到所需主題 182
把頁內連結放在頁面標題的正下方 183
不要在用戶期望得到頁內連結的位置
放置頁間連結 183
不要在左側導航欄中放置頁內連結 183
從紙面向網路轉移時，要將標題設為
連結形式 184
12. 評估！閱讀標題看看你表達了什麼含義 184
插文 法規類信息同樣可以易於理解 186
讓信息清晰易讀 186
確保你的法規信息可以很好地列印出來 186
標題中要使用用戶語言 187
避免使用技術語言 187
避免使用過時的法律語言 188
將所有“清晰寫作”的技術都套用到
法規信息中 189
第11章 有效利用圖示 191
圖示可以用作不同目的 191
實物圖片 192
闡明概念或流程的圖片 197
圖表、圖解和地圖 200
心情圖片 202
有效使用圖示的9條通用原則 204
1. 不要讓人們猜測圖示的內容及呈現原因 204
2. 選擇合適的尺寸 204
小圖片一定要清晰 204
圖片不要占用過多的空間，那會將關鍵
內容擠到下方或旁邊 205
3. 用圖示來展示內容，而不是隱藏內容 205
4. 在人物圖片中，要顯示出人物的多樣性 206
展現企業團隊時，要顯示出多樣性，
但要誠實 206
代表網站用戶時，要進行廣泛的考慮 207
測試、測試、再測試 207
5. 不要讓內容看起來像廣告一樣 208
6. 不要使用閃爍的、滾動的、飄動的、遊走
的文字或圖片，它們會讓人感到困擾 209
不要讓文字滾動 209
當人們進入某個頁面後，就不要再變化
頁面內容 209
不要讓活靈活現的小動物、鳥、蝴蝶
等圖片在頁面中遊走 210
仔細權衡使用動畫形式的代價 210
7. 使用動畫是為了幫助用戶—不僅僅
是為了展示 210
8. 不要讓用戶等待純圖像頁面或Flash視頻
載入的過程 211
純圖像導入頁面會浪費用戶的時間 211
歡迎性內容太多，反而會使網站本身變得
不受歡迎 212
人們想要控制自己的線上體驗 213
出現在網站入口的視頻對一些人來說就是
障礙 214
9. 令圖示具有良好的易訪問性 214
替換文字要有意義 214
對於純裝飾性的圖片，使用“空”的替換
文字 215
第12章 編寫有意義的連結 217
12條原則助你製作有意義的連結 217
1. 不要把新項目或新產品的名字單獨
放到連結中 218
2. 重新考慮是否將文檔標題轉化為連結名稱 219
3. 預先想好，讓連結名稱與它所指向的
頁面標題相符 220
4. 在僅有空間內儘可能清楚地表達連結的
含義，如果需要還可以占用更多空間 222
5. 用行為短語作為動作類連結的名稱 223
6. 使用單個名詞時要慎重；較長的、更具
描述性的連結通常效果會更好 223
7. 如果需要，可以為連結添加一段簡短
描述—也可以重寫連結 225
8. 讓連結富有意義—不是點擊這裡，也
不只是更多 225
點擊這裡沒必要存在 225
更多是遠遠不夠的 227
9. 當網站中有多個相似連結時，要協調合併 228
10. 如果你想讓人們不間斷地閱讀信息，就
不要在其中嵌入連結 228
如果人們只是瀏覽，使用嵌入形式的鏈
接或許沒問題 228
但是如果你不想讓人們中途離題，最好將
連結放在主要文字的結尾、下方或旁邊 229
11. 如果連結開頭帶有列表符號，要讓列表
符號同樣可點擊 230
12. 讓未訪問連結和已訪問連結狀態相區分 230
未訪問連結所使用的顏色是連結專用色 231
換一種顏色來呈現已訪問過的連結 231
第13章 從草稿到最終網頁 233
把內容撰寫看作是不斷修改草稿的過程 233
檢查並編輯自己的寫作內容 234
閱讀所寫內容 234
檢查連結 234
檢查內容準確性 234
把網頁草稿收好，不要急於發布 235
大聲閱讀 236
使用詞典、手冊和風格指南 236
啟用拼寫檢查程式，但不要完全依賴它 237
讓同事和他人進行閱讀和評論 237
讓幾個人談談你的關鍵信息是什麼 237
讓其他人給你大聲閱讀 238
先分享部分內容草稿 238
線上收集反饋 238
關注反饋 238
團隊合作，共同制定統一的風格和基調 239
愉快地收起你的“自我” 239
與寫作專家或編輯合作 239
要有人為你掌控大局 239
要有人為你審稿 240
讓評審結果為你和網站用戶服務 240
組織有效的評審 241
從評審者那裡獲取有用信息 242
有效利用評審結果 242
插文 通過積累逐步創建出一套有
生命力的風格指南 245
使用風格指南來保持網站的一致性 245
不要重新創建風格指南 246
指定一個“負責人” 247
風格指南要易於創建、查找和使用 247
參考文獻 248
