在開發網站或應用程式時，在使用者介面設計方面可能很難保持所有內容，所以風格指南可以對此有所幫助。 但如果是更大的網站或應用程式、跨頻道體驗和不斷增長的產品團隊令到連風格指南也無法解決的額外複雜性。 這時候，就是設計系統派上用場的地方。
什麼是風格指南？
風格指南是描述和描繪品牌使用的核心視覺元素和風格的文件。 它可以是一套獨立的指南，也可以出現在更大的設計系統中。
Yelp風格指南對其工作原理有很好的參考。
顏色和字型等風格指南元素是成分。 設計師參考風格指南，以瞭解在製作特定“食譜”時應該使用哪些成分。
但這就是風格指南通常結束的地方。 它向我們展示了主要成分是什麼以及如何使用它們的基本指南。 然而，完整的說明、成品主菜和烹飪書（即數字產品和使用者體驗）沒有解決。
對於一些品牌和設計團隊來說，這就足夠了。
風格指南的目的
風格指南為設計師提供了一套基本指南，用於為品牌建立視覺資產。 這適用於從設計網站到建立商業贓物，以及介於兩者之間的一切。
不過，使用風格指南的不僅僅是網頁設計師。 以Disqus風格指南為例。
這套微型品牌指南對媒體上的人很有幫助。 記者、評論員和有影響力的人會參考這些視覺資源和可下載的資產，以確保他們在網上提及它們時使用公司品牌的正確版本。
因此，風格指南有兩個大用途。 主要目的是幫助設計師為數字產品提供一致的視覺風格和元素。 次要目的是確保品牌的視覺標識在網路上被正確描繪。
風格指南中包含了什麼內容
無論是員工還是媒體機構檢視您的風格指南，如何處理徽標、顏色、排版和圖示等品牌元素都應該毫無疑問。 但這通常不足以幫助設計師建立數字產品的使用者介面。
這就是為什麼一些樣式指南包括與網格、間距、佈局、圖示、動畫等相關的附加規範。 包括關於可訪問性的部分也越來越受歡迎。 最常用的UI元件的一小部分也是如此。
If you take a look around the web, you’ll notice that style guides differ from brand to brand. For example, the style guide for Drupal includes guidelines for the following:
如果你瀏覽一下網頁，你會發現風格指南因品牌而異。 例如，Drupal的風格指南包括以下指南：
- 設計原則
- 字型排版
- 色彩
- HTML 元件
- 欄柵格式
- 輔助規劃
There’s also a section called Words and phrases that lays out content style guidelines for the Drupal brand.
另一方面，Frontify的品牌指南包括以下內容：
- 品牌標識
- 品牌標誌
- 色彩
- 字型
- 品牌形象
- 產品圖片
- 影像引用和尺寸
還有一個專門討論“材料”使用者介面的部分。 它對主要數字產品以外的使用者體驗有指南，如公司的文具、包裝、贓物和電子郵件簽名。
歸根結底，風格指南由你來定義， 首先新增標誌、顏色和字型等核心元素， 然後就從遵循那些規範來開始建造網站。
何時建立風格指南
除非你正在建立一個小型的、個人的和非商業的網站，否則真的沒有充分的理由不建立一個風格指南。
它為您提供了一個記錄與品牌視覺標識相關的最關鍵設計決策的地方。 即使您獨自工作，您也會發現將所有這些資訊放在一個地方是有價值的。
此外，風格指南是開發和與客戶共享的絕佳資源。 無論您在推出他們的網站或應用程式後是否繼續為他們工作，風格指南都可以確保您的初始設計決定得到維護。 當需要進行更改時，可以更新文件，以便將來使用它的每個人都保持在同一頁上。
什麼是設計系統？
設計系統是品牌的視覺語言。 風格指南只是其中的一小部分。 設計系統是整個工具包，還包括設計原則、可重複使用的元件、模式庫、設計資源等。
讓我們用Yelp的例子開始。
如果樣式指南元素是成分，那麼食譜說明將是您放入使用者介面的各種元件，如按鈕、欄位、卡片、列表、頭像等。 它還將包括將這些元件組合成頁面上有用和互動的元素的模式。
風格指南的“成分”確保每個元件和圖案的設計具有一致的外觀和感覺。 元件和模式庫確保您以正確的順序和方式將所有內容彙集在一起，以獲得最佳結果。
設計系統的其他部分——如程式碼片段、設計令牌和資源——幫助您遵循說明，以便您可以將配方變成一個偉大的最終產品。
設計系統的目的
一致性、清晰度和質量是使用設計系統的自然結果。 在種子設計系統主頁上，Sprout Social解釋了為什麼這如此重要：
“獨特和一致的品牌形象使我們與競爭對手脫穎而出，與客戶建立信任和熟悉度，並最終帶來長期的品牌價值。”
設計系統中應包含的內容
就像風格指南一樣，您決定將什麼放入設計系統取決於您的品牌和您正在構建的內容。 也就是說，設計系統是包羅所有的工具包，因此大多數包括以下內容：
- 品牌介紹
- 設計原則
- 風格指南
- 元件庫
- 模式庫
- 設計標籤
- 資源庫、模板和工具等
有些還包括一個關於內容的部分，就像Atlassian設計系統一樣。
本節提供了如何處理以下方面的指導方針：
- 包容性語言
- 語言和語法
- 語彙
- 聲音和語氣原則
- 寫作指南
- 寫作風格
這只是設計系統為跨學科產品團隊服務的一種方式。 當包括在內時，關於設計令牌的部分有助於彌合網頁設計師在開發產品時的美學選擇和實施之間的差距。
您將在 Talend的Coral設計系統 中找到一個關於如何處理設計令牌的好例子。
這就是為什麼設計系統通常被稱為分散式團隊的唯一真理來源。 在為品牌設計數字產品、資產和體驗時，它們使任何人都可以進來並做出自信的決定。
何時建立設計系統
很明顯，設計系統對數字團隊來說是多麼有利。
它們為設計師提供了在開發品牌資產時使用一致的視覺語言。 他們減少了溝通不暢、誤解和錯誤。 它們還使設計和更新視覺化介面變得更容易、更快。
然而，它們需要大量的工作來建造和維護。 因此，在為您的品牌開發投資之前，考慮這是否值得投資很重要。
如果您正在為個人專案、小型企業或靜態內容設計網站，這些內容可能不會發生太大變化或擴充套件，那麼設計系統可能對您沒有好處。
結論
雖然沒有風格指南，你就無法擁有設計系統，但如果沒有風格指南，你也可以擁有風格指南。 你可能會選擇後一個選項，原因有很多。
風格指南是跟蹤設計決策的好方法，為品牌的視覺標識奠定基礎。 如果您不確定是否需要設計系統，風格指南不需要那麼多時間。 您也不必獲得其他團隊成員和利益相關者的支援。
因此，至少，計劃為你從事的每個專業專案製作一個風格指南。
現在，如果您正在開始一個重大專案——無論是企業網站、大型電子商務市場、移動應用程式等——您很有可能從設計系統中受益。 有了更多的移動部件、貢獻者、修訂和整體複雜性，設計系統是確保您建立的內容始終在最高級別執行的唯一方法。
檢視我們的設計系統101指南，瞭解更多關於建築設計系統的好處，您的設計系統中包含的內容，並檢視更多設計系統在實踐中的示例。
