• 原文地址：Designing Design System for Complex Products
• 原文作者：Wen Wang
• 譯文出自：掘金翻譯計劃
• 譯者：Changkun Ou
• 校對者：horizon13th, osirism

為複雜產品制定設計規範

設計規範的好處及構建方法

譯者注：本文部分術語有意譯，具體為：設計規範（design system）、設計準則（design guidelines）、風格指南（style guide）、實時風格指南（live style guides）、實時庫（live library）。

Bypass 的設計規範理念

在我的上一篇文章 『如何從設計規範起步』 中，我談到了當我缺少資源時如何開始構建簡單的風格指南。這次我將分享更多關於構建複雜產品設計規範（如 SaaS Web 應用）的知識。在文章的最後，我還會分享一些有用的資源。

我們為什麼開始

回到 2014 年初，我剛加入 Bypass 時，由於我們的產品非常複雜，出現了大量風格不一致的情況。有不同的按鈕、不同的輸入框、相同的元素不同的佈局、相同的流程不同的互動。我們浪費了很多時間來辯論設計的細節，只是因為我們的產品沒有固定的規則。這些不一致也給我們的使用者帶來了糟糕的體驗：他們為此感到困惑，從而難以理解並學習這個產品。

在開發方面，由於程式碼庫裡已有的樣式過多，總是很難找到「對應的程式碼」。這種情況下，很多時候開發者不是複用原先的舊程式碼，而是寫下新的程式碼，從而導致更多的不一致性。這是一個惡性迴圈，隨著時間的推移，我們的團隊也越來越大，溝通和產品交付也變得越發的難以把控。

我們面臨的問題

1. 五十度灰: 由於我們的產品非常複雜，總是難以保持一致。系統中有許多介面風格不一致的地方，包括不同的顏色、字型、字型大小等等。

2. 規則的匱乏: 當我們的設計師正在構建一個新功能時，我們就很容易深陷細節困境。甚至連一些簡單的問題諸如「我應該使用哪個元件？」和「我們應該引導使用者進入新的頁面，還是彈出對話方塊呢？」這樣的問題都需要花費很多時間來進行決策。

3. 交付質量差: 由於缺乏設計規則，不同的團隊互相溝通是非常困難的。我曾經為了向開發者展示竟可能多的細節，會在設計稿中標註很多帶有詳細描述的參考「紅線」。然而這並不是一種有效的手段，有時開發者並沒有遵循我所有的設計細節。

想象一下，你的團隊上線了一個新的專案而且其他所有人都在慶祝，但是你卻看到了一大堆設計錯誤。你必須保持和其他人一樣開心，是還是不是？

「開心的你」

4. 不一致的程式碼庫: 由於沒有制定規則，有時候開發者們在一個新專案中只會直接複用基礎程式碼庫中已實現的相似程式碼；而有時候，他們卻會去實現一個風格完全不同的全新元件，這進一步使程式碼複雜化了。

5. 使用者困惑: 我們的使用者需要一條有邏輯的路徑來學習產品的使用並構建關於它的心理模型。然而我們做出的這些不一致性會讓他們在得不到預期反饋時感到困惑並且沮喪。

如何構建一個設計規範

1.從設計準則開始

風格指南是設計規範的基礎設施，要了解更多關於它的細節，可以參考我之前的文章 『如何從設計規範起步』 。

*可選項: 構建一個實時庫

Lightining 設計規範

如果你有一個做前端的朋友，或者你可以自己寫程式碼，一個實時庫可以讓每個人的生活變得更加輕鬆。它是一個高效的讓前端開發者避免錯誤、加快開發過程並保持一致的工具。Lightning Design 的設計規範和 Angular material 都是非常好的實時庫例子。

給你自己找一個關心設計細節的前端朋友。然後再和他/她討論風格指南里的元件，並找到最好的方法來構建他們。有時候他們會冒出一些你從未考慮過的驚人的想法，因此聆聽你朋友的想法，然後記錄每個元件的程式碼，並確保開發人員可以輕鬆地瞭解和複用他們。

發現那些關心 CSS 的開發者 #uxreactions via @uxreactions

2. 從風格指南到設計規範

iOS 設計準則

在構建風格指南的過程中，你還會獲得關於這個產品的更多知識。風格指南完成後，你可以繼續收入準則、原則和規則。

你可以記錄一些非常詳細的規則。例如你可以有一個章節專門介紹「如何刪除一個物件」，在這裡介紹「編輯物件、觸發編輯皮膚、刪除物件、彈出確認對話方塊、確認刪除物件、使用『物件已刪除』作為返回後的索引」。

你還可以為每個設計模式新增「應該」和「不應該」的例子。它將幫助人們清楚地瞭解如何複用這些元件。並且你還可以在哪種情況下描述哪種條件設計師應該使用哪種設計模式。

擁有設計規範的優勢

產品人員的有效工具

設計規範是幫助設計師順利流暢運作「廚房」的食譜。使用相同的購置食材，設計師可以持續向客戶提供優秀的「佳餚」。設計師可以在這個設計規範的庫中找到什麼原料，以及它們應該搭配什麼樣的時間和地點進行使用。同時它也是一個非常好的交接工具，以確保大家想法一致。

開發人員的有效工具

一個具有全域性元件的實時庫能夠加快開發過程。它允許開發者能複製和貼上程式碼，並讓他們的工作更加簡單、高效並減少錯誤。每個開發者也可以為這個庫做貢獻，使其成為一個「不斷進化的規範」。

平滑的交接工具

隨著公司的發展，合作和轉換工作變得越來越難。通過設計規範，交接變得更加容易和平滑。有三類人可以從中獲益。

對於 QA 人員來說，他們知道要測試什麼，以及交付是否符合設計規則。對於設計師來說，全域性互動上已經無可爭辯了。此外，設計師可以在其他設計師的設計檔案上工作，且不會有任何混淆。對於開發者而言，他們可以清楚的理解設計檔案，並以正確的方式構建他們。

質量交付，一致的介面及期望

由於一致的元件和設計規則，我們獲得了高質量且全面的結果。對於我們的使用者來說，他們更加容易學習及操作。現在他們可以很容易的學習這個規範，並且每次都能夠獲得預期的反饋。

當設計規範實現後

給生活帶來一個偉大的設計規範就像是這樣：

重新設計一箇舊的應用程式 #uxreactions via @uxreactions

而且你公司裡的每個人大抵都是這種狀態：

風格指南的資源和工具

以下是我用於構建我們的設計規範時的資源和工具列表，它們對初學者都非常有幫助。

感謝 @Ignacio Giri 對我上一篇關於風格規範工具文章中的評論。考慮不同的用法，我還將附上一些 CMS 工具。如果你具備任何配置和前端知識，這些工具可以幫助你和你的團隊非常簡單地構建實時庫。

CMS 工具集

[1]Github

Github 是一個來管理實時風格指南的開發者友好的工具。這裡有一些非常有幫助的文章討論瞭如何使用 GitHub 來管理風格指南：Shyp 的設計指南的管理

[2]Statamic

Statamic 是一個強大的可以由設計師和開發人員使用的工具。一旦你安裝並學習了使用它的正確方法，你就可以快速建立一個實時庫。對於你和你的團隊來說它的版本控制能力也非常強大。

[3]Cloudcannon

如果你知道如何使用 HTML, JavaScript, CSS 及任何靜態內容，Cloudcannon 就是一個能夠幫助你去做正確的事情的工具。它與你在 Squarespace 中定製你的個人網站類似，對於同時負責同時顯示海量內容的代理設計師來說，它尤其強大。

無需編碼經驗的工具集

1 Craft

Craft 是一個 Sketch 外掛，可以幫助設計師們通過雲端的設計庫進行合作。設計師們可以通過它互相配合來構建風格指南以及元件符號庫。

2 frontify.com

Frontify 是一個線上樣式指南文件工具。它對初學者非常友好。

3 Confluence 是一個團隊文件工具，通常用於記錄產品的所有內容，包括設計原則、規則等等。

設計規範的例子

Material Design

這是 Google 公佈的著名的設計規範，它包括介紹、風格、動作、佈局、元件、模式、成長和溝通、可用性和資源。如果你希望以 Google 的 Material Design 樣式建立產品、或者你的團隊正在使用任何 Material Design 的設計框架，那麼這會非常有用。

Material Design 的設計規範沒有包含任何程式碼庫，但卻有一些基於 Material Design 建立的第三方資源。比如：Angular Material, Material Design Lite, Material for Bootstrap 和 Material UI.

Lightning Design

Lightning Design 是為 Saleforce SaaS 產品而建立的一套設計規範。它包含了指南、元件、設計口令、圖示和相關資源。設計人員可以將元件名稱放在設計交付上，然後開發人員便能輕鬆正確地構建元件。

例如，如果設計師說：「我想要對這個卡片施加一個陰影效果」。那麼草圖中卡片的引數就會是 0px 2px 2px 0px rgba(0,0,0,.16)。 他們可以將實物模型的類命名為 $elevation-shadow-2，這就可以幫助開發人員構建設計師真正想要的卡片。

其他例子:

iOS 人機介面指南

IBM 設計語言

Styleguide.io (你可以在這個網站裡找到大量的例子)

風格指南的靈感來源 by Muzli

相關文章

這些毋庸置疑的最炫酷的 Sketch 技巧 by Jon Moore

Shyp 的設計指南的管理 by Micah Sivitz

構建視覺語言 by Airbnb design team

我們如何在 GoCardless 設計團隊中使風格指南保持最新 by Sam Wills

設計規範中的動畫 by Sarah Drasner

感謝你的閱讀！

如果你喜歡我的文章，歡迎給我打個❤️ :)

---

掘金翻譯計劃 是一個翻譯優質網際網路技術文章的社群，文章來源為 掘金 上的英文分享文章。內容覆蓋 Android、iOS、React、前端、後端、產品、設計 等領域，想要檢視更多優質譯文請持續關注 掘金翻譯計劃。