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

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

　　品牌概述

　　如果你從未做過(guò)風(fēng)格指南，那么從頭開(kāi)始創(chuàng )建一整套風(fēng)格指南絕對是一件相當吃力的事情。新手上路知名找一個(gè)自己偏好的風(fēng)格指南作為參考模板——MailChimp 的風(fēng)格指南就做的相當不錯，還符合CC許可。

　　絕大多數的風(fēng)格指南是由兩個(gè)部分組成的：

　　·文案規范

　　·視覺(jué)指南

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

　　在制作品牌識別的時(shí)候將用戶(hù)和利益相關(guān)這納入思考，品牌當前的設計是否是他們想要的，是否為他們所期待?是否將所有因素都納入思考?用戶(hù)是否有與之進(jìn)行交互的欲望?

　　語(yǔ)氣與語(yǔ)調

　　來(lái)源：Mailc

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

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

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

　　規則和用途

　　來(lái)源：Tamu

　　風(fēng)格指南就是你所設計的“劇本”。相比于強調“規則”，“劇本”的說(shuō)法是不是更加親切呢?

　　風(fēng)格指南應該詳勾勒出什么時(shí)候、什么地方分別應該使用什么字體、什么色彩以及樣式，并且以簡(jiǎn)潔移動(dòng)的方式表述出來(lái)。下面是清單：

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

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

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

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

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

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

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

　　·空間與留白方面的說(shuō)明(設計的松緊度等)

　　·關(guān)鍵點(diǎn)的說(shuō)明(團隊成員可能會(huì )提出的問(wèn)題或者有待澄清的點(diǎn))

　　簡(jiǎn)單而具體的概念

　　來(lái)源：Trello

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

　　·在內容表述上不要限制太多，這畢竟是風(fēng)格指南，重點(diǎn)是視覺(jué)上的引導，設計是核心;

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

　　·用圖片案例來(lái)展示界面應有的外觀(guān)，而不要單純用枯燥的文字來(lái)做介紹;

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

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

　　示例和代碼片段

　　來(lái)源：Handdy

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

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

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

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

　　后一點(diǎn)，就是一定要記得更新。當文檔、素材確定要改變的時(shí)候，確保本地、云端的文檔與素材都完整的、即時(shí)地更新。

　　風(fēng)格指南的實(shí)施

　　來(lái)源：jquery

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

　　簡(jiǎn)單直白的語(yǔ)言能讓讀者更容易理解、關(guān)注，像設計網(wǎng)站一樣慎重對待你的風(fēng)格指南才能讓它具備可用性和易用性，這樣一來(lái)，用戶(hù)會(huì )在不自覺(jué)中按照你的規則來(lái)推進(jìn)。

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

http://ezekroy.com/jianzhanzhishi/7458.html 的網(wǎng)頁(yè)風(fēng)格指南應該如何制作？