Airbnb是這樣打造一致性的「設計語言」！設計背後的四原則、三要素

三位創辦人中有兩位是設計背景出身，Airbnb 向來以良好的設計體驗自豪。他們的設計團隊由十幾個不同性質的小組組成，執行了「設計語言系統」的計畫，將協作的成果發揮到淋漓盡致。

本文編譯自〈 Building a Visual Language 〉

三位創辦人中有兩位是設計背景出身，Airbnb 向來以良好的設計體驗自豪。身在軟體公司，設計團隊通常被要求提供「一次性的解決方案」，不過，隨著團隊愈來愈龐大，版本更迭愈來愈頻繁，倘若解決方案缺乏穩固的基礎，很容易累積大量的技術與設計債。

如同所有語言，如果沒有建立一致的概念，與所有人共享，視覺語言也很容易產生誤解。 Airbnb 首席體驗設計師 Karri Saarinen 在部落格中解釋，設計非常側重「系統」，以及設法以可規模化、可重複性的方式打造產品。只是，儘管數位產品是最能發揮系統優勢的肥沃土壤，設計系統化卻不太受到重視。

一套統一的設計系統，應當可以打造更優異的產品，讓使用者獲得連貫、且容易理解的體驗，同時也讓不同設計師在共同的語言中工作，以達成更高的效率。Airbnb 的成長速度驚人，如今他們的設計團隊由十幾個不同性質的小組組成，因此需要形塑一套系統性的方法，將協作的成果發揮到淋漓盡致。

Karri Saarinen 指出幾點設計需要系統化的原因：第一，軟體設計相對實體產品設計，雖然限制較少、設計自由度高，卻也容易造成使用體驗不連貫的問題，另外，小團隊成長的過程中加入愈來愈多設計師，不同的設計師帶來不同的解決方案與風格，體驗也容易走偏。其次，數位產品通常是跨平台的，讓設計細節同步化也是一門功夫，最後，不同於其他實體產品，軟體是綿延不斷的，即使新版本已上線，或者甚至品牌風格大改，舊有的設計與程式仍可能散落在網路各處，需要經常性的維護與升級。

因此，Airbnb 執行了「設計語言系統」的計畫，他們設定了幾個原則：

統一（unified）：每個物件都應該天衣無縫地嵌入整體，不該出現突兀的功能或任何格格不入的異常。
全球通用（universal）：Airbnb 是個跨國服務，因此必須設計一套全球使用者都能理解的視覺語言。
聚焦（iconic）：設計與功能同樣重要，必須採取大膽且清楚的行動達成這兩個目的。
對話式（conversational）：動態（motion）徹底融入我們的設計之中，讓我們與使用者的溝通暢通無阻。

###建立「設計語言」的三大要素

##1 組織基本風格指南，打地基

正式打造「設計系統」前，Airbnb 先組織了「基本風格指南」，稱之為「foundation（地基、基礎）」。這個指南針對字型、色彩、圖標、間距與資訊架構下了簡單而鬆散的定義，確立所有參與的設計師有著一致的步調與方向，但又保留能夠獨自探索創意設計解決方案的空間。隨著具體的樣式（pattern）浮現，必要時他們也在過程中逐步修正，並且開始定義標準化元件（standardized components）。

##2 設計元件應該是不斷進化的生態系統

一般而言，許多風格指南都把元件（components）當作像是靜態的「原子」（atom）物件，可以構成不同的「分子」（molecule），但因設計太過自由，五花八門的組合反而可能造成不連貫的體驗。因此他們轉換思考，把元件變成「生物體（living organism）」，功用、個性各自不同，並分別由一組 property 定義，可與其他元件並存，也能夠自我演化。 一套統一的設計語言，不該只是死板的規則與涇渭分明的原子，而是一整套不斷進化的系統。

##3 建造一座設計資料庫

在創造這些元件的同時，他們將之編入一個稱為「library」的主資料夾，歸納出導航、背景滾動（marquee）、內容、圖片、特殊等四種類別。才一兩個禮拜，就在進行設計迭代時感受到生產力大躍進，短短幾小時便生出適配 50 種螢幕的原型。比如，平板螢幕大部分的設計與手機類同，可以直接採用 iOS 與 Android 的設計元件，在這套系統中，元件可以改變外觀與定位，像是響應式網頁一般。