• 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 這樣的巨擘一樣,聯合起來共同打造一個軟件設計産業皆通用的開放資源庫呢!

    貴陽APP開發,貴陽網站建設,宏思銳達


<
上一篇: 5大設計要點,搭建好看又好賣的企業産品官網 下一篇: 高手幫你學規範!IOS和ANDROID規範解析之标簽導航和分段控件

聯系我們

一個新的需求,從這裡開始。歡迎填寫表格或發送合作郵件至: 25909395@qq.com 25909395@qq.com 加微信: 13765801787

13765801787
在線留言