内容均为原创,转载请注明处处谢谢。

  

用户体验(User Experience,简称UX)是一个关于用户(users)以及交互(interactive)技术系统领域的整体概念。具体来说,它代表了一个网站或者应用程序对其用户的可用性(usability)以及吸引程度。可用性高意味着交互产品能够让用户快速的实现他的目标。ISO 9241-110[1]以及Nielsen的研究[2]是这个领域中的“圣经”。

吸引力是指用户以及他所交互系统之间的情感。用户喜欢它吗?讨厌它吗?他们认为它是吸引人的、时尚的,还是为之着迷的?在交互的过程中,他们会为之引以为豪吗?尽管吸引力并不能像可用性那样明确的对其进行定义,但是它对于一个产品的成功仍然至关重要,因为有吸引力的系统会让人使用起来更愉快,更加合其所意,这都会增添产品的价值。

1. 颜色与UI

颜色是360nm至720nm之间的光波刺激人类的眼睛并由视觉系统[3]进行处理后所触发的感知。我们的眼睛拥有三种类型的颜色接收器,分别用于处理长波、中波、短波。它们分别被称为L-、M-和S-cones(译者注:cones是人眼的圆锥细胞)。如图1所示,一束530nm的光波会触发最多的M- cones,其次是L-cones,只会触发很少的S-cones。这条光束最后被感知到的颜色即为绿色。

计算机屏幕中的颜色是由RGB颜色模型(R代表红色,G代表绿色,B代表蓝色)所定义的。这三种颜色被称为(三)原色(primary colors),分别对应L-、M-和S-cone中最易接收的光波。三原色不能由其他颜色混合而生成。相反,通过混合三原色,可以生成其他所有的颜色。屏幕上的每一个像素都是由一束红光、蓝光和绿光相互作用而生成的,它们挨的非常近,是无法分辨出来的。

2. 颜色对比度

通常情况下,UI中的有色对象或区域并不是孤立存在的,都会与其他的对象或区域比邻或者重叠。这就产生了对比效果。没有足够的对比,我们是不能在屏幕上分辨出不同的区域的。这也正是办公软件例如微软的Word、Powerpoint、Excel、Outlook为什么都会默认设置成白底黑字的原因了—— 因为它会产生最强的对比度,以及最佳的可视度。

除此之外,颜色对比度通常被用于把浏览者的注意力引向某些传递关键信息或者需要输入的重要UI元素。

颜色对比度也会提高UI的视觉吸引力。实验研究显示,暖色调(比如红、黄、橙)非常适合作为冷色调(比如蓝、绿、紫)的背景,反之亦然。

对比效果同样会对用户体验产生不利的影响。下面讲的两个例子是比较有代表性的。通常情况下,任何视觉区域都会趋于临域的补色。比如,一个灰色的方框,如果周围是红色,那它看起来就会发绿,如果周围是绿色,看起来就会发红。这种情况被称为同时对比(simultaneous color contrast)【4】。在UI中,通常是一个控件,比如一个按钮,在不同的背景色下会产生完全不同的视觉效果。

另外一种对比度产生的问题是色差(chromatic aberration)【5】。透镜(包括我们眼睛中的水晶体)会对不同的光波产生不同程度的折射。这种情况是因为不同的光源投射到视网膜中不同的地方所引起的,比较明显的情况是紫色与红色的组合,还有蓝色与红色的组合(如图2),因为紫色与蓝色的光波位于光谱的一端,而红色位于另一端。

因此,图2中的文字看起来与背景相比,显得有些模糊。所以,在UI中应当避免红色和紫色/蓝色的对比。尽管如此,红-蓝组合仍然比比皆是,或许是因为UI 设计者为了考虑色觉障碍(color deficiency,下有详述)的问题而避免采用红-绿组合的替代选择。图3展示了生成良好对比度的不同前-背景色组合。

背景色

绿

前景色

good

good

good

good

good

good

good

good

good

good

good

good

good

good

good

good

绿

good

good

good

good

good

good

good

图3:良好对比度的不同前-背景色组合

3. 色觉障碍

当人们谈论色盲(color blindness)的时候,通常是指对接收某种特定颜色存在障碍。而这种情况更准确的说,应为色觉障碍(color deficiencies),因为大多数情况下,人们并不是完全不能接收某种颜色,只是他们的感知会有所误差【3】。色觉障碍是由视锥细胞类型(cone type)的缺失或工作异常所导致。表1列出了由L-、M-、和S-cone所引起色觉障碍患者的比例。8%的男性以及0.4%的女性都存在不同程度的色觉障碍。因为L-和M-cone的弧度非常接近(见图1),所以由L-和M-cone引起的色觉障碍症状非常相似。当L-和M-cone存在问题时,颜色的呈现则大多都是基于蓝、黄两个色调,由此导致不能正确的接收值得推荐的红-绿配色。

色觉障碍

原因

颜色视觉

概率 [%]

-

-

能够看到所有颜色

男性: 92.0

女性: 99.6

红绿色弱

L-cone缺失或不足

- 能看见大部分颜色,除了蓝色与黄色

男性: 2.00

- 混淆红色与绿色

女性: 0.04

红绿色弱

M-cone缺失或不足

- 能看见大部分颜色,除了蓝色与黄色

男性: 6.00

- 混淆红色与绿色

女性: 0.39

蓝黄色弱

S-cone缺失或不足

- 能看见大部分颜色,除了红色与绿色

男性: 0.004

- 混淆蓝色与黄色

女性: 0.002

全色盲

L-, M-, S-cone缺失

不能看到任何颜色

男性: 0.003

女性: 0.002

表1:色觉障碍与发生率

由S-cone引起的色觉误差会导致颜色的接收都是基于红、绿色调,而深受赞誉的蓝、黄配色则无法感知。但这是一种非常罕见的情况,只有0.004%的男性以及0.002%的女性会出现此类症状。还有一种非常罕见的情况——全色盲,这是由完全缺失视锥细胞所导致的:只有0.003%的男性以及0.002% 的女性看不见任何颜色,他们的视觉是非彩色的,完全基于黑、白、灰。

从表1可以看出,色觉障碍患者中最典型的一类人是无法接收红、绿两色的男性。非红-绿色觉障碍的患者比例非常低。实际上,由闪烁的UI元素引起癫痫的比例都要比非红-绿色觉障碍的比例高出400倍。

问题是,色觉障碍的程度为产品的可用性带来了巨大的挑战。这会因为应用程序的类型差异而有所不同。在所有对颜色的使用有美学要求的地方(比如大多数公司的网站),它对色觉障碍的重要程度就远远低于某些表示状态的系统(比如控制系统和dashboards)。通常情况下,建议不要通过颜色来表明某些重要信息。比如,通过红光或绿光表明系统状态,这会给红-绿色觉障碍者会带来麻烦。所以,最好提供一些有意义的文本标识(“OK” vs. “警告”),或符号(“对号” vs. “感叹号”)代替有色码。

4. 颜色与视觉感染力

颜色非常适合增强软件产品的视觉感染力。我们通常会赋予某些颜色以特定的涵义(表2)。这些对颜色的观念在设计UI的时候往往起到非常大的作用。举个例子,一个基于白色的诊所软体应用程序是非常合情合理的,因为白色象征着“整洁”。再比如,联合国的主页是基于蓝色的,传达了一种“和平”的理念。

颜色

传达的感受

热(hot)、停止(stop)、侵略(aggression)、错误(error)、警告(warning)、火(fire)、勇气(daring)

女性(female)、可爱(cute)、棉花糖(cotton-candy)

温暖(warm)、 秋天(autumnal)

幸福(happy)、明媚(sunny)、   快乐(cheerful)、减速(slow down)、小心(caution)

温暖(warm)、秋天(fall)、肮脏(dirty)

绿

嫉妒(envy)、 羡慕(jealousy), 菜鸟(a novice)、 肥沃(fertile)、 田园(pastoral)

平静(peaceful)、水(water)、男性(male)

皇族(Royal)

纯洁(virginal)、干净(clean)、天真(innocent)、寒冷(cold)

邪恶(evil)、幽灵(ghostly)、死亡(death)、恐惧(fear)、哀痛(mourning)

阴暗(overcast)、忧郁(gloom)、晚年(old age)

表2:西方的颜色感知

应当注意的是,表2中所列的这些对颜色的感知都起源于西方的文化。因为颜色观念是与文化密切相关的,他们在不同的区域会表示截然不同的涵义。比如红色,在埃及象征着“死亡”,而在印度却代表“生命”与“创新”,在中国则是代表“幸福”【9】。

有感染力的UI是由一组协调、相关的颜色所构成。创建配色方案(color scheme)也是一个技巧,而且是非常重要的,因为需要考虑很多因素,包括所要传达的公司品牌价值、强调的颜色感知(见表2),此外,还要考虑人类个体的问题(比如之前提到的对比度)。

无需图像设计师的帮助,有很多种方法可以用来创建简单的配色方案【10】。举个例子,你可以在12色环(color wheel)中任选3个相邻的颜色(analogous color——相似色,见图4)。或者选择完全相对的两个颜色(conplementary color——互补色)。不要忘记,红色与蓝色对红-绿色觉障碍者可不是很友好(详见前文“色觉障碍”)。

图4:

UI篇之——用户体验的更多相关文章

  1. UI设计可供性解析:巧用隐藏的设计力提升用户体验

    以下内容由Mockplus团队翻译整理,仅供学习交流,Mockplus是更快更简单的原型设计工具. 在实际的Web或App界面设计中,设计师们在学习和实践各种专业知识和技能之外,也会不可避免的遇到到各 ...

  2. 12个优秀用户体验的移动应用程序 UI 设计

    最美丽的,现代化的和惊人的移动 UI 设计就在这里.今天,我们挑选了12个来自 Behance 和 Dribbble 网站的优秀用户体验的手机界面设计.这些界面设计作品都是由世界各地的优秀设计师分享, ...

  3. 15个带给您优秀用户体验的移动应用 UI 设计

    在今天在移动 App 界面设计中,你可以看到不同创意类型的视觉效果.特别是在 Dribbble 上面,有有很多移动应用程序的 UI 概念设计,让你惊叹.如果你想获得灵感,那很有必要看看下面15个优秀用 ...

  4. 用户体验设置和UI设计的10个不同点

    在这个技术的世界,UX和UI这两个词条在差点儿全部公司都非常流行,不管大小,都在寻找招聘UX/UI设计师. 这两个缩写词条使得整个技术工业为之疯狂,由于它们是最先进的前沿技术. 那这两个词条实际上是什 ...

  5. bing词典vs有道词典对比测试报告——功能篇之细节与用户体验

    之所以将细节与用户体验放在一起讨论,是因为两者是那么的密不可分.所谓“细节决定成败”,在细节上让用户感受方便.舒适.不费心而且温馨,多一些人文理念,多一些情怀,做出来的产品自然比其他呆板的产品更受欢迎 ...

  6. 必应词典手机版(IOS版)与有道词典(IOS版)之软件分析【功能篇】【用户体验篇】

    1.序言: 随着手机功能的不断更新和推广,手机应用市场的竞争变得愈发激烈.这次我们选择必应词典和有道词典的苹果客户端作对比,进一步分析这两款词典的客户端在功能和用户体验方面的利弊.这次测评的主要评测人 ...

  7. 为什么丑陋的UI界面却能创造良好的用户体验?

    本文内容由Mockplus团队翻译. 官网:http://www.mockplus.cn 网站界面过于漂亮可能会影响网站的可用性,但本文中提到的5个网站界面可谓是“丑”出了新高度.这样的网站它还有可用 ...

  8. APP开发中,如何从UI设计上提升APP用户体验

    设计中有很多细微的东西要注意,就如UI设计中,元素的统一性,图标风格.段落的排版等等,只有能注意这些细节,你的 APP UI 才算合格. 干货君总结了17个提升用户体验的 UI 设计小技巧,也是我们日 ...

  9. web开发性能优化---用户体验篇

    怎样从技术角度怎样增强用户体验.都是非常多平台都在做的事情,依据个人实际经验碰到几种体验做下总结. 1.降低页面刷新白屏 适当使用ajax技术.改善刷新白屏现象. 2.信息提醒,邮件.站内信.短信在购 ...

随机推荐

  1. linux基础 作业篇

    1.自动部署反向代理 web nfs #!/usr/bin/python #-*- coding:utf-8 -*- #开发脚本自动部署及监控 #1.编写脚本自动部署反向代理.web.nfs: #!/ ...

  2. JS模式--职责链模式

    职责链模式的定义:使用多个对象都有机会处理请求,从而避免请求的发送者和接收者之间的耦合关系,将这些对象连成一条链, 并沿着这条链条传递下去,直到有一个对象处理它为止. var order500 = f ...

  3. MySQL 的Coalesce函数

    今天用到了coalesce 函数,原因在于,我想要查找合同到期日的字段是否有值(因为合同到期日分3个字段,对应着不同的日期) select coalesce(contract_date1,contra ...

  4. 使用wcf编写坐标字符串生成shapefile文件,在iis发布供前端调用

    项目有一需求,需要由坐标字符串(格式:x,y,点名)生成shapefile,由于在前台开发类似功能比较麻烦而且也不适用,最终决定使用WCF来实现,不借助现有GIS软件,基于GDAL实现. 实现过程如下 ...

  5. 解决oracle用户锁定

        故障现象: SQL> connect scott/scottERROR:ORA-01017: invalid username/password; logon deniedSQL> ...

  6. java 对时间(Date)随笔!

    /** * 获取系统当前时间 * @return 系统当前时间 */ public static Date now() { return new Date(); } /** * 根据指定的日期,获取其 ...

  7. C# Redis学习系列三:Redis配置主从

    Redis配置主从 主IP :端口      192.168.0.103 6666 从IP:端口       192.168.0.108 3333 配置从库 (1)安装服务: redis-server ...

  8. 小米红米1 android 4.4.4上操作数据库异常问题

    产生的问题: 小米红米1 android 4.4.4上,按HOME键,应用进入后台,再启动,应用进程直接挂掉 解决的方法: 这个是操作数据库,数据库关闭之后导致的异常,解决的方法: //4.0以上的版 ...

  9. Java内存使用量测试

    JVM内存使用量测试测试各种不同的数据结构在JVM中的内存使用量 import it.unimi.dsi.fastutil.ints.IntOpenHashSet; import java.lang. ...

  10. word vbs脚本 设置所有题注样式为蓝色,下划线

    Attribute VB_Name = "题注样式" Sub SetCorssRef() 'Word版,设置所有交叉引用的文本的格式 Dim aField As Word.Fiel ...