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

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

品牌概述

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

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

·文案規(guī)范

·視覺指南

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

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

語氣和語調(diào)

來源：Mailc

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

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

因此，與外界溝通的每一個詞應(yīng)該具有一致的語氣和語調(diào)?；氐組ailChimp案例，如果你仔細觀察，你會發(fā)現(xiàn)他們也試圖通過語言建立一個獨特的品牌形象。當他們在風格指南中提到他們的吉祥物時，他們說：“弗雷迪是我們的吉祥物。我們不會讓他加入我們的LOGO，弗雷迪總是向右看，總是你眨眼?！?/p>

規(guī)則和用途

資料來源：Tamu

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

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

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

字體和布局方案，包括每個部分的字體類型，大小，重量和用法

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

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

·圖像使用規(guī)范，包括顏色，裁剪規(guī)則和視覺性能標準

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

·網(wǎng)格標準（主要用于網(wǎng)頁布局和打?。?/p>

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

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

簡單而具體的概念

資料來源：Trello

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

·不要限制內(nèi)容表達過多。畢竟這是一種風格指南，重點是視覺指導，設(shè)計是核心;

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

·使用圖片大小寫來顯示界面的外觀，而不是簡單地使用無聊的文字來介紹;

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

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

示例和代碼段

資料來源：Handdy

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

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

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

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

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

風格指南的實施

資料來源：jquery

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

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

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