最近有一部由多位外籍華人參演的片子要上映了，我很想去看，想為GDP做點(diǎn)貢獻(xiàn)，于是我想到了網(wǎng)上訂票。在杭城的同學(xué)知道，大部分影院都是歸口于時(shí)代院線，訂票也大抵上要通過該網(wǎng)站來完成。盡管我最后未能完成網(wǎng)上訂票的夙愿（按步驟走完，我才發(fā)現(xiàn)我必須擁有一張會(huì)員卡才能訂票，這又是另一個(gè)說來話長(zhǎng)的故事了），但是我至少發(fā)現(xiàn)了一個(gè)有趣的、值得我寫下點(diǎn)什么的地方。

于是我挑選了一個(gè)具有代表性的頁面截屏以紀(jì)念：

如果你也曾真正訪問過這個(gè)網(wǎng)站，你也許會(huì)有和我一樣的感受：在第一次訪問該頁面的時(shí)候，我實(shí)在不清楚這花花綠綠的顏色代表的意義，五色讓人目迷。

好吧，讓我們先來聊聊色彩。隨著不斷在社會(huì)中成長(zhǎng)，我們逐漸對(duì)色彩形成完整的認(rèn)知，有一些認(rèn)知形成是天然的，比如紅色，因?yàn)槲覀兊难菏羌t色，紅色天然的代表了鮮血，引申為危險(xiǎn)，還有綠色象征著生命，藍(lán)色象征著深遠(yuǎn)等等；另一些則是基于地緣和文化的，比如還是紅色，在中國(guó)，紅色代表吉祥，黃色象征高貴。如果展開說，我就顯得有些班門弄斧了，所以就此打住。（《每天懂一點(diǎn)色彩心理學(xué)》是近期上市，并且讀起來很輕松的關(guān)于色彩方面的一本小書。）

回到訂票這件事情上，在我看到這些色彩后，我的第一反應(yīng)是這些色彩是為了區(qū)分出些什么，那么是什么呢？

時(shí)間？因?yàn)槲抑?，?duì)于用戶而言，訂票只需要了解三件事情，電影名稱、場(chǎng)次和票價(jià)。電影名稱是顯而易見的，那么是用來做場(chǎng)次的時(shí)間區(qū)分嗎？不是，我發(fā)現(xiàn)《樂火男孩》11：15的那一場(chǎng)是淡橙色，而緊接的《可愛的中國(guó)》11：40的那一場(chǎng)是淡紫色，再往下《氣喘吁吁》11：50是幾乎融入背景色中的深紫色……我想知道了，這些顏色代表的應(yīng)該是價(jià)格了。

但是另一個(gè)問題又?jǐn)[在我眼前——不同的顏色代表不同的價(jià)格，這些價(jià)格到底是什么呢？在我將鼠標(biāo)滾輪翻轉(zhuǎn)數(shù)圈后，我終于，終于的來到了頁面的底部，答案出現(xiàn)了：

如果我眼睛沒有大礙的話，上圖中應(yīng)該出現(xiàn)了四種不同色度和明度的紫色，以及三種不同色度、明度以及色相的綠色，當(dāng)然還有兩種偏米色的黃色。請(qǐng)?jiān)徫覠o法用語言精確的描述每種顏色代表的價(jià)格，因?yàn)樗鼈兒翢o規(guī)律——準(zhǔn)確的說是，它們以一種毫無規(guī)律的色彩排列試圖告訴用戶票價(jià)的等差規(guī)律。

這讓我想起了我剛剛翻譯的《用戶界面設(shè)計(jì)10原則》，其中第四條將的是“運(yùn)用視覺等級(jí)”，作者Kyle在文章中告誡設(shè)計(jì)者“清晰的層級(jí)關(guān)系將對(duì)降低外觀的復(fù)雜性起到重要作用”。我想，這個(gè)頁面的設(shè)計(jì)者一定想要通過色彩讓用戶了解到價(jià)格的區(qū)分，而且是可以“一目了然”的，當(dāng)然結(jié)果不如愿。在我看來，這僅僅是為了區(qū)分而區(qū)分，就像有些界面是為了圖形化而圖形化一樣。

如果我們想要告訴用戶，從最低票價(jià)到最高票價(jià)是可以通過色彩辨識(shí)的，那么我們應(yīng)當(dāng)去尋找一種被人們普遍接受的色彩認(rèn)知。那么中國(guó)人對(duì)于等級(jí)區(qū)分的普遍色彩認(rèn)知是怎樣的呢（原諒我拋棄了國(guó)外用戶）？

一 用什么色彩
比如，白，雖然本義象征著純潔、無邪，但是在等級(jí)中，因?yàn)槲覀兂３Ｓ冒锥?、白衣來形容平民，白色在我們的文化環(huán)境下代表的是比較低的等級(jí)，和便宜掛鉤。那么類似的，我們可以明白為什么黃色代表著高貴了。但我們要注意的，又不能是嫩黃，那只能是黃口小兒的象征，因此色彩的飽和度也是重要一環(huán)，白色和黑色給人帶來的厚重感完全兩樣，一個(gè)從白色到黑色的完美漸變可以很好的反映出視覺等級(jí)的變化，但是我們需要色彩。

二 用多少色彩
那么我們要用多少色彩呢？向上面頁面那樣用到三大色系，九種顏色么？這幾乎是George A. Miller提出的7±2效應(yīng)的上限。除非是雨人，否則大部分用戶只能在短時(shí)間內(nèi)記住7個(gè)左右的信息，更何況這7種顏色是多么的抽象，多么的……難記。（感興趣的同學(xué)，可以點(diǎn)擊這張圖片，然后關(guān)掉）

換句話說，具體到這個(gè)例子，當(dāng)你有九種價(jià)位的電影票，試圖用色彩來做等級(jí)區(qū)分和讓用戶做記憶力測(cè)試沒什么區(qū)別。如果你剛才點(diǎn)開了那張意大利國(guó)旗的圖片，你還能第一時(shí)間記起它的綠色是下圖中的哪一種嗎？

說老實(shí)話，時(shí)代院線的訂票頁面我也反復(fù)上過數(shù)十次了，但是我至今也不記得到底是綠色的票便宜還是紫色的票便宜。因?yàn)槲易罱K買到的票都是粉紅色的。

關(guān)于如何改進(jìn)，展開來又是長(zhǎng)長(zhǎng)一段了，如果是我，我也許會(huì)取消色彩區(qū)分，轉(zhuǎn)用數(shù)據(jù)表的形式，但是BOSS也許會(huì)覺得頁面不夠炫（就國(guó)情而言，100條設(shè)計(jì)原則敵不過BOSS一句話）；也許我會(huì)考慮網(wǎng)站上的色彩和實(shí)際票面印刷對(duì)應(yīng)，長(zhǎng)久讓用戶形成色彩的對(duì)應(yīng)關(guān)系，比如黑色的信用卡一般都是等級(jí)較高的，但是BOSS也許會(huì)覺得這樣增加成本了吧:-D

方法會(huì)有很多，就看你的了……

原文：http://www.liquidroc.name/post/colors-in-visual-hierarchy.html