Web 2.0界面設(shè)計(jì)模式

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