每個(gè)網(wǎng)站都具有自己的風(fēng)格規(guī)范，這并不困難，但如果在整個(gè)項(xiàng)目中或讓每一個(gè)都使用同一種風(fēng)格規(guī)范，這就難能可貴了。

現(xiàn)在，我們討論一下，到底應(yīng)該如何做來確保人們遵循網(wǎng)站的規(guī)范，使網(wǎng)站在視覺上存保持一致性？這有那么一些復(fù)雜，讓我們進(jìn)入今天話題。

1、品牌概述

如果你從來沒有從頭創(chuàng)建過一個(gè)設(shè)計(jì)模板會(huì)有點(diǎn)困難，對(duì)于初來乍道的來說，可以在MailChimp中找到他們喜歡的風(fēng)格，MailChimp可以更根據(jù)你選擇的最喜歡的并獲得通用安裝證書許可，然后以此作為一個(gè)模型開始這個(gè)風(fēng)格規(guī)范的規(guī)劃。

大多數(shù)設(shè)計(jì)模板有兩個(gè)部分：

文字標(biāo)準(zhǔn)

視覺標(biāo)準(zhǔn)

這兩個(gè)標(biāo)準(zhǔn)，是同等重要的，都是整體風(fēng)格規(guī)范的一部分。把元素結(jié)合在一起將建立一個(gè)整體形象。每一個(gè)品牌或企業(yè)網(wǎng)站都有自己與眾不同的地方。選擇一個(gè)色調(diào)和風(fēng)格，同步運(yùn)用在字體和視覺畫面的效果上，把你的網(wǎng)站和用戶融為一體。

建立網(wǎng)站整理形象的時(shí)候，也正是品牌需求考慮到用戶和相關(guān)利益的人對(duì)此有何種期望的時(shí)候。是否被期待？是否有關(guān)聯(lián)，是否愿意在這樣的網(wǎng)站上進(jìn)行瀏覽使用等交互行為？

2、語言風(fēng)格

雖然我們將主要精力集中于網(wǎng)站風(fēng)格規(guī)范的視覺方面，但語言風(fēng)格是非常重要的，是整體網(wǎng)站的一部分，也是你與用戶“交談”的方式。語言風(fēng)格是正式還是輕松的？是冗長或更簡潔的？

用同樣的方式為網(wǎng)站格式寫你的風(fēng)格規(guī)范。這將有助于提示你的團(tuán)隊(duì)知道網(wǎng)站的初步設(shè)想，以及如何運(yùn)用語言風(fēng)格去協(xié)助于品牌標(biāo)識(shí)。

語言風(fēng)格是與每一位用戶溝通使用的。返回到MailChimp，我們通過他的品牌語言風(fēng)格的塑造上全面審視。注意到公司談?wù)摷八募槲?，舉個(gè)例子：“Freddie是我們的吉祥物。我們不需要使用他與我們的logo組合。Freddie的臉右側(cè)面的，他的表情一直是眨著眼睛的?！?

3、“準(zhǔn)則”及用途

你的風(fēng)格規(guī)范應(yīng)該是你設(shè)計(jì)的“劇本”。（可能是比“規(guī)范”聽起來更通俗易懂？）

它應(yīng)該概括了如何以及何時(shí)使用的字體、顏色和所有其他設(shè)計(jì)元素類型，讓人更容易理解。包括：

• 調(diào)色板，包括標(biāo)準(zhǔn)色和可適用的色彩

  
  

• 排版，可適用的字體、字號(hào)、縮進(jìn)、行間距跳轉(zhuǎn)

  
  

• LOGO，包括尺寸和位置

  
  

• 圖標(biāo)或元素樣式（包括分享按鈕等）

  
  

• 拼寫，選項(xiàng)和格式風(fēng)格（應(yīng)該遵循哪種編輯格式？ APA格式？AP格式？或其他？）

  
  

• 照片格式，包括顏色、裁剪尺寸和視覺效果

  
  

• SEO信息，如ALT標(biāo)簽和關(guān)鍵詞

  
  

• 電網(wǎng)標(biāo)準(zhǔn)（適用于網(wǎng)絡(luò)或打?。?

  
  

• 間距方面的考慮（是否設(shè)計(jì)的太松或太緊）

  
  

• 反饋接觸信息（可以向團(tuán)隊(duì)成員提問或建議的）

4、簡單而具體的概念

這可能是最困難的部分，你需要明白這些信息，并將其爛熟于心，理解成簡單、具體、可操作性強(qiáng)的概念：

當(dāng)涉及到風(fēng)格規(guī)范不能走極端，只是一個(gè)視覺參考，而通過這種方式去設(shè)計(jì)。

組合相關(guān)內(nèi)容，并快速相關(guān)聯(lián)，比如頁面的顏色、已經(jīng)跳轉(zhuǎn)進(jìn)入另一頁的圖形和照片等。

為可以顯示的內(nèi)容舉一些相似的例子，不需要解釋的部分用占位符。

盡可能地提供細(xì)節(jié)，色彩樣式，例如，包括RGB（或HEX ）和CMYK值等，使顏色可以規(guī)范使用。

打破部分常用的元素案例去設(shè)計(jì)。

5、片段和實(shí)例

無論你的設(shè)計(jì)風(fēng)格規(guī)范是用于印刷還是數(shù)字使用或基于Web的文檔，應(yīng)該包含有用的工具。部分有用的元素品牌案例做得到也可能做不到，但他可以很容易把重點(diǎn)放在你想看到的品牌視覺上。

然后，創(chuàng)建一個(gè)易操作的目錄。創(chuàng)建原型組（或一組常見的元素，這取決于你使用的軟件） 。保存在一個(gè)常用的位置，使其容易操作并且生成容易修改的文件。

為參與該項(xiàng)目的每個(gè)人提供基于云端軟件的工具列表。（這包括鏈接、用戶名等基本信息。）確保所有字體包、logo和圖像文件是在一個(gè)常用的位置，所有的使用者都知道他們?cè)谀睦铩?（在另一個(gè)地方保留備份，以防原文件、作品丟失。）

創(chuàng)建代碼片段，易于復(fù)制并粘貼到項(xiàng)目主列表。這樣不用每次重建，常見的元素需要被分享在一個(gè)每個(gè)人都可以訪問的共享位置。

最后一步是進(jìn)化優(yōu)化。每件事情都可能會(huì)變，而且必然要經(jīng)歷蛻變。

6、執(zhí)行風(fēng)格規(guī)范

最后，最大的問題是“如何讓人們遵循風(fēng)格規(guī)范呢？”按照以上這些列出的內(nèi)容，你已經(jīng)有一個(gè)很好的方式擁有了設(shè)計(jì)的輪廓，具有了簡單、具體的概念。

風(fēng)格規(guī)范是很容易被追隨的，就像你寫的網(wǎng)站一樣。語言是簡單的和不生僻的，可以讓人們?nèi)プ冯S這些準(zhǔn)則。

風(fēng)格規(guī)范應(yīng)該留下足夠的設(shè)計(jì)空間對(duì)于其靈活性和實(shí)際制作上。就像你的品牌，在一定范圍內(nèi)，可以幫助團(tuán)隊(duì)成員發(fā)揮他們?cè)O(shè)計(jì)的創(chuàng)造力，也同時(shí)創(chuàng)造新的東西。風(fēng)格規(guī)范的所有者也是如此，這是指批準(zhǔn)、更新和變化設(shè)計(jì)風(fēng)格規(guī)范的人，并能回答有關(guān)設(shè)計(jì)決策問題的所有人。這個(gè)“所有者”可以是個(gè)人團(tuán)隊(duì)，或者更大組織的規(guī)模。

結(jié)論

你是不是已經(jīng)有一個(gè)風(fēng)格規(guī)范，或者正在準(zhǔn)備一個(gè)新的？這是每年都會(huì)面對(duì)和處理的任務(wù)，這份指南將始終不會(huì)過時(shí)。去設(shè)計(jì)自己的網(wǎng)站風(fēng)格規(guī)范吧！

http://m.ezekroy.com/wangzhansheji/3248.html 一般網(wǎng)站設(shè)計(jì)的風(fēng)格規(guī)范有哪些內(nèi)容？