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

世界范围内,每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

相关推荐

  • 【笔记干货】UCAN2017用户体验设计论坛

    作者: 阮小阮     忙忙碌碌一天这么晚还没睡是因为我在给大家编辑UCAN的干货哇~ 虽然我平常很懒,可我们真的只推干货哇~ 希望大家都能获取一些知识一些思考 互联网这么快,拥有平衡的能力真的很重要~!   董本…

    交互专题 2017-08-07
  • 【产品分析】微信拼手气红包的贪嗔痴

    春节期间火爆的“拼手气”红包,让用户疯狂点击拼手速网速,拼rp看金额,每一个环节都深深戳着用户的G点,高潮迭起。“拼手气”就是拼人品,那么,最佳手气者是不是有机可循呢?微信红包这样的设计目的在何处? Aaron毛…

    2015-03-05
  • 请记住,视觉设计远不止“好看”这么简单

    设计师和理发师其实有点像,理发师基本分为三种:一种是只会搞基础发型的,比如寸头、中规中矩的长发、老太太卷头等;一种是只会剪流行发型的(这种发型师还很容易 摇身一变成为造型大师,告诉你你应该改变,应该剪目前最流行的某款发型,但实际上可能是他只擅长这款发型);还有一种是最可遇不可求的,他根据你的脸型、 性格等,用最简单的手法量身设计发型,让顾客的气质度立刻得到提升。

    2017-06-03
  • 2015年新起来的APP新贵们,进来瞅瞅都是什么APP在“火”!

    一时兴起,统计2015年以来新发布的,或是从2015年开始快速崛起的,日活稳定在20万+的APP,一共找到了16款。以下数据为粗暴的估算,不准确很正常,不准确憋找我! ┃视频类 熊猫TV,视频直播平台,CEO王思聪,200万量…

    2016-04-08
  • Principle:交互动画实例

    Principle是一款交互原型设计软件,轻松让你的想法变成现实,支持将交互动画转换成视频或者GIF,分享给别人。 你的动画交互想法,比如设计更好的移动APP交互效果成为现实,用Principle轻松帮你实现。Principle的原…

    2016-01-28
  • Android和iOS平台交互方式的不同点

    本篇文章属于很初级的内容,之所以写下来,一是为了整理一下自己的思路,二是为了方便初学者们快速了解 Android和IOS在交互上的很多区别。可能有些地方不是完全正确,望多交流。

    2017-06-03
  • 窥探交互设计师成长之路指南!

    一部窥探交互设计师成长之路的实用指南!传授高效、靠谱的交互设计学习方法!IAMUE网站创始人倾力之作!

    2016-06-13
  • 无障碍的交互设计,需要做到这7点

    先从字面上来理解何为“无障碍”。生活中许多场所中,除了供给正常人使用的区域外,还有一些针对工作人员、特殊人员(残障人士、老弱病残、孕妇等)的无障碍通道/设施,比如:机场、地铁、厕所、展会等。无障碍设施/通道是能够兼容普通人员和特殊人员共同使用的,且相对来说使用起来更为便捷、直接、且省时省力。-交互中的无障碍需要考虑到哪两方面?-那么交互中的无障碍又有哪几层含义呢?从常规的使用人群来看,首先要满足普通人群使用。其次,当一个优秀产品具有一定...

    2018-03-31
  • B2B vs. B2C 网站:关键用户体验差异

    尽管B2B网站和B2C网站有很多相似的地方,但B2B的客户却有着截然不同的需求。

    2017-05-14
  • [自译]VR 设计实践

    在Media Lab的作者分享了他在本科项目中对VR设计实践的一些思考,阅读后能够帮助对虚拟现实中的体验设计建立一些基础的认识,其中对地形特征(terrain features)和标线(reticle)的交互解读让我感觉收获颇多,与…

    交互设计 2016-08-30