標準化設計下的網頁通常有系統的網頁風格指南。如果你想確保你的網頁設計更一致，并確保每個參與者和用戶都能在標準框架內設計、開發和使用，那么風格指南的存在就很有意義了。既然要設計風格指南，應該包含哪些信息？如何保證別人遵循其標準，保持設計和體驗一致？今天我們來談談這個話題。品牌概述 如果你從來沒有做過風格指南，那么從頭開始創建一套完整的風格指南絕對是一件非常困難的事情。新手在路上找到自己喜歡的風格指南作為參考模板——MailChimp風格指南做得很好，符合要求CC許可。大多數風格指南由兩部分組成：·文案規范·視覺指南標準的兩部分同樣重要，貫穿整個風格指南。將不同的元素整合在一起，可以構建出具有足夠認可度的品牌形象，每個品牌、網站都會有差異。當你準備為你的文本和視覺選擇顏色和風格時，你和你的用戶也應該考慮到整個系統。在制作品牌識別時，要考慮用戶和利益的相關性。品牌目前的設計是他們想要的還是他們期待的？思考中是否包含了所有因素？用戶有與之互動的欲望嗎？語氣與語調 來源：Mailc雖然視覺在風格指南中占有很大例，但文案中的語氣和語調也很重要。它們是品牌和網站身份的一部分。它們決定了與用戶溝通的方式，是正式的還是休閑的，冗長準確的還是直截了當的？你的風格指南應該與網站的文案和風格一致。這可以讓你的團隊對設計的預期更明晰，對于表述方式對于品牌形象的影響有更明確的認知。因此，你與外界耐心交流的每一句話都應該保持一致的語調和語氣。重新回到MailChimp如果你仔細閱讀這個案例，你會發現他們也試圖通過語言建立獨特的品牌形象。當他們在風格指南中提到吉祥物時，他們說：Freddie是我們的吉祥物。我們不會讓他和我們在一起LOGO結合在一起，Freddie永遠向右看，永遠向你眨眼。”規則和用途 來源：Tamu風格指南就是你所設計的“劇本”。劇本的說法是否比強調規則更友好？風格指南應詳細概述何時何地使用字體、顏色和樣式，并以簡單移動的方式表達。以下是清單：·配色方案包括每種顏色的具體參數和其他可接受的顏色·字體和排版方案包括字體類型、尺寸、重量和每個部分的具體用法·LOGO，包括其風格、變體、尺寸和位置描述·拼寫、關鍵詞選擇、文案風格（包括按鈕、社交媒體等）·圖片使用規范包括顏色、裁剪規則和視覺表達標準·SEO信息，例如，可選標簽和關鍵字·網格標準(主要用于網頁排版和印刷)·空間與留白方面的說明(設計的松緊度等)·重點說明(團隊成員可能會提出的問題或需要澄清的點)概念簡單具體 來源：Trello接下來要進入關鍵環節。當你終于收集了上面提到的所有信息時，你需要將它們分散和重組，并組織成一個簡單、具體和可執行的概念。·不要在內容表達上限制太多。畢竟是風格指南，重點是視覺引導，設計是核心；·整合相關、相關的項目進行快速指導：一頁介紹顏色，另一頁排版規范等；·用圖片案例來展示界面應有的外觀，而不僅僅是用枯燥的文字來介紹；·提供可用的具體說明。例如，在配色方案中提供顏色RGB或者CMYK具體值，保證色彩的使用能夠一致；·解釋一些設計案例，確保每個元素的功能和使用規則都足夠清晰；示例和代碼片段 來源：Handdy無論是印刷、電子版還是基于網頁的文檔，您的風格指南都應該包含可用的工具和材料。關鍵是使用案例，什么可以做，什么被禁止。關鍵是使用案例，什么可以做，什么被禁止。你可以專注于品牌的視覺展示。然后，您可以將易于訪問的部分制作成列表，并根據使用頻率創建一個所有團隊成員都可以訪問的材料庫。該材料庫首先在本地存儲，便于訪問，材料和文檔可以隨著項目的推廣而更新。之后，提供一系列基于云端的軟件列表(提供鏈接、登錄信息等)，將素材提交到云端，并且包含相應的字體包、Logo、圖片素材。這些文件和材料應合理組織整理，其他成員可以根據組織邏輯找到相應的文件、工具或材料。(本地、云、備份要組織好)在開發風格和特定功能時，應創建代碼片段列表，以確保前端人員能夠快速呼叫，特別是那些常見的部分，應該在易于訪問的共享位置，以方便每個人訪問和呼叫。后一點，一定要記得更新。當確定要更改文檔和材料時，確保當地和云的文檔和材料完整和即時更新。實施風格指南 來源：jquery后來的問題終于來了。那么如何讓人們遵循風格指南中的規則呢？假如你的風格指南設計得足夠有條理，概念清晰，要求清晰，那么這種風格至少在規則上有堅實的基礎。簡單直白的語言可以讓讀者更容易理解和關注。只有像設計網站一樣仔細對待你的風格指南，它才能有可用性和易用性。這樣，用戶就會無意識地遵循你的規則。作為一個網站的風格指南，它本身并不是靜態的。為團隊其他成員完善和添加內容留出足夠的空間，以確保其靈活性。同樣了，風格指南還應當有一個“管理員”，管理員用來批準修改、掌控修改，統籌整個體系。