標準化設計下的網頁通常具有系統的網頁樣式指南。如果您想確保您的網頁設計更加一致，并且每個參與者和用戶都可以在規范框架內進行設計，開發和使用，那么樣式指南就是有意義的。

既然我們想設計一個樣式指南，它應包含哪些信息？如何確保其他人遵守其標準并使設計和體驗保持一致？我們今天來談談這個話題。

品牌概述

如果你從未做過風格指南，那么從頭開始創建一個完整的風格指南肯定是很多工作。眾所周知，新手可以找到您喜歡的樣式指南作為參考模板。—— MailChimp的風格指南非常好，也符合CC許可證。

大多數風格指南由兩部分組成：

·文案規范

·視覺指南

“守則”的兩個部分同樣重要，貫穿整個風格指南。通過將不同元素集成在一起，您可以建立具有足夠認可度的品牌形象。每個品牌和網站實際上都是不同的。當您準備為文本和視覺選擇顏色和樣式時，您和您的用戶也應該在整個系統中考慮。

在進行品牌識別的過程中，用戶和興趣都包含在思考中。品牌的當前設計是他們想要的，是他們所期望的嗎？你是否考慮過所有因素？用戶是否有與他們互動的愿望？

語氣和語調

來源：Mailc

雖然視覺指南占很大比例，但副本中的色調和色調也非常重要。它們是品牌“身份”的一部分，網站，它決定了與用戶溝通的方式，是正式的還是隨意的，是冗長而準確的，還是直截了當的？

您的樣式指南應與網站的副本和樣式一致。這將使您的團隊更清晰地了解設計，更清楚地了解演示文稿將如何影響品牌形象。

因此，與外界溝通的每一個詞應該具有一致的語氣和語調。回到MailChimp案例，如果你仔細觀察，你會發現他們也試圖通過語言建立一個獨特的品牌形象。當他們在風格指南中提到他們的吉祥物時，他們說：“弗雷迪是我們的吉祥物。我們不會讓他加入我們的LOGO，弗雷迪總是向右看，總是你眨眼。”

規則和用途

資料來源：Tamu

樣式指南是您設計的“腳本”。 “腳本”是否比強調“規則”更貼心？

樣式指南應概述應使用字體，顏色和樣式的時間和位置，并以簡單且移動的方式表達它們。這是清單：

·配色方案，包括每種顏色的特定參數和其他可接受的色調

字體和布局方案，包括每個部分的字體類型，大小，重量和用法

·LOGO，包括其樣式，變化，尺寸和位置的描述

·拼寫，關鍵詞選擇，復制方式（包括按鈕，社交媒體等）

·圖像使用規范，包括顏色，裁剪規則和視覺性能標準

·SEO信息，例如可選標簽和關鍵字

·網格標準（主要用于網頁布局和打印）

·空間和空白的描述（設計緊密度等）

·關鍵點的描述（團隊成員可能要求或指出澄清的點）

簡單而具體的概念

資料來源：Trello

下一步是輸入關鍵鏈接。當您最終收集上述所有信息時，您需要將它們分解，重新組織它們，并將它們組織成簡單，具體和可執行的概念。

·不要限制內容表達過多。畢竟這是一種風格指南，重點是視覺指導，設計是核心;

·將相關和鏈接的項目集成在一起以便快速指導：一頁介紹顏色，另一種頁面布局規范等;

·使用圖片大小寫來顯示界面的外觀，而不是簡單地使用無聊的文字來介紹;

·提供具體的說明。例如，顏色方案提供顏色的RGB或CMYK的特定值，以確保顏色可以一致使用;

·分解設計案例的一部分，以確保每個元素的功能和使用規則足夠清晰;

示例和代碼段

資料來源：Handdy

無論您的風格指南是印刷的，電子的還是基于網絡的，它都應包含可用的工具和材料。關鍵是用例，可以做什么以及禁止什么。您可以專注于品牌的視覺呈現。

然后，您可以將易于訪問的部分放入列表中，并創建一個庫，所有團隊成員都可以根據使用頻率訪問該庫。已知該庫存儲在本地，易于訪問，并且隨著項目的進展可以更新材料和文檔。

之后，提供一系列基于云的軟件列表（提供鏈接，登錄信息等），將材料提交到云端，并包含相應的字體包，徽標，圖片素材。這些文件和資料應合理組織，當其他成員訪問時，他們可以根據組織邏輯找到相應的文件，工具或材料。 （本地，云和備份應以井井有條的方式組織）

在開發樣式和特定功能時，您應該創建一個代碼片段列表，以確保前端人員可以快速呼叫，特別是那些應該易于訪問的共享位置中的每個人都可以訪問和訪問的公共部分。

后一點是要記住更新。確定文檔和材料發生變化時，請確保本地和云文檔和材料完整且即時更新。

風格指南的實施

資料來源：jquery

后一個問題終于到了。那么如何讓人們遵循風格指南中的規則？如果您的風格指南設計得井井有條，清晰明了，那么這種風格至少在規則中有堅實的基礎。

簡單直接的語言使讀者更容易理解和關注。像網站一樣小心對待您的樣式指南，使其可用且易于使用，以便用戶無意識地遵循您的規則。

作為網站的樣式指南，它本身并不是靜態的。您應該為團隊的其他成員留出足夠的空間來改進，添加內容并確保其靈活性。同樣，樣式指南也應該有一個“管理員”，管理員可以使用它來批準更改，控制更改和協調整個系統。