Web界面設(shè)計(jì)（全彩）前言

時(shí)間：2023-02-17 18:24:01 | 來源：營銷百科

時(shí)間：2023-02-17 18:24:01 來源：營銷百科

Web界面設(shè)計(jì)（全彩）前言：歷史回眸

What Happened

我（Bill）的第一臺個(gè)人計(jì)算機(jī)是Radio Shack Color Computer（1981年前后），配有芝克萊特譯注1式鍵盤。最初幾個(gè)月，我面對的主用戶界面是命令行，即每天都要在COLOR BASIC操作系統(tǒng)中輸入代碼。

后來，升級的Apple IIe讓我用上了更好的鍵盤，而且機(jī)器里還預(yù)裝了很多游戲。但是，界面基本上沒有任何變化，仍然是命令行和基于文本的菜單一統(tǒng)天下。即使是IBM PC登上歷史舞臺，類同的地方照樣居多。Lotus 123是當(dāng)時(shí)頂尖水平的電子制表軟件，它通過一組簡短的鍵盤命令來控制。不過，即使是這種級別的應(yīng)用程序也談不上什么用戶體驗(yàn)。

不久，界面革命開始了。1984年Macintosh問世，這種新機(jī)型剛推出時(shí)間不長，我就買了一臺回家。Macintosh配備的鼠標(biāo)打開了嶄新的交互世界的大門。用戶擺脫了只有學(xué)習(xí)古文一般的命令才能在基于文本的菜單中導(dǎo)航的命運(yùn)，取而代之的是另一種自然而然的、更符合人類直覺的方式。

嗯，讀者可能會(huì)想，這有什么值得大驚小怪的？別忘了那是1984年，不是當(dāng)前。那么，這跟一本設(shè)計(jì)Web界面的書有什么關(guān)系嗎？

關(guān)系無處不在。

在Web有史以來的大部分時(shí)間內(nèi)，Web站點(diǎn)和Web應(yīng)用程序都以界面作為分水嶺——與早期的桌面電腦時(shí)代很相似。多數(shù)Web站點(diǎn)都基于以下兩個(gè)事件：

· 單擊超鏈接

· 提交表單

試一試，就通過這兩個(gè)事件能創(chuàng)造出什么吸引人的用戶體驗(yàn)？而且，問題不止如此——每次單擊或提交都會(huì)伴隨一次頁面刷新，創(chuàng)造流暢的用戶體驗(yàn)幾乎只是一句空話。

說來很有意思，解決這些問題的技術(shù)其實(shí)很多年前就已經(jīng)存在了。只不過必須等到常用的瀏覽器普遍支持這些技術(shù)之后，開發(fā)人員才敢在日常開發(fā)中放心大膽地使用。

2004年，Google發(fā)布了Gmail和Google Maps，這兩個(gè)應(yīng)用程序使用了之后被Jesse James Garrett稱為Ajax的一組技術(shù)。

差別的確非常之大。基于Ajax的Google Maps支持實(shí)時(shí)平移、縮放，無須任何頁面刷新，其交互性絲毫不亞于桌面應(yīng)用程序。而當(dāng)時(shí)的Mapquest則亦如其他Web應(yīng)用程序，必須在每次移動(dòng)或縮放地圖后刷新頁面。Ajax的應(yīng)用，使過去的Web和當(dāng)前的Web有了非常明顯的差別。

寫作本書的動(dòng)機(jī)

Why We Wrote This Book

我雖然有幸親身經(jīng)歷了桌面電腦時(shí)代的第一次界面革命（甚至還趕在第一批編寫了一款Macintosh游戲），但我的合著者Theresa Neil則親身經(jīng)歷了Web的第二次革命。

幾年前，我們倆在Sabre（Travelocity的母公司）成為同事。在那里，我們共同創(chuàng)立用戶體驗(yàn)設(shè)計(jì)團(tuán)隊(duì)、改進(jìn)大量產(chǎn)品、完成啟發(fā)式評估，共同參與了重新設(shè)計(jì)Web應(yīng)用程序的整個(gè)過程。在這些工作的基礎(chǔ)上，我們提煉出很多種用戶界面設(shè)計(jì)模式和反模式（需要避免的常見錯(cuò)誤）。

此后，我加入了Yahoo!并在見證Ajax為Web界面帶來革命的過程中開始活躍起來。我在Yahoo!期間做出的貢獻(xiàn)之一就是公開發(fā)布了Yahoo! Design Pattern Library（Yahoo!設(shè)計(jì)模式庫）。作為Yahoo!的Ajax技術(shù)推廣專家，我結(jié)識了很多Yahoo!的頂尖人物，并與他們就如何看待這些新的交互形式，以及如何在獨(dú)特的Web環(huán)境中應(yīng)用它們展開了頭腦風(fēng)暴。結(jié)果就是在過去的幾年中，我就Web界面設(shè)計(jì)這一主題演講了無數(shù)場次，跟世界各地的Web開發(fā)和設(shè)計(jì)人員分享了最佳實(shí)踐。

與此同時(shí)，作為Web設(shè)計(jì)師的Theresa也在其咨詢事業(yè)上取得了輝煌的成績。她在自己的工作中不斷改進(jìn)和修正最初的設(shè)計(jì)模式及原理，并先后領(lǐng)導(dǎo)了三十多個(gè)鮮活的富Internet應(yīng)用項(xiàng)目——有企業(yè)級應(yīng)用程序，也有面向公眾的網(wǎng)站。這些設(shè)計(jì)模式已經(jīng)成為Theresa與客戶溝通時(shí)最常用的詞匯，也是設(shè)計(jì)新應(yīng)用程序和重新設(shè)計(jì)已有系統(tǒng)的一套標(biāo)準(zhǔn)。

本書是我們兩個(gè)人經(jīng)驗(yàn)積累的結(jié)果，或者說，是Theresa和我三十多年相同工作經(jīng)驗(yàn)的升華。在出版方多次盛情邀請之下，我們也認(rèn)同與更多人分享這些知識的最佳方式就是出一本書。

本書讀者對象

What This Book Is About

本書的主題并非信息架構(gòu)譯注2，但字里行間可能會(huì)滲透出信息架構(gòu)的基本原理。本書的主題也并非視覺設(shè)計(jì)，但全書各章都將以良好的視覺設(shè)計(jì)為基調(diào)討論問題。

本書的主題是交互設(shè)計(jì)，具體而言是基于Web的交互設(shè)計(jì)，更確切地講，是基于Web的富交互設(shè)計(jì)。本書內(nèi)容涵蓋了基于獨(dú)一無二的Web環(huán)境，在創(chuàng)建豐富體驗(yàn)過程中提煉出來的最佳實(shí)踐、模式和原理。

所謂獨(dú)一無二，即Web具有獨(dú)特的自身環(huán)境，它不同于桌面環(huán)境。盡管時(shí)過境遷，桌面與Web的界限已經(jīng)變得越來越模糊，但基于Web創(chuàng)造富交互依舊有著強(qiáng)烈的針對性。直接在頁面上編輯內(nèi)容（例如，第1章討論的頁內(nèi)編輯）很大程度上源自桌面應(yīng)用——而一旦落實(shí)于網(wǎng)頁，則又體現(xiàn)出其自身所獨(dú)有的風(fēng)格。本書將以幾個(gè)重要的設(shè)計(jì)原理為依托，通過一組設(shè)計(jì)模式來探討這些獨(dú)一無二的富交互形式。

設(shè)計(jì)模式

Design Patterns

到底什么是設(shè)計(jì)模式呢？

Christopher Alexander在他的開創(chuàng)性著作《A Pattern Language: Towns, Buildings,Construction》（Oxford University Press）中，首次使用了術(shù)語'模式'來劃分針對人類活動(dòng)的常見建筑設(shè)計(jì)方案。他對模式的定義是：

……當(dāng)遇到某個(gè)反復(fù)出現(xiàn)的問題時(shí)，就相應(yīng)解決方案的核心內(nèi)容給出的描述……

隨后，在大名鼎鼎的'四人幫'（Erich Gamma、Richard Helm、Ralph Johnson和John M. Vlissides）合著的《Design Patterns: Elements of Reusable Object-Oriented Software》（Addison-Wesley）一書中，把模式這個(gè)術(shù)語引入了軟件領(lǐng)域。又過了幾年，設(shè)計(jì)模式出現(xiàn)在了用戶界面設(shè)計(jì)領(lǐng)域。

本書探討的模式屬于后一種——交互設(shè)計(jì)模式。粗略算來下，全書介紹了超過75種適用于富Web交互設(shè)計(jì)的模式。在解釋每種模式時(shí)，將會(huì)以各種各樣的網(wǎng)站作為示例。由于模式描述的是交互設(shè)計(jì)，為清晰地闡明相關(guān)概念，書中會(huì)使用大量的插圖作為輔助。而且，在展示給定方案之間細(xì)微差別的同時(shí)，也將指出應(yīng)該避免的模式（反模式）。每一節(jié)最后的最佳實(shí)踐部分則包含了對讀者的一些重要建議。

本書將要介紹的模式依托于6個(gè)設(shè)計(jì)原理，后者構(gòu)成了本書的框架：

原理一：直截了當(dāng)

恰如Alan Cooper所言：'需要在哪里輸出，就要允許在哪里輸入'。這就是直接操作的原理。例如，不要為了編輯內(nèi)容而打開另一個(gè)頁面，應(yīng)該直接在上下文中實(shí)現(xiàn)編輯。第1至第3章遵循這個(gè)原理分別按照'頁內(nèi)編輯'、'利用拖放'和'直接選擇'歸類介紹了相應(yīng)的模式。

原理二：簡化交互

設(shè)計(jì)師Ericson deJesus在重新設(shè)計(jì)Yahoo! 360時(shí)，曾用'少費(fèi)事'這3個(gè)字來描述減少與站點(diǎn)交互操作的需求。而實(shí)現(xiàn)少費(fèi)事的主要途徑就是利用上下文工具。第4章'上下文工具'基于這個(gè)原理探索了幾種不同的模式。

原理三：足不出戶

用戶心流會(huì)因刷新頁面而被打斷。為避免每個(gè)操作都刷新一次頁面的情況，可以返璞歸真，采用根據(jù)用戶自然操作流程建模的方式?？梢愿鶕?jù)需要決定什么情況下讓用戶留在當(dāng)前頁面。第5章'覆蓋層'和第6章'嵌入層'，分別討論了在覆蓋層和頁面流中顯示信息的模式。第7章'虛擬頁面'講解了如何動(dòng)態(tài)展示內(nèi)容。本部分最后一章，第8章'流程處理'，展示了拋開頁面切換，轉(zhuǎn)而在頁內(nèi)創(chuàng)建流程的模式。

原理四：提供邀請

Web中的富交互設(shè)計(jì)面臨的一個(gè)主要挑戰(zhàn)就是易發(fā)現(xiàn)性。再好的功能，如果用戶發(fā)現(xiàn)不了，結(jié)果仍然等于零。提供邀請是改善易發(fā)現(xiàn)性的重要途徑。邀請可以提示用戶下一步交互操作是什么。由第9和第10章構(gòu)成的這一部分，將分別從'靜態(tài)邀請'和'動(dòng)態(tài)邀請'的角度，探討那些始終在頁面上顯示邀請和響應(yīng)用戶操作顯示邀請的模式。

原理五：巧用變換

動(dòng)畫、電影轉(zhuǎn)場效果，以及各種形式的視覺變換，都是極為有用的技術(shù)。第11章在介紹最常用的'變換模式'時(shí)，探討了吸引用戶與增進(jìn)溝通的模式；第12章則深入分析了'變換的目的'，同時(shí)，還向讀者介紹了一些反模式。

原理六：即時(shí)反應(yīng)

智能界面的特點(diǎn)是具有良好的反應(yīng)能力。這個(gè)原理探討了怎樣通過響應(yīng)操作為用戶提供豐富的體驗(yàn)。第13章介紹了一組'查找模式'，包括實(shí)時(shí)搜索、實(shí)時(shí)建議、微調(diào)搜索和自動(dòng)完成。第14章介紹了一組'反饋模式'，包括實(shí)時(shí)預(yù)覽、漸進(jìn)展現(xiàn)、進(jìn)度指示和定時(shí)刷新。

本書讀者對象

Who Should Read This Book

本書適合定義、設(shè)計(jì)及構(gòu)建Web界面的任何人。

Web設(shè)計(jì)人員在為設(shè)計(jì)精妙的富交互而勾勒草圖、奠定基調(diào)時(shí)，會(huì)發(fā)現(xiàn)本書介紹的原理特別有指導(dǎo)作用。同時(shí)，書中的大量模式能夠豐富你們的設(shè)計(jì)工具箱，數(shù)百個(gè)示例也提供了直觀的參考。當(dāng)然，書中列出的最佳實(shí)踐應(yīng)該是一個(gè)備忘錄，針對各種交互應(yīng)用場景給出了提示。

產(chǎn)品（項(xiàng)目）經(jīng)理在思考新的業(yè)務(wù)問題時(shí)，可以將書中的模式和示例作為拓展思路的良好起點(diǎn)。雖然本書沒有給出編程實(shí)現(xiàn)方案，但Web開發(fā)人員仍然會(huì)受益于其中總結(jié)的設(shè)計(jì)模式，因?yàn)檫@些模式可以直接映射到具體的編碼方案。對于相關(guān)的每個(gè)項(xiàng)目成員而言，這些模式會(huì)成為貫穿產(chǎn)品（項(xiàng)目）管理、設(shè)計(jì)和實(shí)施過程的詞匯表，從而為團(tuán)隊(duì)間明確、清晰地溝通和協(xié)作鋪平道路。

另外，無論你是剛剛?cè)胄械腤eb設(shè)計(jì)/開發(fā)新兵，還是擁有豐富經(jīng)驗(yàn)的老手，本書依托設(shè)計(jì)原理和模式給出的豐富而真實(shí)的示例，都將為你的日常工作帶來一股清新的空氣。

本書配套站點(diǎn)

What Comes with This Book

本書有一個(gè)專事拾遺補(bǔ)缺的配套站點(diǎn)，其中包含最新示例，對原理、模式及最佳實(shí)踐進(jìn)一步思考的結(jié)果，以及Web界面設(shè)計(jì)方面有價(jià)值的文章和資源的鏈接。

在遵守創(chuàng)意共享許可（Creative Commons license）的條件下，讀者可下載本書所有圖表及插圖并在自己的演示中使用。下載站點(diǎn)位于Flickr。

本書排版約定

Conventions Used in This Book

本書使用下列排版約定：

斜體（Italic ）或漢儀中黑簡體

表示URL、目錄、文件名、選項(xiàng)和模式名稱，偶爾也用于強(qiáng)調(diào)。

提示

表示提示、建議或一般備注。

使用示例

Using Examples

本書所有的插圖示例都可以在配套的Flickr站點(diǎn)中找到。在遵守創(chuàng)意共享許可和確保注明出處的條件下，讀者可以把這些插圖用在演示文檔或其他相應(yīng)場合。在注明出處時(shí)，通常應(yīng)該包含書名、作者、出版社和ISBN。例如,'Designing Web Interfaces, by Bill Scott and Theresa Neil, Copyright 2009 Bill Scott and Theresa Neil, 978-0-596-51625-3'。

如果讀者認(rèn)為自己對本書示例的使用超出了合理的或上述默認(rèn)許可的范圍，隨時(shí)可以通過 郵箱與我們聯(lián)系。

聯(lián)系我們

We'd Like to Hear from You

請將對本書的評價(jià)和存在的問題通過如下地址告知出版者：

美國：

O’Reilly Media, Inc.

1005 Gravenstein Highway North

Sebastopol, CA 95472

中國：

北京市西城區(qū)西直門南大街2 號成銘大廈C 座807 室（100035）

奧萊利技術(shù)咨詢（北京）有限公司

O’Reilly 的每一本書都有專屬網(wǎng)站，你可以在那里找到關(guān)于本書的相關(guān)信息，包括勘

誤列表、示例代碼以及其他信息。

對于本書的評論和技術(shù)性的問題，請發(fā)送電子郵件。

致謝

Acknowledgments

Bill的致謝

Bill's Acknowledgments

本書不僅僅是Theresa Neil和我兩個(gè)人努力的結(jié)果。直接參與的人還有很多，間接給了我們啟示的人則更多。

首先最重要的是感謝Ruth。她是我30年相濡以沫的好妻子、好朋友，更是一位好母親。沒有她的耐心和支持，本書是不可能面世的。

我對O’Relly的編輯們表示深深的謝忱。對Mary Treseler致以雙倍的敬意，她耐心地引導(dǎo)Theresa和我最終寫完本書。而且，她在本書編寫前期提出的建議也非常有價(jià)值。還要感謝讓本書成為現(xiàn)實(shí)的其他團(tuán)隊(duì)成員：Rachel Monaghan、Marlowe Shaeffer、Ron Bilodeau、Colleen Gorman、Adam Witwer和Robert Romano，恕不一一列舉。

寫過書的人都知道，技術(shù)審稿是確保圖書質(zhì)量的重要一環(huán)。感謝Christian Crumlish、Dan Saffer、Luke Wroblewski、Juhan Sonin、Kevin Arthur及Alan Baumgarten積極的肯定和建設(shè)性批評。雖然不能解決所有問題，但我認(rèn)真接受每一條意見，而這些意見對最終成書有莫大的影響。

在Yahoo!工作的那段時(shí)間對我非常重要。感謝Erin Malone發(fā)給我那封電子郵件，完全出乎我的意料，后來我就到Y(jié)ahoo!上班了。在Yahoo!跟才華橫溢的人們一起共事，為我的成功鋪平了道路。感謝Erin、Matt Leacock和Chanel Wheeler創(chuàng)立Yahoo! Design Pattern Library，感謝Larry Tesler 和Erin讓我領(lǐng)導(dǎo)和推廣公共Yahoo! Design Pattern Library的發(fā)布。正是這個(gè)模式負(fù)責(zé)人的經(jīng)歷，讓我進(jìn)一步明確思考了本書所要討論的內(nèi)容。在此，特別感謝那些不斷給我提供反饋的天才設(shè)計(jì)師和開發(fā)者，他們高超的技術(shù)水平也促使我不斷提高自己。感謝YUI團(tuán)隊(duì)，尤其是Nate Koechley 和Eric Miraglia詳細(xì)闡述'趣味瞬間'網(wǎng)格，講解如何通過代碼實(shí)現(xiàn)模式。感謝與我一道負(fù)責(zé)技術(shù)推廣的各位專家：Douglas Crockford、Iain Lamb、Julien Lecomte和Adam Platti。感謝我的好朋友Darren James，他時(shí)時(shí)刻刻都在鼓勵(lì)我。感謝有幸與之共事的天才設(shè)計(jì)師們，他們的思想和觀點(diǎn)反映在了本書的字里行間：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!之外，認(rèn)識或向以下大師學(xué)習(xí)，也激勵(lì)我不斷思考進(jìn)步，他們是Dan Saffer（Adaptive Path）、Ryan Freitas（Adaptive Path）、Aza Raskin（Humanized）、Scott Robbins（Humanized）、Peter Moerholz（Adaptive Path）和David Verba（Adaptive Path）。特別感謝模式社區(qū)中的那些朋友們， Jenifer Tidwell指明了模式的發(fā)展方向，Martijn van Welie創(chuàng)建了優(yōu)秀的模式庫。感謝James Refell 和Luke Wroblewski，以及他們在eBay對模式的研究工作。感謝當(dāng)前在Yahoo!負(fù)責(zé)管理模式的Christian Crumlish，他的思路總是那么清晰。感謝Jesse James Garrett，他不僅發(fā)明了Ajax這個(gè)名字，還邀請我參加第一次Ajax Summit，而且?guī)е遗c他共同做巡回演講。在Designing for Ajax Workshops授課的經(jīng)歷，也讓我對寫作本書充滿了信心，因?yàn)闀械膬?nèi)容提前得到了一些讀者的驗(yàn)證。

還要感謝那些邀請我去演講的公司和會(huì)議組織者。將本書內(nèi)容與數(shù)千位聽眾共享的價(jià)值是無法衡量的，借此讓我知道了大多數(shù)設(shè)計(jì)人員和開發(fā)人員普遍關(guān)心的問題。

以下是邀請我去演講的人（括號中是他們所在的公司，排名不分先后）：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）。另外，還必須感謝如下會(huì)議和公司：Web Builder 2.0、eBig、PayPal、eBay、CSU Hayward、City College San Francisco、Apple，等等。

我要對Sabre Airline Solutions深表謝意，特別是Brad Jensen，他完全信任并給了我一次難得的機(jī)會(huì)，讓我在他的公司實(shí)踐UX設(shè)計(jì)的思想。感謝David Endicott和Damon Hougland鼓勵(lì)我把這些思想公之于眾。感謝我團(tuán)隊(duì)的全體成員幫Theresa和我提前驗(yàn)證了這些思想。本書介紹的很多模式都源自他們親手設(shè)計(jì)的產(chǎn)品。

最后，感謝Netflix，我目前正在這個(gè)世界上最適合工作的地方不知疲倦地忙碌著。感謝Netflix所有人對我寫作本書的支持和教會(huì)我怎樣去設(shè)計(jì)并構(gòu)建最好的用戶體驗(yàn)。

Theresa的致謝

Theresa，s Acknowledgments

我想對以下這些人致以深深的謝意。

Aaron Arlof，感謝他為本書繪制的插圖。這些精美的插圖恰到好處地表現(xiàn)了全書的六個(gè)原理。

Brad Jensen，他是Sabre Airline Solutions的副總裁，也是他首先介紹我認(rèn)識了Bill。如果沒有Bill的悉心指導(dǎo)和培養(yǎng)，我不可能涉足這個(gè)領(lǐng)域。

Damon Hougland，他幫助Bill和我在Sabre創(chuàng)建了User Experience（用戶體驗(yàn)）團(tuán)隊(duì)。

Jo Balderas，他引起了我對編程的興趣。

Darren James，他教會(huì)了我如何編程。

參與我們各類白板會(huì)議的客戶，特別是熱心學(xué)習(xí)和探討UI設(shè)計(jì)模式及原理的人：Steven Smith、Dave Wilby、Suri Bala、Jeff Como和Seth Alsbury，他們允許我（在RIA革命之初）設(shè)計(jì)他們的企業(yè)級應(yīng)用程序。特別感謝我的同事Wishingline 的Scott Boms、Paulo Viera、Jessica Douglas、Alan Baumgarten和Rob Jones。

最重要的是，要感謝我丈夫堅(jiān)定不移的支持，感謝我父母的鼓勵(lì)，還有我兒子，Aaron，謝謝他能讓我在電腦前面坐那么多鐘頭。^[1]