必備技能！專業(yè)的網(wǎng)頁風(fēng)格指南應(yīng)該如何制作？

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

既然我們要設(shè)計(jì)風(fēng)格指南，那么它當(dāng)中應(yīng)當(dāng)包含哪些信息呢？又是如何確保別人能夠遵循它的標(biāo)準(zhǔn)，讓設(shè)計(jì)和體驗(yàn)保持一致呢？今天創(chuàng)新互聯(lián)就來聊聊這個(gè)話題。

品牌概述

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

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

·文案規(guī)范

·視覺指南

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

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

語氣與語調(diào)

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

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

規(guī)則和用途

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

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

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

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

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

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

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

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

·柵格標(biāo)準(zhǔn)（主要用作網(wǎng)頁排版和印刷）

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

·關(guān)鍵點(diǎn)的說明（團(tuán)隊(duì)成員可能會(huì)提出的問題或者有待澄清的點(diǎn)）

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

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

·在內(nèi)容表述上不要限制太多，這畢竟是風(fēng)格指南，重點(diǎn)是視覺上的引導(dǎo)，設(shè)計(jì)是核心；

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

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

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

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

示例和代碼片段

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

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

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

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

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

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

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

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

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

分享題目：必備技能！專業(yè)的網(wǎng)頁風(fēng)格指南應(yīng)該如何制作？
轉(zhuǎn)載來源：http://muchs.cn/news/173130.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供搜索引擎優(yōu)化、域名注冊(cè)、網(wǎng)站策劃、品牌網(wǎng)站建設(shè)、網(wǎng)站營(yíng)銷、網(wǎng)站制作

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)