在這篇文章中，我們將詳細地了解設計系統和樣式指南之間的區別，每個系統中應包含什么內容以及何時使用它們。
在開發網站或應用程序時，當涉及用戶界面設計時，很難保持一切正常。
當然，可以使用Google文檔或其他筆記跟蹤工具來記錄HEX顏色代碼或字體選擇。但是像按鈕設計這樣的東西呢？如何確保所有按鈕都以相同的方式設計？以及具有不同用途的按鈕是否被正確設計？
樣式指南可以幫助解決這個問題，但這可能還不夠。
更大的網站或應用程序、全渠道體驗和不斷增長的產品團隊都為樣式指南無法解決的復雜性添加了額外的層次。這就是設計系統發揮作用的地方。
什么是樣式指南？
樣式指南是一份描述品牌使用的核心視覺元素和樣式的文檔。它可以是一組獨立的指南，也可以出現在更大的設計系統中。
Yelp的樣式指南對其工作原理有一個很好的類比。
樣式指南中的元素，如顏色和字體，就像是原料。設計師可以參考樣式指南，以了解在制作特定“食譜”時使用哪些原料。
但這通常是樣式指南的盡頭。它向我們展示了主要原料以及如何使用它們的基本準則。然而，完整的說明、成品和食譜（即數字產品和用戶體驗）卻沒有得到解決。
對于一些品牌和設計團隊來說，這已經足夠了。
樣式指南的目的
樣式指南為設計師提供了一組基礎準則，用于創建品牌的視覺資產。這涵蓋了從設計網站到創建商務贈品等方方面面的事物。
然而，不僅僅是網頁設計師使用樣式指南。以 Disqus 的樣式指南為例。
這個微型品牌指南對媒體從業者非常有幫助。像記者、評論員和意見領袖這樣的人會參考這些視覺資源和可下載資產，以確保在線提及公司時使用正確版本的品牌。
因此，樣式指南有兩個重要目的。主要目的是幫助設計師為數字產品賦予一致的視覺風格和元素。次要目的是確保品牌的視覺身份在網絡上得到正確呈現。
樣式指南中應包含什么
無論是員工還是媒體機構查看您的樣式指南，都不應該有關于如何處理品牌元素（如徽標、顏色、字體和圖標）的疑慮。但這通常不足以幫助設計師創建數字產品的用戶界面。
這就是為什么一些樣式指南包含與網格、間距、布局、圖標、動畫等相關的額外規范的原因。包含輔助功能部分的做法也越來越受歡迎。常用 UI 組件的小集合也是如此。
如果您在網絡上查看，會注意到樣式指南在品牌之間有所不同。例如，Drupal 的樣式指南包括以下幾個方面的指南：
· 設計原則
· 版式
· 顏色
· 標記
· 網格
· 輔助功能
還有一個名為“字詞和短語”的部分，為 Drupal 品牌制定了內容樣式的準則。
與此相反，Frontify 的品牌指南包括以下內容：
· 品牌身份
· 徽標
· 顏色
· 字體
· 品牌形象
· 產品形象
· 圖片引用和尺寸
還有一個專門用于“材質” UI 的部分。它包含了超出主要數字產品之外的用戶體驗的指南，如公司的文具、包裝、贈品和電子郵件簽名。
最終，樣式指南是由設計師來完善的。首先添加核心元素，如徽標、顏色和字體，然后從那里擴展。
何時創建樣式指南
除非您正在構建一個小型、個人和非商業網站，否則真的沒有不創建樣式指南的充分理由。
它為您提供了一個地方來記錄有關您品牌視覺身份的最關鍵的設計決策。即使您是獨自工作，將所有這些信息放在一個地方仍然是有價值的。
而且，樣式指南是一個與客戶開發和共享的極好資源。無論您在啟動他們的網站或應用程序后是否繼續為他們工作，樣式指南都可以確保您最初的設計決策得以維持。當需要進行更改時，可以更新文檔，以便將來使用它的所有人保持一致。
什么是設計系統？
設計系統是品牌的視覺語言。樣式指南只是其中的一小部分。設計系統是完整的工具包，還包括設計原則、可重用組件、模式庫、設計資源等等。
讓我們從之前的 Yelp 的類比繼續談起。
如果樣式指南中的元素是原料，那么配方說明就是您放入用戶界面的各種組件，如按鈕、字段、卡片、列表、頭像等。它還包括將這些組件組合成頁面上有用且交互式元素的模式。
樣式指南的“原料”確保每個組件和模式都具有一致的外觀和感覺。組件和模式庫確保您以正確的順序和方式將所有內容組合在一起，以獲得最佳結果。
設計系統的其他組成部分，如代碼片段、設計令牌和資源，幫助您遵循說明，以便將食譜變成出色的最終產品。
設計系統的目的
一致性、清晰度和質量是使用設計系統的自然結果。在 Seeds 設計系統主頁上，Sprout Social 解釋了為什么這是如此重要：
“獨特而一致的品牌形象使我們與競爭對手區分開來，建立了與我們的客戶之間的信任和熟悉感，并最終導致長期品牌價值的形成。”
設計系統不僅僅是用于記錄如何創建單個數字產品的工具。盡管它們通常是從這樣的角度開始的。
設計系統為您提供了組合品牌視覺資產所需的所有說明和準則。這使得它成為擴展品牌不可或缺的工具包。例如：
一個預計每年都會以指數級增長庫存的商店
一個正在擴張并招聘新員工以滿足業務不斷變化需求的數字團隊
一個正在拓展到新渠道并需要一種快速有效的方式來做到這一點的品牌
隨著增長，復雜性就會增加。您的產品、團隊或影響力越大，當涉及到 UI 設計時，保持一切井井有條和一致就會變得更加困難。這就是為什么如果您的目標是增長和可擴展性，設計系統是必不可少的原因。
設計系統中應包含什么
與樣式指南一樣，您決定放入設計系統的內容取決于您的品牌和您正在構建的內容。盡管如此，設計系統是全面的工具包，因此大多數都包括以下內容：
· 品牌介紹
· 設計原則
· 樣式指南
· 組件庫
· 模式庫
· 設計令牌
· 資源，如庫、模板和工具?
一些還包括像 Atlassian 設計系統那樣的內容部分。
這一部分提供了處理以下內容的指南：
· 包容性語言
· 語言和語法
· 詞匯
· 語氣和語調原則
· 寫作準則
· 寫作風格
這只是設計系統為跨學科產品團隊提供服務的一種方式。包含設計令牌部分有助于彌合網頁設計師審美選擇與在開發產品時實現它們之間的差距。
在 Talend 的 Coral 設計系統中，您會找到如何處理設計令牌的一個很好的例子。
這就是為什么設計系統通常被稱為分布式團隊的唯一真相來源。它們使任何人都能夠在為品牌設計數字產品、資產和體驗時做出自信的決策。
何時創建設計系統
設計系統對數字團隊有多么有利是清楚的。
它們為設計師提供了在開發品牌資產時使用一致的視覺語言。它們減少了溝通錯誤、誤解和錯誤。它們還使設計和更新視覺界面變得更加容易和快速。
然而，建立和維護它們需要大量的工作。因此，在為您的品牌開發一個之前，考慮它是否值得投資是很重要的。
如果您正在為個人項目、小型企業設計網站，或者是靜態內容，可能不會有太多變化或擴展，那么設計系統可能對您沒有好處。
結論
雖然沒有樣式指南就不能有設計系統，但有樣式指南卻可以沒有設計系統。有各種各樣的原因可以選擇后者。
樣式指南是跟蹤為品牌視覺身份奠定基礎的設計決策的好方法。如果您不確定是否需要設計系統，樣式指南不需要太多的時間投入。您也不必得到其他團隊成員和利益相關者的支持。
所以，至少計劃為您工作的每個專業項目制作一個樣式指南。
現在，如果您正在啟動一個重要項目——無論是企業網站、大型電子商務市場、移動應用等——您很有可能會受益于設計系統。隨著更多的組成部分、貢獻者、修訂和整體復雜性，設計系統是確保您創建的內容在最高水平上一致執行的唯一方式。
精選文章：