標(biāo)準(zhǔn)化設(shè)計(jì)下的網(wǎng)頁(yè)通常具有系統(tǒng)的網(wǎng)頁(yè)樣式指南。如果您想確保您的網(wǎng)頁(yè)設(shè)計(jì)更加一致，并且每個(gè)參與者和用戶(hù)都可以在規(guī)范框架內(nèi)進(jìn)行設(shè)計(jì)，開(kāi)發(fā)和使用，那么樣式指南就是有意義的。

既然我們想設(shè)計(jì)一個(gè)樣式指南，它應(yīng)包含哪些信息？如何確保其他人遵守其標(biāo)準(zhǔn)并使設(shè)計(jì)和體驗(yàn)保持一致？我們今天來(lái)談?wù)勥@個(gè)話(huà)題。

品牌概述

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

大多數(shù)風(fēng)格指南由兩部分組成：

·文案規(guī)范

·視覺(jué)指南

“守則”的兩個(gè)部分同樣重要，貫穿整個(gè)風(fēng)格指南。通過(guò)將不同元素集成在一起，您可以建立具有足夠認(rèn)可度的品牌形象。每個(gè)品牌和網(wǎng)站實(shí)際上都是不同的。當(dāng)您準(zhǔn)備為文本和視覺(jué)選擇顏色和樣式時(shí)，您和您的用戶(hù)也應(yīng)該在整個(gè)系統(tǒng)中考慮。

在進(jìn)行品牌識(shí)別的過(guò)程中，用戶(hù)和興趣都包含在思考中。品牌的當(dāng)前設(shè)計(jì)是他們想要的，是他們所期望的嗎？你是否考慮過(guò)所有因素？用戶(hù)是否有與他們互動(dòng)的愿望？

語(yǔ)氣和語(yǔ)調(diào)

來(lái)源：Mailc

雖然視覺(jué)指南占很大比例，但副本中的色調(diào)和色調(diào)也非常重要。它們是品牌“身份”的一部分，網(wǎng)站，它決定了與用戶(hù)溝通的方式，是正式的還是隨意的，是冗長(zhǎng)而準(zhǔn)確的，還是直截了當(dāng)?shù)模?/p>

您的樣式指南應(yīng)與網(wǎng)站的副本和樣式一致。這將使您的團(tuán)隊(duì)更清晰地了解設(shè)計(jì)，更清楚地了解演示文稿將如何影響品牌形象。

因此，與外界溝通的每一個(gè)詞應(yīng)該具有一致的語(yǔ)氣和語(yǔ)調(diào)?；氐組ailChimp案例，如果你仔細(xì)觀(guān)察，你會(huì)發(fā)現(xiàn)他們也試圖通過(guò)語(yǔ)言建立一個(gè)獨(dú)特的品牌形象。當(dāng)他們?cè)陲L(fēng)格指南中提到他們的吉祥物時(shí)，他們說(shuō)：“弗雷迪是我們的吉祥物。我們不會(huì)讓他加入我們的LOGO，弗雷迪總是向右看，總是你眨眼。”

規(guī)則和用途

資料來(lái)源：Tamu

樣式指南是您設(shè)計(jì)的“腳本”。 “腳本”是否比強(qiáng)調(diào)“規(guī)則”更貼心？

樣式指南應(yīng)概述應(yīng)使用字體，顏色和樣式的時(shí)間和位置，并以簡(jiǎn)單且移動(dòng)的方式表達(dá)它們。這是清單：

·配色方案，包括每種顏色的特定參數(shù)和其他可接受的色調(diào)

字體和布局方案，包括每個(gè)部分的字體類(lèi)型，大小，重量和用法

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

·拼寫(xiě)，關(guān)鍵詞選擇，復(fù)制方式（包括按鈕，社交媒體等）

·圖像使用規(guī)范，包括顏色，裁剪規(guī)則和視覺(jué)性能標(biāo)準(zhǔn)

·SEO信息，例如可選標(biāo)簽和關(guān)鍵字

·網(wǎng)格標(biāo)準(zhǔn)（主要用于網(wǎng)頁(yè)布局和打?。?/p>

·空間和空白的描述（設(shè)計(jì)緊密度等）

·關(guān)鍵點(diǎn)的描述（團(tuán)隊(duì)成員可能要求或指出澄清的點(diǎn)）

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

資料來(lái)源：Trello

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

·不要限制內(nèi)容表達(dá)過(guò)多。畢竟這是一種風(fēng)格指南，重點(diǎn)是視覺(jué)指導(dǎo)，設(shè)計(jì)是核心;

·將相關(guān)和鏈接的項(xiàng)目集成在一起以便快速指導(dǎo)：一頁(yè)介紹顏色，另一種頁(yè)面布局規(guī)范等;

·使用圖片大小寫(xiě)來(lái)顯示界面的外觀(guān)，而不是簡(jiǎn)單地使用無(wú)聊的文字來(lái)介紹;

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

·分解設(shè)計(jì)案例的一部分，以確保每個(gè)元素的功能和使用規(guī)則足夠清晰;

示例和代碼段

資料來(lái)源：Handdy

無(wú)論您的風(fēng)格指南是印刷的，電子的還是基于網(wǎng)絡(luò)的，它都應(yīng)包含可用的工具和材料。關(guān)鍵是用例，可以做什么以及禁止什么。您可以專(zhuān)注于品牌的視覺(jué)呈現(xiàn)。

然后，您可以將易于訪(fǎng)問(wèn)的部分放入列表中，并創(chuàng)建一個(gè)庫(kù)，所有團(tuán)隊(duì)成員都可以根據(jù)使用頻率訪(fǎng)問(wèn)該庫(kù)。已知該庫(kù)存儲(chǔ)在本地，易于訪(fǎng)問(wèn)，并且隨著項(xiàng)目的進(jìn)展可以更新材料和文檔。

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

在開(kāi)發(fā)樣式和特定功能時(shí)，您應(yīng)該創(chuàng)建一個(gè)代碼片段列表，以確保前端人員可以快速呼叫，特別是那些應(yīng)該易于訪(fǎng)問(wèn)的共享位置中的每個(gè)人都可以訪(fǎng)問(wèn)和訪(fǎng)問(wèn)的公共部分。

后一點(diǎn)是要記住更新。確定文檔和材料發(fā)生變化時(shí)，請(qǐng)確保本地和云文檔和材料完整且即時(shí)更新。

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

資料來(lái)源：jquery

后一個(gè)問(wèn)題終于到了。那么如何讓人們遵循風(fēng)格指南中的規(guī)則？如果您的風(fēng)格指南設(shè)計(jì)得井井有條，清晰明了，那么這種風(fēng)格至少在規(guī)則中有堅(jiān)實(shí)的基礎(chǔ)。

簡(jiǎn)單直接的語(yǔ)言使讀者更容易理解和關(guān)注。像網(wǎng)站一樣小心對(duì)待您的樣式指南，使其可用且易于使用，以便用戶(hù)無(wú)意識(shí)地遵循您的規(guī)則。

作為網(wǎng)站的樣式指南，它本身并不是靜態(tài)的。您應(yīng)該為團(tuán)隊(duì)的其他成員留出足夠的空間來(lái)改進(jìn)，添加內(nèi)容并確保其靈活性。同樣，樣式指南也應(yīng)該有一個(gè)“管理員”，管理員可以使用它來(lái)批準(zhǔn)更改，控制更改和協(xié)調(diào)整個(gè)系統(tǒng)。