迷你屋商城項(xiàng)目在視覺(jué)設(shè)計(jì)的過(guò)程中建立了一套相對(duì)簡(jiǎn)單合理的視覺(jué)規(guī)范，這里介紹一下規(guī)范的內(nèi)容以及制定規(guī)范的思路。建議您在閱讀此文之前先對(duì)《迷你屋視覺(jué)規(guī)范》有個(gè)大概的了解。或者對(duì)應(yīng)著規(guī)范閱讀本文。
制定視覺(jué)規(guī)范的基本思路：在整體設(shè)計(jì)的基礎(chǔ)上，規(guī)范出具體視覺(jué)元素的表現(xiàn)形式，在更多的頁(yè)面設(shè)計(jì)中，應(yīng)用規(guī)范，而不是每個(gè)新頁(yè)面的設(shè)計(jì)都重新創(chuàng)作。通過(guò)對(duì)頁(yè)面元素表現(xiàn)形式的定義，讓整個(gè)網(wǎng)站視覺(jué)表現(xiàn)更具一致性，視覺(jué)識(shí)別更容易，從而提高用戶(hù)的使用效率。
“所謂設(shè)計(jì)，指的是把一種計(jì)劃、規(guī)劃、設(shè)想、問(wèn)題解決的方法，通過(guò)視覺(jué)的方式傳到出來(lái)的活動(dòng)過(guò)程�！薄妒澜绗F(xiàn)代設(shè)計(jì)史》 王受之
設(shè)計(jì)是一個(gè)有意識(shí)的計(jì)劃、規(guī)劃信息的活動(dòng)。從這個(gè)角度來(lái)說(shuō)，制定并執(zhí)行規(guī)范過(guò)程本身就是設(shè)計(jì)。
迷你屋商城視覺(jué)規(guī)范在之前大量的視覺(jué)設(shè)計(jì)基礎(chǔ)上加以整理、提煉出6類(lèi)，共13項(xiàng)基本界面元素。商城中的所有頁(yè)面都嚴(yán)格的依據(jù)視覺(jué)規(guī)范進(jìn)行設(shè)計(jì)。下面簡(jiǎn)要介紹一下迷你屋商城視覺(jué)規(guī)范的具體內(nèi)容：
文字顏色
文字顏色定義了三種，分別是：突出色，正文顏色和輔助色。
突出色是頁(yè)面上的最搶眼的顏色；正文顏色，無(wú)需多解釋?zhuān)蛔⑨尅⒄f(shuō)明之類(lèi)不需要太讓用戶(hù)留意的文字使用輔助色。
一個(gè)網(wǎng)站的文字顏色總體上可以按上面這三種劃分，當(dāng)然不一定只有三個(gè)文字顏色。單純的來(lái)看文字顏色，并沒(méi)有太多的問(wèn)題。但文字顏色與鏈接樣式；文字顏色與頁(yè)面背景顏色這兩個(gè)問(wèn)題就比較復(fù)雜了。這些問(wèn)題將在下面分別討論。
鏈接
鏈接最傳統(tǒng)的表現(xiàn)手段是：藍(lán)色+下劃線(xiàn)。但是由于這兩個(gè)表現(xiàn)手段明顯的缺陷，多數(shù)時(shí)候難于應(yīng)用。
從上面這個(gè)最傳統(tǒng)的表現(xiàn)還可以演化出很多種鏈接的表現(xiàn)手段：
1. 鏈接文字只用藍(lán)色。鏈接文字默認(rèn)狀態(tài)時(shí)，只顯示為藍(lán)色，鼠標(biāo)經(jīng)過(guò)時(shí)再出現(xiàn)下劃線(xiàn)或者反色。Yahoo.com flickr都使用的是這樣的方式。這種表現(xiàn)的缺陷：網(wǎng)頁(yè)上多數(shù)文字是有鏈接的，于是頁(yè)面上多數(shù)文字都是藍(lán)色的了，視覺(jué)表現(xiàn)可發(fā)揮的空間比較小。
2. 鏈接文字只加下劃線(xiàn)。有下劃線(xiàn)的文字是可以點(diǎn)擊的，這是足夠清楚的表現(xiàn)了。這種表現(xiàn)的缺陷：很多鏈接的時(shí)候，就會(huì)是滿(mǎn)頁(yè)都是下劃線(xiàn)了。同樣是讓視覺(jué)表現(xiàn)比較痛苦。
3. 列表文字默認(rèn)不加下劃線(xiàn)；分散出現(xiàn)的鏈接有下劃線(xiàn)。Qzone就是應(yīng)用的這種。缺陷：在一個(gè)頁(yè)面中同時(shí)出現(xiàn)這兩種情況，和列表中的鏈接相比，分散出現(xiàn)的鏈接加了下劃線(xiàn)，顯得更為強(qiáng)眼，更明確的傳達(dá)出“可點(diǎn)擊”的信息。而分散的鏈接并不總是要強(qiáng)調(diào)的。所以需要再用其他方式補(bǔ)救，必要的時(shí)候讓列表突出。Gmail中有比較不錯(cuò)的方式。
鏈接的表現(xiàn)方式也許還有更多，但無(wú)論是什么樣的表現(xiàn)，都需要確保一個(gè)基本原則：操作前操作可識(shí)別，即，直接瀏覽頁(yè)面就可以知道哪些文字是可以點(diǎn)擊的。
迷你屋商城頁(yè)面中主要是圖片的展示，文字相對(duì)較少，很少在一頁(yè)中大量出現(xiàn)鏈接，因此采用了第二種方式：鏈接文字只加下劃線(xiàn)。
第二種表現(xiàn)方式鏈接的表現(xiàn)并不涉及顏色，任何顏色的文字都可以加鏈接。之前我們也規(guī)定好了不同類(lèi)型的文字使用的顏色。這樣的組合規(guī)范自由度較大。文字的顏色取決于它的重要程度。非常重要的用紫紅色，非常次要的用灰色(輔助色)。有鏈接則加下劃線(xiàn)。不存在“鏈接文字需要強(qiáng)調(diào)，但又不得不用鏈接文字的固定顏色”的問(wèn)題。
背景色
背景色也是一個(gè)應(yīng)該與文字顏色一起考慮的元素。迷你屋商城視覺(jué)規(guī)范中定義的背景色，除了白色背景，另外主要還有兩種：輔助的淺灰色和主色彩-橙色。
淺灰色是用于區(qū)隔內(nèi)容，內(nèi)容表達(dá)上并不總是能用邊線(xiàn)來(lái)區(qū)隔的，那么可以使用這個(gè)淺灰色作為背景加以區(qū)隔。
主色彩是一個(gè)網(wǎng)站的主體風(fēng)格。用于類(lèi)似導(dǎo)航等位置的背景。這里需要強(qiáng)調(diào)的是：主色彩只能用于背景而不能用于文字，而文字突出色只能用于文字而不能用于背景。這是因?yàn)�，主色彩背景上�?huì)顯示各種樣式的文字，以amazon為例：
主色調(diào)的背景下會(huì)出現(xiàn)各種文字，強(qiáng)調(diào)色的文字、正文文字、鏈接，甚至是輔助文字。因此需要背景色能適應(yīng)上面所說(shuō)的種種文字。
主色彩上的文字有可能會(huì)出現(xiàn)強(qiáng)調(diào)色文字，所以，主色彩和強(qiáng)調(diào)色文字不能是同一個(gè)顏色。主色彩上會(huì)顯示鏈接，如果鏈接選用了藍(lán)色文字顏色的方案，主色彩最好不選用藍(lán)色，在藍(lán)色背景下顯示藍(lán)色的鏈接，效果不好，如上圖。
迷你屋選用了橙色。選用橙色是出于產(chǎn)品內(nèi)涵的考慮，因?yàn)槊阅阄菔且粋�(gè)結(jié)合Qzone與QQ秀的產(chǎn)品，在黃與紅之前。但是，作為主色彩，橙色并不是最好的選擇，橙色比較搶眼、亮，頁(yè)面上需要突出的是強(qiáng)調(diào)色的文字和突出的按鈕，而不是主色彩。主色彩并不宜過(guò)亮。在橙色的基礎(chǔ)上再選擇更亮的顏色作為突出的文字顏色，我們選擇了紫紅。
按鈕
共定義了大、中、小三種樣式：
這三種樣式的按鈕，尺寸大小不做嚴(yán)格限制，可以根據(jù)頁(yè)面上的具體情況適當(dāng)縮放，但保證在同一頁(yè)面中，第一種按鈕的尺寸不小于第二種；第二種不小于第三種。
有了尺寸上的自由度，實(shí)際上，只需要兩種按鈕樣式就夠了。一種紫紅色的，一種灰色的。為了給視覺(jué)表現(xiàn)上留出更大的發(fā)揮空間，我們將紫紅色的“強(qiáng)調(diào)按鈕”又細(xì)分成了兩種：圓角的和方角的。這樣設(shè)計(jì)使得頁(yè)面表現(xiàn)更為靈活，同時(shí)確保頁(yè)面上按鈕主次清晰。
由于突出的文字顏色選定了紫紅，因此在按鈕設(shè)計(jì)中，前兩種表示強(qiáng)調(diào)信息的按鈕同樣使用了紫紅色。這樣使得色彩的使用有了一致性，即，在一個(gè)頁(yè)面上：紫紅色的信息都是突出的。
單元框
單元框是指網(wǎng)頁(yè)上為了區(qū)分一個(gè)個(gè)基本的內(nèi)容而設(shè)計(jì)的表現(xiàn)形式。一個(gè)網(wǎng)站這樣的單元框可以不止一種表現(xiàn)形式.迷你屋商城的單元框設(shè)計(jì)從簡(jiǎn)，只設(shè)計(jì)了兩種：有標(biāo)題欄的和沒(méi)有標(biāo)題欄的。
Tabs頁(yè)簽
對(duì)于tabs頁(yè)簽的設(shè)計(jì)，只強(qiáng)調(diào)一點(diǎn)：tabs有三種狀態(tài)-當(dāng)前態(tài)，非當(dāng)前態(tài)和鼠標(biāo)經(jīng)過(guò)狀態(tài)。不規(guī)范的設(shè)計(jì)中，往往會(huì)用當(dāng)前態(tài)代替鼠標(biāo)經(jīng)過(guò)態(tài)，這樣設(shè)計(jì)是存在缺陷的，當(dāng)沒(méi)留意當(dāng)前光標(biāo)位置時(shí)，會(huì)誤以為有兩個(gè)當(dāng)前欄目。
迷你屋商城的設(shè)計(jì)是第一次比較系統(tǒng)的制定并執(zhí)行規(guī)范的項(xiàng)目。規(guī)范本身還很簡(jiǎn)單，缺少很多細(xì)節(jié)。對(duì)于一個(gè)長(zhǎng)期運(yùn)營(yíng)的產(chǎn)品，類(lèi)似的規(guī)范需要在之后的長(zhǎng)期維護(hù)過(guò)程中，不斷添加、修改，逐步細(xì)化。但是，規(guī)范的不斷優(yōu)化并不意味著無(wú)休止的添加新內(nèi)容。視覺(jué)規(guī)范也不應(yīng)是在完成所有設(shè)計(jì)稿的基礎(chǔ)上整理視覺(jué)元素的表現(xiàn)方式，而是有意識(shí)的在設(shè)計(jì)的早期固定下視覺(jué)表現(xiàn)。原則上，規(guī)范條目應(yīng)越少越好，更少的表現(xiàn)形式用戶(hù)的學(xué)習(xí)成本才能更低，使用效率才能更高。如果一個(gè)網(wǎng)站的視覺(jué)規(guī)范中規(guī)定了10種按鈕的樣式，那基本上就等于沒(méi)有規(guī)范了。
迷你屋商城在制定視覺(jué)規(guī)范之前就已經(jīng)有兩位視覺(jué)設(shè)計(jì)師參與，歷時(shí)一、兩個(gè)月，在比較充分的視覺(jué)設(shè)計(jì)基礎(chǔ)上，以交互設(shè)計(jì)師為主導(dǎo)，提煉出視覺(jué)設(shè)計(jì)元素，形成了規(guī)范。在通常的視覺(jué)設(shè)計(jì)規(guī)范的制定過(guò)程中，視覺(jué)設(shè)計(jì)師往往是主導(dǎo)力量。交互設(shè)計(jì)師與產(chǎn)品經(jīng)理需要更多的考慮需要規(guī)范哪些元素，視覺(jué)設(shè)計(jì)師決定每個(gè)元素的表現(xiàn)是什么樣子。具體的執(zhí)行可以參見(jiàn)迷你屋商城。
粵公網(wǎng)安備 44010402000282號(hào)