建站常識(shí)

Web 交互設(shè)計(jì)“灰色”的8類應(yīng)用

2009-12-29 17:24:00

　　在進(jìn)行Web的交互設(shè)計(jì)中，顏色信息的傳達(dá)也是不可或缺的一部分。我們常會(huì)發(fā)現(xiàn)許多“灰色”的應(yīng)用，他們的出現(xiàn)總是不動(dòng)聲色而又恰如其分，維持了整個(gè)頁面的平衡與統(tǒng)一。本文將從一些實(shí)際案例出發(fā)，闡述“灰色”在Web交互設(shè)計(jì)中的8類應(yīng)用。

　　首先讓Mr.Gray 來做個(gè)簡單的自我介紹吧：

　　狹義的 Mr.Gray

　　狹義的Mr.Gray, 是指沒有色相與純度，只有明度，將黑色和白色混和而成的一種中間色。依據(jù)不同分類方法可大體分為淺灰與深灰兩種，亦可分為暖灰與冷灰。

　　相對(duì)來說，其特征為視認(rèn)性不高，經(jīng)久耐看，不因過份的鮮明而刺眼，中立而溫和。

圖例暖灰與冷灰

　　廣義的 Mr.Gray

　　廣義的Mr.Gray是指一切具有中性、溫和、不鮮明的現(xiàn)象與事物。在下文中所指的Mr.Gray,均指的是廣義的Mr.Gray。

　　如果把所有的顏色混在一起，會(huì)是什么顏色？其實(shí)Mr.Gray 并不孤獨(dú)。

　　Mr.Gray是一位相當(dāng)有魅力的紳士。閱歷越深，就越能懂得他的價(jià)值。

　　Mr.Gray好比是形狀中的圓角，可以調(diào)和一些矛盾，使得它們不再尖銳。

　　下面讓我們來看看大家對(duì)Mr.Gray的印象吧：

　　Mr.Gray在Web 交互設(shè)計(jì)中的8類應(yīng)用

　　Mr.Gray謙和內(nèi)斂等特性決定了他在職業(yè)生涯中，大部分時(shí)間都在扮演輔助陪襯的角色。下文將以一些實(shí)際案例來進(jìn)行詳細(xì)說明。

　　1. 當(dāng)前場(chǎng)景下禁用或不可操作

　　這類設(shè)計(jì)處理的好處是避免用戶進(jìn)行無效的操作，提高用戶的使用效率，并且給予一定的信息暗示。下圖中是一些禁用、不可操作或者沒有權(quán)限的圖例：

　　2. 暗示一定秩序下，即將發(fā)生的步驟、事物

　　此類設(shè)計(jì)可以讓用戶對(duì)即將進(jìn)行的任務(wù)全局一目了然，較少而清晰的步驟不會(huì)給用戶帶來心理壓力，相反會(huì)促進(jìn)用戶完成該項(xiàng)任務(wù)。如下圖中的創(chuàng)建QQ群的步驟預(yù)示。

#p#

　　3. 弱提示，輔助信息（包括色彩信息）

　　這一類應(yīng)用較為廣泛，如大段輔助信息文字，一些提示信息，次要陪襯信息，不常用功能操作等，“灰色”處理會(huì)讓頁面和諧統(tǒng)一，并突出最主要的用戶體驗(yàn)操作。如下圖1中，瀏覽照片為最首要體驗(yàn)，上排對(duì)照片操作的工具欄則進(jìn)行了“灰色”處理，mouSEOver時(shí)再變亮和豐富。

　　再如一些登錄與搜索中的輔助說明與操作信息：

　　4. 表示未被激活的“隱藏”狀態(tài)

　　在Web設(shè)計(jì)當(dāng)中，常需要考慮當(dāng)前態(tài)、未被激活態(tài)等樣式。常見方式是灰色化處理未被激活態(tài)，在對(duì)比中使用鮮明的色彩告訴用戶當(dāng)前所處的位置或狀態(tài)。

　　下圖為igoogle聯(lián)系人當(dāng)前不在線時(shí)場(chǎng)景，使用了灰色icon來進(jìn)行區(qū)分，這類設(shè)計(jì)在即時(shí)通信產(chǎn)品中較為普遍。

　　5. 次要可鏈接信息

　　深色下劃線會(huì)給清爽的頁面帶來些許不和諧，“灰色”處理可以調(diào)和這種矛盾，既能準(zhǔn)確傳達(dá)所需表達(dá)的信息，又能使得頁面整體和諧統(tǒng)一。

　　Apple在此的Web設(shè)計(jì)秉承了一貫的簡潔風(fēng)格，使用簡單的一小段下劃線，卻傳達(dá)出了豐富的信息。

#p#

　　6. 不鼓勵(lì)用戶進(jìn)行的消極或危險(xiǎn)操作

　　下圖中Flickr的“封鎖”操作點(diǎn)擊后，會(huì)阻止該好友與你進(jìn)行一切信息交換與互動(dòng)，該操作的“灰色”處理恰好可以輔助表達(dá)出這層隱含的意思。

　　又如刪除整條標(biāo)簽的icon。

　　存儲(chǔ)與取消的操作，一個(gè)為亮色另一個(gè)進(jìn)行“灰色”處理，這類應(yīng)用在Web交互設(shè)計(jì)中應(yīng)用十分普遍。

　　這類應(yīng)用與禁用使用場(chǎng)景的一些區(qū)別，在于鼠標(biāo)mouseover時(shí)，會(huì)有響應(yīng)，如鼠標(biāo)變手型，對(duì)象變色等。

　　7. 信息分隔

　　常見的有下圖中的斑馬線，虛線，色塊等來區(qū)分不同信息區(qū)域。

　　斑馬線

　　虛線分隔

　　淺色塊區(qū)分標(biāo)題與內(nèi)容區(qū)

#p#

　　8. Mr.Gray的相對(duì)性

　　因?yàn)樯示哂忻黠@的相對(duì)性，而某些Web設(shè)計(jì)為保持整體風(fēng)格的一致，甚至?xí)⒅饕獙?dǎo)航“灰色”處理，然而，這些處理都是相對(duì)的，也同樣可以做到主次分明。如下圖中wordpress的主導(dǎo)航。雖然導(dǎo)航當(dāng)前態(tài)文字為灰色，但依靠淺色背景，相對(duì)而言還是更為突出的。只要把握住Mr.Gray的相對(duì)性，對(duì)其使用便能更加自如了。