面向色盲人士友好的设计解决方案

CAPF1993yi

CAPF1993yi

2016-02-17 02:17

有一种朋友不在生活里,却在生命力;有一种陪伴不在身边,却在心间。图老师即在大家的生活中又在身边。这么贴心的服务你感受到了吗?话不多说下面就和大家分享面向色盲人士友好的设计解决方案吧。

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

一. 了解色盲

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

面向色盲人士友好的设计解决方案,PS教程,图老师教程网

面向色盲人士友好的设计解决方案,PS教程,图老师教程网

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

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

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

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

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

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

面向色盲人士友好的设计解决方案,PS教程,图老师教程网

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

Adobe自带的校样设置

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

Color Oracle:http://colororacle.org/

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

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/pmsj/)

二.设计解决方案

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

1.冗余编码

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

面向色盲人士友好的设计解决方案,PS教程,图老师教程网

2.选择适当的配色

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

面向色盲人士友好的设计解决方案,PS教程,图老师教程网

需要注意的是,从以上配色组中选取颜色时: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)点状图

面向色盲人士友好的设计解决方案,PS教程,图老师教程网

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

2)折线图

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/pmsj/)

面向色盲人士友好的设计解决方案,PS教程,图老师教程网

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

3)柱状图

面向色盲人士友好的设计解决方案,PS教程,图老师教程网

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

四.写在最后

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

面向色盲人士友好的设计解决方案,PS教程,图老师教程网

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

面向色盲人士友好的设计解决方案,PS教程,图老师教程网

展开更多 50%)
分享

猜你喜欢

面向色盲人士友好的设计解决方案

平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计
面向色盲人士友好的设计解决方案

CSS网页设计中的解决方案

Web开发
CSS网页设计中的解决方案

什么是极简主义 如何打造极简风格家居

家居设计 装修设计
什么是极简主义 如何打造极简风格家居

惠普IDERAID解决方案

Linux Linux命令 Linux安装 Linux编程 Linux桌面 Linux软件 Linux内核 Linux管理
惠普IDERAID解决方案

ajax后退解决方案

Web开发
ajax后退解决方案

2017榻榻米书房设计装修效果图 榻榻米书房设计图片

榻榻米 书房 装修设计 书房设计 平面设计
2017榻榻米书房设计装修效果图 榻榻米书房设计图片

惠普集群解决方案

Linux Linux命令 Linux安装 Linux编程 Linux桌面 Linux软件 Linux内核 Linux管理
惠普集群解决方案

数据备份系统解决方案

编程语言 网络编程
数据备份系统解决方案

2017春夏女装风衣外套流行趋势

服装设计 平面设计 设计 服装搭配
2017春夏女装风衣外套流行趋势

说说瀑布流式网站里那些可人的小细节

说说瀑布流式网站里那些可人的小细节

详细解析商业中的创意设计技巧

详细解析商业中的创意设计技巧
下拉加载更多内容 ↓