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

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

相关推荐

  • UED从繁到简三个阶段

    UE设计一般需要经过三个阶段。一个交互设计师,从学徒到出师,不说100%,那也有99%的人走过这是哪个阶段。如果没有,说明他已经转行做自己的安利去了,专门在网上发些如何教人做交互啊。什么是交互设计师啊等等忽悠别人的文章。(就是再说我)我们来详细看一下这三个阶段:第一阶段,多数都是刚入职人生第一份工作或者是刚踏上这段交互征程的新手。对交互设计其实是一知半解的。这一阶段谈论的什么用户体验啊,流程体验啊,几乎可以视为是夸口奇谈。我认为在这个阶...

    2018-03-27
  • 关于“下一步 ”的设计思考

    用户在使用 App的过程中,总会进入各种页面,并且对于页面之间的跳转, “<” 返回或者物理键均可回溯到上一级页面。但是进入下一级页面的入口,可以是各种操作按钮、缩略图、 tab或者导航切换,在工具性产品中,…

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

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

    2016-06-13
  • 用户体验双语术语,附阿里招聘广场舞达人资深用研专员

    这两天朋友圈被一则特殊的招聘刷屏了。先看看关键词:年薪40万,60+,广场舞 KOL(意见领袖)优先!一时间,网友沸腾了。这则招聘发布于1月16日,来自阿里巴巴集团社会招聘网站。从招聘网页上看,阿里对此职位的描述是“淘宝资深用研专员”,全称“淘宝资深用户研究专员”。记者推算了下,大致为阿里P序列中的P6等级。岗位给出的薪水待遇还不低,年薪范围是35万~40万。感兴趣的小伙伴可以转给符合要求的人士哦!点击阅读原文就可以看到这则招聘了。今天...

    2018-01-30
  • 艺计回忆录 | 交互求职

    前几天和胡老板聊起我们这一代人在北上广深踟蹰前行即将奔三时的焦虑,不可避免地说到了职业规划这个话题。 对我们这些刚工作但残留一张学生脸的职场小腊肉来说,现状基本是满意的,前路虽不暗淡却也少不得早早谋划…

    2017-03-07
  • 常用中后台交互设计控件使用场景与规范总结

    最近刚完成平台安畅云 2.0 的改版设计,平台模块很多,经常存在很多类似的页面和组件,若不制定统一的规范和控件,则会导致很多重复的工作,大大降低产品的设计效率;同时,平台的一致性也得不到保障。所以,我们视觉、交互、前端的小伙伴们针对我们踩过的坑,大家认真总结和提炼出一个符合公司定位的设计规范,统一公司项目的前端 UI 设计,规避不必要的设计差异和实现成本,实现设计和前端资源的效率最大化。

    2017-05-02
  • 用户体验设计师必须知道的52个科技术语

    原文链接:https://uxplanet.org/60-tech-terms-you-need-to-know-as-a-ux-designer-a01166074ae1通俗易懂的A-Z科技术语列表在刚开始用户体验设计师的工作时,我如同离了水的鱼一样。我所知道的科技术语很贫乏。在会议中我总是能听见这些词汇,但是完全不知道是什么意思。然后我回到自己的办公桌前,偷偷摸摸的开始查我刚才听到的是什么,并希望没有人发现!一段时间后,我发现很多对...

    2018-04-09
  • 2016年最值得关注的移动端APP设计趋势

    不论移动端网页和APP之间有着怎样的争论,移动端APP的快速发展都是不争的事实,各种客户端的开发和接入已经成为常态。用户对于自己喜欢的品牌和服务,总期待官方能推出客户端,也正是在这种期待和需求之下,催生出越来越多的APP。

    2017-05-30
  • 交互设计基础 | 移动APP中反馈提示的设计方法与实例

    给用户及时、恰当的反馈,是交互设计非常重要的一项原则。由搜狐新闻客户端团队撰写的《设计之下》一书中,对操作反馈从形式、内容、位置几个方面做了非常详细的总结,满满干货。今天@青溪Joanna 这篇读书笔记…

    2017-07-31
  • 梦想成为“全栈设计师”的你,可能需要这份视觉设计知识体系规划书

    此文主要适读人群:梦想成为“全栈设计师”的你(偏向移动端产品)!当然设计都是相通的,即使你的职位是产品设计、交互设计、网页设计、平面设计也都不妨一看,相信你也可以有所收获!1、对app基础控件的认知
    2、字体
    3、配色
    4、图标设计
    5、标注与切图规范
    6、排版的基础原则
    7、简单的动效设计
    8、走察规范
    9、交互常识
    10、项目文件管理
    11、个人素材、资源库
    12、开发常识
    13、数据分析能力
    14、产品常识
    15、用研常识

    2017-05-10