創(chuàng)建層疊化的風(fēng)格指南

　　回想一下CSS的工作方式。如果你在樣式表比較靠前的位置定義了某種全局元素的默認(rèn)樣式屬性，那么這些設(shè)定就會(huì)被與之相關(guān)的子級(jí)元素所繼承，直到你為某些特定的元素添加了更加具體的樣式屬性。同樣的道理，在風(fēng)格指南中，我們會(huì)從最普通的、最具普遍代表性的元素出發(fā)，逐漸為細(xì)節(jié)元素增加具體的規(guī)則。

　　道理說了不少，接下來，我們將了解一下創(chuàng)建風(fēng)格指南的基本步驟與流程。

　　1.概述

　　對(duì)項(xiàng)目的簡(jiǎn)單陳述，包括項(xiàng)目目標(biāo)及解決方案的介紹。在這部分內(nèi)容中，你有機(jī)會(huì)就一些大方向問題與其他成員進(jìn)行溝通，讓他們了解整個(gè)項(xiàng)目的重心及著眼點(diǎn)在哪里。同時(shí)你還可以對(duì)網(wǎng)站所需要具有的風(fēng)格氣質(zhì)、基調(diào)、內(nèi)容策略進(jìn)行簡(jiǎn)要的描述。

　　2.布局

　　頁面設(shè)計(jì)所使用的網(wǎng)格系統(tǒng)、基本的布局情況、頁面模塊的定位規(guī)則等。你要對(duì)一些全局性的頁面元素的定位進(jìn)行描述，還有相關(guān)的留白規(guī)則等。一些典型頁面的線框原型也要作為圖例出現(xiàn)在這部分內(nèi)容中。

　　3.品牌識(shí)別

　　包括配色方案、全局性的品牌圖片、品牌圖片的使用規(guī)則及約束等內(nèi)容。

　　4.文字排印

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

　　5.導(dǎo)航

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

　　6.HTML元素

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

　　7.媒體文件

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

　　8.其他資源

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

　　9.界面協(xié)調(diào)性畫布

　　將以上這些內(nèi)容匯總到一張大畫布中。所謂畫布，可以是圖片格式，當(dāng)然最好是HTML頁面的形式，因?yàn)檫@樣可以更加靈活的承載文案和HTML或CSS代碼方面的內(nèi)容，使前端開發(fā)人員可以直接根據(jù)頁面元素的設(shè)計(jì)規(guī)則來使用對(duì)應(yīng)的代碼片段。另外，將所有涉及到視覺風(fēng)格的內(nèi)容都放在同一張畫布中，也可以使設(shè)計(jì)師能夠很容易的對(duì)頁面元素在整體上的協(xié)調(diào)性進(jìn)行讓項(xiàng)目leader或是產(chǎn)品經(jīng)理來做這件事也好。總之，我們要通過風(fēng)格指南來實(shí)現(xiàn)的目標(biāo)是團(tuán)隊(duì)協(xié)作，讓大家一起付出努力來完成項(xiàng)目。

　　將風(fēng)格指南交付給團(tuán)隊(duì)成員之后，記得時(shí)常在項(xiàng)目的重要環(huán)節(jié)中談起這份指南的重要性，使它逐漸成為工作流程甚至是產(chǎn)品文化的一部分。

　　我得承認(rèn)一點(diǎn)，有時(shí)候我確實(shí)覺得風(fēng)格指南這東西有點(diǎn)乏味，沒關(guān)系，至少我們不能以此作為借口而不去創(chuàng)建它。請(qǐng)相信一點(diǎn)，風(fēng)格指南對(duì)于設(shè)計(jì)流程以致整個(gè)項(xiàng)目的成功會(huì)起到關(guān)鍵性的作用。

　　本站原創(chuàng)編譯文章。如需轉(zhuǎn)載，請(qǐng)注明：本文來自Be For Web

　　英文原文:

　　http://www.netmagazine.com/features/create-website…

　　譯者信息: c7210 - 用戶體驗(yàn)設(shè)計(jì)與代碼玩家，現(xiàn)就職于大眾點(diǎn)評(píng)網(wǎng)產(chǎn)品部UED