曾經有一位僧人,隱居在高山之巔的一向小石屋裡。從山頂上可以遠美麗的大海。但從僧人的石屋裡和通往石屋的路上都無法看到海景。不過,在石屋前面有一個庭院,院子的四周是道厚實的石牆。當有人去僧人的石屋時,他穿過石牆的門洞就進人這個庭院,然後斜穿過去,到達石屋的大門。在庭院的較遠側,石牆上有一條裂縫,它很窄小,斜對著石屋大門。當有人穿過庭院,走到跟院牆上的這條縫隙對準的一個地方,剎那間,他看見了大海。但隨即他便走進了屋內,此景稍縱即逝。
遠處大海的風光如曇花一現,卻長久地在人的腦際迴盪,睹這一景色的人,誰能忘懷?它的魅力將永遠不會消失。
那達成如此效果的訣竅是什麼?
假如有一處美麗的風景供朝夕觀賞,如果它越是一覽無遺,越是引人入勝,就越容易讓人感到厭倦。逐漸地它會變成建築物的一部分,如同糊牆紙一樣;屋子裡的人再不會覺得這一景色有什麼強烈的感人之美。
因此,不要設計巨大的窗戶讓景色一覽無餘,這樣只會損壞景緻。要把窗戶開在過渡空間(例如走道、門廳、入口、樓梯等)。如此一來,當人們走近窗口或從窗前經過時,他們就能夠瞥見遠處的風景,進而留下深刻的印象。
上述例子就是亞歷山大在《建築模式語言》中提出的一種稱為「禪宗觀景」的模式。而如果如果你留意過中國園林,你會發現園林設計中這種模式也被大量地運用(換了一種名字或者說法)。
禪宗觀景的例子非常形象地展現了一種我們所熟悉的設計模式。那設計模式具體是什麼呢?
設計模式:有關設計的精妙見解#
設計模式最早的概念來源於建築設計領域,著名建築理論家亞歷山大(Alexander)於 1977 年出版了《建築模式語言》一書。在書中,他通過一系列建築特徵的精確定義,提供了 253 個描述城鎮、鄰里、住宅、花園及房間的模式。亞歷山大提取了那些帶給居民幸福感的建築設計的精華,並將這些設計方式稱為「設計模式」(Design Pattern)。
設計模式的概念隨著時間逐漸被人們所接受,在 1996 年左右,Coram、Tidwell 等提出了以用戶為中心的界面設計模式語言的設計模式,正式在人機交互領域引入了設計模式的概念。當年比較知名的有 Tidewell 的 Common Ground 這一設計模式語言,在後來逐步演化為我們所熟知的《界面設計模式》(Designing Interfaces,下稱「鴨子書」🦆📚 )。
雖然設計模式發展迅速,但大家對它的概念或者定義眾說紛紜,覺得這是一個可以包含很多東西的詞。在學術論文《Pattern Languages in HCI: A Critical Review》中 Dearden Andy 等人對設計模式做了綜述性地整理,提取了提取了這麼多年設計模式發展過程中諸多論文對設計模式的理解與定義,我將其中一些相對關鍵的觀點整理如下:
從上述對設計模式概念定義的研究可以發現,不同學者對模式的定義各有不同的理解,其中包含重複結構的提取(模式構造)、人造物(設計文檔、開發工具)、傳播媒介(通用語言)、知識載體(知識記錄工具)等若干方面。
作為體驗設計師,我們其實並不需要關心設計模式的具體定義是怎麼樣的,但是通過上述研究和討論,我們便可以對設計模式有一個基本的認知。
就我個人自己來說,最戳中我的解釋是:設計模式是有關設計的精妙見解。因為無論是將設計模式定義為設計指南,特殊的文檔形式,還是說它是通用解決方案,都是在描述設計模式的特徵,而設計模式的閃光本質在於,它包含了對設計的深刻洞見。
為什麼我們需要設計模式?#
在說為什麼我們需要設計模式之前,不妨先來聊聊交互設計發展到現在,目前遇到了哪些問題。
● 設計合理性、設計品質的問題。我們在做設計的過程中,經常會接到產品側給出的需求,有時候這個需求之前從來沒有接觸過,也沒有在競品設計中看到過,該如何才能把它設計得更專業?如何才能說服產品經理我的設計是合理的?
● 設計經驗如何沉澱的問題。組件化、規範化的設計思路日益普及,但是仍有很多設計師存在困惑,例如不知道什麼樣的內容可以 / 應該被沉澱成組件;有很多功能過於複雜,看上去無法沉澱為組件,但是很多業務中可能需要用到,比如拖拽的交互設計等等。而事實上更有大量的設計經驗不適合沉澱為組件,那這些經驗又該如何沉澱和積累?如果把這些設計經驗都作為規範的話,同樣會帶來很多問題,例如,到底什麼樣的經驗才能被稱作是規範?設計規範的邊界將會無窮無盡,這是非常不合理的形態。
這個時候,你會發現設計模式可以很好一種很好地解決上述問題的利器。
體系化設計思路,提升設計品質#
設計模式是諸多設計經驗中的精華部分,它們不僅說明如何解決問題,而且說明為什麼這種設計適合當前的特定情況。
以「深層鏈接」(Deep Links)這個設計模式為例,「深層鏈接」是指一種包含了網站或應用特定狀態的鏈接。當用戶通過該鏈接加載後,程序將還原預期的應用狀態。
例如使用 YouTube 的分享鏈接,可以勾選上開始時間一個選項,這樣一旦通過該鏈接打開,就能讓視頻的播放時間自動定位到視頻的 51 秒。
為什麼「深度鏈接」是一種好的模式呢?因為深度鏈接為用戶提供了一種直接打開應用程序狀態的方法,從而節省了時間和精力。它的行為就像是直接鏈接到常規網站上某個內容的 “深層鏈接”,或者是指向博客文章的永久鏈接。這種模式使得分享變得非常方便。深層鏈接可以通過微信、微博、文章等進行傳播,講到這裡,相信大家並不陌生淘寶鏈接、支付寶口令紅包等等,用到的都是「深度鏈接」這個模式。
設計模式給設計師們提供了非常豐富的設計彈藥庫。例如當你需要對某些頁面元素進行布局時,你可以從信息塊的 5 種模式中進行挑選,如果你要對列表進行設計,你可以根據自己的需求從 7 種列表相關的設計模式中找到匹配的模式。有了這樣一個巨大的彈藥庫,我們就可以在設計的過程中始終具有體系感,且達到較高的設計品質。
沉澱設計經驗#
設計模式是沉澱設計經驗極佳的一種方式。按照設計模式的標準結構,它包含有以下五個部分:
● What 是什麼;
● When 何時使用;
● Why 為什麼模式是這樣的?
● How 如何使用;
● Example 具體的案例;
這樣五個部分的介紹可以很清晰地呈現相關場景下的巧妙設計解法,也就是設計模式。(關於具體的案例,詳見)。無論領域、主題,無論抽象、具象的設計經驗都可以用這樣的一種結構記錄下來,進而形成有價值的設計資產。
鴨子書沉澱了 Tidewell 幾十年設計經驗積累下來的大量設計模式。在去年(2020 年)的時候,鴨子書第三版出版,Tidwell 把之前極為陳舊的案例全部替換成了最新的,包括但不限於 macOS、Chrome、Slack、Spotify、Pinterest 等等。還加了一些設計系統的介紹(例如 Microsoft 的 Fluent Design)和一些設計趨勢研究。
(第二版)的案例都是 2010 年前的設計案例,完全跟不上如今交互設計的發展。(第三版)的案例則全部換成近幾年最新的版本,具有極大的參考價值。
此外,當這本書中包含了大量設計模式時,其實就不再適合用書籍的形式承載了。無論是閱讀還是查閱,一本線性的、無法檢索的書籍根本無法發揮出設計模式庫的最大價值。
合抱之木,生於毫末,九層之臺,起於累土。