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

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

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

 

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

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

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

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

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

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

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

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

一 用什么色彩

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

二 用多少色彩

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

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

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

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

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

时间: 2024-12-21 20:47:01

设计理论:视觉等级中的色彩认知的相关文章

交互设计理论:浅析电影中的未来交互

在一次交互例会上,有同学提到电影中的未来交互,引发了我的兴趣,所以收集了一些电影中的资料,做一些粗浅的分析,希望能够抛砖引玉,引发出一些思考. 新颖的人机交互方式一直是科幻电影夺目的亮点之一,好莱坞的科幻大片投入了大量金钱.精力到电影的细节设计中,比如汤姆克鲁斯主演的<少数派报告>,主创团队邀请了HCI科学家参与电影制作,电影的视觉设计师特意走访了MIT 多媒体实验室,观看了各种姿态识别的前沿技术.斯皮尔伯格说服了John Underkoffler(著名的手势识别专家)以及Jaron Lanier

设计理论:交互设计中色彩的运用

也许有人说,色彩是视觉设计师需要考虑的问题,交互中可以不考虑颜色.没错,视觉设计师对于颜色有较强的见解和把握,由于色彩设计的重要度(人们对于信息的把握,首先也是由色彩开始的,其次才是图形,文字),在产品设计过程中,视觉设计师有着第一评判权. 对于色彩的认知,从哲学层面转入科学范畴后,人们发现,色彩对于人的心理影响有其固化的习惯性,这些认知也就延伸到了人对于产品的使用中.这样,在产品交互过程中,色彩也就可以被宽泛的表述进来,从而明确人的行为动机. 先举几个生活中的例子,红绿灯已经很明确颜色对于人的

浅谈网页设计中的色彩理论

无可争议的是,色彩是任何设计领域中最重要的一方面. 设计师在决定了一个网站风格的同时,也决定了网站的情感,而情感的表达很大程度上取决于颜色的选择.颜色是很有力的工具,所有设计师在设计网页时就应该明白这一点. 一.颜色术语 你们当中很多人可能已经在学校学过一些色彩基础知识,让我们快速回顾一些术语,来更好的把握色彩和运用色彩. 色轮的主要组成 所有的色彩能在一个色轮中呈现.在这个色轮中,我们能把颜色分成3大块:原色,辅助色和第三颜色. 三原色分别是红色,蓝色和黄色.这些色彩是基础色,他们组成了色轮上

设计理论:色彩是网站的最重要的一个部分

色彩是您的网站的最重要的一个部分. 然而,颜色往往只是通盘决定之后的马后炮,有时候甚至被不管不顾.这样可不行.色彩帮助用户解读信息.   这张照片的颜色感觉如何?这些烟花感觉喜庆吗? 照片 来自 expressmonorail . 色彩是您的网站的最重要的一个部分. 然而,颜色往往只是通盘决定之后的马后炮,有时候甚至被不管不顾.这样可不行.色彩帮助用户解读信息.说得复杂一点,大多数人对网站用色的评判是在下意识里完成的.他们可能不会说出对色彩的意见,但他们潜意识里对此很介意. 有时候,你会因为颜色

设计中的色彩感情(下)

色调变化及类型 变调即色调的转换,是艺术设计中色彩选择多方案考虑及同品种多花色系列设计的重要课题,变调的形式一般有定形变调.定色变调.定形定色变调等. 1.定形变调 实质为保持形态(图案.花形.款式等)不变的前提下,只变化色彩而达到改变色调倾向的目的,是纺织.服装.装潢.包装.装帧.环艺等多种实用美术中,经常采用的产品同品种.同花形.多色调的设计构思方法. 定形变调主要有两种形式. (1)同明度.同纯度.异色相变调 即根据原有设计色调,保持明度.纯度不弯,只变化色相(原有色相对比距离不变)而改变

游戏设计中的色彩哲学:没想象的那么简单

色彩的学问横跨物理.生物.心理.艺术和设计等若干学科--艺术家用它来点燃情感的共鸣,广告人用它来塑造产品的格调,而对游戏设计者而言,色彩不仅关乎"看",还关乎"用".本文将着重探讨游戏中的色彩及其应用,包括提升色彩视觉效果的相关技术和生物学效应等等. 游戏中的色彩:到底有什么用? 色彩的首要功能是帮助我们辨认不同的物体,在游戏中也是如此--现实的苹果是红色的,所以游戏中的苹果也是红色的,辨认起来就更加容易.除此之外,游戏中的色彩还跟艺术.设计和电影一样,有其他作用.

网站设计中的色彩如何搭配

  一个网页设计师对于颜色来说是比较敏感的,因为色彩搭配是整个网站的重要点.如果搭配的不合理就会产生层次不清晰,网站没有重点,如果搭配的过于艳丽,又有些太炫的感觉.每一个客户的审美都是不同的,所以设计师经常被顾客说这里改一下那里改一下,一直不懂得客户到底要个什么样的,因为视觉感官是很难用语言表达出来的. 网页设计中首先要注意的是色彩三要素,色彩可用色调(色相).饱和度(纯度)和明度来描述.人眼看到的任一彩色光都是这三个特性的综合效果.其次是色彩的强度,简单的说是不同色彩搭配对肉眼产生的影响的大小

网站用户体验设计:视觉表现建立信息层级 将信息有效传达给用户

中介交易 SEO诊断 淘宝客 云主机 技术大厅 作为视觉设计师,我们的作用除了最基本的满足用户审美需求,还会有品牌传达,信息传达,功能传达等,其中想要信息有效的传达给用户,需要我们建立信息层级,而不是一股脑的丢给用户自己理解,要做到这点有哪些视觉方法,这些方法的背后是否有理论依据,是本文的主题. 首先看下面两张图,左图为相机拍摄的效果,右图为人眼不移动时看到的效果,可以发现人眼对信息的获取并不是一次性完成的,它不能同时产生多个焦点从而把视线停留在更多的地方,设计师需要考虑的是让用户通过眼球移动,

好的网站设计需要视觉和文字的和谐

文章描述:好的网站设计需要视觉和文字的和谐 原来把题目定为"视觉与文字",但是又觉得这题目似乎有点过大,怕用了专业的标题却写出非专业的文章.而我无意暂时也没有能力去对视觉一些细节做极为专业的考究,只希望通过自己一些学习和了解来加深自己对美的判断吧.其实文字本身就是一种视觉语言,它把现实世界的所有事物,都以字的形式来进行了表现.曾经读过一篇文章,说在传统的版式设计中,设计师们更喜欢做英文的排版,因为从视觉上来看,英文很容易形成线和面的关系,且字母有节奏感,比如aby这三个字母放一起有高矮