恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
色彩和体验的平衡:为色盲用户设计网站
0.0°
2017-07-27 自译外文 经验/观点 原作者: CanvasFlip 举报 16178 53 79 2

如何为色盲用户设计网站?本文作者与大家分享了5点小技巧。

Image title


色盲影响世界7%的人口。在浏览网页时,这种情况让色盲用户无法了解不断涌入的视频、图像和图表。


什么是色盲?

色盲不并意味着人们根本看不到任何颜色,或人们看到的一切都是灰色。它实际上是降低了人们辨别颜色的能力。


色盲科学

视维细胞是人眼中负责感知颜色的一种感光细胞。视维细胞有三种类型——视维细胞分别负责检测光谱中的红色,蓝色和绿色波长。当这些细胞有缺陷或完全不存在时,就会出现色觉问题。通常情况下,这些病症是从父母身上遗传,但也可以通过外伤,长时间接触紫外线,随着年龄的自然变性,糖尿病等因素的影响获得。


常见类型的色盲

两种最常见的色盲类型,绿色盲和红色盲是性别相关的特征,在男性中比女性更常见。绿色盲是最常见的,7%发生在男性中,只有0.5%的女性。色盲占整个人口的8%,这是巨大的且不能忽视的。


作为设计师,我们的责任是确保我们的设计为更广泛的受众提供色彩的可访问性和用户友好性。


1. 使用常用的颜色名称

对于有色觉缺陷的人来说,最令人讨厌的经历之一就是与产品颜色不相关的颜色。在这种情况下,说明书中提到的颜色名称常常有帮助。 但是,如果所提到的颜色是“黑紫色”、“淡红色”、“橄榄色”、“土色”,这些词有多少人了解呢?实际上在几个电子商务应用程序中我找到了这些颜色的名称。


Image title


通过对产品的描述,明确说明颜色名称,可以让色盲用户更容易做出决定。


话虽如此,好的网站和应用程序尽可能的普遍地保持颜色描述。“浅粉色”或“深蓝色”衬衫是描述产品颜色的更好方法。


Image title


2. 使用色板和标签的组合

另一个常见的问题是滤色镜未标记!以下是一个众所周知的电子商务网站的示例,其中包含了为标记的彩色滤镜。另一方面,我也反映了一个有红色弱视问题的用户体验网站的方式。


Image title


这个问题的另一种方法是列出过滤器中颜色的名称。


Image title


尽管这似乎是一个好主意,但重要的是要记住,不是所有访问该网站/应用程序的人都是同一类别。对于具有正常视力的用户,当他们看到过滤器中的颜色时,这是一个很好的体验。当客户只想尽可能快速顺利地查看搜索结果时,去除色板可能会减慢选择颜色的相互作用。


最佳解决方案包括色板和常用颜色标签的组合。WarbyParker网站的眼镜就是

一个很好的例子。


Image title


3. 避免在颜色的基础上传达信息

设计表单时的常见做法是以不同的颜色标记强制输入字段。如果用户尝试提交没有填写的必填字段,输入字段的边框将更改为红色,表示错误。但是,我们必须知道不是所有的用户都以同样的方式来体验颜色。


Image title


因此,在这种情况下显示一个错误符号,或者有一个支持错误调用的标签是非常重要的。


Image title


下面是几种表示形式的强制字段的方法:

1. 将所需字段标记为星号。

2. 更好的是,标记必填字段,标签为“必需”。

3. 尽可能地删除可选字段。


不仅仅是表单,提醒消息也是。我们往往倾向于将成功和失败的消息分别显示为绿色和红色。但使用诸如“成功”之类的前缀文本或图标可以快速轻松地阅读,如下所示:


Image title


4. 低对比度的设计正在困扰网络

低对比度的文本可能是时尚的,但它也是难以辨认且不可发现的,不仅是对颜色有偏差的用户,对于正常的视力用户而言都是不可接近的。相反,我们应该考虑更多可用的替代品。


Image title

低对比度的网页


“WCAG 2.0级AA要求正常文本的对比度为4.5:1,大文本的对比度为3:1(14点和大于或大于18点或更大)——WebAim颜色对比检查器


在低对比度项目中使用粗体文本增加可读性,避免使用非常薄的字体。阻止用户使用鼠标突出显示页面元素或更改默认高亮行为,不要使用任何JavaScript或CSS技术。许多视障人士利用突出显示作为增加对比度和辅助视觉焦点的快速技巧。


5. 让色盲用户体验你的设计

这是真的,如果你没有色觉缺陷,很难想象它是怎样开起来像色盲。这就是为我们自己构建内部工具的原因——CanvasFlip colourblind simulator。几个星期后,我们为全球设计师发布了它。这个想法是弥合设计师与色盲用户的经验之间的差距。


这是值得你检查自己的设计,抓住任何潜在的问题,并在设计开发之前进行最后检查。


Image title

尝试工具——CanvasFlip colourblind simulator模拟器


结论

实际上很容易让色盲用户访问我们的网站。我们只需要有意识地努力去思考和遵守指导方针。使用色盲模拟(colorblindness simulator )器来帮助决定页面上的颜色如何影响整体体验通常会有所帮助。


原文地址:https://uxplanet.org/designing-ecommerce-for-colourblind-users-1ffd648c9f91

原文作者:CanvasFlip

译者:SKYUI

更新:2017-07-27

收藏

53人已收藏

  • 20

    作品

  • 745

    粉丝

  • 1

    关注

  • 5个网页及移动端设计中最常用的英文字体
  • 7个案例解析:复选框 vs 切换开关
  • 高级搜索设计:如何提升用户体验?
  • 16个有效的UX写作规则
相关标签
设计经验分享ui

    猜你喜欢

      2017-07-27 自译外文 经验/观点 原作者: CanvasFlip 举报 16178 53 79 2

      色彩和体验的平衡:为色盲用户设计网站

      0.0°

      你确定要举报色彩和体验的平衡:为色盲用户设计网站

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2017年07月26日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      79
      53
      2

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录