偉大的產(chǎn)品離不開(kāi)開(kāi)發(fā)和設(shè)計(jì)的良好溝通。無(wú)論你是誰(shuí)，歸根結(jié)底，我們都是在創(chuàng)造軟件產(chǎn)品。有了設(shè)計(jì)系統(tǒng)之后，溝通將變得更加簡(jiǎn)單。

但是誰(shuí)將建立起設(shè)計(jì)和開(kāi)發(fā)之間的溝通橋梁呢？

我把這些推動(dòng)者稱為 Design Systems Ops。Design Systems Ops: 規(guī)?；匮b運(yùn)（設(shè)計(jì)）。

Design Systems Ops 是設(shè)計(jì)團(tuán)隊(duì)的一部分，他需要足夠了解設(shè)計(jì)，并且要了解他們?cè)噲D概念化什么。同時(shí)，Design Systems Ops 需要理解工程師的需求和定義方法，這將有助于設(shè)計(jì)系統(tǒng)的裝運(yùn)和規(guī)?；Ｔ谀承┏潭壬?，一個(gè) Design Systems Ops 是兩個(gè)世界的翻譯。

大多數(shù)公司存在的問(wèn)題

在大多數(shù)組織流程結(jié)構(gòu)中，從概念到用戶的過(guò)程是相當(dāng)脫節(jié)的，以致于產(chǎn)品最終完成時(shí)和設(shè)計(jì)師的初衷很不一致。

從概念到用戶的一種典型流程是：越靠近用戶階段，還原度越低。

信號(hào)（概念）受到干擾（低效率）而逐漸變?nèi)酰a(chǎn)品在一個(gè)非常低的還原度中結(jié)束。這種失敗對(duì)公司創(chuàng)造高質(zhì)量產(chǎn)品的能力有著巨大影響，并且造成巨大商業(yè)機(jī)會(huì)的浪費(fèi)。

設(shè)計(jì)系統(tǒng)能干什么

風(fēng)格指南、模式庫(kù)、設(shè)計(jì)系統(tǒng)等都有助于圍繞一種通用的設(shè)計(jì)語(yǔ)言去規(guī)范化實(shí)踐和設(shè)計(jì)模式。而語(yǔ)言障礙恰恰是大多數(shù)低效率的誘因。

從顏色命名、對(duì)象、慣例、組件等開(kāi)始，到記錄最好的最細(xì)枝末節(jié)的體驗(yàn)，比如動(dòng)畫(huà)定時(shí)或表單元素的圓角度值。

一個(gè)好的設(shè)計(jì)系統(tǒng)能讓設(shè)計(jì)決策更快。（比如“ call to action 應(yīng)該是什么顏色”）。從而設(shè)計(jì)師可以在同樣長(zhǎng)的時(shí)間里，將更多的時(shí)間放在（優(yōu)化）用戶流程和對(duì)多種概念的探索上。

一個(gè)好的設(shè)計(jì)系統(tǒng)也是幫助開(kāi)發(fā)團(tuán)隊(duì)在開(kāi)發(fā)階段找到獲取設(shè)計(jì)的唯一來(lái)源。這對(duì)一致性很有好處，因?yàn)樗械?call-to-action 都將表現(xiàn)一致。

設(shè)計(jì)系統(tǒng)能在這個(gè)過(guò)程中減少做無(wú)用功：還原度一路上將保持大致穩(wěn)定。
一些設(shè)計(jì)系統(tǒng)也用代碼來(lái)傳達(dá)設(shè)計(jì)模式。這些設(shè)計(jì)系統(tǒng)從概念開(kāi)始階段，到原型階段，直到實(shí)現(xiàn)階段都能證明其價(jià)值。當(dāng)公司遵循這種方式，這種方式對(duì)于生產(chǎn)效率和還原度都是很有幫助的。

一個(gè)設(shè)計(jì)系統(tǒng)不是一個(gè)項(xiàng)目，它是一個(gè)產(chǎn)品，服務(wù)型產(chǎn)品?－－?Nathan Curtis

然而，一些設(shè)計(jì)系統(tǒng)并沒(méi)有獲得它們應(yīng)有的贊許，卻淪為設(shè)計(jì)模式的光榮榜，而這些模式離真正的產(chǎn)品代碼非常遙遠(yuǎn)。這是因?yàn)閷?duì)于幾個(gè)設(shè)計(jì)師和工程師的部分投資 是不足夠的：一個(gè)設(shè)計(jì)系統(tǒng)不是簡(jiǎn)單一個(gè)項(xiàng)目，它是一個(gè)產(chǎn)品(或就像 Nathan Curtis說(shuō)的： “一個(gè)設(shè)計(jì)系統(tǒng)不是一個(gè)項(xiàng)目，它是一個(gè)產(chǎn)品，服務(wù)性產(chǎn)品?！?。為了讓設(shè)計(jì)系統(tǒng)在交付流程的不同階段都顯現(xiàn)出對(duì)應(yīng)的價(jià)值，它需要適當(dāng)規(guī)劃，用戶研究和方法（和很多熱愛(ài)）。那些創(chuàng)造出最優(yōu)設(shè)計(jì)系統(tǒng)的團(tuán)隊(duì)，都將設(shè)計(jì)系統(tǒng)的目標(biāo)定位為有生命力的設(shè)計(jì)系統(tǒng)。

引入 Design Systems Ops

有生命力的設(shè)計(jì)系統(tǒng)和其他設(shè)計(jì)系統(tǒng)之間存在的差距是巨大的。這主要是因?yàn)殚_(kāi)發(fā)團(tuán)隊(duì)和設(shè)計(jì)團(tuán)隊(duì)缺乏良好的溝通。最終，產(chǎn)品將用代碼的格式呈現(xiàn)，在這過(guò)程中影響效率的任何事情都應(yīng)該被檢查。通過(guò)引入一個(gè) Design Systems Ops 的角色（靈感來(lái)自DevOps 運(yùn)動(dòng)），能夠改善這些低效：

通過(guò)在設(shè)計(jì)和開(kāi)發(fā)間引入一位中間者，進(jìn)一步減少低效，增加軟件交付的還原度。

來(lái)自于設(shè)計(jì)系統(tǒng)兩邊的許多問(wèn)題：

• 我從哪里可以找到標(biāo)記、顏色面板、數(shù)值、圖標(biāo)、模式、斷點(diǎn)？
• 在制作原型時(shí)、在產(chǎn)品中、或者在 Web 視圖中我應(yīng)該如何加載 CSS？
• 加載字體圖標(biāo)的最佳方式是什么？
• 它們對(duì)性能有什么影響？
• 我應(yīng)該在哪里發(fā)現(xiàn)文件錯(cuò)誤，又應(yīng)該在哪里尋找其他人解決自身問(wèn)題的辦法（問(wèn)題追蹤，知識(shí)基礎(chǔ)）？
• 我該如何為設(shè)計(jì)系統(tǒng)做貢獻(xiàn)（修復(fù) bug 、增加一個(gè)圖標(biāo)）？
• 我是一個(gè)參與者，我該怎樣在多種環(huán)境中測(cè)試我的代碼而不至于出錯(cuò)呢？
• 我是一個(gè)開(kāi)發(fā)者，對(duì)于設(shè)計(jì)系統(tǒng)我該知道些什么？
• 我是一個(gè)設(shè)計(jì)師，我該怎樣迭代瀏覽器中的現(xiàn)有模式？
• 從 v1.0 到 v2.0 的升級(jí)路徑是什么？
• 0.5.0 版本的文檔在哪里？

我學(xué)習(xí)了一些像 Bootstrap 和 Material Design Lite 這樣的開(kāi)源項(xiàng)目。在《衛(wèi)報(bào)》, 我開(kāi)始構(gòu)建起設(shè)計(jì)和開(kāi)發(fā)的橋梁，里面提到主要采用 Sass 。在金融時(shí)報(bào)為 Origami 項(xiàng)目工作時(shí)也幫助我發(fā)現(xiàn)規(guī)?；O(shè)計(jì)的新思路。 我今天工作的地方：Salesforce，有一個(gè)團(tuán)隊(duì)的工程師作為 Design Systems Ops，熱衷于將更快更好的代碼交付給用戶。

在回顧我過(guò)往如何規(guī)?；O(shè)計(jì)的經(jīng)驗(yàn)之后，這些都是 Design System Ops 可以做的工作：

• 本地開(kāi)發(fā)環(huán)境（源映射，無(wú)刷新重載，速度）
• 托管（放置設(shè)計(jì)展示和文檔）
• 代碼演示（比如 CodePen、JS Bin）
• 技術(shù)文檔（安裝、問(wèn)題診斷）
• 前端自動(dòng)化測(cè)試（可訪問(wèn)性、集成）
• 跨瀏覽器自動(dòng)化測(cè)試
• 視覺(jué)回歸測(cè)試
• 代碼風(fēng)格檢查 (我之前寫(xiě)的)

前面這一系列是以前端為中心的，但是這里有些更接近后端的：

• 構(gòu)建系統(tǒng)
• 資源儲(chǔ)存和分布（CDN、壓縮）
• 性能測(cè)試（資源大小、服務(wù)器加載、CDN 響應(yīng)時(shí)間等等）
• 版本流程（比如 git、SemVer）
• 發(fā)布流程 （比如 持續(xù)開(kāi)發(fā)、持續(xù)集成）
• Testing/Staging階段環(huán)境
• 展現(xiàn)測(cè)試和性能結(jié)果（比如 儀表板、郵件）

或者，更靠近市場(chǎng)營(yíng)銷這邊的事情（開(kāi)發(fā)宣傳）：

• 構(gòu)建示例
• 幫助開(kāi)發(fā)者實(shí)現(xiàn)這套設(shè)計(jì)系統(tǒng)
• 給開(kāi)發(fā)社區(qū)布道這套設(shè)計(jì)系統(tǒng)

就像前面提到的，在這些方面有堅(jiān)實(shí)的解決方案能很大地幫助設(shè)計(jì)團(tuán)隊(duì)提高交付質(zhì)量，并提高工作的速度和信心。這是為什么我相信在設(shè)計(jì)團(tuán)隊(duì)中有個(gè)好的參謀將增加項(xiàng)目成功的可能性。

總結(jié)

隨著越來(lái)越多的公司構(gòu)建屬于自己的設(shè)計(jì)系統(tǒng)，他們也開(kāi)始顯示出增加技術(shù)人員去支持設(shè)計(jì)的工作和工具的興趣。因?yàn)樗皇沁@個(gè)角色的開(kāi)始，有些問(wèn)題也讓我夜不能寐。

• Design Systems Ops 能在其他方面做些什么？
• 什么工具能幫助小型團(tuán)隊(duì)在成本有限的情況下遵循這個(gè)路線呢？
• 除了開(kāi)發(fā)速度，還有那些方面應(yīng)該是Design Systems Ops應(yīng)該評(píng)判的？

我非常樂(lè)意聽(tīng)聽(tīng)你的看法，如果你也在舊金山，來(lái)喝杯咖啡聊一聊。

Design Systems Ops 并沒(méi)有我憑空產(chǎn)生的想法，要理解我想法的由來(lái)，你可以閱讀Ian Feather’s awesome presentation about Front End Ops.

同樣， 聽(tīng) Design Details 播客，全世界許多優(yōu)秀的設(shè)計(jì)師都在那里分享他們創(chuàng)造設(shè)計(jì)系統(tǒng)和風(fēng)格指南的經(jīng)驗(yàn)。

原文鏈接 : Design Systems Ops

原文作者 : Kaelig

譯文出自 : 掘金翻譯計(jì)劃

譯者 : L9m

校對(duì)者: JasinYip, shenxn, Ruixi

本文由 @掘金翻譯計(jì)劃 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。