美女免费黄网站-美女免费精品高清毛片在线视-美女免费精品视频在线观看-美女免费毛片-成人在激情在线视频-成人在免费观看视频国产

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

在今年北京的 IxDC 互動(dòng)設(shè)計(jì)大會(huì)，Airbnb 設(shè)計(jì)副總裁 Alex Schleifer 也逐一分享了他們?nèi)绾卫霉ぞ呒跋到y(tǒng)，讓工程師和設(shè)計(jì)師高效率地協(xié)作。因此我重新為 Airbnb 的設(shè)計(jì)組織流程做一個(gè)總整理，希望值得作為管理和流程設(shè)計(jì)者的參考。

DLS（Design Language System）

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

Airbnb 在公司急遽擴(kuò)張時(shí)設(shè)計(jì)組織上所遇到的問(wèn)題：

1. 設(shè)計(jì)規(guī)范的嚴(yán)謹(jǐn)性——除了讓品牌調(diào)性要能維持一致，也需要各地各部門(mén)能在新增功能或未來(lái)管理時(shí)維持設(shè)計(jì)語(yǔ)言統(tǒng)一。

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

3. 多位設(shè)計(jì)師和相關(guān)成員之間的合作——一個(gè)產(chǎn)品通常是由團(tuán)隊(duì)共同打造出來(lái)的，當(dāng)越多人加入團(tuán)隊(duì)時(shí)，人與人之間的合作會(huì)更加復(fù)雜。而不管今天團(tuán)隊(duì)或大或小，每位團(tuán)員多少都會(huì)用自己意識(shí)和經(jīng)驗(yàn)來(lái)判斷及決策。

4. 不同設(shè)備上的呈現(xiàn)——想必這是每個(gè) to C 的軟件設(shè)計(jì)都會(huì)遇到的問(wèn)題，當(dāng)這個(gè)產(chǎn)品可以在 iOS、Android、網(wǎng)站等平臺(tái)呈現(xiàn)時(shí)，不同平臺(tái)又會(huì)有不同屏幕大小和分辨率，單單一個(gè)畫(huà)面可能就必須要有十幾種屏幕大小呈現(xiàn)才能完整涵蓋不同設(shè)備。

5. 軟件的維護(hù)和延續(xù)性 ——當(dāng)軟件作為產(chǎn)品，它就不像一般實(shí)體產(chǎn)品一樣會(huì)有制作上的損耗和替代性，即使有團(tuán)員更換，同一套程式架構(gòu)和設(shè)計(jì)語(yǔ)言可能還會(huì)伴隨著這個(gè)產(chǎn)品數(shù)年，因此持續(xù)性的軟件維護(hù)和升級(jí)也是產(chǎn)品運(yùn)營(yíng)中很大的一部分。

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

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

設(shè)計(jì)規(guī)范

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

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

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

系統(tǒng)化的設(shè)計(jì)元件

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

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

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

當(dāng)他們?cè)O(shè)計(jì)完這些元件時(shí)，會(huì)統(tǒng)一做成程式碼形式上傳到資料庫(kù)，因此他們?cè)谥笞鲈O(shè)計(jì)時(shí)，可以直接從資料庫(kù)里同步抓取需要的元件。

那他們是怎么整合設(shè)計(jì)元件及程式碼的呢？這個(gè)在下面介紹他們其他強(qiáng)大工具時(shí)會(huì)有詳細(xì)解說(shuō)。

Airshots

當(dāng)軟件服務(wù)跨到多國(guó)語(yǔ)言時(shí)，通常必須是設(shè)計(jì)師將同一個(gè)畫(huà)面復(fù)制多張，將同一個(gè)資訊套用不同語(yǔ)言的文字來(lái)預(yù)覽并調(diào)整元件；抑或請(qǐng)工程師跑出不同語(yǔ)言的情境，再與設(shè)計(jì)師校對(duì)資訊，這一來(lái)一回之間損耗了許多人力跟時(shí)間。

而前段也提到多種設(shè)備上畫(huà)面呈現(xiàn)的問(wèn)題。市面上移動(dòng)設(shè)備有上百種，每款屏幕大小及分辨率不一，各家軟件系統(tǒng)更是持續(xù)更新，工程師也必須耗費(fèi)時(shí)間在不同環(huán)境下作系統(tǒng)測(cè)試，讓所有功能及畫(huà)面在每個(gè)使用者手上都能呈現(xiàn)出最完好的效果，也是設(shè)計(jì)工作流程里非常重要的一個(gè)細(xì)節(jié)。

為了因應(yīng)這些問(wèn)題， Airbnb 打造了 Airshots。

AirShots 并不是一個(gè)設(shè)計(jì)繪圖軟件，你無(wú)法在上面畫(huà)任何一個(gè)形狀，它更像是一個(gè)版本控管的工具。

Airshots讓設(shè)計(jì)師及工程師可以在不同設(shè)備下快速地找到相對(duì)應(yīng)的設(shè)計(jì)畫(huà)面。

而有了這套工具，設(shè)計(jì)師和測(cè)試人員就可以無(wú)時(shí)無(wú)刻地搜尋任何一個(gè)功能或畫(huà)面在任何語(yǔ)言、任何設(shè)備、任何系統(tǒng)版本下呈現(xiàn)出來(lái)的樣子。

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

進(jìn)行本地化軟件服務(wù)會(huì)遇到的不同語(yǔ)言呈現(xiàn)問(wèn)題，設(shè)計(jì)師也可以在AirShots快速地預(yù)覽效果。

韓文（方塊文字）對(duì)比德文（線性拼音文字）

如果最初使用中文或日文那種表意方塊文字來(lái)做設(shè)計(jì)，翻譯到了線性羅馬拼音文字時(shí)，時(shí)常會(huì)因留白不夠而造成元件破格、或是詞寬太長(zhǎng)而過(guò)度換行的問(wèn)題。

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

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

Airjet

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

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

尤其像 Airbnb，所有設(shè)計(jì)都是由 DLS 里以程式碼的方式拉下來(lái)制作，制作完也必須都同時(shí)存為設(shè)計(jì)檔和程式碼檔回傳到資料庫(kù)，而 Airjet 就能幫他們解決這樣的問(wèn)題。

Airjet 上可以利用檔案名稱或設(shè)計(jì)師名字來(lái)搜尋到想要的設(shè)計(jì)畫(huà)面。

Airjet 比較是一個(gè)云端平臺(tái)，跟 invision 類似的概念，所有設(shè)計(jì)師的設(shè)計(jì)檔案上傳到云端后都會(huì)同步到 Airjet 上，因此如果想要快速搜尋某位設(shè)計(jì)師的某個(gè)設(shè)計(jì)檔案，可以直接在上方的搜尋框輸入關(guān)鍵字，篩出符合的檔案，點(diǎn)進(jìn)去后可以預(yù)覽設(shè)計(jì)檔里的所有畫(huà)布。

React.Sketch

就在今年4月底， Airbnb 在 Github 上發(fā)布了全新結(jié)合界面設(shè)計(jì)及程式開(kāi)發(fā)的工具——React.Sketch。

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

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

簡(jiǎn)單來(lái)說(shuō)，React.Sketch 就是讓開(kāi)發(fā)者能利用 javasript ，在 Sketch 上進(jìn)行界面設(shè)計(jì)。

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

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

無(wú)接縫與資料庫(kù)串接直接套用網(wǎng)路上的資源 API 來(lái)生成資料。

你可以串聯(lián)真正的資料庫(kù)來(lái)呈現(xiàn)設(shè)計(jì)，像是利用 Foursquare API 來(lái)尋找場(chǎng)所地點(diǎn)，也可利用 Google maps 來(lái)生成即時(shí)的地圖和詳細(xì)資料。

自動(dòng)生成響應(yīng)式排版

利用 Flexbox 直接使一個(gè)畫(huà)布生成出不同設(shè)備屏幕的更多畫(huà)布。

React.Sketch 使用了 Flexbox 來(lái)排版。設(shè)計(jì)師不用再拖拉元件的寬高來(lái)適應(yīng)不同屏幕的大小，只需要輸入幾行文字，就可以直接且即時(shí)在 Sketch 畫(huà)布上生成畫(huà)面。

畫(huà)面文字全語(yǔ)言切換

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

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

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

Lottie

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

過(guò)去我們?cè)?iOS 、Android 中制作一些復(fù)雜的動(dòng)畫(huà)時(shí)，都無(wú)法避免在工程師與設(shè)計(jì)師來(lái)回溝通之間花上大把時(shí)間，而且制作上也有一定難度。通常不是放入一堆不同大小的分開(kāi)圖件，就是寫(xiě)出很長(zhǎng)一串的Code，還要定義 timing function 才能讓動(dòng)畫(huà)達(dá)到精準(zhǔn)，也因?yàn)檫@樣，許多 App 都省略許多動(dòng)畫(huà)效果。

所以Airbnb團(tuán)隊(duì)在一年前決定要在這方面做一次大改變，Lottie 應(yīng)運(yùn)而生。

有了 Lottie ，設(shè)計(jì)師在 After Effects 設(shè)計(jì)完動(dòng)畫(huà)后，只需透過(guò)After Effects的擴(kuò)充套件 Bodymovin 將動(dòng)畫(huà)轉(zhuǎn)成 JSON 檔，再使用 Lottie 渲染JSON檔，不用重寫(xiě)程式、便可以直接將動(dòng)畫(huà)套用於應(yīng)用程式中。

由于輸出使用的動(dòng)畫(huà)檔為 JSON 格式，Lottie大幅降低檔案大小，在應(yīng)用程式中使用更有彈性，還可以解決過(guò)去利用 GIF 或PNG 多張序列圖檔製作動(dòng)畫(huà)的缺點(diǎn)，如檔案過(guò)大、解析度限制無(wú)法彈性縮放等，而且還可以支援 iOS 、 Android 及 React Native ，大幅減少工程師及設(shè)計(jì)師制作動(dòng)畫(huà)的時(shí)間。

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

安裝 After Effect 的擴(kuò)充插件 Bodymovin，可以參考這篇安裝教學(xué)，想知道怎么應(yīng)用 Lottie 在 After Effect 上輸出成 JSON 檔，也可以參考 如何使用Lottie 將完美動(dòng)畫(huà)100%呈現(xiàn)在產(chǎn)品上 ，里面有更多詳細(xì)教學(xué)。

另外在 Lottie 動(dòng)畫(huà)素材平臺(tái) 上也有許多設(shè)計(jì)師所做的現(xiàn)成 Json 及 Aep 動(dòng)畫(huà)，可以拿來(lái)參考運(yùn)用。

結(jié)語(yǔ)

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

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

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

貴陽(yáng)APP開(kāi)發(fā),貴陽(yáng)網(wǎng)站建設(shè),宏思銳達(dá)