本書集Web 2.0的發展及特點、Web 2.0界面設計模式基本理論、實際模式實踐及代碼實現等諸多內容於一身，具有很強的實用性。這些內容不是簡單的順序堆砌，而是以Web 2.0界面設計模式和套用為主線，其中完美地穿插了各種與之相關的Web 2.0設計理念、用戶行為模式、用戶體驗及基於Dojo的實現方式等相關知識，真正做到將Web 2.0界面設計模式所需要的方方面面的知識有機地融為一個整體。實現不需要多少界面設計、互動設計和Web實現基礎就能夠深入學習Web 2.0界面設計模式並上手開發Web 2.0界面的目的。
基本介紹
- 書名：Web 2.0界面設計模式
- 出版社：電子工業出版社
- 頁數：245頁
- 開本：16
- 作者：黃瑋 王沛
- 出版日期：2013年9月1日
- 語種：簡體中文
- 品牌：電子工業出版社
內容簡介,作者簡介,圖書目錄,
內容簡介
《Web 2.0界面設計模式》由電子工業出版社出版。
作者簡介
黃瑋，IBM中國開發實驗室工程師，有豐富的界面互動設計和開發經驗，精通Web 2.0 Dojo用戶界面技術。曾擔任Dojo開源項目貢獻者（Committer），參與改進Dojo庫的用戶體驗特性，探索和實踐套用界面設計模式，及以Dojo技術平台為基礎的富客戶端產品架構設計和開發工作。
王沛，I8M中國上海研發中心UT/Dojo部門資深軟體工程師，主要從事Dojo擴展控制項Gridx的研發工作。
費伽，IBM中國上海研發中心Smart Commerce部門資深經理，主要負責團隊日常開發的管理工作。
周翔，IBM中國上海研發中心UT/Dojo部門深軟體工程師，主要從事Dojo控制項庫的研發工作。
王沛，I8M中國上海研發中心UT/Dojo部門資深軟體工程師，主要從事Dojo擴展控制項Gridx的研發工作。
費伽，IBM中國上海研發中心Smart Commerce部門資深經理，主要負責團隊日常開發的管理工作。
周翔，IBM中國上海研發中心UT/Dojo部門深軟體工程師，主要從事Dojo控制項庫的研發工作。
圖書目錄
第1章導論1
1.1Web界面演化史1
1.1.1傳統Web界面的發展1
1.1.2Web2.0所引導的用戶體驗革新2
1.2Web2.0界面設計模式3
1.2.1Web2.0界面設計模式的特徵3
1.2.2Web2.0界面設計模式的套用5
1.3優秀的Web2.0站點6
1.3.1Quora6
1.3.2Vimeo9
1.3.3Evernote12
1.4小結14
第2章頁面布局設計模式15
2.1邊界布局15
2.2格線布局21
2.3浮動式布局25
2.4標籤頁布局29
2.5手風琴布局33
2.6伸縮式布局37
2.7混合布局41
2.8小結44
第3章內容導航的設計模式45
3.1按內容組織導航45
3.1.1選單（主導航）45
3.1.2目錄導航49
3.1.3網站地圖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內容預覽導航81
3.3.4自動翻頁83
3.4熱點內容導航86
3.4.1標籤雲導航86
3.4.2標籤列導航90
3.5地圖導航93
3.6小結95
第4章數據呈現的設計模式96
4.1信息提示96
4.1.1信息更新提示96
4.1.2確認、警告及報錯對話框98
4.1.3烤麵包機模式99
4.2表格數據呈現101
4.2.1普通表格101
4.2.2列鎖定表格103
4.2.3可編輯單元格106
4.2.4合併單元格108
4.2.5樹狀表格111
4.3按需載入和呈現114
4.3.1分頁載入114
4.3.2虛擬滾動載入115
4.3.3顯示滾動載入118
4.4數據可視化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章數據互動設計模式143
5.1實時檢測143
5.1.1輸入後檢測144
5.1.2輸入時檢測147
5.2數據選擇149
5.2.1日曆模式149
5.2.2時間選擇模式151
5.2.3表格的間接選擇模式153
5.2.4多層聯動選擇模式154
5.2.5導航式多級選擇模式155
5.2.6旋轉木馬模式157
5.3實時內容過濾159
5.3.1下拉框內容過濾159
5.3.2表格內容過濾162
5.3.3樹狀內容過濾165
5.3.4精確內容過濾169
5.3.5模糊內容過濾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章Web2.0動畫與特效194
6.1Web動畫與特效的使用場景194
6.2Web動畫與特效的演化197
6.2.1靜態HTML197
6.2.2Flash動畫198
6.2.3JavaScript與CSS動畫特效198
6.2.4HTML5、CSS3與Canvas特效199
6.2.5代碼示例199
6.2.6Web2.0站點特效200
6.3常見Web2.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微博的發展史220
7.1.2微博的特點221
7.2設計實踐222
7.2.1了解目標用戶222
7.2.2原型設計與模式套用224
7.3原型實現229
7.3.1“按需出現/消失”模式229
7.3.2“面板展開收起”模式231
7.3.3標籤頁布局模式233
7.3.4選單導航模式234
7.3.5表格數據模式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
1.1Web界面演化史1
1.1.1傳統Web界面的發展1
1.1.2Web2.0所引導的用戶體驗革新2
1.2Web2.0界面設計模式3
1.2.1Web2.0界面設計模式的特徵3
1.2.2Web2.0界面設計模式的套用5
1.3優秀的Web2.0站點6
1.3.1Quora6
1.3.2Vimeo9
1.3.3Evernote12
1.4小結14
第2章頁面布局設計模式15
2.1邊界布局15
2.2格線布局21
2.3浮動式布局25
2.4標籤頁布局29
2.5手風琴布局33
2.6伸縮式布局37
2.7混合布局41
2.8小結44
第3章內容導航的設計模式45
3.1按內容組織導航45
3.1.1選單（主導航）45
3.1.2目錄導航49
3.1.3網站地圖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內容預覽導航81
3.3.4自動翻頁83
3.4熱點內容導航86
3.4.1標籤雲導航86
3.4.2標籤列導航90
3.5地圖導航93
3.6小結95
第4章數據呈現的設計模式96
4.1信息提示96
4.1.1信息更新提示96
4.1.2確認、警告及報錯對話框98
4.1.3烤麵包機模式99
4.2表格數據呈現101
4.2.1普通表格101
4.2.2列鎖定表格103
4.2.3可編輯單元格106
4.2.4合併單元格108
4.2.5樹狀表格111
4.3按需載入和呈現114
4.3.1分頁載入114
4.3.2虛擬滾動載入115
4.3.3顯示滾動載入118
4.4數據可視化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章數據互動設計模式143
5.1實時檢測143
5.1.1輸入後檢測144
5.1.2輸入時檢測147
5.2數據選擇149
5.2.1日曆模式149
5.2.2時間選擇模式151
5.2.3表格的間接選擇模式153
5.2.4多層聯動選擇模式154
5.2.5導航式多級選擇模式155
5.2.6旋轉木馬模式157
5.3實時內容過濾159
5.3.1下拉框內容過濾159
5.3.2表格內容過濾162
5.3.3樹狀內容過濾165
5.3.4精確內容過濾169
5.3.5模糊內容過濾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章Web2.0動畫與特效194
6.1Web動畫與特效的使用場景194
6.2Web動畫與特效的演化197
6.2.1靜態HTML197
6.2.2Flash動畫198
6.2.3JavaScript與CSS動畫特效198
6.2.4HTML5、CSS3與Canvas特效199
6.2.5代碼示例199
6.2.6Web2.0站點特效200
6.3常見Web2.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微博的發展史220
7.1.2微博的特點221
7.2設計實踐222
7.2.1了解目標用戶222
7.2.2原型設計與模式套用224
7.3原型實現229
7.3.1“按需出現/消失”模式229
7.3.2“面板展開收起”模式231
7.3.3標籤頁布局模式233
7.3.4選單導航模式234
7.3.5表格數據模式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
