標(biāo)準(zhǔn)化設(shè)計(jì)下的網(wǎng)頁通常有系統(tǒng)的網(wǎng)頁風(fēng)格指南。如果你想確保你的網(wǎng)頁設(shè)計(jì)更一致，并確保每個(gè)參與者和用戶都能在標(biāo)準(zhǔn)框架內(nèi)設(shè)計(jì)、開發(fā)和使用，那么風(fēng)格指南的存在就很有意義了。既然要設(shè)計(jì)風(fēng)格指南，應(yīng)該包含哪些信息？如何保證別人遵循其標(biāo)準(zhǔn)，保持設(shè)計(jì)和體驗(yàn)一致？今天我們來談?wù)勥@個(gè)話題。品牌概述 如果你從來沒有做過風(fēng)格指南，那么從頭開始創(chuàng)建一套完整的風(fēng)格指南絕對是一件非常困難的事情。新手在路上找到自己喜歡的風(fēng)格指南作為參考模板——MailChimp風(fēng)格指南做得很好，符合要求CC許可。大多數(shù)風(fēng)格指南由兩部分組成：·文案規(guī)范·視覺指南標(biāo)準(zhǔn)的兩部分同樣重要，貫穿整個(gè)風(fēng)格指南。將不同的元素整合在一起，可以構(gòu)建出具有足夠認(rèn)可度的品牌形象，每個(gè)品牌、網(wǎng)站都會(huì)有差異。當(dāng)你準(zhǔn)備為你的文本和視覺選擇顏色和風(fēng)格時(shí)，你和你的用戶也應(yīng)該考慮到整個(gè)系統(tǒng)。在制作品牌識(shí)別時(shí)，要考慮用戶和利益的相關(guān)性。品牌目前的設(shè)計(jì)是他們想要的還是他們期待的？思考中是否包含了所有因素？用戶有與之互動(dòng)的欲望嗎？語氣與語調(diào) 來源：Mailc雖然視覺在風(fēng)格指南中占有很大例，但文案中的語氣和語調(diào)也很重要。它們是品牌和網(wǎng)站身份的一部分。它們決定了與用戶溝通的方式，是正式的還是休閑的，冗長準(zhǔn)確的還是直截了當(dāng)?shù)模磕愕娘L(fēng)格指南應(yīng)該與網(wǎng)站的文案和風(fēng)格一致。這可以讓你的團(tuán)隊(duì)對設(shè)計(jì)的預(yù)期更明晰，對于表述方式對于品牌形象的影響有更明確的認(rèn)知。因此，你與外界耐心交流的每一句話都應(yīng)該保持一致的語調(diào)和語氣。重新回到MailChimp如果你仔細(xì)閱讀這個(gè)案例，你會(huì)發(fā)現(xiàn)他們也試圖通過語言建立獨(dú)特的品牌形象。當(dāng)他們在風(fēng)格指南中提到吉祥物時(shí)，他們說：Freddie是我們的吉祥物。我們不會(huì)讓他和我們在一起LOGO結(jié)合在一起，F(xiàn)reddie永遠(yuǎn)向右看，永遠(yuǎn)向你眨眼。”規(guī)則和用途 來源：Tamu風(fēng)格指南就是你所設(shè)計(jì)的“劇本”。劇本的說法是否比強(qiáng)調(diào)規(guī)則更友好？風(fēng)格指南應(yīng)詳細(xì)概述何時(shí)何地使用字體、顏色和樣式，并以簡單移動(dòng)的方式表達(dá)。以下是清單：·配色方案包括每種顏色的具體參數(shù)和其他可接受的顏色·字體和排版方案包括字體類型、尺寸、重量和每個(gè)部分的具體用法·LOGO，包括其風(fēng)格、變體、尺寸和位置描述·拼寫、關(guān)鍵詞選擇、文案風(fēng)格（包括按鈕、社交媒體等）·圖片使用規(guī)范包括顏色、裁剪規(guī)則和視覺表達(dá)標(biāo)準(zhǔn)·SEO信息，例如，可選標(biāo)簽和關(guān)鍵字·網(wǎng)格標(biāo)準(zhǔn)(主要用于網(wǎng)頁排版和印刷)·空間與留白方面的說明(設(shè)計(jì)的松緊度等)·重點(diǎn)說明(團(tuán)隊(duì)成員可能會(huì)提出的問題或需要澄清的點(diǎn))概念簡單具體 來源：Trello接下來要進(jìn)入關(guān)鍵環(huán)節(jié)。當(dāng)你終于收集了上面提到的所有信息時(shí)，你需要將它們分散和重組，并組織成一個(gè)簡單、具體和可執(zhí)行的概念。·不要在內(nèi)容表達(dá)上限制太多。畢竟是風(fēng)格指南，重點(diǎn)是視覺引導(dǎo)，設(shè)計(jì)是核心；·整合相關(guān)、相關(guān)的項(xiàng)目進(jìn)行快速指導(dǎo)：一頁介紹顏色，另一頁排版規(guī)范等；·用圖片案例來展示界面應(yīng)有的外觀，而不僅僅是用枯燥的文字來介紹；·提供可用的具體說明。例如，在配色方案中提供顏色RGB或者CMYK具體值，保證色彩的使用能夠一致；·解釋一些設(shè)計(jì)案例，確保每個(gè)元素的功能和使用規(guī)則都足夠清晰；示例和代碼片段 來源：Handdy無論是印刷、電子版還是基于網(wǎng)頁的文檔，您的風(fēng)格指南都應(yīng)該包含可用的工具和材料。關(guān)鍵是使用案例，什么可以做，什么被禁止。關(guān)鍵是使用案例，什么可以做，什么被禁止。你可以專注于品牌的視覺展示。然后，您可以將易于訪問的部分制作成列表，并根據(jù)使用頻率創(chuàng)建一個(gè)所有團(tuán)隊(duì)成員都可以訪問的材料庫。該材料庫首先在本地存儲(chǔ)，便于訪問，材料和文檔可以隨著項(xiàng)目的推廣而更新。之后，提供一系列基于云端的軟件列表(提供鏈接、登錄信息等)，將素材提交到云端，并且包含相應(yīng)的字體包、Logo、圖片素材。這些文件和材料應(yīng)合理組織整理，其他成員可以根據(jù)組織邏輯找到相應(yīng)的文件、工具或材料。(本地、云、備份要組織好)在開發(fā)風(fēng)格和特定功能時(shí)，應(yīng)創(chuàng)建代碼片段列表，以確保前端人員能夠快速呼叫，特別是那些常見的部分，應(yīng)該在易于訪問的共享位置，以方便每個(gè)人訪問和呼叫。后一點(diǎn)，一定要記得更新。當(dāng)確定要更改文檔和材料時(shí)，確保當(dāng)?shù)睾驮频奈臋n和材料完整和即時(shí)更新。實(shí)施風(fēng)格指南 來源：jquery后來的問題終于來了。那么如何讓人們遵循風(fēng)格指南中的規(guī)則呢？假如你的風(fēng)格指南設(shè)計(jì)得足夠有條理，概念清晰，要求清晰，那么這種風(fēng)格至少在規(guī)則上有堅(jiān)實(shí)的基礎(chǔ)。簡單直白的語言可以讓讀者更容易理解和關(guān)注。只有像設(shè)計(jì)網(wǎng)站一樣仔細(xì)對待你的風(fēng)格指南，它才能有可用性和易用性。這樣，用戶就會(huì)無意識(shí)地遵循你的規(guī)則。作為一個(gè)網(wǎng)站的風(fēng)格指南，它本身并不是靜態(tài)的。為團(tuán)隊(duì)其他成員完善和添加內(nèi)容留出足夠的空間，以確保其靈活性。同樣了，風(fēng)格指南還應(yīng)當(dāng)有一個(gè)“管理員”，管理員用來批準(zhǔn)修改、掌控修改，統(tǒng)籌整個(gè)體系。