原文刊登於 Medium  As A Product Designer，作者為 UI/UX 設計師黃瀚慶，更多資訊請見作者 個人官網 。INSIDE 獲授權轉載。

Airbnb 在近期改版了 app 的設計介面，也花了大功夫改造全新的設計組織流程及協作工具，讓 Airbnb 在世界各地的個服務據點及分公司都能快速、同步且有效率的進行設計流程。

除了 官方部落格 有公布這次大改版背後的組織重整及管理原則，在今年北京的 IxDC 互動設計大會，Airbnb 設計副總裁 Alex Schleifer 也逐一分享了他們如何利用工具及系統，讓工程師和設計師高效率地協作。因此我重新為 Airbnb 的設計組織流程做一個總整理，希望值得作為管理和流程設計者的參考。

DLS（Design Language System）

隨著 Airbnb 的規模日益擴大，從原本的 3 人小團隊，到目前（至 2017 年 7 月）服務範圍已遍及 191 個國家、使用超過 40 種語言，設計工程部門更是跨足世界各地，除了設計上的需求有增無減，各部門的協作及統合上的效率也顯得更為重要。

Airbnb 在公司急遽擴張時設計組織上所遇到的問題：

1. 設計規範的嚴謹性 ——除了讓品牌調性要能維持一致，也需要各地各部門能在新增功能或未來管理時維持設計語言統一。
2. 跨國語言上的畫面呈現 ——為了產品在地化，使用當地語言是在所難免的。要怎麼讓「中文」（方塊表意文字）和「羅馬文字」（拼音線性文字）在同一種畫面上能一樣呈現最好的視覺效果和閱讀性，也是跨國介面設計中很重要的一環。
3. 多位設計師和相關成員之間的合作 ——一個產品通常是由團隊所共同打造出來的，當越多人加入團隊時，人與人之間的合作會更加複雜。而不管今天團隊或大或小，每位團員多少都會用自己意識和經驗來判斷及決策。
4. 因應不同裝置上的呈現 ——想必這是每個 to C 的軟體設計都會遇到的問題，而當這個產品同時可以在 iOS、Android、網站等呈現時，又加上不同平台會有不同螢幕大小和解析度，單單一個畫面可能就必須要有十幾種螢幕大小呈現才能完整涵蓋不同裝置。
5. 軟體上的維護和延續性 ——當軟體作為產品，它就不像一般實體產品一樣會有製作上的損耗和替代性，且即使有團員更換，同一套程式架構和設計語言可能還會伴隨著這個產品數年，因此持續性的軟體維護和升級也是產品營運中很大的一部分。

Alex Schleifer 曾說過

“We can’t innovate our product if we don’t innovate how we build it.”

為了能讓他們更有效率管理產品，有更多空間專注在製作細節和創意上，因此他們成立新的工具團隊，重新組織設計架構和語言。

在訂定新的設計語言初期，他們已經大略將基本的樣式規範出來，當做 DLS 的基底，包含字體、顏色、icons、間格距離和資訊架構等。

不同於一般人規範設計元件（Component）時單獨定義元件裡的各個元素（Element），再用那些元素作不同排列組合， Airbnb 思考他們如何以每個元件為單位，創造出一個有機的設計系統，且每個元件可以各自獨立發展，也可以與其他元件相互組合。

一個有系統的設計應不是只規範單獨的元素，而是一個創造出一個有機的設計生態系統。

每個元件都會有規定擺放的元素（如標題、內容、icon、圖片），有時會包含選擇性出現的元素，而這些元素都有被規範在 Sketch 及程式碼裡。他們也同時也規範許多通用細節，像是每個元件下方都要有屬於自己的分隔線，而不是另外在元件外加上分隔線。

除了設計元件，他們也整理出 App 裡會應用到的主要功能畫面，並且將規範完的各個元件套進畫面裡，分門別類，讓每個畫面都有屬於自己的類別，有了完整的架構，將來要發展更多流程畫面時，就可以依循這套模式前進。

當他們設計完這些元件時，會統一做成程式碼形式上傳到資料庫，因此他們在之後做設計時，可以直接從資料庫裡同步抓取需要的元件。

那他們是怎麼整合設計元件及程式碼的呢？這個在下面介紹他們其他強大工具時會有詳細解說。

Airshots

當軟體服務跨到多國語言時，通常必須是設計師將同一個畫面複製多張，將同一個資訊套用不同語言的文字來預覽並調整元件；抑或請工程師那端跑出不同語言的情境，再與設計師校對資訊，這一來一回之間損耗了許多人力跟時間。

而前段也提到多種裝置上畫面呈現的問題。市面上行動裝置百百種，每款螢幕大小及解析度不一，各家軟體系統更是持續更新，工程師也必須耗費時間在不同環境下作系統測試。讓所有功能及畫面在每個使用者手上都能呈現出最完好的效果，也是設計工作流程裡非常重要的一個細節。
為了因應這些問題， Airbnb 打造了 Airshots。

AirShots 並不是一個設計繪圖軟體，你無法在上面畫任何一個形狀，它更像是一個版本控管的工具。

而有了這套工具，設計師和測試人員就可以無時無刻地搜尋任何一個功能或畫面在任何語言、任何裝置、任何系統版本下呈現出來的樣子。

舉例來說，你可以立即預覽一個「私訊頁面」在 Airbnb 一年前的某版本下在俄羅斯 iPhone4 的 iOS7 跑出來的效果，也可以快速的找出最新 beta 版的首頁設計在最新發布 Nexus 手機裡的 Android 7.0 Nougat 系統呈現出的樣貌。而這些結果不是只是螢幕截圖而已，而是真的可以模擬運作的功能。

進行在地化軟體服務會遇到的不同語言呈現問題，設計師也可以在 AirShots 快速地預覽效果。

尤其當如果最初使用中文或日文那種表意方塊文字來做設計，翻譯到了線性羅馬拼音文字時，時常會因留白不夠而造成元件破格、或是詞寬太長而過度換行的問題。

在 AirShots 裡，它會直接將設計畫面裡的文字元素串用 Google API 翻成任何語言模擬出來，設計師就不用為了模擬不同語言效果做畫面調整而創建幾十個畫布，有效地節省設計流程時間，產品品質管理上也可以大幅提升效能。

而 Airbnb 近期內也將會開放 AirShots 的資源，讓軟體產業都可以利用此工具來進行設計版本管理，增加工程師和設計師的協作效率。

Airjet

這次北京 IxDC 大會上 Alex Schleifer 也第一次公開他們公司內部使用的另一個設計整合工具——Airjet。

假如今天公司裡的設計師遍佈全球各地，要能整合並快速預覽每位設計師的設計，也是產品組織流程上會遇到的挑戰。

尤其像 Airbnb，所有設計都是由 DLS 裡以程式碼的方式拉下來製作，製作完也必須都同時存為設計檔和程式碼檔回傳到資料庫，而 Airjet 就能幫他們解決這樣的問題。

Airjet 比較是一個雲端平台，跟 invision 類似的概念，所有設計師的設計檔案上傳到雲端後都會同步到 Airjet 上，因此如果想要快速搜尋某位設計師的某個設計檔案，可以直接在上方的搜尋框輸入關鍵字，篩出符合的檔案，點進去後可以預覽設計檔裡的所有畫布。

React.Sketch

就在今年 4 月底， Airbnb 在 Github 上發佈了全新結合介面設計及程式開發的工具——React.Sketch。

故事起源於 Airbnb 先前熱衷於 React.js ，並且也利用 React.js 來建構網頁及 app 的設計系統，而 React Native 能讓網頁工程師利用 js 的寫法來產出 iOS 系統的 app 這點，更是讓他們十分敬佩。

有一次晚餐他們就在想：既然現在 Sketch 為介面設計使用工具的最大宗，而 Sketch 檔案最終還是得要轉成程式碼，那我們何不用寫程式的方式在 Sketch 上做設計呢？於是這套工具因而誕生。

簡單來說，React.Sketch 就是讓開發者能利用 javasript ，在 Sketch 上進行介面設計。

但 React.Sketch 不是用 Sketch 裡的元件 <rect>、<circle> 或者<line> 來進行設計，因為這樣表示你只是換了個工具來「畫圓」、「畫線」；取而代之的是，他們利用 React 風格的樣式來架構 Sketch 設計，像是<view>、<text> 等，這樣他們就可以輕易將 DLS 上的已經設計好的各個設計元件用簡單的程式碼呈現出來放在畫布上。

更有趣的是，一般在 Sketch 上只能作純設計，常常會遇到畫面中資料需要模擬真實情境的時候，這時我們只能自己純手工輸入假資料上去（而且輸入到後來還會很煩）；但 React.Sketch 不僅能在 Sketch 上做到介面設計，更能讓設計師「即時」生成數種情境：

無接縫與資料庫串接

你可以串聯真正的資料庫來呈現設計，像是利用 Foursquare API 來尋找場所地點，也可利用 Google maps 來生成即時的地圖和詳細資料。

自動生成響應式排版

React.Sketch 使用了 Flexbox 來排版。設計師不用再拖拉元件的寬高來適應不同螢幕的大小，只需要輸入幾行文字，就可以直接且即時在 Sketch 畫布上生成畫面。

畫面文字全語言切換

前面提到 AirShots 可以讓你預覽同一個畫面在不同語言下呈現的樣子，而 React.Sketch，讓你能在 Sketch 一邊設計畫面、一邊即時預覽任何語言放進設計裡的效果，方便設計師調整。再也不怕原本設計好好的中文版畫面，在加入德文版本後會撐破版面，而必須重新調整的窘境了。

現在這套工具已經開放在 Github 上供大家使用，而 Airbnb 也持續在優化功能，如果使用上有遇任何問題，歡迎回饋給他們?。

Lottie

Airbnb 在今年 2 月發布一款造福軟體業的應用程式動畫工具 Lottie ，提供 iOS 、 Android 和 React Native 框架的動畫文件庫，幫助開發者更容易在原生應用程式中加上動畫。

過去我們在 iOS 、Android 中製作一些複雜的動畫時，都無法避免在工程師與設計師來回溝通之間花上大把時間，而且製作上也有一定難度。通常不是放入一堆不同大小的分開圖件，就是寫出很長一串的 Code，還要定義 timing function 才能讓動畫達到精準，也因為這樣，許多 App 都省略許多動畫效果。

所以 Airbnb 團隊在一年前決定要在這方面做一次大改變，Lottie 應運而生。

有了 Lottie ，設計師在 After Effects 設計完動畫後，只需透過 After Effects 的擴充套件 Bodymovin 將動畫轉成 JSON 檔，再使用 Lottie 渲染 JSON 檔，不用重寫程式、便可以直接將動畫套用於應用程式中。

由於輸出使用的動畫檔為 JSON 格式，Lottie 大幅降低檔案大小，在應用程式中使用更有彈性，還可以解決過去利用 GIF 或 PNG 多張序列圖檔製作動畫的缺點，如檔案過大、解析度限制無法彈性縮放等，而且還可以支援 iOS 、 Android 及 React Native ，大幅減少工程師及設計師製作動畫的時間。

Airbnb 希望透過 Lottie ，讓在不同系統的應用程式中套用動畫就像用靜態圖檔一樣簡單。

安裝 After Effect 的擴充插件 Bodymovin，可以參考這篇 安裝教學 ，想知道怎麼應用 Lottie 在 After Effect 上輸出成 JSON 檔，也可以參考 如何使用 Lottie 將完美動畫 100% 呈現在產品上 ，裡面有更多詳細教學。

另外在 Lottie 動畫素材平台 上也有許多設計師所做的現成 Json 及 Aep 動畫，可以拿來參考運用。

結語

工具是為了需求而生，不得不說， Airbnb 這幾年在公司擴張上遇到的組織運作問題，套用在其他公司也都大同小異，而 Airbnb 在重新建構設計組織流程的努力，不僅讓內部設計流程更為有效率，也減少設計師、工程師及相關團隊之間的合作成本。

隨著科技進步，設計師與工程師之間的界線越來越小，協作的重要性也日益提高，介面設計師不再僅侷限在視覺效果工作 — 只要會畫畫、把畫面弄得美美的就好；一個理想的團隊裡，設計師不僅能夠和工程、產品部門一起讓整個服務開發流程更加順暢、有系統，同時還要有高度與他們共同協作的能力。

當然，一個設計開發系統永遠不會有完成的一天， Airbnb 也持續在他們的 DLS 和協作工具不斷優化。他們不僅訂定了嚴謹且彈性的設計系統，更統一了他們的工作語言，並期望開放給 Airbnb 之外的產業使用。也許在不久的將來， Airbnb 就會像 Google 及 Facebook 這樣的巨擘一樣，聯合起來共同打造一個軟體設計產業皆通用的開放資源庫呢！

參考資料：Airbnb.design 、 2017 Beijing IxDC

延伸閱讀：

• Airbnb 組織流程大改版！設計副總：不創造新的方法，就無法創造新的產品