第一部分　初識網站設計　1

第1章　當你開始設計一個網站　3
涉及的角色　3
　商務人員和客戶　4
　產品經理和項目經理　4
　信息架構師　5
　視覺設計師　7
　內容編輯　9
　媒體專家　9
　前端開發人員　10
　程序員　10
準備開始　11
積累經驗　11

第2章　從概念到執行　13
第1階段：定義　13
　理解網站目標　14
　收集業務需求　15
　制作一份RFP　15
　構建項目計劃　16
第2階段：設計　16
　創建站點地圖　17
　制作線框圖　18
　用戶測試　19
　整合內容計劃　19
　構建“風格”　19
　從焦點人群中獲取建議　20
第3階段：開發　21
　開發模型　21
　內容開發　21
　媒體開發　22
　使用HTML和CSS構建表現層　23
　后端(Backend)開發　24
第4階段：部署　26
　質量保證　26
　發布日　28
第5階段：維護　28

第二部分　用戶友好的設計　31

第3章　針對正確的人群設計正確的網站　33
用戶是誰　34
　給客戶的問題清單　34
　角色視角　35
　用戶場景　36
為你的網站構造框架　36
　平衡業務需求和用戶需求　36
　分類和優化信息　36
　在優先級的基礎上建立導航集　38
創建站點地圖　40
　連線的藝術　42
　創建你自己的符號集　44
　齊心協力　46
　正式頁面索引　46
為重新設計的網站構建站點地圖　47
　解構一個網站　47
　完成站點地圖　48
制作市場推廣計劃　49
　線下推廣　49
　線上推廣　49

第4章　組織及導航頁面內容　55
頁面層規劃　56
　規劃內容板塊　56
　線框圖　57
在頁面中展示內容　59
　在線框圖中標注文字　59
　使用內容管理系統　60
　最大限度地利用空間　60
　為線框圖編寫注釋　63
了解樣式　65
　全局導航　65
　板塊導航　65
　留下一串面包屑　68
　結合導航技術　69
　使用圖形主題而不是借喻　70

第5章　網站用戶界面設計　73
交互設計　73
　創建用戶流程圖　74
　順其自然　75
視覺設計對可用性的影響　77
　提供懸停反饋　79
　設計外觀可交互的按鈕　79
　從日常生活中獲取線索　80
　元素的聚合與嵌套　81
　提供“你在這里”的反饋　82
　被高估的顏色編碼　82
　可點擊與不可點擊的差異　85
一致性就是一切　85
空間最大化　87

第6章　用戶測試：不需要穿白大褂　91
構建可供測試的原型　92
　創建可點擊的線框圖　92
　測試視覺設計　93
　為可用性測試創建可跳轉的HTML流程　95
為用戶測試做準備　98
　為用戶準備任務清單　98
　設計一套測試方法　101
展開用戶測試　102
　尋找小白鼠　102
　引導測試過程　104
“休斯頓，我們遇到一個問題……”：評估結果　105

第三部分　設計網站圖形　109

第7章　網頁圖形設計　111
制作可視化界面　111
　開發頁面模板　112
　創建頁面模型　114
　配色、類型和圖像　115
　使用網格系統　119
設定視覺優先級　121
　實施“大、中、小”策略　122
　將頁面分為可管理的區域　123
　圍繞折線做設計　124
添加留白　125
建立一份設計樣式規范　127
　圖形樣式規范　127
　按鈕樣式　127
　字體樣式　128

第8章　字體完美型設計　131
易于閱讀的文字　132
　選擇適合場景的字體　134
　不要過大或過小　139
控制文本顯示　140
　圖片文本與HTML文本　140
　本地化語言　140
　字體規范　140
　字體后備方案　141
使用CSS　143
　外部樣式表　143
　內部樣式表　146

第9章　理解網頁顏色、分辨率和文件格式　149
RGB世界的秘密　150
　顏色削減和顏色疊加　150
　大量的顏色　150
顏色位深　152
　受限的調色板　152
　24比特色深圖像　154
　顯示屏色深　154
十六進制顏色碼　156
圖像和顯示屏分辨率　157
　顯示屏分辨率　158
　圖像分辨率　158
位圖圖像和矢量圖像　159
　位圖圖像：組織像素　159
　矢量圖像：擅長數學　160
　矢量圖像和位圖圖像大比拼　161
圖像壓縮和文件格式　163
　GIF格式　163
　JPEG格式　167
　PNG格式　167
　SVG格式　169
　SWF格式　169

第10章　搭建網站模型　171
常用軟件　172
　Photoshop　172
　Fireworks　172
　Illustrator　174
　Flash　174
　Dreamweaver　175
情緒板：確定風格　176
設計資源　177
　照片和插畫庫　177
　數碼攝影照片和掃描圖像　178
　版式設計　178
　Photoshop筆刷　179
　控件　180
　Web設計模板　180
從頭開始構建網頁模板　180
網頁背景圖　183

第11章　啟發靈感：網站設計理念　187
制定設計方向　187
　從線框圖開始　188
　讓多名設計師共同參與　188
收集設計意見　189
獲取視覺和交互設計的靈感　191
　電影式網站　191
　創新交互設計　194
　借鑒品牌體驗　197
為你的網站設計移動版本　200
　看待像素的新角度　200
　簡化導航　201
　壓縮文件大小　202
　橫向和縱向　203
　使用單列布局　203

第12章　展示你的設計杰作　205
實現在線演示　206
　在線演示設計方案　206
　構建有功能和無功能的原型　208
創建打印演示稿　208
　高質量彩色打印　209
　黏在展板上　210
進行展示　211
　客戶不是伯樂　212
　繼續戰斗：第二輪　213

第四部分　開發完整的網站　215

第13章　構建表現層　217
HTML：將頁面黏在一起的膠水　218
　偷偷看一眼源代碼　220
　學習(借鑒)其他人　222
　借助強有力的工具編輯HTML　222
HTML 5　224
　移動設備友好的解決方案　224
　動畫的可選方案　225
　觸屏支持　225
　地理位置　226
　強大的內容處理　226
DHTML、JavaScript、jQuery和Ajax　227
CSS　228
　CSS如何工作　228
　顏色漸變、透明和反射　231
　陰影效果　232
　圓角效果　233
　動畫效果　234

第14章　平臺選擇、內容管理、數據分析和SEO　237
開發平臺　238
內容管理　239
　用戶生成VS固定管理　241
　連接網站和CMS　242
Web數據分析　242
　Google Analytics　243
　你可以從數據中獲得
　什么？　243
　實時監控　246
　用戶都點擊了哪里　246
　付費服務　247
搜索引擎優化　247
　頁內和頁外搜索　247
　URL結構和文件名　251
　去掉指向相同頁面的
　重復URL　251
　準備供搜索的站點地圖　252
　更多的SEO策略　253
　自然搜索和付費搜索　254
　入站和出站鏈接　257

第15章　高級網站　259
擴展網站功能　260
　連接Facebook　260
　Twitter　263
　Disqus　263
　Google Maps　264
　可供選擇的海量API　265
電子商務網站　266
　安全套接字層　267
　支付入口　267
　幾點有關購物車的建議　268
使用Cookie實現個性化網頁　271
瀏覽器和定位　272
　IP和GPS定位　272
　響應式設計　274
全球網站響應性能　276

第五部分　10項注意　279

第16章　管理網站設計項目的10個技巧　281
展示你的工作　282
　整理一份作品集　282
　展示你的工作成果　284
制作一份方案　285
贏得競標　287
了解作為獨立顧問如何收費　288
公司如何收費　289
掌控客戶預期　290
指定客戶在項目中的責任　290
在關鍵里程碑時獲得客戶簽字　291
管理網站項目的工作流　291
雇用及管理分包商　292

第17章　信息和交互設計的10個技巧　295
僅使用5～7個主菜單　296
為每一個獨特的頁面布局繪制
線框圖　297
標記出按鈕和圖標　297
注意下載時間　298
向用戶提供“你在這里”的
反饋　298
回到首頁很容易　299
從視覺上區分可點擊與不可
點擊的對象　300
其中有一個按鈕不一樣　301
謹慎對待真實世界的借喻　301
顏色分類省著用　302

第18章　容易出問題的10件事　305
“我們能再加一樣東西嗎？”　305
“沒時間畫站點地圖了。”　307
“客戶想要‘那種’設計？”　307
“都有我了，還要什么可用性測試？”　308
“我肯定會讓這項技術正常工作的。”　308
“我們還有國際訪客？”　309
“網站需要運行在移動平臺上？”　311
“你是說現在我們需要維護這個網站了？”　312
“糟糕，我們忘了加數據分析。”　312
“只要我們做了，他們就會來的。”　313