作者：Rian van der Merwe

2012年6月6日

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

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

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

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

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

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

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

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

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

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

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

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

其解決方案：

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

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

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

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

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

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

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

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

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

模式何時(shí)成禍害

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

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

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

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

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

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

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

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

何時(shí)突破模式？

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

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

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

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

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

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

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

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

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

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

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

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

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

既定方式已過(guò)時(shí)

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

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

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

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

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

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

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

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

知情決策才是正確決策

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

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

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

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

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