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

本文編譯自〈Building a Visual Language

三位創辦人中有兩位是設計背景出身,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)、色彩或字型的選擇中苦苦打轉。設計語言讓所有設計師都對視覺風格有一致的理解,並且精簡了不同裝置的設計流程,設計原型或進行實驗時亦有低成本、高效率,且高度擬真的效果。

關鍵字: #UI/UX設計 #Airbnb
往下滑看下一篇文章
從媒體採購到策略夥伴,AI正重塑媒體代理商的核心價植
從媒體採購到策略夥伴,AI正重塑媒體代理商的核心價植

廣告行銷產業向來瞬息萬變,每一次新技術或創新工具的出現,都可能徹底改寫既有的遊戲規則,特別是近年來方興未艾的AI浪潮,更為產業帶來前所未有的全面性變革。

群邑集團(WPP Media)台灣分公司執行長郭俊鑫認為,AI的影響力不僅止於優化財務、行政等內部營運流程,更能提高公司對品牌主的服務效率,無論是媒體規劃與採購、廣告投放、素材製作、成效評估等作業,都能藉由 AI 加速完成,進而節省作業人力和時間。在此趨勢推動下,媒體代理商的角色定位也將有所轉變——從單純的媒體採購者,進化為能與品牌主緊密協作的策略夥伴(collaborator)。

「AI 並不會削弱媒體代理商的存在價值,而是促使產業重新定義自身的核心價值,」郭俊鑫強調,AI 的數據分析與內容生成能力,讓媒體代理商可以省去大量的瑣碎作業,將更多時間用來與品牌主進行更深入的溝通,共同討論行銷策略、找出問題環節,從而實現銷售成長與市場突破的目標。

群邑集團(WPP Media)台灣分公司執行長郭俊鑫
群邑集團(WPP Media)台灣分公司執行長郭俊鑫
圖/ 數位時代

從Output到Outcome,媒體代理商服務價值的轉變

隨著角色定位的轉變,品牌主對媒體代理商服務的評估標準,也應從「產出(Output)」走向「成效與價值(Outcome)」。

在傳統合作模式中,品牌主大多以產出來衡量媒體代理商的服務價值,例如:提案數量、完成了哪些媒體規劃等,這些作業往往需要投入大量人力或時間。然而,當 AI 可以處理與分析大量數據、快速挖掘過去難以發現的消費者洞察,甚至自動生成各式內容時,就意味著,以前需要多人一起執行的任務,現今也許只需一人就能完成,此時若仍以產出來衡量媒體代理商的服務價值,顯然已不合時宜。

因此,衡量標準應該由產出走向成效與價值(Outcome),例如:廣告能否真正帶動產品銷量成長?行銷策略是否能改善市場表現或獲取更多消費者認同?這才是彰顯媒體代理商專業價值與策略影響力的關鍵。

以廣告投放為例,品牌主關注的焦點大多為,是否買到好價格?是否取得優質版位?等,媒體代理商往往需要投入大量時間和心力去做媒體規劃、彙整與分析投放數據,才能回應品牌主的期待。如今這些工作可交由 AI 協助完成,讓媒體代理商能有更多時間與品牌主探討更深層的問題,例如:本檔廣告活動對銷售的實際貢獻、是否觸及到正確的目標族群等。

全球首個 AI 驅動的一體化行銷平台:WPP Open

差異就在於,品牌主需要的是單純的「廣告採購者」?還是能帶來營收與成長的「策略夥伴」?若選擇後者,就更需要 AI 的力量,才能真正實現目標。

對此,群邑集團全新研發 WPP Open 平台並預計2025年11月在台灣正式上市,這是全球第一個從媒體規劃階段就引入 AI Agent 技術的數位行銷平台,也是第一個將媒體、創意與製作三大環節整合在一起的平台,幫助品牌主與媒體代理商邁向「真正協作」的目標。

郭俊鑫指出,媒體、創意與製作通常分由不同公司執行,即使隸屬同一集團,彼此仍是各自分工,缺乏真正一體化的運作。WPP Open 平台則打破此藩籬,以單一平台串起所有工作流程,讓提案規劃、媒體採購、創意發想與製作、到商務轉換都可以在單一平台內完成,並藉由 AI 輔助生成內容與進行數據分析,不僅提升作業效率,也讓廣告行銷更具價值。

郭俊鑫指出,透過 AI 輔助,WPP Open 平台能自動生成內容並進行深度數據分析,不僅顯著提升作業效率,更驅動廣告行銷創造卓越價值。
郭俊鑫指出,透過 AI 輔助,WPP Open 平台能自動生成內容並進行深度數據分析,不僅顯著提升作業效率,更驅動廣告行銷創造卓越價值。
圖/ 數位時代

郭俊鑫進一步說明,過去某IT品牌若要進行一場焦點團隊測試,從發想、執行到蒐集消費者對於創意概念的意見,通常需要花上一兩個月的時間。如今,透過 WPP Open 平台,能將以往耗時一個月的的作業時間,大幅縮短至一週內完成, 快速針對不同族群測試廣告創意或行銷點子,並蒐集回饋意見,讓行銷團隊能以更敏捷的方式調整策略,將資源投注在更有潛力的方向。

對品牌主來說,應用AI的真正重點在於如何解決問題、驅動市場成長,對此,WPP Media將於11月5日舉辦一場半日論壇,除了帶來 WPP Open平台的完整介紹、分享多家客戶成功案例,亦將攜手The Trade Desk(TTD)與奧美整合行銷傳播集團,從媒體代理、廣告科技、創意內容等不同角度,探討AI對廣告行銷的影響,希望協助品牌主運用 AI 洞察消費者行為、優化行銷流程,並將每一分行銷投資轉化為更具體的成效。

活動報名連結

若欲了解更多活動訊息,歡迎直接洽詢 WPP Media - Growth & Marketing | MKTG@wppmedia.com

登入數位時代會員

開啟專屬自己的主題內容,

每日推播重點文章

閱讀會員專屬文章

請先登入數位時代會員

看更多獨享內容

請先登入數位時代會員

開啟收藏文章功能,

請先登入數位時代會員

開啟訂閱文章分類功能,

請先登入數位時代會員

我還不是會員, 註冊去!
追蹤我們
一次搞懂Vibe Coding
© 2025 Business Next Media Corp. All Rights Reserved. 本網站內容未經允許,不得轉載。
106 台北市大安區光復南路102號9樓