为了色盲用户的友好体验,你应该注意五点

世界范围内,每12个男性中有1名男性、每200名女性中有1名女性受色盲或者色觉缺失(CVD)的影响。这意味着每100个web或app用户中,至少有8个人的实际体验和你的预期有很大差别。如何确保你的设计对这些用户也有足够的吸引力?我们会在本文提出一些方法帮助大家。别急着满带恐慌地投奔你的设计团队,先来看看我们列出的色彩可用性设计的几项重要事项。


世界范围内,每12个男性中有1名男性、每200名女性中有1名女性受色盲或者色觉缺失(CVD)的影响。这意味着每100个web或app用户中,至少有8个人的实际体验和你的预期有很大差别。如何确保你的设计对这些用户也有足够的吸引力?我们会在本文提出一些方法帮助大家。别急着满带恐慌地投奔你的设计团队,先来看看我们列出的色彩可用性设计的几项重要事项。

为了色盲用户的友好体验,你应该注意五点

首先,色盲到底是什么?

大多数色盲能和正常人一样看清楚东西,差别在于他们无法识别红色、绿色或蓝色光谱。这种缺陷是 X 染色体突变的结果(意味着女性更有可能是携带者而不是患者),主要有以下三种症状表现。

最常见的是红/绿色盲,这些患者会混淆所有含有红色或绿色部分的颜色。红色盲对红色光谱不敏感。绿色盲对绿色有相同的问题。例如,一个有红色盲的人会混淆蓝色和紫色,因为他们无法识别紫色中的红色部分。蓝色盲,作为第三种色觉缺失,出现的最少。他们无法识别蓝色或黄色光谱。

下图展示了彩虹在各类色盲眼中可能看起来的样子。

为了色盲用户的友好体验,你应该注意五点

所以,该如何提升色彩可用性?

你可能会想:“为什么我要费心去为如此小的用户群体设计?”一般来说,色盲患者觉得可取的好设计元素,往往在更广的领域也是好设计。所以,如果你的网站是精心设计的,它应该能够对所有用户都可用。

可用性设计并不意味着你需要妥协设计的整体美学。为了色盲用户的友好用户体验,你应该注意以下五点:

1. 同时使用色彩和符号

你不能仅依靠色彩来传达信息。比如某些类型的色盲用户可能很难,甚至不能看到常见的红色错误通知。解决方案之一就是在需要用户注意时同时使用色彩和符号。Facebook的表单填写和相应的错误通知就是一个很好的例子。

为了色盲用户的友好体验,你应该注意五点

有趣的事实:Facebook的标志和不怎么讨喜的蓝色配色是特意挑选的。因为马克·扎克伯格是红绿色盲,他对蓝色的识别是最好的。

2. 使用的颜色尽量少

你应该限制网站所使用的颜色。设计中的颜色越少,使用时的困惑越少。 简约设计不仅是永恒的审美趋势,也对色彩可用性设计奏效。

为了色盲用户的友好体验,你应该注意五点

3. 使用样式和纹理来显示对比

与其使用多种颜色,不如尝试对需要强调的元素使用不同的纹理。例如:色盲用户可能难以解释左侧的图表。这时,最好使用有对比的纹理。可以的话,尽量加上文字说明。

为了色盲用户的友好体验,你应该注意五点

4. 顾及颜色对比和色调对比

不要仅仅用黑色和白色作为唯一对比色,你应该尝试在设计中使用一系列清晰的颜色对比和色调对比。例如,Word Feud游戏中的色块使用的四种颜色,不管用户是否有色觉缺失,都能轻易识别。

为了色盲用户的友好体验,你应该注意五点

5. 避免糟糕的颜色组合

挑选颜色组合时,你要变得聪明点。因为不同的色盲症对人的影响不一样。很难确定哪些颜色在网页设计中是“安全”的。不管怎样,避免使用以下几个颜色组合,因为他们势必是色盲用户的噩梦:

  • 绿色和红色
  • 绿色和棕色
  • 蓝色和紫色
  • 绿色和蓝色
  • 亮绿色和黄色
  • 蓝色和灰色
  • 绿色和灰色
  • 绿色和黑色

注:你怎么知道你是色盲?

嗯…有些人很多年都不知道自己是色盲。因为除非有别人指出来,色盲症对生活的影响可能轻微得注意不到。下面的图像是一般用来测试色盲症的。试一试吧!(在文章底部你可以找到完整测试的链接。)

为了色盲用户的友好体验,你应该注意五点

如果还不确定…

  • 石原氏色盲测试:一个基于38个色板的测试。
  • 色盲检查:一个由 Colorblindor 创建的 Android 应用程序,可以在±60秒内测试你是否为色盲。
  • Coblis(色盲模拟器):你可以在这上传一张图片,然后看看在不同类型色盲的眼中会是什么样。
  • 3个移动应用:3个 Android 和 iOS 应用,专门为帮助色盲用户而开发。

结论

一般来说,用户体验设计师创建的网站应该对所有用户都能友好访问。可惜的是,没有为色盲用户设计的万全之策。我们可以将一些必要的用户体验设计原则谨记于心,或许有所帮助:

  • 不只依赖色彩来传达信息
  • 将颜色限制在2种或3种
  • 使用样式和纹理以示区分
  • 顾及颜色对比和色调对比
  • 避免糟糕的颜色组合

 

原作者团队:Usabilla

原文地址:https://medium.theuxblog.com/how-to-design-for-color-blindness-a6f083b08e12#.rloob4cv3

译者:老衲小子

译文地址:微信公众号【沪江UED】

原创文章,作者:Catherine,如若转载,请注明出处:https://www.iamue.com/23512/

(0)
CatherineCatherine
上一篇 2017-05-05 19:20
下一篇 2017-05-05 21:22

相关推荐

  • 非设计专业的学生,如何系统的学习交互设计

    数十万互联网从业者的共同关注!作者:青溪Joanna微信公众号:qingxizhaji(青溪札记)作者投稿早读课发表,转载请联系作者。曾经我也是一名非设计专业的学生,作为自动化专业的硕士希望自学做交互设计,有很长一段…

    2017-08-02
  • 静态码限额后,微信支付还能兼顾合规和用户体验吗?

    【新朋友】点击标题下方蓝色字“经济晚报”关注【老朋友】点击右上角,转发或分享本页面内容4月1日,央行关于静态码扫码支付限额500元的新规开始正式实施了,从这天开始,大家通过静态二维码支付的时候每天限额是五百块。你感觉到了不方便吗?新规一出,很多小伙伴们都产生了疑问:以后我扫码支付消费是要被“管制”了吗?如果每天的限额用完却还有扫码支付的需求咋办?新规如何配合?微信支付上线新产品体验针对用户的这些疑问,微信支付和支付宝这两大移动支付巨头给...

    2018-04-07
  • 双管齐下:同时设计 iOS 和 Android

    不管你是在家,在公司,还是在设计师工作室工作,互联网企业都会找你去给他们设计 App。为了满足所有顾客的需要,这些企业通常需要同时开发运行在 Android 和 iOS 设备上的 App。 在理想的情况下,我们希望能花上好…

    2016-01-06
  • FAB实践分析:设计中的悬浮按钮

    如果要在应用程序中使用FAB,则必须仔细考虑应用程序的设计,并将用户的可能操作归结为一个最突出的功能。正确使用FAB,最终会给用户带来惊人的帮助。为了促进操作,不要一味使用FAB!用户必须记住它的含义。FAB可以改善屏幕之间的转换

    2017-05-01
  • 交互小细节——信息层级展示规则

    信息层级展示规则是交互设计中的小细节。要分析信息的优先级,用户的核心行为;并通过位置、大小、距离、内容形式、表现方法来建立信息层级;设计过程和结束都要不断审视页面视觉流,看看用户浏览是否顺畅。作为设计师的你,注意到了吗?

    2017-05-20
  • 设计流程、交互设计进阶、空状态设计

    设计作品源于设计师的自我发现、情感和创造,在日常工作中我们加入字体、颜色、空间准则来让在我们感性的表达设计美学基础上更理性的表达设计思维;以上这些是众所周知的基本法则,是设计具备的基本能力;科学的、合理的、为用户设计才是设计师价值的体现。那么如何让我们的设计更理性?在长期跟一条产品线的工作过程中,我们会发现每天做着很多事情,不知道会不会有以下感觉:1.感觉离用户很远;2.感觉对用户数据的增长好像没有什么明显帮助。那么用户增长和设计有什么...

    2018-03-15
  • 网页重设计的7个常见误区与解决方案

    “如果所有都是重点,那么就不存在重点了。——Patrick Lencioni”“用户在手机上永远用不到这些内容。”

    2017-05-23
  • 设计理论:人物模型设计和目标设计

    在自然科学和社会科学中,模型通过有效的抽象来代表复杂的现象。好的模型强调所代表结构的显著特色关系,弱化不太重要的细枝末节。由于我们是为用户而设计的,因此重要的一点就是,要了解这些方面并将其视觉化:用户之间的关系、用户的期望、用户与社会及物理环境之间的关系,已经用户与我们所设计的产品之间的关系。

    2017-05-25
  • AxureUX信息化精美简历模板完整版正式发布

    01作品信息作品名称:AxureUX信息化精美简历模板完整版作品类型:模板类发布日期:2018-03-12最新版本:v1.0主要适用:其它软件版本:Axure 8.0文件大小:5.6MB作品编号:OTH002作品售价:¥69.00详细介绍及演示:http://www.axureux.com/home/ResumeTemplatePro.html复制以上链接在浏览器打开或点击文章底部阅读原文,建议在电脑上查看原型演示。02作品介绍本作品是...

    2018-03-12
  • 动画进度指示器的最佳实践:好的交互设计会提供反馈

    系统状态的可见性是用户交互设计最重要的原则之一。在使用系统时,用户想要感觉一切都在掌控之中,这意味着在任何特定时间下,他们想要知道并了解他们当前的处境,尤其是在系统正处于繁忙状态时。当系统在处理或者加载进程时,一个等待动画进度指示器是向用户展示系统状态最为常见的形式。

    2017-05-03