Web 2.0界面設計模式

第1章 導論 1
1.1 Web界面演化史 1
1.1.1 傳統(tǒng)Web界面的發(fā)展 1
1.1.2 Web 2.0所引導的用戶體驗革新 2
1.2 Web 2.0界面設計模式 3
1.2.1 Web 2.0界面設計模式的特征 3
1.2.2 Web 2.0界面設計模式的應用 5
1.3 優(yōu)秀的Web 2.0站點 6
1.3.1 Quora 6
1.3.2 Vimeo 9
1.3.3 Evernote 12
1.4 小結 14
第2章 頁面布局設計模式 15
2.1 邊界布局 15
2.2 網(wǎng)格布局 21
2.3 浮動式布局 25
2.4 標簽頁布局 29
2.5 手風琴布局 33
2.6 伸縮式布局 37
2.7 混合布局 41
2.8 小結 44
第3章 內(nèi)容導航的設計模式 45
3.1 按內(nèi)容組織導航 45
3.1.1 菜單（主導航） 45
3.1.2 目錄導航 49
3.1.3 網(wǎng)站地圖 52
3.2 路徑導航 53
3.2.1 面包屑導航 53
3.2.2 分步導航 61
3.2.3 分頁導航 63
3.2.4 樹狀導航 68
3.2.5 滾動列表 73
3.3 預覽式導航（圖像導航） 75
3.3.1 圖標導航 75
3.3.2 滾動式菜單 78
3.3.3 內(nèi)容預覽導航 81
3.3.4 自動翻頁 83
3.4 熱點內(nèi)容導航 86
3.4.1 標簽云導航 86
3.4.2 標簽列導航 90
3.5 地圖導航 93
3.6 小結 95
第4章 數(shù)據(jù)呈現(xiàn)的設計模式 96
4.1 信息提示 96
4.1.1 信息更新提示 96
4.1.2 確認、警告及報錯對話框 98
4.1.3 烤面包機模式 99
4.2 表格數(shù)據(jù)呈現(xiàn) 101
4.2.1 普通表格 101
4.2.2 列鎖定表格 103
4.2.3 可編輯單元格 106
4.2.4 合并單元格 108
4.2.5 樹狀表格 111
4.3 按需加載和呈現(xiàn) 114
4.3.1 分頁加載 114
4.3.2 虛擬滾動加載 115
4.3.3 顯示滾動加載 118
4.4 數(shù)據(jù)可視化 119
4.4.1 折線圖 120
4.4.2 條形圖 123
4.4.3 燭柱圖 129
4.4.4 餅圖 133
4.4.5 雷達圖 137
4.5 小結 142
第5章 數(shù)據(jù)交互設計模式 143
5.1 實時檢測 143
5.1.1 輸入后檢測 144
5.1.2 輸入時檢測 147
5.2 數(shù)據(jù)選擇 149
5.2.1 日歷模式 149
5.2.2 時間選擇模式 151
5.2.3 表格的間接選擇模式 153
5.2.4 多層聯(lián)動選擇模式 154
5.2.5 導航式多級選擇模式 155
5.2.6 旋轉木馬模式 157
5.3 實時內(nèi)容過濾 159
5.3.1 下拉框內(nèi)容過濾 159
5.3.2 表格內(nèi)容過濾 162
5.3.3 樹狀內(nèi)容過濾 165
5.3.4 精確內(nèi)容過濾 169
5.3.5 模糊內(nèi)容過濾 173
5.4 輸入提示模式 176
5.4.1 輸入占位符 176
5.4.2 自動完成 178
5.4.3 示例輸入 180
5.5 輸入向導模式 180
5.6 自動保存模式 182
5.6.1 客戶端自動保存 182
5.6.2 服務器端自動保存 185
5.7 拖曳移動模式 188
5.7.1 自由移動模式 188
5.7.2 拖放模式 191
5.8 小結 193
第6章 Web 2.0動畫與特效 194
6.1 Web動畫與特效的使用場景 194
6.2 Web動畫與特效的演化 197
6.2.1 靜態(tài)HTML 197
6.2.2 Flash動畫 198
6.2.3 JavaScript與CSS動畫特效 198
6.2.4 HTML 5、CSS 3與Canvas特效 199
6.2.5 代碼示例 199
6.2.6 Web 2.0 站點特效 200
6.3 常見Web 2.0站點使用的動畫與特效 201
6.3.1 淡入與淡出 201
6.3.2 滑動 205
6.3.3 擦入/擦出效果 210
6.3.4 使用動畫增強高亮效果 211
6.3.5 魚眼特效 213
6.3.6 進度提示動畫 215
6.3.7 啟動畫面 217
6.4 小結 219
第7章 應用案例 220
7.1 需求分析 220
7.1.1 微博的發(fā)展史 220
7.1.2 微博的特點 221
7.2 設計實踐 222
7.2.1 了解目標用戶 222
7.2.2 原型設計與模式應用 224
7.3 原型實現(xiàn) 229
7.3.1 “按需出現(xiàn)/消失”模式 229
7.3.2 “面板展開收起”模式 231
7.3.3 標簽頁布局模式 233
7.3.4 菜單導航模式 234
7.3.5 表格數(shù)據(jù)模式 235
7.3.6 線狀圖表模式 237
7.3.7 柱狀圖表模式 239
7.3.8 實時檢測模式 240
7.3.9 淡入淡出動畫效果模式 242
7.3.10 擦入/擦出動畫效果模式 243
7.3.11 魚眼效果模式 243
7.4 小結 245