设计理论:视觉等级中的色彩认知

最近有一部由多位外籍华人参演的片子要上映了，我很想去看，想为GDP做点贡献，于是我想到了网上订票。在杭城的同学知道，大部分影院都是归口于时代院线，订票也大抵上要通过该网站来完成。尽管我最后未能完成网上订票的夙愿（按步骤走完，我才发现我必须拥有一张会员卡才能订票，这又是另一个说来话长的故事了），但是我至少发现了一个有趣的、值得我写下点什么的地方。

于是我挑选了一个具有代表性的页面截屏以纪念：

如果你也曾真正访问过这个网站，你也许会有和我一样的感受：在第一次访问该页面的时候，我实在不清楚这花花绿绿的颜色代表的意义，五色让人目迷。

好吧，让我们先来聊聊色彩。随着不断在社会中成长，我们逐渐对色彩形成完整的认知，有一些认知形成是天然的，比如红色，因为我们的血液是红色，红色天然的代表了鲜血，引申为危险，还有绿色象征着生命，蓝色象征着深远等等；另一些则是基于地缘和文化的，比如还是红色，在中国，红色代表吉祥，黄色象征高贵。如果展开说，我就显得有些班门弄斧了，所以就此打住。（《每天懂一点色彩心理学》是近期上市，并且读起来很轻松的关于色彩方面的一本小书。）

回到订票这件事情上，在我看到这些色彩后，我的第一反应是这些色彩是为了区分出些什么，那么是什么呢？

时间？因为我知道，对于用户而言，订票只需要了解三件事情，电影名称、场次和票价。电影名称是显而易见的，那么是用来做场次的时间区分吗？不是，我发现《乐火男孩》11：15的那一场是淡橙色，而紧接的《可爱的中国》11：40的那一场是淡紫色，再往下《气喘吁吁》11：50是几乎融入背景色中的深紫色……我想知道了，这些颜色代表的应该是价格了。

但是另一个问题又摆在我眼前——不同的颜色代表不同的价格，这些价格到底是什么呢？在我将鼠标滚轮翻转数圈后，我终于，终于的来到了页面的底部，答案出现了：

如果我眼睛没有大碍的话，上图中应该出现了四种不同色度和明度的紫色，以及三种不同色度、明度以及色相的绿色，当然还有两种偏米色的黄色。请原谅我无法用语言精确的描述每种颜色代表的价格，因为它们毫无规律——准确的说是，它们以一种毫无规律的色彩排列试图告诉用户票价的等差规律。

这让我想起了我刚刚翻译的《用户界面设计10原则》，其中第四条将的是“运用视觉等级”，作者Kyle在文章中告诫设计者“清晰的层级关系将对降低外观的复杂性起到重要作用”。我想，这个页面的设计者一定想要通过色彩让用户了解到价格的区分，而且是可以“一目了然”的，当然结果不如愿。在我看来，这仅仅是为了区分而区分，就像有些界面是为了图形化而图形化一样。

如果我们想要告诉用户，从最低票价到最高票价是可以通过色彩辨识的，那么我们应当去寻找一种被人们普遍接受的色彩认知。那么中国人对于等级区分的普遍色彩认知是怎样的呢（原谅我抛弃了国外用户）？

一 用什么色彩

比如，白，虽然本义象征着纯洁、无邪，但是在等级中，因为我们常常用白丁、白衣来形容平民，白色在我们的文化环境下代表的是比较低的等级，和便宜挂钩。那么类似的，我们可以明白为什么黄色代表着高贵了。但我们要注意的，又不能是嫩黄，那只能是黄口小儿的象征，因此色彩的饱和度也是重要一环，白色和黑色给人带来的厚重感完全两样，一个从白色到黑色的完美渐变可以很好的反映出视觉等级的变化，但是我们需要色彩。

二 用多少色彩

那么我们要用多少色彩呢？向上面页面那样用到三大色系，九种颜色么？这几乎是George A. Miller提出的7±2效应的上限。除非是雨人，否则大部分用户只能在短时间内记住7个左右的信息，更何况这7种颜色是多么的抽象，多么的……难记。（感兴趣的同学，可以点击这张图片，然后关掉）

换句话说，具体到这个例子，当你有九种价位的电影票，试图用色彩来做等级区分和让用户做记忆力测试没什么区别。如果你刚才点开了那张意大利国旗的图片，你还能第一时间记起它的绿色是下图中的哪一种吗？

说老实话，时代院线的订票页面我也反复上过数十次了，但是我至今也不记得到底是绿色的票便宜还是紫色的票便宜。因为我最终买到的票都是粉红色的。

关于如何改进，展开来又是长长一段了，如果是我，我也许会取消色彩区分，转用数据表的形式，但是BOSS也许会觉得页面不够炫（就国情而言，100条设计原则敌不过BOSS一句话）；也许我会考虑网站上的色彩和实际票面印刷对应，长久让用户形成色彩的对应关系，比如黑色的信用卡一般都是等级较高的，但是BOSS也许会觉得这样增加成本了吧:-D

方法会有很多，就看你的了……