当前位置: 首页 > 图文教程 > 网页制作 > 心得技巧 > 设计理论:交互设计中色彩的运用

心得技巧
引入外部文件(js/vbs/css)时,避免产生乱码的方法
复制和粘帖是封装的大敌
浅谈 div 与 table 如何取舍结合利用
各种网络图片格式详解 PNG的好处
HTML中的input type="reset"标签失效(不起作用)的可能原因。
优秀的网页前端设计的一些指标
网站产品设计参考的几条原则
首页设计最能反映web设计师的水准
网页设计的专业与非专业
网页设计心得 高效编写网页代码
ie8,chrome中table的宽度固定方法
flash 嵌入网页 与IE, FF,傲游兼容问题
一个优秀的注册流程应该具有的步骤
网页flash动画不显示的解决方法
入门知识 网站地址前的http是什么意思?
网页理论:Don’t make me think 阅读笔记
网页设计经验谈
晕倒:“用web2.0来制作符合标准的页面”
网页文字设计应该像聪明女孩穿衣服
设计理论:界面内容优化的层次

心得技巧 中的 设计理论:交互设计中色彩的运用


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2010-01-03   浏览: 32 ::
收藏到网摘: n/a

也许有人说,色彩是视觉设计师需要考虑的问题,交互中可以不考虑颜色。没错,视觉设计师对于颜色有较强的见解和把握,由于色彩设计的重要度(人们对于信息的把握,首先也是由色彩开始的,其次才是图形,文字),在产品设计过程中,视觉设计师有着第一评判权。

对于色彩的认知,从哲学层面转入科学范畴后,人们发现,色彩对于人的心理影响有其固化的习惯性,这些认知也就延伸到了人对于产品的使用中。这样,在产品交互过程中,色彩也就可以被宽泛的表述进来,从而明确人的行为动机。


先举几个生活中的例子,红绿灯已经很明确颜色对于人的行为的认知了;冷热水管中,红色代表热水,蓝色代表冷水…..这些都是根据人对色彩的心理认知而做的指示设计,至于红是哪个红,蓝是天蓝还是钴蓝,这些就要根据不同品牌来明确给用户了,这也就是视觉设计师要考虑的。

在互联网产品设计中,这个道理同样存在,网络最初定义的文字颜色,蓝色为链接,黑色为文本色,灰色为当前不可点或者非重要信息,红色起到强调、警示作用,默认链接还有下划线。

具体讲一个改进的例子,以前“我的淘宝”中,交易提醒内容为:“买入:在最近三个月内,您共有13笔买入交易记录,请到“已买到的宝贝”中查看。”新版做了优化,先是缩减文案改成:“最近三个月买入(13)”。整条可点击,这里的问题就是文字不像链接,可视提示不明确,用户以为黑字不可点,都点后面的数字,数字区域又很小。最后改成“三个月买入(13)”,文字用链接色(又一次缩减了文案)。这里还有个问题,提醒中,有马上需要操作的提醒,如:待确认收货。也有用户看看就可以,不需要马上操作的,如:三个月买入。这样,又做了一个调整,需要用户马上操作的,后面数字用橙色,如:待确认收货(9),不需要马上操作的,数字还是用黑色。(强调提醒用暖色系更能让人注意,比如红色,淘宝惯用橙色)。

上面这个例子的几经变迁,就是通过颜色的调整使用户更快速的完成任务,当然我们更可以改进功能直接让用户确认某个宝贝收货。


在色彩理论中,色相对应其特点相对给人的感觉固定些,比如暖色有膨胀感,贴近感,急切感;冷色系后退感,冷静感,收缩感;无色系有客观,叙述,优雅等感觉。


有研究表明,深色车比亮色车易发车祸,原因就是深色车的收缩感使后面的司机感觉离前面的车还比较远,而且看起来小,注意度就会降低。颜色都到了人命关天的地步,不过没这么恐怖,呵呵。