最近有一部由多位外籍华人参演的片子要上映了,我很想去看,想为GDP做点贡献,于是我想到了网上订票。在杭城的同学知道,大部分影院都是归口于时代院线,订票也大抵上要通过该网站来完成。尽管我最后未能完成网上订票的夙愿(按步骤走完,我才发现我必须拥有一张会员卡才能订票,这又是另一个说来话长的故事了),但是我至少发现了一个有趣的、值得我写下点什么的地方。
于是我挑选了一个具有代表性的页面截屏以纪念:
如果你也曾真正访问过这个网站,你也许会有和我一样的感受:在第一次访问该页面的时候,我实在不清楚这花花绿绿的颜色代表的意义,五色让人目迷。
好吧,让我们先来聊聊色彩。随着不断在社会中成长,我们逐渐对色彩形成完整的认知,有一些认知形成是天然的,比如红色,因为我们的血液是红色,红色天然的代表了鲜血,引申为危险,还有绿色象征着生命,蓝色象征着深远等等;另一些则是基于地缘和文化的,比如还是红色,在中国,红色代表吉祥,黄色象征高贵。如果展开说,我就显得有些班门弄斧了,所以就此打住。(《每天懂一点色彩心理学》是近期上市,并且读起来很轻松的关于色彩方面的一本小书。)
回到订票这件事情上,在我看到这些色彩后,我的第一反应是这些色彩是为了区分出些什么,那么是什么呢?
时间?因为我知道,对于用户而言,订票只需要了解三件事情,电影名称、场次和票价。电影名称是显而易见的,那么是用来做场次的时间区分吗?不是,我发现《乐火男孩》11:15的那一场是淡橙色,而紧接的《可爱的中国》11:40的那一场是淡紫色,再往下《气喘吁吁》11:50是几乎融入背景色中的深紫色……我想知道了,这些颜色代表的应该是价格了。
但是另一个问题又摆在我眼前——不同的颜色代表不同的价格,这些价格到底是什么呢?在我将鼠标滚轮翻转数圈后,我终于,终于的来到了页面的底部,答案出现了:
如果我眼睛没有大碍的话,上图中应该出现了四种不同色度和明度的紫色,以及三种不同色度、明度以及色相的绿色,当然还有两种偏米色的黄色。请原谅我无法用语言精确的描述每种颜色代表的价格,因为它们毫无规律——准确的说是,它们以一种毫无规律的色彩排列试图告诉用户票价的等差规律。
这让我想起了我刚刚翻译的《用户界面设计10原则》,其中第四条将的是“运用视觉等级”,作者Kyle在文章中告诫设计者“清晰的层级关系将对降低外观的复杂性起到重要作用”。我想,这个页面的设计者一定想要通过色彩让用户了解到价格的区分,而且是可以“一目了然”的,当然结果不如愿。在我看来,这仅仅是为了区分而区分,就像有些界面是为了图形化而图形化一样。
如果我们想要告诉用户,从最低票价到最高票价是可以通过色彩辨识的,那么我们应当去寻找一种被人们普遍接受的色彩认知。那么中国人对于等级区分的普遍色彩认知是怎样的呢(原谅我抛弃了国外用户)?
一 用什么色彩
比如,白,虽然本义象征着纯洁、无邪,但是在等级中,因为我们常常用白丁、白衣来形容平民,白色在我们的文化环境下代表的是比较低的等级,和便宜挂钩。那么类似的,我们可以明白为什么黄色代表着高贵了。但我们要注意的,又不能是嫩黄,那只能是黄口小儿的象征,因此色彩的饱和度也是重要一环,白色和黑色给人带来的厚重感完全两样,一个从白色到黑色的完美渐变可以很好的反映出视觉等级的变化,但是我们需要色彩。
二 用多少色彩
那么我们要用多少色彩呢?向上面页面那样用到三大色系,九种颜色么?这几乎是George A. Miller提出的7±2效应的上限。除非是雨人,否则大部分用户只能在短时间内记住7个左右的信息,更何况这7种颜色是多么的抽象,多么的……难记。(感兴趣的同学,可以点击这张图片,然后关掉)
换句话说,具体到这个例子,当你有九种价位的电影票,试图用色彩来做等级区分和让用户做记忆力测试没什么区别。如果你刚才点开了那张意大利国旗的图片,你还能第一时间记起它的绿色是下图中的哪一种吗?
说老实话,时代院线的订票页面我也反复上过数十次了,但是我至今也不记得到底是绿色的票便宜还是紫色的票便宜。因为我最终买到的票都是粉红色的。
关于如何改进,展开来又是长长一段了,如果是我,我也许会取消色彩区分,转用数据表的形式,但是BOSS也许会觉得页面不够炫(就国情而言,100条设计原则敌不过BOSS一句话);也许我会考虑网站上的色彩和实际票面印刷对应,长久让用户形成色彩的对应关系,比如黑色的信用卡一般都是等级较高的,但是BOSS也许会觉得这样增加成本了吧:-D
方法会有很多,就看你的了……