內容簡介
當前的Web已經進入嶄新的時代！《Web界面設計（全彩）》涵蓋了在基於獨一無二的Web環境下、在創建豐富體驗的過程中設計Web界面的最佳實踐、模式和原理。UI專家Bill Scott和Theresa Neil在他們多年實踐經驗和不懈探索的基礎上，總結提煉出了Web界面設計的六大原理——直截了當、簡化互動、足不出戶、提供邀請、巧用變換和即時反應，並以這六大原理為依託，以當今Web上各類開風氣之先的流行網站為示例，向讀者展示了超過75種基於富互動構建Web界面的模式，並以簡單明了的語言，闡明了數以百計行之有效的最佳實踐。同時，書中還給出諸多反模式，即在Web界面設計過程中應該避免的做法。《Web界面設計（全彩）》是迄今為止一部專注於富Web界面設計的經典之作。
《Web界面設計（全彩）》既是一本Web界面設計指南，又是一本Web界面實例參考，適合Web界面設計、開發、研究人員、愛好者，以及Web項目管理人員閱讀。
目錄
序....................................................v
前言..............................................vii
原理一：直截了當
第1章：頁內編輯.......................... 3
1.1 單欄位行內編輯 ............ 4
1.2 多欄位行內編輯 ............ 8
1.3 覆蓋層編輯 .................. 11
1.4 表格編輯 ...................... 15
1.5 群組編輯 ...................... 18
1.6 模組配置 ...................... 21
1.7 選擇編輯模式的原則 .. 23
第2章：利用拖放 ....................... 25
2.1 趣味瞬間 ...................... 26
2.2 拖放的用途 .................. 29
2.3 拖放模組 ...................... 30
2.4 拖放列表 ...................... 40
2.5 拖放對象 ...................... 46
2.6 拖放操作 ...................... 52
2.7 拖放集合 ...................... 57
2.8 實現拖放的挑戰 .......... 59
第3章：直接選擇........................ 61
3.1 切換選擇 ...................... 62
3.2 集合選擇 ...................... 67
3.3 對象選擇 ...................... 70
3.4 混合選擇 ...................... 72
原理二：簡化互動
第4章：上下文工具.................... 79
4.1 上下文互動 .................. 79
4.2 費茨定律 ...................... 80
4.3 上下文工具 .................. 81
4.4 實時可見工具 .............. 81
4.5 懸停即現工具 .............. 85
4.6 開關顯示工具 .............. 91
4.7 級聯遞進工具 .............. 93
4.8 二級選單 ...................... 98
原理三：足不出戶
第5章：覆蓋層.......................... 105
5.1 對話框覆蓋層 ............ 107
5.2 詳情覆蓋層 ................ 112
5.3 輸入覆蓋層 ................ 119
第6章：嵌入層.......................... 123
6.1 對話框嵌入層 ............ 123
6.2 列表嵌入層 ................ 127
6.3 詳情嵌入層 ................ 132
6.4 標籤頁 ........................ 134
6.5 嵌入層與覆蓋層 ........ 136
第7章：虛擬頁面...................... 137
7.1 虛擬滾動 .................... 137
7.2 內置分頁 .................... 142
7.3 滾動分頁：傳送帶 .... 147
7.4 虛擬搖攝 .................... 149
7.5 伸縮式用戶界面 ........ 151
7.6 分頁與滾動 ................ 155
第8章：流程處理...................... 157
8.1 Google Blogger........... 157
8.2 魔法原理 .................... 158
8.3 互動式單頁 ................ 160
8.4 嵌入式部件 ................ 164
8.5 對話框覆蓋層 ............ 168
8.6 配置程式 .................... 171
8.7 靜態單頁 .................... 174
原理四：提供邀請
第9章：靜態邀請...................... 181
9.1 引導操作邀請 ............ 181
9.2 漫遊探索邀請 ............ 185
第10章：動態邀請.................... 191
10.1 懸停邀請 .................. 191
10.2 預期功能邀請 .......... 196
10.3 拖放邀請 .................. 200
10.4 推論邀請 .................. 209
10.5 更多內容邀請 .......... 210
10.6 邀請的優點 .............. 213
原理五：巧用變換
第11章：變換模式.................... 217
11.1 加亮和減暗 .............. 217
11.2 擴展與摺疊 .............. 222
11.3 自恢複式淡出 .......... 227
11.4 動畫效果 .................. 228
11.5 聚光燈效果 .............. 231
第12章：變換的目的 ............... 233
12.1 增添魅力 .................. 233
12.2 增進溝通 .................. 234
原理六：即時反應
第13章：查詢模式.................... 253
13.1 自動完成 .................. 253
13.2 實時建議 .................. 257
13.3 實時搜尋 .................. 262
13.4 微調搜尋 .................. 268
第14章：反饋模式.................... 275
14.1 實時預覽 .................. 275
14.2 漸進展現 .................. 284
14.3 進度指示 .................. 286
14.4 定時刷新 .................. 292
尾聲：富互動的原理和模式.... 295
索引........................................... 297
前言
歷史回眸
What Happened
我（Bill）的第一台個人計算機是Radio Shack Color Computer（1981年前後），配有芝克萊特譯註1式鍵盤。最初幾個月，我面對的主用戶界面是命令行，即每天都要在COLOR BASIC作業系統中輸入代碼。
後來，升級的Apple IIe讓我用上了更好的鍵盤，而且機器里還預裝了很多遊戲。但是，界面基本上沒有任何變化，仍然是命令行和基於文本的選單一統天下。即使是IBM PC登上歷史舞台，類同的地方照樣居多。Lotus 123是當時頂尖水平的電子製表軟體，它通過一組簡短的鍵盤命令來控制。不過，即使是這種級別的應用程式也談不上什麼用戶體驗。
不久，界面革命開始了。1984年Macintosh問世，這種新機型剛推出時間不長，我就買了一台回家。Macintosh配備的滑鼠打開了嶄新的互動世界的大門。用戶擺脫了只有學習古文一般的命令才能在基於文本的選單中導航的命運，取而代之的是另一種自然而然的、更符合人類直覺的方式。
嗯，讀者可能會想，這有什麼值得大驚小怪的？別忘了那是1984年，不是當前。那么，這跟一本設計Web界面的書有什麼關係嗎？
關係無處不在。
在Web有史以來的大部分時間內，Web站點和Web應用程式都以界面作為分水嶺——與早期的桌面電腦時代很相似。多數Web站點都基於以下兩個事件：
· 單擊超連結
· 提交表單
試一試，就通過這兩個事件能創造出什麼吸引人的用戶體驗？而且，問題不止如此——每次單擊或提交都會伴隨一次頁面刷新，創造流暢的用戶體驗幾乎只是一句空話。
說來很有意思，解決這些問題的技術其實很多年前就已經存在了。只不過必須等到常用的瀏覽器普遍支持這些技術之後，開發人員才敢在日常開發中放心大膽地使用。
2004年，Google發布了Gmail和Google Maps，這兩個應用程式使用了之後被Jesse James Garrett稱為Ajax的一組技術。
差別的確非常之大。基於Ajax的Google Maps支持實時平移、縮放，無須任何頁面刷新，其互動性絲毫不亞於桌面應用程式。而當時的Mapquest則亦如其他Web應用程式，必須在每次移動或縮放地圖後刷新頁面。Ajax的套用，使過去的Web和當前的Web有了非常明顯的差別。
寫作本書的動機
Why We Wrote This Book
我雖然有幸親身經歷了桌面電腦時代的第一次界面革命（甚至還趕在第一批編寫了一款Macintosh遊戲），但我的合著者Theresa Neil則親身經歷了Web的第二次革命。
幾年前，我們倆在Sabre（Travelocity的母公司）成為同事。在那裡，我們共同創立用戶體驗設計團隊、改進大量產品、完成啟發式評估，共同參與了重新設計Web應用程式的整個過程。在這些工作的基礎上，我們提煉出很多種用戶界面設計模式和反模式（需要避免的常見錯誤）。
此後，我加入了Yahoo!並在見證Ajax為Web界面帶來革命的過程中開始活躍起來。我在Yahoo!期間做出的貢獻之一就是公開發布了Yahoo! Design Pattern Library（Yahoo!設計模式庫）。作為Yahoo!的Ajax技術推廣專家，我結識了很多Yahoo!的頂尖人物，並與他們就如何看待這些新的互動形式，以及如何在獨特的Web環境中套用它們展開了頭腦風暴。結果就是在過去的幾年中，我就Web界面設計這一主題演講了無數場次，跟世界各地的Web開發和設計人員分享了最佳實踐。
與此同時，作為Web設計師的Theresa也在其諮詢事業上取得了輝煌的成績。她在自己的工作中不斷改進和修正最初的設計模式及原理，並先後領導了三十多個鮮活的富Internet套用項目——有企業級應用程式，也有面向公眾的網站。這些設計模式已經成為Theresa與客戶溝通時最常用的辭彙，也是設計新應用程式和重新設計已有系統的一套標準。
本書是我們兩個人經驗積累的結果，或者說，是Theresa和我三十多年相同工作經驗的升華。在出版方多次盛情邀請之下，我們也認同與更多人分享這些知識的最佳方式就是出一本書。
本書讀者對象
What This Book Is About
本書的主題並非信息架構譯註2，但字裡行間可能會滲透出信息架構的基本原理。本書的主題也並非視覺設計，但全書各章都將以良好的視覺設計為基調討論問題。
本書的主題是互動設計，具體而言是基於Web的互動設計，更確切地講，是基於Web的富互動設計。本書內容涵蓋了基於獨一無二的Web環境，在創建豐富體驗過程中提煉出來的最佳實踐、模式和原理。
所謂獨一無二，即Web具有獨特的自身環境，它不同於桌面環境。儘管時過境遷，桌面與Web的界限已經變得越來越模糊，但基於Web創造富互動依舊有著強烈的針對性。直接在頁面上編輯內容（例如，第1章討論的頁內編輯）很大程度上源自桌面套用——而一旦落實於網頁，則又體現出其自身所獨有的風格。本書將以幾個重要的設計原理為依託，通過一組設計模式來探討這些獨一無二的富互動形式。
設計模式
Design Patterns
到底什麼是設計模式呢？
Christopher Alexander在他的開創性著作《A Pattern Language: Towns, Buildings,Construction》（Oxford University Press）中，首次使用了術語“模式”來劃分針對人類活動的常見建築設計方案。他對模式的定義是：
……當遇到某個反覆出現的問題時，就相應解決方案的核心內容給出的描述……
隨後，在大名鼎鼎的“四人幫”（Erich Gamma、Richard Helm、Ralph Johnson和John M. Vlissides）合著的《Design Patterns: Elements of Reusable Object-Oriented Software》（Addison-Wesley）一書中，把模式這個術語引入了軟體領域。又過了幾年，設計模式出現在了用戶界面設計領域。
本書探討的模式屬於後一種——互動設計模式。粗略算來下，全書介紹了超過75種適用於富Web互動設計的模式。在解釋每種模式時，將會以各種各樣的網站作為示例。由於模式描述的是互動設計，為清晰地闡明相關概念，書中會使用大量的插圖作為輔助。而且，在展示給定方案之間細微差別的同時，也將指出應該避免的模式（反模式）。每一節最後的最佳實踐部分則包含了對讀者的一些重要建議。
本書將要介紹的模式依託於6個設計原理，後者構成了本書的框架：
原理一：直截了當
恰如Alan Cooper所言：“需要在哪裡輸出，就要允許在哪裡輸入”。這就是直接操作的原理。例如，不要為了編輯內容而打開另一個頁面，應該直接在上下文中實現編輯。第1至第3章遵循這個原理分別按照“頁內編輯”、“利用拖放”和“直接選擇”歸類介紹了相應的模式。
原理二：簡化互動
設計師Ericson deJesus在重新設計Yahoo! 360時，曾用“少費事”這3個字來描述減少與站點互動操作的需求。而實現少費事的主要途徑就是利用上下文工具。第4章“上下文工具”基於這個原理探索了幾種不同的模式。
原理三：足不出戶
用戶心流會因刷新頁面而被打斷。為避免每個操作都刷新一次頁面的情況，可以返璞歸真，採用根據用戶自然操作流程建模的方式。可以根據需要決定什麼情況下讓用戶留在當前頁面。第5章“覆蓋層”和第6章“嵌入層”，分別討論了在覆蓋層和頁面流中顯示信息的模式。第7章“虛擬頁面”講解了如何動態展示內容。本部分最後一章，第8章“流程處理”，展示了拋開頁面切換，轉而在頁內創建流程的模式。
原理四：提供邀請
Web中的富互動設計面臨的一個主要挑戰就是易發現性。再好的功能，如果用戶發現不了，結果仍然等於零。提供邀請是改善易發現性的重要途徑。邀請可以提示用戶下一步互動操作是什麼。由第9和第10章構成的這一部分，將分別從“靜態邀請”和“動態邀請”的角度，探討那些始終在頁面上顯示邀請和回響用戶操作顯示邀請的模式。
原理五：巧用變換
動畫、電影轉場效果，以及各種形式的視覺變換，都是極為有用的技術。第11章在介紹最常用的“變換模式”時，探討了吸引用戶與增進溝通的模式；第12章則深入分析了“變換的目的”，同時，還向讀者介紹了一些反模式。
原理六：即時反應
智慧型界面的特點是具有良好的反應能力。這個原理探討了怎樣通過回響操作為用戶提供豐富的體驗。第13章介紹了一組“查找模式”，包括實時搜尋、實時建議、微調搜尋和自動完成。第14章介紹了一組“反饋模式”，包括實時預覽、漸進展現、進度指示和定時刷新。
本書讀者對象
Who Should Read This Book
本書適合定義、設計及構建Web界面的任何人。
Web設計人員在為設計精妙的富互動而勾勒草圖、奠定基調時，會發現本書介紹的原理特別有指導作用。同時，書中的大量模式能夠豐富你們的設計工具箱，數百個示例也提供了直觀的參考。當然，書中列出的最佳實踐應該是一個備忘錄，針對各種互動套用場景給出了提示。
產品（項目）經理在思考新的業務問題時，可以將書中的模式和示例作為拓展思路的良好起點。雖然本書沒有給出編程實現方案，但Web開發人員仍然會受益於其中總結的設計模式，因為這些模式可以直接映射到具體的編碼方案。對於相關的每個項目成員而言，這些模式會成為貫穿產品（項目）管理、設計和實施過程的辭彙表，從而為團隊間明確、清晰地溝通和協作鋪平道路。
另外，無論你是剛剛入行的Web設計/開發新兵，還是擁有豐富經驗的老手，本書依託設計原理和模式給出的豐富而真實的示例，都將為你的日常工作帶來一股清新的空氣。
本書配套站點
What Comes with This Book
本書有一個專事拾遺補缺的配套站點，其中包含最新示例，對原理、模式及最佳實踐進一步思考的結果，以及Web界面設計方面有價值的文章和資源的連結。
在遵守創意共享許可（Creative Commons license）的條件下，讀者可下載本書所有圖表及插圖並在自己的演示中使用。下載站點位於Flickr。
本書排版約定
Conventions Used in This Book
本書使用下列排版約定：
斜體（Italic ）或漢儀中黑簡體
表示URL、目錄、檔案名稱、選項和模式名稱，偶爾也用於強調。
提示
表示提示、建議或一般備註。
使用示例
Using Examples
本書所有的插圖示例都可以在配套的Flickr站點中找到。在遵守創意共享許可和確保註明出處的條件下，讀者可以把這些插圖用在演示文檔或其他相應場合。在註明出處時，通常應該包含書名、作者、出版社和ISBN。例如,“Designing Web Interfaces, by Bill Scott and Theresa Neil, Copyright 2009 Bill Scott and Theresa Neil, 978-0-596-51625-3”。
如果讀者認為自己對本書示例的使用超出了合理的或上述默認許可的範圍，隨時可以通過 信箱與我們聯繫。
聯繫我們
We'd Like to Hear from You
請將對本書的評價和存在的問題通過如下地址告知出版者：
美國：
O’Reilly Media, Inc.
1005 Gravenstein Highway North
Sebastopol, CA 95472
中國：
北京市西城區西直門南大街2 號成銘大廈C 座807 室（100035）
奧萊利技術諮詢（北京）有限公司
O’Reilly 的每一本書都有專屬網站，你可以在那裡找到關於本書的相關信息，包括勘
誤列表、示例代碼以及其他信息。
對於本書的評論和技術性的問題，請傳送電子郵件。
致謝
Acknowledgments
Bill的致謝
Bill's Acknowledgments
本書不僅僅是Theresa Neil和我兩個人努力的結果。直接參與的人還有很多，間接給了我們啟示的人則更多。
首先最重要的是感謝Ruth。她是我30年相濡以沫的好妻子、好朋友，更是一位好母親。沒有她的耐心和支持，本書是不可能面世的。
我對O’Relly的編輯們表示深深的謝忱。對Mary Treseler致以雙倍的敬意，她耐心地引導Theresa和我最終寫完本書。而且，她在本書編寫前期提出的建議也非常有價值。還要感謝讓本書成為現實的其他團隊成員：Rachel Monaghan、Marlowe Shaeffer、Ron Bilodeau、Colleen Gorman、Adam Witwer和Robert Romano，恕不一一列舉。
寫過書的人都知道，技術審稿是確保圖書質量的重要一環。感謝Christian Crumlish、Dan Saffer、Luke Wroblewski、Juhan Sonin、Kevin Arthur及Alan Baumgarten積極的肯定和建設性批評。雖然不能解決所有問題，但我認真接受每一條意見，而這些意見對最終成書有莫大的影響。
在Yahoo!工作的那段時間對我非常重要。感謝Erin Malone發給我那封電子郵件，完全出乎我的意料，後來我就到Yahoo!上班了。在Yahoo!跟才華橫溢的人們一起共事，為我的成功鋪平了道路。感謝Erin、Matt Leacock和Chanel Wheeler創立Yahoo! Design Pattern Library，感謝Larry Tesler 和Erin讓我領導和推廣公共Yahoo! Design Pattern Library的發布。正是這個模式負責人的經歷，讓我進一步明確思考了本書所要討論的內容。在此，特別感謝那些不斷給我提供反饋的天才設計師和開發者，他們高超的技術水平也促使我不斷提高自己。感謝YUI團隊，尤其是Nate Koechley 和Eric Miraglia詳細闡述“趣味瞬間”格線，講解如何通過代碼實現模式。感謝與我一道負責技術推廣的各位專家：Douglas Crockford、Iain Lamb、Julien Lecomte和Adam Platti。感謝我的好朋友Darren James，他時時刻刻都在鼓勵我。感謝有幸與之共事的天才設計師們，他們的思想和觀點反映在了本書的字裡行間：Karon Weber、Samantha Tripodi、Ericson deJesus、Micah Laaker、Luke Wroblewski、Tom Chi、Lucas Pettinati、Kevin Cheng、Kathleen Watkins、Kiersten Lammerding、Annette Leong、Lance Nishihira，以及其他很多人。
在Yahoo!之外，認識或向以下大師學習，也激勵我不斷思考進步，他們是Dan Saffer（Adaptive Path）、Ryan Freitas（Adaptive Path）、Aza Raskin（Humanized）、Scott Robbins（Humanized）、Peter Moerholz（Adaptive Path）和David Verba（Adaptive Path）。特別感謝模式社區中的那些朋友們， Jenifer Tidwell指明了模式的發展方向，Martijn van Welie創建了優秀的模式庫。感謝James Refell 和Luke Wroblewski，以及他們在eBay對模式的研究工作。感謝當前在Yahoo!負責管理模式的Christian Crumlish，他的思路總是那么清晰。感謝Jesse James Garrett，他不僅發明了Ajax這個名字，還邀請我參加第一次Ajax Summit，而且帶著我與他共同做巡迴演講。在Designing for Ajax Workshops授課的經歷，也讓我對寫作本書充滿了信心，因為書中的內容提前得到了一些讀者的驗證。
還要感謝那些邀請我去演講的公司和會議組織者。將本書內容與數千位聽眾共享的價值是無法衡量的，藉此讓我知道了大多數設計人員和開發人員普遍關心的問題。
以下是邀請我去演講的人（括弧中是他們所在的公司，排名不分先後）：Jared Spool（UIE）、Ben Galbraith和Dion Almer（Ajaxian/Ajax Experience）、Kathryn McKinnon（Adobe）、Jeremy Geelan（SysCon）、Rashmi Sinha（BayCHI/Slideshare）、Aaron Newton（CNET）、Brian Kromrey（Yahoo! UED courses）、Luke Kowalski（Oracle）、Sean Kane（Netflix）、Reshma Kumar（Silicon Valley Web Guild）、Emmanuel Levi Valensi（People in Action）、Bruno Figueiredo（SHiFT）、Matthew Moroz（Avenue A Razorfish）、 Peter Boersma（SIGCHI.NL）、Kit Seeborg（WebVisions）、Will Tschumy（Microsoft）、Bob Baxley（Yahoo!）、Jay Zimmerman（Rich Web Experience）、Dave Verba（UX Week）。另外，還必須感謝如下會議和公司：Web Builder 2.0、eBig、PayPal、eBay、CSU Hayward、City College San Francisco、Apple，等等。
我要對Sabre Airline Solutions深表謝意，特別是Brad Jensen，他完全信任並給了我一次難得的機會，讓我在他的公司實踐UX設計的思想。感謝David Endicott和Damon Hougland鼓勵我把這些思想公之於眾。感謝我團隊的全體成員幫Theresa和我提前驗證了這些思想。本書介紹的很多模式都源自他們親手設計的產品。
最後，感謝Netflix，我目前正在這個世界上最適合工作的地方不知疲倦地忙碌著。感謝Netflix所有人對我寫作本書的支持和教會我怎樣去設計並構建最好的用戶體驗。
Theresa的致謝
Theresa，s Acknowledgments
我想對以下這些人致以深深的謝意。
Aaron Arlof，感謝他為本書繪製的插圖。這些精美的插圖恰到好處地表現了全書的六個原理。
Brad Jensen，他是Sabre Airline Solutions的副總裁，也是他首先介紹我認識了Bill。如果沒有Bill的悉心指導和培養，我不可能涉足這個領域。
Damon Hougland，他幫助Bill和我在Sabre創建了User Experience（用戶體驗）團隊。
Jo Balderas，他引起了我對編程的興趣。
Darren James，他教會了我如何編程。
參與我們各類白板會議的客戶，特別是熱心學習和探討UI設計模式及原理的人：Steven Smith、Dave Wilby、Suri Bala、Jeff Como和Seth Alsbury，他們允許我（在RIA革命之初）設計他們的企業級應用程式。特別感謝我的同事Wishingline 的Scott Boms、Paulo Viera、Jessica Douglas、Alan Baumgarten和Rob Jones。
最重要的是，要感謝我丈夫堅定不移的支持，感謝我父母的鼓勵，還有我兒子，Aaron，謝謝他能讓我在電腦前面坐那么多鐘頭。
