go to english site go to chinese site

视觉

视觉通过图像、移动和色彩使我们能够感知这个世界。视觉获得的信息帮助我们在环境中活动并与周围物体交互。任何关于产品或环境的设计都必须将人的视觉能力范围考虑进去。

本页索引:

 

本页由Umesh Persad和Pat Langdon编撰

 

理解视觉

人眼的工作原理是光线通过瞳孔进入眼球,眼球晶体将光线汇聚到视网膜上,视网膜是眼底能感光的细胞层。

视网膜里有两种受光体——视杆细胞和视锥细胞。视杆细胞用来分辨黑白形状,视锥细胞用来分辨色彩。大部分的视锥细胞集中在视网膜中央窝里,这一区域比其它部分更敏锐,能帮助人看清最细节的部分。感知细胞通过视神经将信号传递到大脑,大脑将两眼获得的信息处理成我们看到的图像。两眼的视距差构成了对深度的感知。

一般的视觉问题如近视或远视都是由于眼球或眼球晶体畸形造成的,可通过佩戴眼镜来校正。然而,随着眼球肌肉力量的衰退以及眼球晶体的硬化,眼睛不再能从不同距离下聚焦物体。

由于年岁增长和眼况不同,眼睛的结构和功能也会逐渐退化,这会导致视线模糊,视线中央或外围模糊,以及对比度感知衰退。色盲主要是由于遗传缺陷导致的,不过蓝色和绿色间的区分能力会随着年龄增长而减弱。

 
一双眼睛和眼球结构图,展示了眼球前方的瞳孔和眼球晶体,以及眼球后方的视网膜和视神经

眼球的形状和结构。

返回顶端

 

视觉功能:简介

视觉系统具有多种功能,这里主要讨论与产品设计相关的4个功能:

  • 视觉敏锐度:看清物体细节的能力
  • 对比灵敏度:不同亮度之间的区分能力
  • 色彩感知度:不同色彩之间的区分能力
  • 有效视野:在整个视线区域内感知聚焦区域和外围区域的能力
 
这款手机的按键在完整视觉机能下是清晰的,但在视觉敏锐度衰退情况下手机的图标和文字变得难以辨识。

视觉正常用户和视觉敏锐度衰退用户看到的手机图像

这款手机按键在对比灵敏度衰退情况下也较难辨识,在红绿色盲情况下红色和绿色的图标不易区分。

对比灵敏度衰退用户和红绿色盲用户看到的手机图像

返回顶端

 

视觉功能:视觉敏锐度

视觉敏锐度是眼睛观察细节的能力。看清细节取决于多种因素:

  • 眼球晶体聚焦视距范围内光线的能力
  • 视网膜能辨清的最小特征或空间(例如:文字大小或边框粗细)
  • 光线到达视网膜需经过的薄膜和流质的透明度
  • 周围光线以及前景背景之间的对比

阅读文字是最普遍的需要高视觉敏锐度的任务。右上图展示了多种文字大小和不同字体。当选择字体的时候需要考虑以下因素:

  • 字母易于辨认取决于笔画的粗细和笔画间的空间,以及笔画空间的独特性
  • 划线字母、斜体字母或装饰字母的清晰识别和阅读舒适性会降低
  • 确保经过镜像或旋转的字母的独立性能减少阅读障碍

视觉任务所需要的敏锐度还包括辨识图形、符号、标志和人脸。

 
同样的文字用不同的字体和字号显示效果。

不同字号和字体的组合——最上排是饰线体,中间排是等线体,最下排是装饰字体。

不同字体、字号显示的同一文字在视觉敏锐度衰退情况下的效果。

上图在视觉敏锐度弱的人眼里的图像。

返回顶端

 

视觉功能:对比灵敏度

色彩可以通过灰度、饱和度和亮度来描述。对比灵敏度是在前景色和背景色之间辨明亮度的能力。这取决于物体的尺寸、距离和光照。最大的对比是黑背景下的白物体或白背景下的黑物体。

对比灵敏度弱的人需要更强的对比度。例如,认清手机数字键的能力取决于手机和数字的对比、视距、文字大小和背景光线。

视觉敏锐度也与对比度有关,低对比度的文字比高对比度的文字更不易识别。此外,产品的操作部分需要与产品底盘有一定的对比度反差。对比灵敏度对诸如阅读文字、在环境中走动、辨明建筑物外轮廓、马路和人行道等来说都很重要。

右图展示了不同前景色和背景色的文字以及在对比灵敏度弱的人眼里的视觉效果。请注意当前景色和背景色亮度相差不大的时候,色彩上的反差能有助于辨识。

 
同一文字在不同前景色、背景色下的显示效果。The same word written in different colours on different coloured backgrounds.

从不同距离或眯着眼看这张图片,找出哪些颜色组合是最有效的。

不同前景色、背景色下的同一文字在对比灵敏度衰退下的情况。

上图在对比灵敏度弱的人眼里的图像。

返回顶端

 

视觉功能:色彩感知度

色彩传达着物质世界的信息。色弱(或色盲)在区分不同色彩上存在困难。认为色盲不能辨识色彩的观念是错误的,实际上完全丧失色彩辨别能力的人极少。色盲是不能区分色谱上的某段颜色区间。

最常见的色盲是红-绿色盲,红-绿色盲的人不能区分色谱上从红色到绿色的颜色区间。如果产品交互仅仅靠颜色来传递信息则会对这些色盲、色弱的用户造成困难。

右上图展示了不同前景色和背景色的文字,右下图模拟了红-绿色盲的视觉效果。请注意这时同等亮度的不同颜色之间的色彩区别会消失,文字变得很难辨识。

 
同一文字在不同前景色、背景色下的效果。

从不同距离或眯着眼看这张图片,找出哪些颜色组合是最有效的。

上述文字图片在红绿色盲模拟情况下,采用红绿对比色的文字变得不易辨识。在模拟器中红色和绿色都变为褐色,而黑色、白色、黄色和蓝色都没有变化。

上图在红-绿色盲人眼里的图像。

返回顶端

 

视觉功能:有效视野

随着年龄增长和多种眼睛情况,有效视野有可能会发生改变。视野消失可能发生在视野中部(中心视野丧失),也可能发生在视野周边区域(周边视野丧失)。

中心视野用来聚焦和辨识细节。当中心视野变得模糊时,需要辨识细节的任务(例如阅读)就会变得非常困难。这些人通常会逐渐适应中心视野丧失,试着用边缘视野来辨识。然而,这部分的视网膜不够敏感,带来敏锐度和对比灵敏度上的损失。对于视觉敏锐度和对比灵敏度的设计指南同样适用于中心视野丧失的用户。

周边视野丧失会导致视野狭隘影响行动。铁路售票机的操作界面如果信息铺得太开就会给这部分视觉障碍用户带来麻烦。右下图展示了通过再设计将关联操作间的距离缩小,能使周边视野丧失的用户更易操作。

 
同一台售票机在正常人眼里和周边视野丧失的人眼里看上去的不同效果。

界面布局不清晰的售票机在正常人眼里和周边视野丧失的人眼里看上去的效果。

对同一台机器界面进行再设计后,在正常人眼里和周边视野丧失的人眼里看上去的效果。

对同一台机器界面进行再设计后,使界面布局更集中,即使周边视野丧失的人也能看清。

返回顶端

 

环境因素

一个物体的“视尺寸”由物体距离决定。视知觉的有效性主要取决于亮度对比、色彩对比、细节的“视尺寸”,以及在既定距离和背景光线下眼睛的聚焦能力。本节将深入探讨环境因素。

背景光线的强弱以及光源、产品和用户之间的空间关系影响对细节的视觉感知。例如在电视背景下阅读文字,或面向太阳辨认路牌信息等。

在阳光或灯光下面,从某些角度看反光表面(例如显示屏)会很刺眼,导致辨识信息困难。当产品或用户位置固定或观看视角有限的情况下(例如看路牌),考虑反光度、距离和视角问题尤其重要。

 
眩光使屏幕上显示的文字不易看清,而可调节角度的屏幕可以解决这一问题。

倾斜度可调试的屏幕能减少一部分用户观看视角或刺眼的问题。

设备背面图片,展示了观看角度和昏暗的光线会影响操作。

查看设备的背面很容易受使用环境条件所限。

返回顶端

 

设计指南:总体原则

  • 基于下列几点考虑与刺眼问题相关的潜在因素:
    • 物体受视面光洁度
    • 光源强度
    • 物体受视面、观看者和光源的空间位置
  • 使用户能自行控制光源的强度、位置和角度以适应他们的视觉机能和操作任务
  • 考虑使用颜色来传达信息,但要保证同时有其它方式作补充(例如:借助形状和文字)
  • 考虑使用色彩对比突出信息,但要保证同时也有足够的明度对比
  • 考虑产品图像转为灰度时仍具可用性
  • 考虑借助声音或触觉媒介来帮助那些视觉障碍的用户,但也要考虑加载信息不要过度
  • 合理布置信息以使那些视野缺失的用户也能使用
  • 通过佩戴视觉残障模拟眼镜的方式,确保设计排除性的最小化
 
手机的拨号键和终止键在色盲眼里颜色相近,但在第二个产品中由于形状上作了区分而易于辨识。

色盲用户眼中的手机图像对比——注意形状的运用使呼叫和终止呼叫键仍显突出。

光面纸会产生眩光使文字模糊,毛面纸则不会产生眩光。

光面纸会导致刺眼问题,使用毛面纸能减少这一问题的发生。

返回顶端

 

设计指南:文字

  • 选择在阅读距离内能舒适阅读的文字尺寸、字体和亮度对比,避免环境光线带来的潜在困难
  • 文字背景慎用图案或图片,如要使用则需考虑清晰易读性
  • 避免在大段文字或标题中使用斜体或装饰字体
  • 设计图释或标志时仔细考虑线条粗细、间距和整体尺寸
  • 一般大段文本采用饰线体,标题文字使用等线体

关于印刷字体更详细的指南可参考英国皇家盲人组织2006年的报告:RNIB (2006) See It Right: Making information accessible for people with sight problems. Royal National Institute for the Blind, London. ISBN: 1858787041

 
一台电话上采用灰色按键和白色数字,另一台电话则采用白色大号键盘和对比度较高的深蓝色数字。

一些不同的电话按键的文字大小和对比度。

一个药瓶盖在白色背景上采用白色凸起的文字,另一个药瓶盖则在白色背景上采用凸起的黑色图释。

不同对比度的药瓶盖上的使用说明。

返回顶端

 

人口统计:普及数据

视觉机能水平(按数字从小到大排列)

V1 不能根据光线辨别窗户位置
V2 不能辨明室内家具的形状
V3 不能在脸贴脸的距离认出自己的朋友
V4 不能在一臂远的距离认出自己的朋友
V5 不能阅读报纸标题栏
V6 不能阅读大字版书籍
V7 不能在一间房间的距离认出自己的朋友
V8 不能在一条马路宽度的距离认出自己的朋友
V9 阅读普通字体的报纸有困难
V10 完整视觉机能

能力水平的衡量是在可佩带任意视觉辅助工具的情况下。

 
图表展示了不同视觉机能的人口分布。4.2% (190万英国成年人口)的人口分布在V1-V9级别,不具备完整的视觉机能

图表展示了不同视觉机能的人口分布,完整视觉机能V10略去不显示。

重要说明
这一视觉机能水平和人口普及数据直接引自1996/97残障后续调查(Grundy等,1999年),这一调查是由英国政府组织,以制订残障人士福利资助计划。在调查当年英国成年人口数量是4560万人。更多信息请参阅“用户能力框架”部分。

返回顶端

 

人口统计:需求和排除性

无要求

  • 用户无需借助视觉完成任务

低要求:用户需具备下列程度的视觉能力:

  • 能阅读报纸大标题(约72磅字体)
  • 能在一臂的距离认出自己的朋友

中等要求:用户需具备下列程度的视觉能力:

  • 能阅读大字版的书(约16磅字体)
  • 能在一间房间的距离认出自己的朋友

高要求:用户需具备下列程度的视觉能力:

  • 能毫不费力地阅读普通报纸(约9磅字体)
  • 能在一条马路宽度的距离认出自己的朋友

能力要求是在假定可借助任意视觉辅助工具的情况下。

 
不同要求水平下被排除在外的英国成年人口分布

图表展示了不同视觉能力要求下被排除在外的人口百分比。

重要说明
这一图表是针对一件产品或服务能被使用的视觉机能水平。对于每项特定的水平要求,1996/97残障后续调查统计的数据能用来算出排除在外的人口数量。在调查当年英国成年人口数量是4560万人。更多信息请参阅“用户能力框架”部分。

返回顶端