注：本文是Airbnb新的設(shè)計(jì)語言的一部分，由Airbnb首席設(shè)計(jì)師Karri Saarinen發(fā)布于airbnb.design

從事軟件開發(fā)和設(shè)計(jì)工作,我們往往需要提出一個(gè)完整的一次性解決方案。但有時(shí)我們是受到時(shí)間的限制,或者我們只是還沒有確定一個(gè)清晰的發(fā)展方向。一次性的解決方案并不是說它不好,但是如果它不是建立在一個(gè)堅(jiān)實(shí)的基礎(chǔ)之上,最終我們會發(fā)現(xiàn)自己還是不得不回過頭來償還技術(shù)積累和設(shè)計(jì)這筆債。

視覺語言就像任何其他的語言一樣。如果不被使用它的每個(gè)人共享并理解，那么使用這種語言溝通將很容易出現(xiàn)誤解。隨著產(chǎn)品或整個(gè)團(tuán)隊(duì)的壯大，這種模式帶來的問題也會越來越突出。

設(shè)計(jì)一直都是系統(tǒng)最主要的構(gòu)成部分，設(shè)計(jì)規(guī)范是一種使產(chǎn)品達(dá)到可擴(kuò)展性和可重復(fù)性的方式。無論是潘通色卡還是飛利浦發(fā)明的十字槽螺釘，這些設(shè)計(jì)規(guī)范使我們能夠避免混亂,從而創(chuàng)造更好的產(chǎn)品。最適合建立設(shè)計(jì)規(guī)范的可能就是數(shù)字化產(chǎn)品領(lǐng)域了。但它往往不被我們視為優(yōu)先級的事項(xiàng)。

更好、更快是一個(gè)設(shè)計(jì)規(guī)范最基本的要素。更好是因?yàn)橐恢滦缘捏w驗(yàn)?zāi)茏尞a(chǎn)品更易用；更快是因?yàn)樗鼮樵O(shè)計(jì)師提供了一套協(xié)作的共同語言。

一、為什么需要設(shè)計(jì)規(guī)范

Airbnb這些年增長非常快速。目前我們的設(shè)計(jì)部門有十多個(gè)專職設(shè)計(jì)輸出小組。我們越來越意識到我們需要更系統(tǒng)的設(shè)計(jì)方法用來指導(dǎo)和提升大家的工作效率。我相信對軟件行業(yè)來說，這個(gè)問題更嚴(yán)重。

1、缺少限制
相比于其他設(shè)計(jì)領(lǐng)域，軟件設(shè)計(jì)幾乎沒有物理限制。這就意味著任何一個(gè)問題都可能有多種解決方案，但這恰恰可能造成用戶體驗(yàn)的不一致。因此作為產(chǎn)品所有者或設(shè)計(jì)師,我們必須創(chuàng)建并遵循自己的設(shè)計(jì)規(guī)范。

2、多人協(xié)作
軟件通常是由一個(gè)團(tuán)隊(duì)設(shè)計(jì)出來的，有時(shí)甚至可能是很大的團(tuán)隊(duì)。這就意味著，創(chuàng)造一個(gè)連貫一致的用戶體驗(yàn)的難度會隨著團(tuán)隊(duì)成員的人數(shù)增加而呈指數(shù)增長。另外，無論團(tuán)隊(duì)協(xié)作多么一致或團(tuán)隊(duì)多小,不同的人總會有不同的解決方案或設(shè)計(jì)風(fēng)格,很容易導(dǎo)致體驗(yàn)割裂。

3、多個(gè)平臺
我們需要讓產(chǎn)品應(yīng)用于多種不同的平臺和設(shè)備。為保證產(chǎn)品在多平臺間的同步及體驗(yàn)的一致性，通常需要在不同平臺上去做很多重復(fù)性的工作。

4、軟件是連貫的
軟件的另一個(gè)不同之處在于，雖然它可以被認(rèn)為是一個(gè)產(chǎn)品，但他不會像傳統(tǒng)的消費(fèi)品那樣真的磨損或被更換。即使公司和其產(chǎn)品本身發(fā)生了大的變化，多年前的代碼和設(shè)計(jì)仍然會存在于產(chǎn)品的許多地方。這就要求不斷的維護(hù)和升級。

二、馬上開始

為了迅速解決我們前面提到的挑戰(zhàn)，我們挑選了一些設(shè)計(jì)師和工程師組建了一個(gè)小組，把手頭的工作全部放下，在公司外面找了一個(gè)工作室，專心于設(shè)計(jì)創(chuàng)建這套設(shè)計(jì)語言系統(tǒng)（DLS）。

我們?yōu)镈LS設(shè)置的目標(biāo)是創(chuàng)建一個(gè)更美觀和通用性的設(shè)計(jì)語言。通過定義好的可復(fù)用的組件來提高效率。為了集中我們有限的精力,我們優(yōu)先選定了客戶端平臺：Android和IOS。

我們開始重新審視和打印出我們以往的那些設(shè)計(jì)稿。然后將這些設(shè)計(jì)稿按照順序依次粘貼在一個(gè)板子上，這樣我們就能找出哪塊的體驗(yàn)比較糟糕并提出優(yōu)化方案。我們認(rèn)為,創(chuàng)建一個(gè)設(shè)計(jì)規(guī)范最好的開始方式就是先把現(xiàn)有的難題處理掉。我們每個(gè)人都分別專注于那些需要重新設(shè)計(jì)的產(chǎn)品頁面或是某些模塊，很快我們就建立起了一套指導(dǎo)原則：

1、統(tǒng)一性
每個(gè)模塊的設(shè)計(jì)都是整體的一部分,應(yīng)該對整體的表現(xiàn)有正向的提升作用。不應(yīng)該有單獨(dú)的特性或風(fēng)格。

2、通用性
Airbnb在全世界都被廣泛地應(yīng)用。我們的產(chǎn)品和視覺語言應(yīng)該被所有用戶認(rèn)可并理解。

3、形象化
我們同時(shí)專注于功能設(shè)計(jì)和視覺設(shè)計(jì)，我們的產(chǎn)出物應(yīng)該能清晰地引導(dǎo)用戶的認(rèn)知。

4、會話式
我們使用了動態(tài)呼吸式的表現(xiàn)手法讓用戶能夠輕易地理解我們的產(chǎn)品。

三、奠定基礎(chǔ)

在開始設(shè)計(jì)這個(gè)系統(tǒng)之前,我們已經(jīng)創(chuàng)建了一個(gè)基本的風(fēng)格指南,我們稱為基礎(chǔ)部分。這個(gè)基礎(chǔ)簡單地定義了我們的字體、顏色、圖標(biāo)、間距和信息結(jié)構(gòu)。當(dāng)設(shè)計(jì)師們在各自探索多樣化的創(chuàng)意設(shè)計(jì)方案時(shí)，這個(gè)基礎(chǔ)風(fēng)格指南對于一個(gè)統(tǒng)一的設(shè)計(jì)規(guī)范來說是必不可少的。我們覺得自己都非常努力，因?yàn)槲覀冊跒楣餐睦硐牍ぷ??；仡櫸覀兗w工作的每一天,我們開始看到這個(gè)系統(tǒng)模式漸漸浮現(xiàn)出來。我們會在必要時(shí)采取糾偏措施,開始定義標(biāo)準(zhǔn)化的組件。

四、創(chuàng)建組件

一般來說,許多風(fēng)格指南定義組件都被作為“原子組件”,然后用于構(gòu)建更復(fù)雜的“分子組件”。理論上，這種做法能很好的構(gòu)建連貫靈活的系統(tǒng)。而在現(xiàn)實(shí)中，更可能的情況卻是：這些可復(fù)用的組件被各種方式整合在一起，形成一個(gè)更復(fù)雜的“分子組件”。其結(jié)果往往是造成了各種雜亂脫節(jié)的體驗(yàn)，使系統(tǒng)難以維護(hù)。

為了避免依賴“原子組件”，我們轉(zhuǎn)而開始考慮把組件作為一個(gè)活的有機(jī)體元素。它們有功能和特性,是由一組屬性定義構(gòu)成,可以與其他元素共存，也能單獨(dú)起作用。

一個(gè)統(tǒng)一的設(shè)計(jì)語言不應(yīng)該僅僅是一組靜態(tài)規(guī)則和單個(gè)組件構(gòu)成的，它應(yīng)該是一個(gè)不斷發(fā)展的生態(tài)系統(tǒng)。

例如,我們的用戶頭像元素可能最初是被一個(gè)風(fēng)格指南定義的,但最終被用于各種平臺上時(shí)可能要面臨不同的排列或呈現(xiàn)方式,這會導(dǎo)致我們后續(xù)難以更新。所以我們必須要在做好適配的前提下解決這個(gè)問題。

每個(gè)組件都會定義一些必需的元素(如標(biāo)題、文本、圖標(biāo)和圖片),有時(shí)也可能包含其他可選元素。這些元素在Sketch文檔和代碼層都要被定義。不是讓層獨(dú)立于組件起作用,我們要求每個(gè)組件都有一個(gè)層,并能在視圖邏輯上可見或隱藏。

我們在創(chuàng)建這些組件的同時(shí)，會把他們收集在一個(gè)叫做庫的根文件，這種做法貫穿整個(gè)設(shè)計(jì)過程中。一兩周后,我們開始看到通過在反復(fù)的設(shè)計(jì)中使用庫文件所帶來的生產(chǎn)力上巨大飛躍。某天,當(dāng)最后的原型確定了之后,我們的團(tuán)隊(duì)已經(jīng)能夠使用我們的庫文件提供的框架在短短幾小時(shí)內(nèi)創(chuàng)造近50張?jiān)O(shè)計(jì)稿。

隨著庫文件的擴(kuò)張,我們開始把各個(gè)功能相似的獨(dú)立組件整理到一個(gè)畫板中，做好分類。這些畫板由一系列常規(guī)的分類組成：導(dǎo)航，移動文本，圖片和特殊類。

我們創(chuàng)建了一組用于手機(jī)的組件(iOS和Android),并讓他們適配平板電腦。平板電腦上的組件在很大程度上跟手機(jī)上的相同的，從技術(shù)層面上來說只需要一套代碼，兩套不同的樣式而已。類似于為網(wǎng)頁設(shè)計(jì)而生的響應(yīng)式設(shè)計(jì)方案，這些系統(tǒng)組件在外觀和位置上都可以不同。設(shè)計(jì)師可以使用常規(guī)組件設(shè)計(jì)一個(gè)版本，之后就可以很容易地適應(yīng)IOS和Android下的不同屏幕尺寸。

對于平板電腦,我們創(chuàng)建了一個(gè)簡單布局的概念，如焦點(diǎn)視圖，它聚焦于頁面內(nèi)容，模態(tài)窗口和網(wǎng)格布局。

所有的組件和視圖都是用我們自己的技術(shù)視圖框架構(gòu)建的，用來處理這些風(fēng)格，狀態(tài)和自適應(yīng)性。

經(jīng)驗(yàn)教訓(xùn)

我們知道這是一個(gè)具有挑戰(zhàn)性的項(xiàng)目。這意味著要重新設(shè)計(jì)和重新構(gòu)建應(yīng)用程序中的大多數(shù)視圖。我們盡最大的努力創(chuàng)建出一個(gè)視覺語言系統(tǒng)并于4月17日發(fā)布新應(yīng)用程序。在以后的項(xiàng)目中,我們希望我們能夠避免下面這些坑。

1、并不是所有的組件都是同等優(yōu)先的

在大多數(shù)應(yīng)用程序中都會有一套組件是經(jīng)常重復(fù)使用的。對我們來講，這些組件就像表格中的行元素?；叵胍幌?我真希望我們花了更多的時(shí)間來考慮這些組件并產(chǎn)出一套強(qiáng)大的模式和組件庫。事實(shí)上在最后，我們曾經(jīng)被那些不一致的組件傷透了腦筋。

2、Sketch

我們最初試圖在Sketch中用創(chuàng)建符號的方式來做這些組件，但最后導(dǎo)致一片混亂。即使是現(xiàn)在，我們的設(shè)計(jì)文件有時(shí)仍難以維護(hù)。下一步，我們能找到更好的辦法來維護(hù)和創(chuàng)建新組件。

3、文檔

這個(gè)項(xiàng)目要求我們在有限的時(shí)間內(nèi)完成，導(dǎo)致我們忽視了一些文檔記錄的工作。文檔的缺乏帶來了一些本可以避免的混亂。像編程一樣，創(chuàng)建良好的文檔的至關(guān)重要的。對我們而言，這是一個(gè)遲早要做的事，以便讓我們在做每個(gè)決定時(shí)有更清晰的思路和參考。

五、結(jié)論

這是一個(gè)里程碑式的任務(wù)，雖然這讓很多產(chǎn)品團(tuán)隊(duì)成員付出了很多，但最終我們發(fā)現(xiàn)創(chuàng)建一個(gè)自己的設(shè)計(jì)語言系統(tǒng)是非常值得的，也是邁向未來的巨大一步。

自從設(shè)計(jì)語言和代碼可以方便的共享以來，我們現(xiàn)在可以在所有客戶端平臺上大致同步的構(gòu)建和發(fā)布功能。而開發(fā)進(jìn)度也明顯更快了,因?yàn)楫a(chǎn)品工程師可以將更多的注意力放在寫功能邏輯而不是視覺代碼上。此外，工程師和設(shè)計(jì)師現(xiàn)在也都是用同一個(gè)設(shè)計(jì)語言。

設(shè)計(jì)師們對這個(gè)系統(tǒng)特別興奮。它讓產(chǎn)品人員更加關(guān)注真實(shí)的需求和設(shè)計(jì)體驗(yàn)，而不是填充、顏色和類型的選擇。這套設(shè)計(jì)語言讓我們的視覺風(fēng)格保持了很好的一致性，讓整個(gè)系統(tǒng)更加的流暢。這個(gè)系統(tǒng)還使我們所有人能夠更快的實(shí)現(xiàn)高保真原型和任何想法的呈現(xiàn)，而成本卻更低。

我相信在這套系統(tǒng)的輔助下，我們可以將更多精力集中在關(guān)注實(shí)際的用戶體驗(yàn)和我們想要傳達(dá)給用戶的概念和想法上。