以用户为中心的设计

这是UCDChina提前预览网页留下的存档,不包括作者可能更新过的内容。
推荐您进入文章源地址阅读和发布评论:http://cdc.tencent.com/?p=5677

信息图形中的颜色探讨—面向色盲人士友好的设计解决方案

作者:CDCer  |   发布: (编辑)kent.zhu   |   时间:2012-06-02 11:18:15 文字大小:- +

颜色可以用来区分信息图形上的数据类别和维度,是数据可视化中最常用的视觉变量之一。然而,世界上有超过8%的男性和0.4%的女性都被色觉障碍的问题困扰——他们在识别部分或者全部颜色时有困难。我们通常笼统的称这类人群为“色盲(Color Blindness)”(也称为道尔顿症、色觉缺失、色觉辨认障碍、色弱等)。面对如此庞大的特殊受众,设计师理应关注他们的需求。信息图形设计本是以向用户传递精准数据为目标,也不能忽视了这部分群体。

一. 了解色盲
“色盲能看到颜色吗?”“他们只能看到黑、白吗?”——人们常误以为色盲视觉所见的景象只有灰阶分布,其实不是的。色盲并不意味着色觉的完全丧失,而是指部分色觉受损,因此无法正确感知和分辨某些区域的颜色。色盲可以分为:红色盲(P)、绿色盲(D)、蓝色盲(T)和全色盲。其中红色盲和绿色盲最为普遍,合称为红绿色盲。全球大约2亿人都患有色盲,它的普遍程度甚至高于AB血型的人群。下面我们感性的看看色盲人眼中的世界:
 

从上面模拟色盲色觉的图片来看,我们可以感受到色盲人士能够辨识的色相较为有限。红色盲和绿色盲的色觉较为近似。由于红绿色盲人数占到了色盲总数的99%,我们需要更多地理解他们能看到的颜色。以下列举了红绿色盲容易混淆的颜色,以及色觉上的一些规律:

   1 ) 红绿色盲难以分辨两种差别只在红色或绿色元素的颜色。如红色和绿色;蓝色和紫色(蓝+红);绿色和棕色;红色和棕色等。

2 ) 红绿色盲人士对蓝色更为敏感。举例来说,他们会把红色和绿色、或黄色和黄绿色混淆,但却能清楚的分辨绿色和蓝绿色(翠绿色)。

3 ) 红绿色盲眼中的红色并不是一种明亮醒目的颜色。相反红色对他们来说显得非常深,而暗红色则几乎接近黑色。因此色盲人士很难分辨出文章内的深红色强调字

4 ) 虽然色盲人士对色相的辨识能力较弱,但却对明度、饱和度非常敏感。

5 ) 相比高饱和度的颜色,低饱和度的颜色更难辨认。如天蓝色和粉红色。

 

也许以上的分析还是太抽象,为了更直观的看到色盲人士眼中的颜色,下面介绍几种模拟色盲色觉的工具,方便设计师们设计和检验:

Adobe自带的校样设置

Photoshop CS4和Illustrator CS4及以上版本提供了模拟红色盲和绿色盲的校样设置,对于每天都在Photoshop/Illustrator中拼搏的视觉设计师来说,这是最简便的一种方法了。选择“视图—校样设置—红色盲型/绿色盲型”

 Color Oracle:http://colororacle.org/

 网站Color Blind Web Page Filter:http://colorfilter.wickline.org/

 

二.设计解决方案

设计面向色盲人士友好的信息图形,并不意味着要设计师要放弃使用色彩这种“利器”。即便是对色觉障碍的人士来说,颜色依然是区分不同类数据的一种简单快速的表现形式。要提高信息图形的识别性和易读性,我们可以遵循这样几个思路寻找解决方案:(1)不完全依赖颜色来区分信息,同时使用多种视觉变量来编码信息;(2)选择安全的配色方案;(3)使用文字注解。

1.冗余编码

避免仅使用颜色来编码信息,应尽量同时使用多种视觉变量(如形状+颜色、尺寸+颜色、注释+颜色)来对信息编码。其中,形状包括了这样一些可使用的元素:圆形、三角形、矩形等;实线、虚线、点线等;字母、数字符号等。这里需遵循的一个原则是:使用尽可能少的颜色——结合使用不同形状符号和少量鲜艳的颜色,效果远好于只使用一种形状和多种颜色。

 

 
2.选择适当的配色
针对色盲人士的颜色识别能力,需要精心选择配色,才能避免选择容易混淆的色区。然而,要使配色能覆盖到各种色觉辨认能力的人(包括色盲、色弱和色觉正常的人群)并不是一件容易的事,尤其同一界面需要出现多种颜色时,让设计师非常头疼。日本有研究得出一组无障碍配色建议,在此分享,供大家参考。这组颜色针对色盲和非色盲人士都是易辨识的(例如它选择了朱红色代替红色,蓝绿色代替绿色,紫红色代替紫色,以减少色盲人士的困扰),它对屏显和印刷都适用,并且所有颜色的名称也容易定义。

 

需要注意的是,从以上配色组中选取颜色时:A. 请交替使用暖色和冷色;B. 当使用多个暖色和多个冷色时,在明度和饱和度上做出区别; C. 避免同时使用低饱和度和低明度的组合。
另外分享两个配色工具,它们都提供了针对色盲人士配色的选项,可以辅助大家进行配色:
网站CONTRAST-A-WEB V2.0 http://www.dasplankton.de/ContrastA/(打开“show color deficiency simulation”面板)
地图配色工具COLOR BREWER 2.0 http://colorbrewer2.org/(勾选“colorblind safe”选项)

 

三、举例

下面以几种常用信息图形为例,来说明如何为色盲用户优化信息图:

1)点状图

 

优化采用了这样一些手段:A.调整配色,将色盲人士容易混淆的红、绿、橙色换为红、蓝、黄色。B.调整明度,使图中几个颜色在明度上差异更明显。C.为不同元素赋予不同形状。所有使用点元素的信息图,都可以参考这种解决方式。

2)折线图

 

优化采用了这样一些手段:A.采用更粗的线条,使颜色更明显。(色块越小,颜色越难分辨。对有色觉障碍的人来说,带颜色的细线、小图标、细体文字尤其难区分。)B.换用不同形状的线条(实线、虚线、点线)。C.文字直接注释在线的周围。D.颜色微调。这样对每一类数据使用多重可视化变量进行编码后,即便颜色信息完全丢失,也能够完整的传递信息。所有使用线元素的信息图,都可以参考这种解决方式。

3)柱状图

 

通过增加底纹,直接标注文字注释的方式优化了柱状图。所有使用面的图形(如饼图),都可以参考这种解决方式。

 

四.写在最后

在实际设计过程中,我们不一定会同时使用到以上所有手段,需要在美观和友好之间进行权衡。我们也可以采用一些交互手段,避免同一界面中元素太多太过杂乱的问题。如highcharts这个趋势图非常优秀,它采用了易辨识的颜色,每个节点处都使用了不同形状的符号,然而仅当鼠标hover到具体节点时,会出现该条线对应的信息(“New York”)。

 

另外除了鼠标hover的交互方式以外,我们甚至也可以为色盲人士提供单独的色盲模式切换,这样也可以兼顾视觉上的美观,避免了太多信息的干扰。这种形式在游戏和软件中也有先例。例如iChat,一般情况下仅有不同颜色来区别用户的在线状态,但同时,它也提供了“User shapes to indicate status”选项,可以将“空闲”状态换成橙黄色三角形符号,将“忙”状态换成红色方形符号表示。

 

 

参考资料:

We are colorblind http://wearecolorblind.com/

Designing For, and As, a Color-Blind Person http://webdesign.tutsplus.com/articles/design-theory/designing-for-and-as-a-color-blind-person/

Color Universal Design (CUD)- How to make figures and presentations that are friendly to Colorblind people http://jfly.iam.u-tokyo.ac.jp/color/

Designing maps for the colour-vision impaired http://colororacle.org/design.html

设计同理心——关注色盲人群http://lovelyrosa.blogbus.com/logs/54856107.html

Web Accessibility之为色盲设计http://www.2beusable.com/web-accessibility-1-what-is-color-blindness.html

(本文出自腾讯CDC博客: http://cdc.tencent.com/?p=5677)

更多
打印  |  类别:视觉设计  |  源地址

UCDChina的书

《UCD火花集2》封面
UCDChina编著,定价35元
从卓越网购买 从当当网购买

《UCD火花集》封面
UCDChina编著,定价25元
从卓越网购买 从当当网购买

《应需而变——设计的力量》封面
UCDChina团队成员JunChen译,定价29元
从卓越网购买 从当当网购买

《网页设计解析》封面
UCDChina团队成员周陟著,定价62元
从卓越网购买 从当当网购买

《赢在用户》封面
UCDChina团队成员Angela译,定价29元
从卓越网购买 从当当网购买

《用户体验的要素》封面
UCDChina团队成员Angela译,定价25元
从卓越网购买 从当当网购买