今時今日，網站的創建正變得越來越複雜，而且一般都(dōu)不是一個人就能(néng)幹得了的。在創建網站過(guò)程中，我們需要保證設計前後(hòu)一緻，并符合業務目标，同時還(hái)要盡全力爲用戶打造有趣

的使用體驗。

爲了确保整個團隊在設計網站各個組成(chéng)部分或在改善開(kāi)發(fā)人員設計成(chéng)果時彼此之間能(néng)夠充分協調一緻，你需要編寫一份設計文檔或web設計風格指南作爲指導。

風格指南能(néng)夠保證不同的頁面(miàn)共同擁有一套核心的體驗效果。另外，其還(hái)有助于保證未來的開(kāi)發(fā)或第三方創作工作不偏離最初的品牌路線，能(néng)夠與整體品牌保持一緻。

Luke Clum曾在去年簡略地介紹過(guò) 如何編寫風格指南并將(jiāng)其作爲web設計的第一步驟：，那麼(me)現在我想更加深入地探讨一下如何針對(duì)你的項目編寫一份有效的Web設計風格指南。

風格指南是指一套相關預設計元素、圖形和規範的集合，其用途是保證負責網站不同部分工作的設計師或開(kāi)發(fā)人員之間保持協調一緻，并最終打造出核心化的體驗。

當多名設計師共同緻力于同一大型網站或web應用的工作時，務必要保證他們不會過(guò)多根據個人的喜好(hǎo)對(duì)工作内容進(jìn)行闡述或改變、調整風格樣(yàng)式。在開(kāi)發(fā)階段，預先設定好(hǎo)的網站元

素可以讓開(kāi)發(fā)人員拿來直接并反複使用。另外，這(zhè)樣(yàng)還(hái)可以減輕工作量，因爲他們能(néng)事(shì)前看到需要編寫代碼的元素，心裡(lǐ)對(duì)最終成(chéng)果的樣(yàng)子有一定的預期。

爲了讓開(kāi)發(fā)人員的工作更輕松，設計師應該負責設計所有可能(néng)要用到的交互内容，例如鼠标懸浮、單擊、訪問及其他按鈕、标題和鏈接等的狀态。

編寫web設計風格指南

1. 研究品牌

首先，你需要對(duì)品牌展開(kāi)研究，理解其含義，了解品牌背後(hòu)的意義，與公司團隊進(jìn)行溝通，并了解公司的願景、使命和價值觀。爲了保證你所編寫的風格指南能(néng)夠在視覺和情感上正确

彰顯出公司形象，一定要深入挖掘品牌。

作爲一名設計師，如果你不會寫代碼，那麼(me)可以打開(kāi)Photoshop，給文檔拟定一個标題，并對(duì)文檔的性質和用途進(jìn)行一下簡短的說明。

如果你會寫代碼，那麼(me)最好(hǎo)使用預編程的資源創建一個html文檔，以便在後(hòu)期直接使用。

2. 限定字體

根據 Oliver Reichenstein 的理論，web設計中95%的工作量都(dōu)集中在字體上。

字體的重要意義在于其是訪客和網站之間最爲關鍵的溝通工具之一。

确定層級次序并提供對(duì)應的說明。首先是标題樣(yàng)式：h1、h2、h3、h4、h5和h6。然後(hòu)是正文文案：粗體和斜體等變化。考慮一下需要用于小型鏈接、簡介文字等内容的自定義文案。提

供字體系列、粗細和顔色等。

3. 調色闆

人類能(néng)夠感知不同的顔色并將(jiāng)色調與自己所熟知的品牌相互聯系起(qǐ)來，神奇吧！舉例來說，一提到可口可樂，你一定會首先想到紅色。

首先在風格指南中設定網站内使用最多的主色調，主色應該包含不多于三種(zhǒng)陰影。但是在有的情況下，你可能(néng)還(hái)需要使用二級甚至三級顔色來呈現用戶界面(miàn)，因此不要忘了對(duì)這(zhè)些顔色

進(jìn)行設定。另外還(hái)需要加入白色、灰色和黑色等中性顔色以便讓主品牌顔色更加突出。

4. 語言

這(zhè)裡(lǐ)所說的語言實際上就是指文案。如前所述，在開(kāi)始編寫風格指南之前你已經(jīng)對(duì)品牌進(jìn)行了研究，而且發(fā)現目标品牌的風格是年輕、潮流。那麼(me)如果沒(méi)有現成(chéng)的文案語言方向(xiàng)，你就

需要進(jìn)行設定。在這(zhè)方面(miàn)，你可以提供一個示例來表現語言必須既專業又有趣，同時還(hái)要熱情。例如，你可以說“貌似你碰到了網上廣爲流傳的404錯誤”來取代死氣沉沉的“出現404

錯誤”。這(zhè)樣(yàng)的語言能(néng)表現出網站并不具有太強的商業氣息。有時候亮點就隐藏于細微之處。

5. 圖标

圖形标記已有幾千年的曆史，在文字和語言出現之前就已經(jīng)存在。在項目中善用圖标能(néng)夠讓訪客一眼就明白當前的情況以及下面(miàn)將(jiāng)要出現什麼(me)情況。另外，恰當的圖标相比色調、文案

和圖形更能(néng)夠體現出目标内容的背景。在使用圖标時，要想想目标受衆是誰，他們的宗教和背景情況如何，切勿造成(chéng)他們的誤解。還(hái)要說的是，仔細思考品牌及其所代表的價值，千萬

别犯在大型銀行網站上使用手繪風格圖标這(zhè)種(zhǒng)錯誤。
 
6. 圖片

圖片比千言萬語更有說服力。你所使用的圖片一定要能(néng)夠代表網站的風格和方向(xiàng)。再強調一遍，一定要仔細考慮品牌的價值和公司的使命。例如，某個有關水源慈善的網站使用極具沖

擊力且情感強烈的慈善類圖片呼籲人們思考擁有水、食物、電力和教育等生活必需品是多麼(me)幸運。
 
7. 表單

表單是網站或web應用表現其交互和動态性，并讓用戶能(néng)夠輸入數據以便你後(hòu)期處理并開(kāi)展相關工作的關鍵所在。

務必要構建起(qǐ)一套層級體系并收納一切可能(néng)來自表單的反饋——主動反饋、鼠标懸浮反饋并加入錯誤、警告和成(chéng)功提示（包括密碼強度太弱、郵件地址無效或簡單的“郵件已發(fā)送”消

息）。

8. 按鈕

按鈕是顔色、表單和語言的組合。你可以依靠上面(miàn)介紹的且已經(jīng)創建好(hǎo)的資源，使用不同的設計方案打造外觀統一的功能(néng)性按鈕。

9. 空間調整

空間調整爲什麼(me)也要收錄在風格指南裡(lǐ)？實際上空間調整是風格指南當中非常重要的一個部分。在對(duì)空間調整方式進(jìn)行界定時，可以采用規定網格布局的方式，也可以對(duì)标題、按鈕、

圖片、表單等元素之間的空間距離進(jìn)行分門别類的規定。

空間調整的重要意義在于其能(néng)夠給各個元素提供更多的表現空間，空間使用的協調一緻能(néng)夠讓網站看起(qǐ)來更加整齊、專業。

10. 注意事(shì)項

最後(hòu)要說的是：把注意事(shì)項這(zhè)一節做成(chéng)常見問題解答的形式，展現出最常見的錯誤類型，并給出預期結果作爲參考示例。