??? 規(guī)范化設(shè)計下的網(wǎng)頁，通常都會有系統(tǒng)的網(wǎng)頁風格指南。如果你想確保你的網(wǎng)頁設(shè)計能夠更加一致，并確保每個參與者和使用者都能在規(guī)范的框架內(nèi)設(shè)計、開發(fā)和使用，那么風格指南的存著就相當有意義了。

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

??? 品牌概述

??? 如果你從未做過風格指南，那么從頭開始創(chuàng)建一整套風格指南絕對是一件相當吃力的事情。新手上路最好找一個自己偏好的風格指南作為參考模板。微加互聯(lián)科技獨有的模板風格，適合大部分新生上路。

??? 絕大多數(shù)的風格指南是由兩個部分組成的：

??? ·文案規(guī)范

??? ·視覺指南

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

??? 在制作品牌識別的時候?qū)⒂脩艉屠嫦嚓P(guān)這納入思考，品牌當前的設(shè)計是否是他們想要的，是否為他們所期待?是否將所有因素都納入思考?用戶是否有與之進行交互的欲望?

??? 語氣與語調(diào)

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

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

??? 所以，你同外界耐以溝通的每一個文字都應(yīng)當保持一致的語調(diào)和語氣。重新回到 MailChimp 這個案例，如果你仔細審讀會發(fā)現(xiàn)他們同樣力圖通過語言來構(gòu)建獨特的品牌形象。在風格指南中提及他們的吉祥物的時候，他們是這么說的：“Freddie 是我們的吉祥物。我們并不會讓他同我們的LOGO結(jié)合到一起，F(xiàn)reddie 永遠向右看，也一直向你眨眼。”

??? 規(guī)則和用途

??? 風格指南就是你所設(shè)計的“劇本”。相比于強調(diào)“規(guī)則”，“劇本”的說法是不是更加親切呢?

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

??? ·配色方案，包括每種色彩的具體參數(shù)，以及其他可接受的色調(diào)

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

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

??? ·拼寫、關(guān)鍵詞的選擇、文案的風格(包括按鈕、社交媒體等)

??? ·圖片使用規(guī)范，包括色彩、裁剪規(guī)則和視覺表現(xiàn)方面的標準

??? ·SEO信息，比如可選的標簽和關(guān)鍵詞

??? ·柵格標準(主要用作網(wǎng)頁排版和印刷)

??? ·空間與留白方面的說明(設(shè)計的松緊度等)

??? ·關(guān)鍵點的說明(團隊成員可能會提出的問題或者有待澄清的點)

??? 簡單而具體的概念

??? 接下來要進入關(guān)鍵的環(huán)節(jié)了。當你終于把上面說的那些信息都搜集全了之后，需要將他們打散、重組，組織成簡單、具體、可執(zhí)行的概念。

??? ·在內(nèi)容表述上不要限制太多，這畢竟是風格指南，重點是視覺上的引導，設(shè)計是核心;

??? ·將相關(guān)、相聯(lián)的條目整合到一起做快速指引：一個頁面介紹色彩，在另外一個頁面做排版的規(guī)范等等;

??? ·用圖片案例來展示界面應(yīng)有的外觀，而不要單純用枯燥的文字來做介紹;

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

??? ·將一部分的設(shè)計案例分解說明，確保每個元素的功能和使用規(guī)則都足夠明晰;

??? 示例和代碼片段

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

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

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

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

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

??? 風格指南的實施

??? 最后的一個問題終于來了。那么到底要如何讓人們遵循風格指南中的規(guī)則呢?如果你的風格指南設(shè)計的足夠有條理，概念明晰，要求明確，條理清楚，那么這套風格在規(guī)則上至少有了扎實的基礎(chǔ)。

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

??? 作為一個網(wǎng)站的風格指南，它本身并不是靜態(tài)的。你應(yīng)當留下足夠的空間來供團隊其他成員完善、添加內(nèi)容，確保它的靈活性。同樣了，風格指南還應(yīng)當有一個“管理員”，管理員用來批準修改、掌控修改，統(tǒng)籌整個體系。