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