[譯] 爲複雜產品制定設計規範

• 原文地址：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、前端、後端、產品、設計 等領域，想要查看更多優質譯文請持續關注 掘金翻譯計劃。