作者：Rian van der Merwe

2012年6月6日

我們樂于相信：對網頁應用的普通要素，我們會采用成熟的設計模式。我們知道按鈕應該是什么樣、該如何運作、如何設計依賴于按鈕的提交表單（form）等等。

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

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

設計模式歷史

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

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

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

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

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

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

因為情況類似：我們有很多需要標準解決方案的普遍性交互問題，從建筑學跳到網頁應用，是很自然的。其中一個例子是雅虎的“導航標簽”模式。需要解決的問題是：

用戶需要在一個網站中導航以便找到內容和功能、并有其在該網站當前位置的明確標識。

其解決方案：

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

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

設計模式的益處

模式在設計中特別有用，主要原因有兩個：

• 模式節(jié)省時間：因為我們不用解決已經解決了的問題。如果運用得當，我們可以用每個模式背后的原則來解決其他普遍的設計問題。

• 模式使網頁更易于使用：因為隨著設計師爭相采用模式，用戶對其用法也習慣了，從而減少了在遇到普通設計元素時的認知負載。以學術術語來說，當模式達到高采用率時，就變成了心智模型，即在用戶大腦中關于某系統(tǒng)應如何運作的的一組信念。

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

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

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

模式何時成禍害

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

• 設計模式不是有效的培訓工具。

• 設計模式不能代替用戶體驗。

• 完備性與易學性相互沖突。

• 設計模式需要大筆投資。

• 設計模式應先用于非用戶體驗領域。

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

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

何時突破模式？

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

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

注意：輸入域很小、域標簽用了左對齊，而域標簽與輸入域隔得甚遠，“關閉”和“注冊”按鈕的位置與設計世紀上強調了“關閉”。還有，“歡迎詞”是什么？在哪兒用呢？我們都會同意，這不是良好的表單設計，不是突破模式的好方式。

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

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

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

新方式從實踐上改善了可用性

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

局部最大值，是指你已經達到了目前設計的極限點......就其形式而言，有效性將來也不會再有改進。即使做了上百次微調，改進也很有限；在當前的基礎結構上不能再優(yōu)化了。

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

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

你永遠不會是第一個有新想法的人。但你將是第一個用新方式表達該想法、或者以新方式把想法和其他相結合的人。想法無非是以往經驗的大雜燴。如果你接受這一點，想象力便能有些許擴大，你會另辟蹊徑尋找靈感。

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

既定方式已過時

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

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

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

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

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

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

連接性是“再世代”的基本前提和日常生活的自然基本結構。技術連接，是人們如何相遇、表達觀點、定義身份、相互了解。較早的世代基本上是使用技術來提高生產率，即把我們已經在做的事情做得更快、更好、更廉價。對“再世代”，連接是一種生活方式。

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

知情決策才是正確決策

設計模式帶來了諸多好處，但也帶來了需要我們警惕的害處。然而，對這些有幫助的指南置之不理是不明智的。沒有公式告訴我們如何行事，相反，我們需要在一定的范圍內操作，以確保能夠建立偉大的設計方案而不至于疏遠用戶。下面是我們需要做的：

• 學習與我們正在開發(fā)應用相關的設計模式。我們需要牢記這些模式，知道其存在的理由，以便能在工作中將其用作粗獷的藍圖。

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

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

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