'必備技能！專業的網頁風格指南應該如何製作？'

規範化設計下的網頁，通常都會有系統的網頁風格指南。如果你想確保你的網頁設計能夠更加一致，並確保每個參與者和使用者都能在規範的框架內設計、開發和使用，那麼風格指南的存著就相當有意義了。

既然我們要設計風格指南，那麼它當中應當包含哪些信息呢？又是如何確保別人能夠遵循它的標準，讓設計和體驗保持一致呢？今天我們就來聊聊這個話題。

品牌概述

如果你從未做過風格指南，那麼從頭開始創建一整套風格指南絕對是一件相當吃力的事情。新手上路最好找一個自己偏好的風格指南作為參考模板——MailChimp 的風格指南就做的相當不錯，還符合CC許可。

絕大多數的風格指南是由兩個部分組成的：

·文案規範

·視覺指南

準則的兩個部分其實是同樣重要的，並且貫穿整個風格指南。將不同的元素整合到一起就能夠構建出擁有足夠的識別度的品牌形象，每個品牌、網站其實都會有差別的。當你準備為你的文本和視覺挑選色調和風格的時候，你和你的用戶也應當納入到整個體系當中來考慮。

在製作品牌識別的時候將用戶和利益相關這納入思考，品牌當前的設計是否是他們想要的，是否為他們所期待？是否將所有因素都納入思考？用戶是否有與之進行交互的慾望？

語氣與語調

來源：Mailc

雖然風格指南中視覺佔據著最大的比重，但是文案中的語氣與語調同樣是非常重要的。它們是品牌、網站的“身份”的一部分，它們決定了與用戶進行溝通的方式，是正式還是休閒，是冗長準確，還是直白清晰？

你的風格指南在表述上應當和網站的文案以及風格保持一致。這可以讓你的團隊對設計的預期更明晰，對於表述方式對於品牌形象的影響有更明確的認知。

所以，你同外界耐以溝通的每一個文字都應當保持一致的語調和語氣。重新回到 MailChimp 這個案例，如果你仔細審讀會發現他們同樣力圖通過語言來構建獨特的品牌形象。在風格指南中提及他們的吉祥物的時候，他們是這麼說的：“Freddie 是我們的吉祥物。我們並不會讓他同我們的LOGO結合到一起，Freddie 永遠向右看，也一直向你眨眼。”

規則和用途

來源：Tamu

風格指南就是你所設計的“劇本”。相比於強調“規則”，“劇本”的說法是不是更加親切呢？

風格指南應該詳勾勒出什麼時候、什麼地方分別應該使用什麼字體、什麼色彩以及樣式，並且以簡潔移動的方式表述出來。下面是清單：

·配色方案，包括每種色彩的具體參數，以及其他可接受的色調

·字體和排版方案，包括每個部分的字體類型、尺寸、字重以及具體用法

·LOGO，包括它的樣式、變體、尺寸以及位置的說明

·拼寫、關鍵詞的選擇、文案的風格（包括按鈕、社交媒體等）

·圖片使用規範，包括色彩、裁剪規則和視覺表現方面的標準

·SEO信息，比如可選的標籤和關鍵詞

·柵格標準（主要用作網頁排版和印刷）

·空間與留白方面的說明（設計的鬆緊度等）

·關鍵點的說明（團隊成員可能會提出的問題或者有待澄清的點）

簡單而具體的概念

來源：Trello

接下來要進入關鍵的環節了。當你終於把上面說的那些信息都蒐集全了之後，需要將他們打散、重組，組織成簡單、具體、可執行的概念。

·在內容表述上不要限制太多，這畢竟是風格指南，重點是視覺上的引導，設計是核心；

·將相關、相聯的條目整合到一起做快速指引：一個頁面介紹色彩，在另外一個頁面做排版的規範等等；

·用圖片案例來展示界面應有的外觀，而不要單純用枯燥的文字來做介紹；

·提供可用的具體說明。比如配色方案中提供色彩的RGB或者CMYK的具體值，確保色彩的運用能夠一致；

·將一部分的設計案例分解說明，確保每個元素的功能和使用規則都足夠明晰；

示例和代碼片段

來源：Handdy

你的樣式指南無論是印刷的、電子版的還是基於網頁的文檔，它都應該包含可用的工具和素材。其中最關鍵的就是使用案例，以及哪些事情可以做，以及哪些事情是被禁止的。你可以將重點放在品牌的視覺展現上去。

隨後，你可以將易於訪問的部分製作成為列表，並且根據使用頻率創造一個所有團隊成員都能訪問的素材庫，這個素材庫最好是先在本地存儲，便於訪問，並且其中的素材和文檔能夠隨著項目的推進而更新。

之後，提供一系列基於雲端的軟件列表（提供鏈接、登錄信息等），將素材提交到雲端，並且包含相應的字體包、Logo、圖片素材。這些文檔和素材應當被合理地組織整理，當其他成員訪問的時候，能夠根據組織邏輯找到相應的文檔、工具或者素材。（本地、雲端還有備份都應當有條理地組織好）

涉及到樣式和特定功能的開發的時候，應當創建代碼片段列表，確保前端人員能夠快速調用，尤其是那些最常見的部分，應該在最容易訪問的共享位置，方便每個人訪問和調用。

最後一點，就是一定要記得更新。當文檔、素材確定要改變的時候，確保本地、雲端的文檔與素材都完整的、即時地更新。

風格指南的實施

來源：jquery

最後的一個問題終於來了。那麼到底要如何讓人們遵循風格指南中的規則呢？如果你的風格指南設計的足夠有條理，概念明晰，要求明確，條理清楚，那麼這套風格在規則上至少有了紮實的基礎。

簡單直白的語言能讓讀者更容易理解、關注，像設計網站一樣慎重對待你的風格指南才能讓它具備可用性和易用性，這樣一來，用戶會在不自覺中按照你的規則來推進。

作為一個網站的風格指南，它本身並不是靜態的。你應當留下足夠的空間來供團隊其他成員完善、添加內容，確保它的靈活性。同樣了，風格指南還應當有一個“管理員”，管理員用來批准修改、掌控修改，統籌整個體系。

請私信我回復“666”，為嚴哥打Call~，還有更多驚喜哦~

.............................................................

UI嚴選—越努力，越幸運