原文：Plasma design system
作者：Andrew Couldwell (2017-01-25)
閱讀時(shí)間：14m 29s
本案例研究旨在記錄我們?nèi)绾卧?WeWork 創(chuàng)建一個(gè)設(shè)計(jì)系統(tǒng)。我將分享我們對(duì)流程、產(chǎn)品設(shè)計(jì)、用以創(chuàng)建和實(shí)踐設(shè)計(jì)系統(tǒng)的工具的見解，以及我們?nèi)绾斡涗浐团c團(tuán)隊(duì)共享此系統(tǒng)。
介紹
WeWork 創(chuàng)建了鼓舞人心的共享工作空間，重點(diǎn)是社區(qū)。我們?cè)O(shè)計(jì)和構(gòu)建我們自己的內(nèi)部數(shù)字工具，以滿足我們的業(yè)務(wù)需求，并管理我們?nèi)虻慕ㄖ统蓡T網(wǎng)絡(luò)。Plasma 是一個(gè)為這些內(nèi)部業(yè)務(wù)工具而創(chuàng)建的設(shè)計(jì)系統(tǒng)。
Plasma 作為一個(gè)概念，是由我們的數(shù)字創(chuàng)意主管 Nick Stamas 創(chuàng)立的。Nick 向我們的工程師介紹了用 React JS 和 Sass 構(gòu)建系統(tǒng)的概念，并從此領(lǐng)導(dǎo)了此系統(tǒng)的設(shè)計(jì)。我負(fù)責(zé)其設(shè)計(jì)、創(chuàng)意和文檔。我同時(shí)也和產(chǎn)品設(shè)計(jì)師 Deena Edwards 合作，她將 Plasma 應(yīng)用于我們的產(chǎn)品。
第一步：設(shè)計(jì)探索
我們開始用 3 種不同的將應(yīng)用此系統(tǒng)的內(nèi)部產(chǎn)品進(jìn)行試驗(yàn)——發(fā)現(xiàn)、建立和壓力測(cè)試樣式、組件庫(kù)與模式庫(kù)。隨著時(shí)間的推移，方向、用戶界面（UI）和樣式都發(fā)生了變化，下面我將嘗試捕捉這些變化，以展示被測(cè)產(chǎn)品的進(jìn)展和范圍。
值得注意的是：此系統(tǒng)的設(shè)計(jì)方向深受 WeWork 的數(shù)字品牌指南 Wework Digital Foundations 的影響。
簡(jiǎn)單、清晰、干凈
我們的內(nèi)部工具都是基于網(wǎng)頁(yè)的數(shù)據(jù)密集型產(chǎn)品。簡(jiǎn)潔性、可讀性和加載時(shí)間都是最重要的。我很早就知道我們正在努力尋求一種清晰、干凈的美學(xué)。
色彩理論
此系統(tǒng)主要為白色、黑色和灰色。重要的是，設(shè)計(jì)不能分散對(duì)內(nèi)容的注意力，因此精妙是關(guān)鍵。明亮的顏色用于傳達(dá)特別含義。黃色用于主要操作，因?yàn)辄S色是 Wework 的核心品牌顏色之一。藍(lán)色用于導(dǎo)航鏈接。紅色用于警告和警報(bào)。我們還使用了紫色作為第三顏色，因?yàn)樗俏覀儍?nèi)部工具中的一種傳統(tǒng)顏色，我們希望在我們的產(chǎn)品中保持一種熟悉的氛圍。
字體匹配
Plasma 專門使用了 Helvetia，一種簡(jiǎn)單、粗體的字體。Mac 電腦已經(jīng)預(yù)裝了 Helvetia，而未預(yù)裝的電腦將回退至 Arial（類似的、但在網(wǎng)頁(yè)上相對(duì)安全的字體）。這非常重要，因?yàn)椴恍枰ㄟ^(guò)第三方腳本來(lái)加載字體，這意味頁(yè)面加載速度更快。
產(chǎn)品設(shè)計(jì)
我相信您已經(jīng)多次在 Behance 和 Dribbble 上看到「UI kit——免費(fèi)下載！」。其中一些看起來(lái)很漂亮。但是，除非它們是用真實(shí)的產(chǎn)品、內(nèi)容和數(shù)據(jù)進(jìn)行設(shè)計(jì)的，否則它們中的許多最終都存在缺陷。永遠(yuǎn)都不要使內(nèi)容適應(yīng)設(shè)計(jì)，系統(tǒng)必須能應(yīng)用于任何內(nèi)容。不要只針對(duì)最佳案例場(chǎng)景進(jìn)行設(shè)計(jì)——要考慮所有的場(chǎng)景。
使用將應(yīng)用此設(shè)計(jì)系統(tǒng)的產(chǎn)品來(lái)創(chuàng)建一個(gè)設(shè)計(jì)系統(tǒng)至關(guān)重要，這些產(chǎn)品具有真實(shí)的數(shù)據(jù)和問(wèn)題。
我們的目標(biāo)不是創(chuàng)建最好看的系統(tǒng)，而是設(shè)計(jì)一個(gè)最能滿足我們的需求的系統(tǒng)——在 Plasma 的案例中是業(yè)務(wù)需求，而對(duì)一些系統(tǒng)來(lái)說(shuō)則是客戶需求。我們當(dāng)然打算創(chuàng)造令人愉悅的產(chǎn)品，但只是在增強(qiáng)用戶體驗(yàn)（UX）方面。
下面是我對(duì)塑造了此系統(tǒng)的 3 種產(chǎn)品的一點(diǎn)見解：
產(chǎn)品 1：CMS（又名「Maggie」）
我們的 CMS 產(chǎn)品允許我們的營(yíng)銷和增長(zhǎng)團(tuán)隊(duì)在我們的核心營(yíng)銷網(wǎng)站 wework.com 上添加、編輯和管理我們的建筑和市場(chǎng)。在 Plasma 之前，我們的 CMS 只是簡(jiǎn)單的一系列帶基本 CSS 自定義的 HTML 表格。Plasma 塑造了這款產(chǎn)品的 UI 和 UX。下面是這個(gè)產(chǎn)品的一小部分 UI 示例。
產(chǎn)品 2：Spacestation
我們的 Spacestation 產(chǎn)品是我們?cè)?WeWork 總部和國(guó)際上每座建筑中最常用的工具之一。它是一個(gè)數(shù)據(jù)密集型產(chǎn)品，用于管理與我們的會(huì)員和建筑相關(guān)的大型信息和賬單數(shù)據(jù)庫(kù)。它存在著很多表格、表單輸入、過(guò)濾器和導(dǎo)航——是一個(gè)產(chǎn)品設(shè)計(jì)系統(tǒng)的完美測(cè)試平臺(tái)！我和 Spacestation 的首席產(chǎn)品設(shè)計(jì)師 Deena Edwards 合作，對(duì)應(yīng)用于此產(chǎn)品的系統(tǒng)進(jìn)行構(gòu)思、應(yīng)用、壓力測(cè)試和迭代。
產(chǎn)品 3：DataQuery
WeWork 的業(yè)務(wù)性質(zhì)意味著我們擁有大量的數(shù)據(jù)！在數(shù)字領(lǐng)域，這意味著我們有著大量可供使用的數(shù)據(jù)，我們可利用這些數(shù)據(jù)來(lái)開發(fā)更好的產(chǎn)品，以滿足客戶需求。這個(gè)產(chǎn)品的想法是在一個(gè)非常合適的時(shí)機(jī)提出的——我們已經(jīng)開始構(gòu)思 Plasma 設(shè)計(jì)系統(tǒng)，并且知道這個(gè)新產(chǎn)品既可使用此系統(tǒng)，又可隨著對(duì)數(shù)據(jù)的額外需求而進(jìn)一步推動(dòng)它。我和我們的數(shù)據(jù)工程團(tuán)隊(duì)合作，構(gòu)建了儀表板和數(shù)據(jù)查詢工具。以下是其中一些探索。
第二步：模式和組件
經(jīng)過(guò)幾天的探索、評(píng)審和迭代，我們得到了一個(gè)滿意的樣式?，F(xiàn)在的任務(wù)是創(chuàng)建一套全面的模式和組件，包括所有的狀態(tài)和場(chǎng)景——本質(zhì)上是為我們的團(tuán)隊(duì)創(chuàng)建一份全面的 UI 工具包以供使用。
我們的系統(tǒng)由一些基本元素組成，例如為標(biāo)題和內(nèi)容定義的文本樣式、調(diào)色板、我們稱之為模式和組件的東西，以及模板。
一致的 UI 模式和組件在引導(dǎo)用戶使用產(chǎn)品方面會(huì)有很大的作用。
模式
模式是指整個(gè)產(chǎn)品中反復(fù)出現(xiàn)或始終存在的元素或行為。例子包括導(dǎo)航、卡片、表格、空狀態(tài)或加載狀態(tài)、通知、警告和對(duì)話框。模式是通用的，可以包含組件，并且可以組合在一起構(gòu)成模板。
組件
組件是指整個(gè)產(chǎn)品中反復(fù)使用的特定 UI 元素——通常是可操作的，有時(shí)則用于傳達(dá)含義。舉幾個(gè)例子有，按鈕、輸入框、選擇器、開關(guān)、頭像和工具提示。
通過(guò)此鏈接可快速瀏覽包含設(shè)計(jì)系統(tǒng)中所有模式和組件的主要 Sketch 文件（如上文所示）。
最好的工具
我們?yōu)?UI 設(shè)計(jì)選擇的工具是 Sketch。那些使 Sketch 非常適用于產(chǎn)品設(shè)計(jì)的功能使它在系統(tǒng)設(shè)計(jì)中尤其強(qiáng)大。當(dāng)您在創(chuàng)建數(shù)百個(gè)可編輯的 symbol 和易于應(yīng)用的文本樣式時(shí)，Sketch 的簡(jiǎn)單性就變得至關(guān)重要。
關(guān)于響應(yīng)性
Plasma 的設(shè)計(jì)是具有響應(yīng)性的。雖然構(gòu)建響應(yīng)式組件很簡(jiǎn)單，但模擬響應(yīng)式就不那么簡(jiǎn)單了。至少我們是這么想的。設(shè)計(jì)能夠在不同瀏覽器寬度下工作的 web UI 非常重要。幸運(yùn)的是，Sketch 提供了設(shè)置元素以不同的方式響應(yīng)尺寸變化的功能。利用設(shè)置、組和 symbol 的組合，您可在 Sketch 中創(chuàng)建基本的響應(yīng)式 UI。雖然這對(duì)斷點(diǎn)沒有幫助，但它在快速查看設(shè)計(jì)在不同瀏覽器尺寸下如何工作或是否工作方面非常強(qiáng)大。因此，我們創(chuàng)建了具有響應(yīng)性的模式和組件庫(kù)。
閱讀此文可了解 Sketch 中的響應(yīng)式設(shè)計(jì)。
第三步：模板的強(qiáng)大力量
為保持產(chǎn)品的一致性，我們必須讓我們的團(tuán)隊(duì)盡可能簡(jiǎn)單地使用 Plasma 進(jìn)行設(shè)計(jì)。幸運(yùn)的是，Sketch 的可編輯 symbol 和文本樣式讓分發(fā)和維護(hù)一個(gè)設(shè)計(jì)系統(tǒng)變得簡(jiǎn)單。
如果我們的團(tuán)隊(duì)無(wú)法簡(jiǎn)單地在他們的工作中應(yīng)用此系統(tǒng)，那么產(chǎn)品的設(shè)計(jì)就很容易就誤入歧途。
我們有一個(gè)（持續(xù)更新的）包含 Plasma 所有內(nèi)容的主 Sketch 文件。我們最不希望的就是，人們?cè)谑褂眠@個(gè)主文件的過(guò)程中不小心編輯和刪除了一些東西！于是我們創(chuàng)建了一個(gè) Sketch 模板以供我們的團(tuán)隊(duì)使用，托管 Dropbox 上。這個(gè)模板有一系列可編輯的 symbol，所有的文本樣式，品牌顏色和一個(gè)隨時(shí)可用的基本畫板——使用 Plasma 可快速建立和組裝一個(gè)用戶界面。
使用已建立的模式和組件使我們能夠?qū)Ｗ⒂谟脩趔w驗(yàn)、解決問(wèn)題以及構(gòu)建有意義的功能和產(chǎn)品。
涵蓋所有場(chǎng)景
我們考慮了系統(tǒng)中所有的「狀態(tài)」，并且每個(gè)狀態(tài)都有相應(yīng)的 symbol。例如，表單輸入具有占位符、懸停、焦點(diǎn)、填充、錯(cuò)誤和禁用狀態(tài)。下面「多選組件」的示例中，在右側(cè)，您可看到「多選/占位符」這個(gè) symbol 是被選中的。您可以在下拉列表中獲取其他所有 symbol——并更改 symbol 為「多選/填充」或「多選/錯(cuò)誤」。這對(duì)于設(shè)計(jì)或繪制產(chǎn)品流程非常有用！
Craft Library
我們還使用了一個(gè)很棒的工具，InVision 為 Sketch 設(shè)計(jì)的插件 Craft Library。它使我們能夠創(chuàng)建一個(gè)共享的資源庫(kù)（托管在 Dropbox 上），我們的團(tuán)隊(duì)可使用它來(lái)將元素拖動(dòng)到他們的設(shè)計(jì)中。
更新（2017 年 12 月）
我們現(xiàn)在使用 Sketch Libraries 來(lái)代替 Craft Library。它做的事情或多或少是相同的，但是效率高得多！您對(duì)設(shè)為 library 的 Sketch 源文件所做的任何更改，都會(huì)同步到任何使用該 library 組件的設(shè)計(jì)中。就很酷。
預(yù)先設(shè)置按鈕、輸入、樣式等元件庫(kù)，可降低重復(fù)設(shè)計(jì)元件的風(fēng)險(xiǎn)。
第四步：記錄設(shè)計(jì)系統(tǒng)
在創(chuàng)建設(shè)計(jì)系統(tǒng)時(shí)，必須要記住，您將不是唯一使用它的設(shè)計(jì)師（或開發(fā)人員）。
從字面上記錄設(shè)計(jì)系統(tǒng)是我在這個(gè)項(xiàng)目中面臨的最大挑戰(zhàn)。通常我會(huì)創(chuàng)建帶注釋的規(guī)范——通常是一些 psd 和 sketch 文件，以配合設(shè)計(jì)。在我的 Adobe Portfolio 案例研究中可以看到運(yùn)用這個(gè)方法的一個(gè)很好的例子。雖然規(guī)范可以包含所有想象得到的細(xì)節(jié)，但是當(dāng)有新的設(shè)計(jì)師接替你的位置時(shí)，仍可能會(huì)遺漏或誤解一些事情。我們想利用 Plasma 做到更好。
如何記錄設(shè)計(jì)系統(tǒng)
我開始閱讀和研究其他團(tuán)隊(duì)是如何做到這一點(diǎn)的。幸運(yùn)的是，對(duì)此互聯(lián)網(wǎng)上有很多的答案，很多公司已經(jīng)公開了他們的文檔。
這里有一個(gè)有用的鏈接列表，包含了我發(fā)現(xiàn)的所有在線設(shè)計(jì)系統(tǒng)文檔。希望它對(duì)您能有所幫助。
看了網(wǎng)上這么多優(yōu)秀的例子，我最初的目標(biāo)就是創(chuàng)建一個(gè)網(wǎng)站來(lái)記錄系統(tǒng)、規(guī)范、示例的使用，并制定所有模式和組件的指南。它可以作為一個(gè)快速參考，或者一本可詳細(xì)研究的寶典。
但是，我不想因?yàn)閯?chuàng)建網(wǎng)站所需的設(shè)計(jì)、構(gòu)建和時(shí)間限制而被耽擱。所以，為了開始著手，我簡(jiǎn)單地創(chuàng)建了一個(gè)新的 Google 文檔，并開始編寫。隨著文檔內(nèi)容的增加，我意識(shí)到它確實(shí)完全符合我們的需要。創(chuàng)建一個(gè)公開的品牌網(wǎng)站的唯一理由將是，作為 WeWork Digital 的 “榮譽(yù)項(xiàng)目”，或者作為我們開源此系統(tǒng)的資源。
但是就目前而言，事實(shí)證明，Google Docs 是最完美的媒介。我們所有的團(tuán)隊(duì)都可以輕易地訪問(wèn)它，并且他們可以在線評(píng)論，這對(duì)于反饋很有用。Google Docs 的「Document Outline（文檔大綱）」功能，以及鏈接/定位到文檔中的書簽和標(biāo)題的功能，為我們提供了足夠的導(dǎo)航。 正如我們?cè)谟⒏裉m北部所說(shuō)的，Jobs a good’un（大概意思就是塞翁失馬焉知非?！?/p>
我們的文檔預(yù)覽
由于文檔是在私人的 Google 文檔中，所以下面我選取了一些截圖，以便您更好地了解它的結(jié)構(gòu)、布局以及所包含的內(nèi)容。您可以單擊圖片以查看原圖。
更新：2017 年 12 月
發(fā)表這篇文章的大約 11 個(gè)月后，這個(gè)文檔已經(jīng)演變成一個(gè)您可以看到的網(wǎng)站。我們使用 GitHub 來(lái)支持版本控制，而且我們的團(tuán)隊(duì)可以輕松地進(jìn)行訪問(wèn)，以便編寫文檔并為其做出貢獻(xiàn)。
使用 markdown 進(jìn)行編寫，并通過(guò)一些 CSS 自定義，您就可以為您的品牌定制文檔。GitBook 并不完美，它不支持響應(yīng)式，但它已經(jīng)夠用了。
查看 Plasma 設(shè)計(jì)系統(tǒng)文檔。
幕后（下載）
我創(chuàng)建了一些資源，以便您深入了解這個(gè)設(shè)計(jì)系統(tǒng)在 Sketch 中是如何建立的，包括 Sketch 文件下載和一份文檔摘錄。可在此鏈接中查看資源。
第五步：管理設(shè)計(jì)系統(tǒng)
隨著文檔的逐漸形成，設(shè)計(jì)需要一種有效的方法，以便與開發(fā)人員交流和跟蹤系統(tǒng)的構(gòu)建與集成。我們選擇（并推薦）使用 GitHub。我們?yōu)樘囟ǖ慕M件創(chuàng)建了 issue，共享設(shè)計(jì)、規(guī)范和 CSS/Sass 的預(yù)覽，以簡(jiǎn)化開發(fā)流程。通過(guò)這種方式，我們的工程師就可以一個(gè)接一個(gè)地處理這些問(wèn)題，因?yàn)樗麄円呀?jīng)做好準(zhǔn)備了，他們將負(fù)起責(zé)任，并且沒有任何東西會(huì)被遺漏！
設(shè)計(jì)和代碼
Plasma 的主要開發(fā)人員也是一名設(shè)計(jì)師。我們的主要設(shè)計(jì)師（我）也是一名開發(fā)人員。這反映在了我們的流程和系統(tǒng)質(zhì)量上。通過(guò)我們的文檔，我們希望向我們的設(shè)計(jì)師展示 CSS/Sass，鼓勵(lì)他們了解事物的運(yùn)作方式。從「學(xué)習(xí)使用此系統(tǒng)進(jìn)行設(shè)計(jì)」的角度來(lái)看，它有助于明確地查看和學(xué)習(xí)構(gòu)建過(guò)程的值、間距和命名約定。它也有助于彌合設(shè)計(jì)和開發(fā)之間的鴻溝。
命名約定
最后但同樣重要的是：設(shè)計(jì)系統(tǒng)的目標(biāo)之一是，讓設(shè)計(jì)師、開發(fā)人員和產(chǎn)品經(jīng)理都使用同一套語(yǔ)言。我們可以通過(guò)我們都熟悉的一致的語(yǔ)義命名約定（在設(shè)計(jì)和代碼中）來(lái)幫助實(shí)現(xiàn)這一點(diǎn)，無(wú)論是 Sass 變量、字體樣式、顏色、UI 模式和組件、模板還是頁(yè)面名稱。
一切都很順利。
這不是結(jié)束
我們對(duì) Plasma 有一個(gè)宏大的計(jì)劃。我們正在努力開發(fā)這個(gè)系統(tǒng)，并將其推廣到您之前已看過(guò)的 Spacestation 和 CMS 產(chǎn)品中。在這個(gè)過(guò)程中，我們學(xué)到了很多東西，并致力于從全球使用我們的工具的員工那里獲取有價(jià)值的反饋，然后進(jìn)行系統(tǒng)的迭代。我們已經(jīng)討論過(guò) Plasma 的開源，但我們還沒有做到這一步。
希望您喜歡這個(gè)案例研究，并對(duì)我們的設(shè)計(jì)過(guò)程、使用的工具和 Plasma 的預(yù)覽有了了解。：）
特別感謝 WeWork 的 Nick Stamas 和 Deena Edwards 在這個(gè)項(xiàng)目上的辛勤工作和支持。還有我的編輯 Meagan Fisher !
附注：不要直接使用 Sketch 來(lái)創(chuàng)建這樣一個(gè)產(chǎn)品設(shè)計(jì)系統(tǒng)。我們?yōu)檫_(dá)到這個(gè)階段做了大量的工作。我在這個(gè)項(xiàng)目上的聯(lián)合負(fù)責(zé)人 Nick Stamas 在 Selling a design system at your company 中講述了這個(gè)過(guò)程，推薦您接下來(lái)閱讀這篇文章。
更新： 2017 年 12 月
我寫了一篇關(guān)于創(chuàng)建 Plasma 設(shè)計(jì)系統(tǒng)的基礎(chǔ)工作的新文章 Laying the foundations for system design，以及為同個(gè)公司創(chuàng)建的另外一個(gè)設(shè)計(jì)系統(tǒng)！
更新：2019 年
我正在寫一本關(guān)于系統(tǒng)設(shè)計(jì)和數(shù)字品牌指南的書！我很喜歡寫作的過(guò)程，我計(jì)劃在 2019 年印刷出版（還有電子書）。通過(guò)這個(gè)鏈接查看更多信息和進(jìn)行注冊(cè)以接收更新：Laying the Foundations — A book about design systems and digital brand guidelines。
以上翻譯包含個(gè)人理解，僅作為個(gè)人學(xué)習(xí)筆記使用。如有錯(cuò)誤，求指正吖，非常感謝 ^^
感謝原文作者及所有分享想法與經(jīng)驗(yàn)的人 ^^
