作者：Rian van der Merwe

2012年6月6日

我們樂于相信：對網(wǎng)頁應(yīng)用的普通要素，我們會采用成熟的設(shè)計(jì)模式。我們知道按鈕應(yīng)該是什么樣、該如何運(yùn)作、如何設(shè)計(jì)依賴于按鈕的提交表單（form）等等。

然而，破碎的表單、不成樣子的按鈕、令人迷惑的導(dǎo)航要素等等，在網(wǎng)頁應(yīng)用中比比皆是。與模式唱反調(diào)大行其道。

這令我想到了設(shè)計(jì)模式的歷史和目的、何時應(yīng)該使用或不用。最有趣的是，我開始琢磨：有時打破模式的限制、采用其他不同或更佳的方式，也許實(shí)際上更好。當(dāng)模式被誤用時，我們都能很快識別出來。然而，有沒有打破規(guī)則卻更好的情況呢？欲知完整答案，容我從頭道來。

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

1977年，建筑師Christopher Alexander與其他人一起著述了《模式語言：城鎮(zhèn)、建筑物、營造》（A Pattern Language: Towns, Buildings, Construction）一書，引入了模式語言的概念，即把該語言當(dāng)作“在專家領(lǐng)域中描述良好設(shè)計(jì)實(shí)踐的一種結(jié)構(gòu)式方法”。該書的目標(biāo)是給普通人（不僅限于建筑師及政府）用于改善其城市、社區(qū)的一份藍(lán)圖。作者的原話是：

其核心…是這樣一個理念，即人們應(yīng)該自行設(shè)計(jì)其住所、街道、社區(qū)。該理念…即是來自對這一事實(shí)的觀察，即：世上最奇妙的地方，都不是建筑師而是人民所建的。

圣地亞哥的街頭咖啡館（攝影：shanputnam）

無論是在建筑學(xué)、網(wǎng)頁設(shè)計(jì)或其他領(lǐng)域，一個模式總有兩個組件：第一，它描述了一個普遍的問題；第二，它為該問題提供了標(biāo)準(zhǔn)的解決方案。例如，在《模式語言》中的第88個模式解決的是身份問題以及如何引入公共場所來鼓勵在公眾場合打成一片。所建議的解決方案之一是街頭咖啡館：

街頭咖啡館提供了獨(dú)一無二的環(huán)境、為城市所特有：在那個地方，人們可以閑散、合法地坐著，可以被路人看到，也可以看世事變幻。故要在每個小區(qū)鼓勵建立當(dāng)?shù)氐慕诸^咖啡館。將咖啡館建成親密的場所、包含幾個房間、繁忙路徑可達(dá)，在那里人們可以坐下喝咖啡或其他飲料，觀看路人走過。咖啡館前部的布局建成：一組餐桌伸出咖啡廳到街道上。最人性化的城市，總是充滿了街頭咖啡館。

對有興趣進(jìn)一步探索該模式的人來說，有個Flickr討論組致力于該模式的案例。

因?yàn)榍闆r類似：我們有很多需要標(biāo)準(zhǔn)解決方案的普遍性交互問題，從建筑學(xué)跳到網(wǎng)頁應(yīng)用，是很自然的。其中一個例子是雅虎的“導(dǎo)航標(biāo)簽”模式。需要解決的問題是：

用戶需要在一個網(wǎng)站中導(dǎo)航以便找到內(nèi)容和功能、并有其在該網(wǎng)站當(dāng)前位置的明確標(biāo)識。

其解決方案：

為該網(wǎng)站提供一致、在網(wǎng)站品牌及頁眉之下的水平單行標(biāo)簽欄，是當(dāng)分類數(shù)不太可能經(jīng)常改變時的一種高層面導(dǎo)航方式。該標(biāo)簽欄應(yīng)占滿網(wǎng)頁寬度、采用有限與簡短、可預(yù)測的題目，當(dāng)前所選的標(biāo)簽應(yīng)被顯著標(biāo)出，以維持檔案夾的比喻。

都挺不錯，但我們需要進(jìn)一步探討，來搞明白在數(shù)字產(chǎn)品設(shè)計(jì)中采用此模式的益處。

設(shè)計(jì)模式的益處

模式在設(shè)計(jì)中特別有用，主要原因有兩個：

• 模式節(jié)省時間：因?yàn)槲覀儾挥媒鉀Q已經(jīng)解決了的問題。如果運(yùn)用得當(dāng)，我們可以用每個模式背后的原則來解決其他普遍的設(shè)計(jì)問題。

• 模式使網(wǎng)頁更易于使用：因?yàn)殡S著設(shè)計(jì)師爭相采用模式，用戶對其用法也習(xí)慣了，從而減少了在遇到普通設(shè)計(jì)元素時的認(rèn)知負(fù)載。以學(xué)術(shù)術(shù)語來說，當(dāng)模式達(dá)到高采用率時，就變成了心智模型，即在用戶大腦中關(guān)于某系統(tǒng)應(yīng)如何運(yùn)作的的一組信念。

采用已有設(shè)計(jì)模式而不是自己重新來的最強(qiáng)有力的理由，可能還是來自建筑學(xué)。在題為《非獨(dú)創(chuàng)的價值》一文中，Dmitri Fadeyev引用了Owen Jones（19 世紀(jì)建筑師及有影響力的設(shè)計(jì)理論家）在其著作《裝飾物的語法》中的話：

試圖與過去一刀兩斷來建立藝術(shù)理論或者一種風(fēng)格形式，不啻超級愚蠢的行為。那樣做即是把上千年積累的經(jīng)驗(yàn)和知識棄之不用。相反，我們應(yīng)該把過去的成功努力當(dāng)作遺產(chǎn)，不是盲目地遵從、而是把其作為找到正途的指南。

最后一句是關(guān)鍵。模式不是盲目抄襲他人的借口，而是可能對設(shè)計(jì)師和用戶極為有用的設(shè)計(jì)藍(lán)圖。而為了網(wǎng)絡(luò)的福祉和用戶不致發(fā)瘋，我們確實(shí)需要站在前人設(shè)計(jì)師的肩膀上。有很多網(wǎng)頁設(shè)計(jì)模式庫，效果不一。除了Yahoo Design Pattern Library之外，還有Peter Morville的Design Patterns、Welie.com、還有我個人所喜歡的UI-Patterns.com。

模式何時成禍害

現(xiàn)在該說另外一面了。模式的陰暗面我們講得不夠。隨意從各處拷貝一個模式庫、放在公司內(nèi)維基百科上、然后坐等奇跡發(fā)生，有些過于簡單了。集成和維護(hù)公司內(nèi)設(shè)計(jì)模式庫是繁重的工作，掉以輕心會帶來嚴(yán)重后果。Stephen Turbek在“設(shè)計(jì)模式是不是一個反模式”一文中總結(jié)了模式庫的主要問題：

• 設(shè)計(jì)模式不是有效的培訓(xùn)工具。

• 設(shè)計(jì)模式不能代替用戶體驗(yàn)。

• 完備性與易學(xué)性相互沖突。

• 設(shè)計(jì)模式需要大筆投資。

• 設(shè)計(jì)模式應(yīng)先用于非用戶體驗(yàn)領(lǐng)域。

本文不打算深入討論上述問題，故我極力建議讀者參閱Turbek的文章。

就本文而言，假定我們每件事都做對了。我們有一個經(jīng)過發(fā)布、得到了解的模式庫，并在公司內(nèi)得到了廣泛采用。我們把模式庫作為指南和藍(lán)圖，而不是奉為不分青紅皂白的金科玉律。我特別感興趣的問題是：在解決問題時，何時應(yīng)該突破一個廣泛采用的設(shè)計(jì)模式并指導(dǎo)用戶選擇新方式？

何時突破模式？

盡管模式有種種好處，大部分網(wǎng)頁設(shè)計(jì)卻似乎對模式不屑一顧。打破模式最明顯的例子莫過于網(wǎng)頁表單的設(shè)計(jì)。有了多年的研究，我們知道如何設(shè)計(jì)實(shí)用的表單。從Luke Wroblewski所著的《網(wǎng)頁表單設(shè)計(jì)》、到無數(shù)討論多欄格式和標(biāo)簽位置的文章，我們不用再摸索了。模式已有，并深入人心。然而，基本不可用的表單在網(wǎng)上卻是司空見慣。

作為打破表單模式的一個例子，我們看Expotel的注冊表單：

注意：輸入域很小、域標(biāo)簽用了左對齊，而域標(biāo)簽與輸入域隔得甚遠(yuǎn)，“關(guān)閉”和“注冊”按鈕的位置與設(shè)計(jì)世紀(jì)上強(qiáng)調(diào)了“關(guān)閉”。還有，“歡迎詞”是什么？在哪兒用呢？我們都會同意，這不是良好的表單設(shè)計(jì)，不是突破模式的好方式。

然而，對破壞了的模式下判決并非總是像上述例子那么簡單。谷歌最近決定在其Chrome瀏覽器中移除打開新標(biāo)簽頁按鈕上面的加號，就受到了些批評。這打破了在大多數(shù)支持標(biāo)簽頁的瀏覽器已經(jīng)使用了的模式，然而谷歌聲稱他們在更改之前做過用戶調(diào)查。這是正確的決定嗎？

還有一些用戶界面技巧我們也許還不知道如何評判。iOS應(yīng)用程序例如Clear和Path引入了前所未有的新式交互，用戶反饋則褒貶不一。是設(shè)計(jì)的進(jìn)步、還是失敗的實(shí)驗(yàn)？

和大多數(shù)設(shè)計(jì)決策一樣，答案很少是黑白分明的。模式與新解決方案的矛盾不可能由一個公式來判定。用戶熟悉既定的操作方式，然而問題的新解也許更好、甚至更自然、更符合邏輯。那么，何時應(yīng)該棄舊從新？有兩個場景我們應(yīng)考慮突破設(shè)計(jì)模式。

新方式從實(shí)踐上改善了可用性

在現(xiàn)有設(shè)計(jì)上從事迭代的危險之一，是所謂“局部最大值”。Joshua Porter有如下解釋：

局部最大值，是指你已經(jīng)達(dá)到了目前設(shè)計(jì)的極限點(diǎn)......就其形式而言，有效性將來也不會再有改進(jìn)。即使做了上百次微調(diào)，改進(jìn)也很有限；在當(dāng)前的基礎(chǔ)結(jié)構(gòu)上不能再優(yōu)化了。

對設(shè)計(jì)模式而言，也許有這種情形發(fā)生：我們不斷改善某個現(xiàn)有解決方案而無視更好的解決方案。A/B測試的陷阱之一是：它能有效地找到局部最大值，但無法找到標(biāo)新立異的方案。

從漸進(jìn)創(chuàng)新我們獲益良多，但有時一個模式已經(jīng)成熟，到了非大刀闊斧革新不可的程度。我們需要睜大眼睛考察每個設(shè)計(jì)問題，力圖找到新的解決方案，并且準(zhǔn)備測試這些方案以確保我們不致被錯誤的直覺所左右。正如Paul Scrivens在《設(shè)計(jì)構(gòu)思》中所指出的：

你永遠(yuǎn)不會是第一個有新想法的人。但你將是第一個用新方式表達(dá)該想法、或者以新方式把想法和其他相結(jié)合的人。想法無非是以往經(jīng)驗(yàn)的大雜燴。如果你接受這一點(diǎn)，想象力便能有些許擴(kuò)大，你會另辟蹊徑尋找靈感。

這是谷歌Chrome團(tuán)隊(duì)聲稱在瀏覽器內(nèi)移除加號按鈕的理由。該團(tuán)隊(duì)相信他們找到了更好的方案、并已做過測試。

既定方式已過時

在大多數(shù)應(yīng)用里有個用來“保存”的圖標(biāo)。你上一次見到軟盤驅(qū)動器是什么時候？就是啊。時過境遷，我們不得不順其自然。否則，我們會陷入沼澤，如Twyla Tharp所證明的那樣（Yesenia Perez-Cruz引用）：

在多數(shù)場合，我會在堅(jiān)持久經(jīng)考驗(yàn)方法的結(jié)果中發(fā)現(xiàn)絕境，而這些方法沒有考慮到變化。

出版行業(yè)對此最有體會。Stewart Curry在《比喻必須死》（The Trope Must Die）中說：

設(shè)計(jì)模式可能非常有用，然而當(dāng)我們在媒體業(yè)進(jìn)行重大變革時，模式可能會拖后腿。以數(shù)字出版的進(jìn)化為例，這是個緩慢、穩(wěn)步、基本上是從印刷頁到以數(shù)字裝置重現(xiàn)印刷頁面的過程。過程是穩(wěn)步的、線性的，缺乏想象力的，而“既然印刷適用、數(shù)字形式也應(yīng)該適用”似乎是其思維定式。

這就是Clear和Path等軟件開發(fā)人員的天地，他們正在從事大膽、正確的創(chuàng)新。他們認(rèn)識到，我們正處于以手勢為界面的快速創(chuàng)新階段初期，他們愿意引領(lǐng)潮流。某些想法將失敗、某些將勝出，但重要的是，設(shè)計(jì)模式對我們已置身其間的新觸摸屏世界要做出回應(yīng)。

我們的設(shè)計(jì)模式不僅需要根據(jù)交互比喻變化而調(diào)整，還要根據(jù)一般重大技術(shù)用法來調(diào)整。Tammy Erickson在其稱作“再世代”（后Y世代）方面做了些研究，在《移動技術(shù)如何打造新一代》中討論了她的部分發(fā)現(xiàn)：

連接性是“再世代”的基本前提和日常生活的自然基本結(jié)構(gòu)。技術(shù)連接，是人們?nèi)绾蜗嘤?、表達(dá)觀點(diǎn)、定義身份、相互了解。較早的世代基本上是使用技術(shù)來提高生產(chǎn)率，即把我們已經(jīng)在做的事情做得更快、更好、更廉價。對“再世代”，連接是一種生活方式。

當(dāng)一切都永遠(yuǎn)聯(lián)機(jī)、可獲取時，對服務(wù)和手機(jī)軟件的期望會改變。對較慢的轉(zhuǎn)變、看來太復(fù)雜的流程，我們會覺得難以忍受。在一個時間與注意力都變得空前匱乏的環(huán)境下，我們已在被迫重新考慮注冊表單和支付流程。我們不用重新發(fā)明輪子，但我們確實(shí)需要找到不斷前進(jìn)的更佳方式。

知情決策才是正確決策

設(shè)計(jì)模式帶來了諸多好處，但也帶來了需要我們警惕的害處。然而，對這些有幫助的指南置之不理是不明智的。沒有公式告訴我們?nèi)绾涡惺?，相反，我們需?span style="font-family:Microsoft YaHei;">在一定的范圍內(nèi)操作，以確保能夠建立偉大的設(shè)計(jì)方案而不至于疏遠(yuǎn)用戶。下面是我們需要做的：

• 學(xué)習(xí)與我們正在開發(fā)應(yīng)用相關(guān)的設(shè)計(jì)模式。我們需要牢記這些模式，知道其存在的理由，以便能在工作中將其用作粗獷的藍(lán)圖。

• 以足夠開放的心態(tài)面對每個新項(xiàng)目，以便發(fā)現(xiàn)老問題的更佳解決方式。

• 跟上本行業(yè)（以及相鄰行業(yè)）的發(fā)展步伐，以便能夠認(rèn)識外來的變化，而這些變化需要我們重新審視目前運(yùn)行良好、但也許很快就要過時了的解決方案。

簡言之，我們既不能全部遵從、也不能全然忽視設(shè)計(jì)模式。相反，我們需要深入理解人機(jī)交互的法則，以便知道何時能夠打破法則。