網站風格指南(style guide)

風格指南源自于印刷領域；在Web領域，它同樣體現出了巨大的價值。

好的風格指南看上去就像是網站的自傳，它能夠讓其他人與之進行互動，從而進一步了解并擴展這個網站。風格指南應該包含相關人員在網站項目過程中所積累的知識與經驗，并以直白的方式描述出來；它在設計系統的層面上詮釋了項目過程中的各種設計思路，使團隊中的其他設計師，或是將來的團隊，能夠更好的了解項目，展開工作。

界面當中的所有元素都應當具有的普遍特質，作為設計體系的一部分，它們都應該體現出一致的設計思想。當人們使用不同類型的設備訪問你的站點時，保持視覺風格及體驗的一致也是很重要的。

1.概述

對項目的簡單陳述，包括項目目標及解決方案的介紹。在這部分內容中，你有機會就一些大方向問題與其他成員進行溝通，讓他們了解整個項目的重心及著眼點在哪里。同時你還可以對網站所需要具有的風格氣質、基調、內容策略進行簡要的描述。

2.布局

頁面設計所使用的網格系統、基本的布局情況、頁面模塊的定位規則等。你要對一些全局性的頁面元素的定位進行描述，還有相關的留白規則等。一些典型頁面的線框原型也要作為圖例出現在這部分內容中。

3.品牌識別

包括配色方案、全局性的品牌圖片、品牌圖片的使用規則及約束等內容。

4.文字排印

介紹網站所使用的文字排印方案，包括字體風格、選取這些字體的理由等。這里還要通過一些具有代表性的具體圖示來介紹字體風格與頁面上下文環境之間的關系。

5.導航

全局主導航、二級導航、下拉菜單、分類詞條的文字鏈接、搜索…任何能夠幫助用戶在站點中進行導航操作的元素都可以歸納到這部分內容中。從這里開始，我們就要逐漸進入細節層面了。導航元素在不同狀態下的鏈接色、背景色等屬性的定義也要在這里詳細的描述出來，使開發人員能夠一目了然。

6.HTML元素

一些典型元素的HTML標簽使用規則，包括標題元素(h1,h2,h3…)、有序列表、無序列表、按鈕、表單、字段集(fieldset)、表格等。這份規則清單不需要事無巨細，但要盡量使其具有較高的綜合性和代表性；必要的時候可以與前端開發人員配合完成這部份內容。

7.媒體文件

包括圖片、音頻或視頻文件的使用情景、尺寸限制、顯示比例、緩存設置等方面的規則。

8.其他資源

這部分內容所涉及到的對象基本都屬于細節層面了，那些無法歸入以上七個類別的、定制化程度比較高的設計元素都可以放在這里。例如，在某些特定的情況下不同模塊的呈現方式應該發生怎樣的變化，側邊欄的廣告規則，搜索出錯的處理方式，評論列表的呈現規則，照片集的瀏覽方式等等。通常，在這一部分內容中，我們可以摸索并歸納出一些復用性較高的設計模式。

9.界面協調性畫布

將以上這些內容匯總到一張大畫布中。所謂畫布，可以是圖片格式，當然最好是HTML頁面的形式，因為這樣可以更加靈活的承載文案和HTML或CSS代碼方面的內容，使前端開發人員可以直接根據頁面元素的設計規則來使用對應的代碼片段。另外，將所有涉及到視覺風格的內容都放在同一張畫布中，也可以使設計師能夠很容易的對頁面元素在整體上的協調性進行檢視。

10.UX文檔

這部分內容的命題確實不小，其中需要包括項目進行到目前為止所產出的交付物，例如站點地圖、線框原型、高保真原型、用研文檔等。這些產品早期的交付物可以在接下來的設計與開發流程中對功能、視覺、交互方式的定義起到重要作用。

使用風格指南

創建風格指南只是第一步，使它在實際工作中發揮價值才是最重要的。將指南附在項目管理工具中，或是郵件給項目組相關的人員；如果你不確定哪些人是真正“相關”的，那么讓項目leader或是產品經理來做這件事也好?？傊?，我們要通過風格指南來實現的目標是團隊協作，讓大家一起付出努力來完成項目。

上一篇：如何評判一個網站的質量

下一篇：CSS3離我們還有多遠

返回：BLOG首頁