UI設計師告訴你你要會的還有Airbnb

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

除了官方部落格有公布這次大改版背后的組織重整及管理原則，在今年北京的 IxDC 互動設計大會，Airbnb 設計副總裁 Alex Schleifer 也逐一分享了他們?nèi)绾卫霉ぞ呒跋到y(tǒng)，讓工程師和設計師高效率地協(xié)作。因此我重新為 Airbnb 的設計組織流程做一個總整理，希望值得作為管理和流程設計者的參考。

DLS（Design Language System）

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

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

1、設計規(guī)范的嚴謹性——除了讓品牌調(diào)性要能維持一致，也需要各地各部門能在新增功能或未來管理時維持設計語言統(tǒng)一。

2、跨國語言上的畫面呈現(xiàn)——為了產(chǎn)品在地化，使用當?shù)卣Z言是在所難免的。要怎么讓「中文」（方塊表意文字）和「羅馬文字」（拼音線性文字）在同一種畫面上能一樣呈現(xiàn)最好的視覺效果和閱讀性，也是跨國介面設計中很重要的一環(huán)。

3、多位設計師和相關成員之間的合作——一個產(chǎn)品通常是由團隊所共同打造出來的，當越多人加入團隊時，人與人之間的合作會更加復雜。而不管今天團隊或大或小，每位團員多少都會用自己意識和經(jīng)驗來判斷及決策。

4、因應不同裝置上的呈現(xiàn)——想必這是每個 to C 的軟體設計都會遇到的問題，而當這個產(chǎn)品同時可以在 iOS、Android、網(wǎng)站等呈現(xiàn)時，又加上不同平臺會有不同螢幕大小和解析度，單單一個畫面可能就必須要有十幾種螢幕大小呈現(xiàn)才能完整涵蓋不同裝置。

5、軟體上的維護和延續(xù)性 ——當軟體作為產(chǎn)品，它就不像一般實體產(chǎn)品一樣會有製作上的損耗和替代性，且即使有團員更換，同一套程式架構和設計語言可能還會伴隨著這個產(chǎn)品數(shù)年，因此持續(xù)性的軟體維護和升級也是產(chǎn)品營運中很大的一部分。

Alex Schleifer 曾說過：“We can’t innovate our product if we don’t innovate how we build it.”（如果我們不進行創(chuàng)新，我們就不能創(chuàng)新我們的產(chǎn)品。）

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

設計規(guī)范 

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

不同于一般人規(guī)范設計元件（Component）時單獨定義元件裡的各個元素（Element），再用那些元素作不同排列組合， Airbnb 思考他們?nèi)绾我悦總€元件為單位，創(chuàng)造出一個有機的設計系統(tǒng)，且每個元件可以各自獨立發(fā)展，也可以與其他元件相互組合。

一個有系統(tǒng)的設計應不是只規(guī)范單獨的元素，而是一個創(chuàng)造出一個有機的設計生態(tài)系統(tǒng)。

系統(tǒng)化的設計元件

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

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

DLS 里的畫面功能分類，將來發(fā)展可以更為有系統(tǒng) 

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

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

Airshots

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

而前段也提到多種裝置上畫面呈現(xiàn)的問題。市面上行動裝置百百種，每款螢幕大小及解析度不一，各家軟體系統(tǒng)更是持續(xù)更新，工程師也必須耗費時間在不同環(huán)境下作系統(tǒng)測試。讓所有功能及畫面在每個使用者手上都能呈現(xiàn)出最完好的效果，也是設計工作流程裡非常重要的一個細節(jié)。

為了因應這些問題， Airbnb 打造了 Airshots。

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

Airshots讓設計師及工程師可以在不同裝置下快速地找到相對應的設計畫面

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

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

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

韓文（方塊文字）對比德文（線性拼音文字）

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

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

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

Airjet

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

假如今天公司里的設計師遍布全球各地，要能整合并快速預覽每位設計師的設計，也是產(chǎn)品組織流程上會遇到的挑戰(zhàn)。

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

Airjet 上可以利用檔案名稱或設計師名字來搜尋到想要的設計畫面

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

React.Sketch

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

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

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

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

但 React.Sketch 不是用 Sketch 里的元件、 或者 來進行設計，因為這樣表示你只是換了個工具來“畫圓”、“畫線”；取而代之的是，他們利用 React 風格的樣式來架構 Sketch 設計，像是 、 等，這樣他們就可以輕易將 DLS 上的已經(jīng)設計好的各個設計元件用簡單的程式碼呈現(xiàn)出來放在畫布上。

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

無接縫與資料庫串接
直接套用網(wǎng)路上的資源 API 來生成資料

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

自動生成響應式排版

利用 Flexbox 直接使一個畫布生成出不同裝置螢幕的更多畫布

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

畫面文字全語言切換

串 Google Translate API 在 Sketch 上即時更換語言呈現(xiàn)

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

現(xiàn)在這套工具已經(jīng)開放在 Github 上供大家使用，而 Airbnb 也持續(xù)在優(yōu)化功能，如果使用上有遇任何問題，歡迎回饋給他們。

Lottie

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

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

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

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

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

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

安裝 After Effect 的擴充插件 Bodymovin，可以參考這篇安裝教學，想知道怎么應用 Lottie 在 After Effect 上輸出成 JSON 檔，里面有更多詳細教學。

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

結語

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

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

當然，一個設計開發(fā)系統(tǒng)永遠不會有完成的一天， Airbnb 也持續(xù)在他們的 DLS 和協(xié)作工具不斷優(yōu)化。他們不僅訂定了嚴謹且彈性的設計系統(tǒng)，更統(tǒng)一了他們的工作語言，并期望開放給 Airbnb 之外的產(chǎn)業(yè)使用。也許在不久的將來， Airbnb 就會像 Google 及 Facebook 這樣的巨擘一樣，聯(lián)合起來共同打造一個軟體設計產(chǎn)業(yè)皆通用的開放資源庫呢！
相關文章--《UI設計理論整合集》