深度分析

Airbnb 是這樣打造一致性的「設計語言」

2016-06-05
NbPJGrS

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

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

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

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

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

1)統一(unified):每個物件都應該天衣無縫地嵌入整體,不該出現突兀的功能或任何格格不入的異常。

2)全球通用(universal):Airbnb 是個跨國服務,因此必須設計一套全球使用者都能理解的視覺語言。

3)聚焦(iconic):設計與功能同樣重要,必須採取大膽且清楚的行動達成這兩個目的。

4)對話式(conversational):動態(motion)徹底融入我們的設計之中,讓我們與使用者的溝通暢通無阻。

 

圖片來源

 

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

 

圖片來源

 

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

 

圖片來源

 

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

 

圖片來源

 

在設計「設計語言」時,同樣也會卡關,也一直有改進空間。不過整體而言,Karri Saarinen 表示,投資「設計語言」勢在必行,他們從此幾乎能夠在同一時間為所有平台打造、釋出功能,而工程師能夠更專注編寫功能性的程式碼,開發也更有效率;此外,設計師與工程師有了共通語言,不再聽不懂對方的話。

而且,設計師也能真正投入設計概念與體驗,而非只是在內距(padding)、色彩或字型的選擇中苦苦打轉。設計語言讓所有設計師都對視覺風格有一致的理解,並且精簡了不同裝置的設計流程,設計原型或進行實驗時亦有低成本、高效率,且高度擬真的效果。

 

 

原文出自《數位時代》,作者陳伊凡擅長擬寫網路科技相關的文章。

 

上一篇
下一篇

相關文章

Bitnami