在進(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è)簡(jiǎn)單的自我介紹吧：

狹義的 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ù)示。

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ì)秉承了一貫的簡(jiǎn)潔風(fēng)格，使用簡(jiǎn)單的一小段下劃線，卻傳達(dá)出了豐富的信息。

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ū)

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ì)其使用便能更加自如了。

以上內(nèi)容均為個(gè)人觀點(diǎn)與總結(jié)，有疑問歡迎共同討論和交流，若有不足之處還請(qǐng)不吝賜教。

• (本文出自Tencent CDC Blog，轉(zhuǎn)載時(shí)請(qǐng)注明出處)