-
AIRBNB 用這個流程,大幅提高了開發和設計的協作效率
/2017-07-27 14:19:44/
-
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 里會應用到的主要功能畫面,并且將規范完的各個元件套進畫面裡,分門別類,讓每個畫面都有屬于自己的類別,有了完整的架構,將來要發展更多流程畫面時,就可以依循這套模式前進。
DLS 里的畫面功能分類,將來發展可以更為有系統
當他們設計完這些元件時,會統一做成程式碼形式上傳到資料庫,因此他們在之后做設計時,可以直接從資料庫里同步抓取需要的元件。
那他們是怎么整合設計元件及程式碼的呢?這個在下面介紹他們其他強大工具時會有詳細解說。
Airshots
當軟件服務跨到多國語言時,通常必須是設計師將同一個畫面復制多張,將同一個資訊套用不同語言的文字來預覽并調整元件;抑或請工程師跑出不同語言的情境,再與設計師校對資訊,這一來一回之間損耗了許多人力跟時間。
而前段也提到多種設備上畫面呈現的問題。市面上移動設備有上百種,每款屏幕大小及分辨率不一,各家軟件系統更是持續更新,工程師也必須耗費時間在不同環境下作系統測試,讓所有功能及畫面在每個使用者手上都能呈現出最完好的效果,也是設計工作流程里非常重要的一個細節。
為了因應這些問題, Airbnb 打造了 Airshots。
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 上可以利用檔案名稱或設計師名字來搜尋到想要的設計畫面。
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 里的元件
、 或者 來進行設計,因為這樣表示你只是換了個工具來“畫圓”、“畫線”;取而代之的是,他們利用 React 風格的樣式來架構 Sketch 設計,像是 、 等,這樣他們就可以輕易將 DLS 上的已經設計好的各個設計元件用簡單的程式碼呈現出來放在畫布上。 更有趣的事,一般在 Sketch 上只能作純設計,常常會遇到畫面中資料需要模擬真實情境的時候,這時我們只能自己純手工輸入假資料上去(而且輸入到后來還會很煩);但 React.Sketch 不僅能在 Sketch 上做到界面設計,更能讓設計師「即時」生成數種情境:
無接縫與資料庫串接直接套用網路上的資源 API 來生成資料。
你可以串聯真正的資料庫來呈現設計,像是利用 Foursquare API 來尋找場所地點,也可利用 Google maps 來生成即時的地圖和詳細資料。
自動生成響應式排版
利用 Flexbox 直接使一個畫布生成出不同設備屏幕的更多畫布。
React.Sketch 使用了 Flexbox 來排版。設計師不用再拖拉元件的寬高來適應不同屏幕的大小,只需要輸入幾行文字,就可以直接且即時在 Sketch 畫布上生成畫面。
畫面文字全語言切換
串 Google Translate API 在 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 這樣的巨擘一樣,聯合起來共同打造一個軟件設計產業皆通用的開放資源庫呢!
- 熱門文章
- 1.如何讓 Xcode 在讀寫上提速100倍?
- 2.AIRBNB 用這個流程,大幅提高了開發和設計的協作效率
- 3.如何設計內容精確、體驗友好的DASHBOARD?(上篇)
- 4.餐飲革命:星廚餐幫與宏思銳達達成數字化產品開發戰略合作
- 5.拼必達-貴州第一個智慧同城配送平臺(宏思銳達研發)
- 推薦文章
- 1.可能是最全面的組件化開發與設計指南
- 2.一個APP界面設計完整流程詳解
- 3.設計思考:當項目中遇到技術限制,設計該如何彌補?
- 4.設計師如何打造雙11網紅爆款?揭秘天貓精靈的全鏈路營銷設
- 5.深度剖析APP開發價格為什么這么貴?
- 最新標簽
- APP開發