深圳网站建设

案例
  • 案例
  • 新闻
最新消息
企业品牌数字化知识分享

提升网站用户体验之色盲用户体验设计技巧

2020-08-20(103)次浏览

根据互联网部分数据显示,4.5%的网站使用用户是色盲,如果你的网站受众是以男性为主,那么这个数据可能高达8%。在进行网页和UI设计的过程中,色盲人群的实际状况很容易被设计师所忽略,毕竟绝大多数的设计师本身并非色盲。所以,应当如何在设计上兼顾到色盲以及色弱的用户群体呢?


今天的文章在之前的基础上,总结出了13条实用可行的建议,提升色盲用户的浏览体验。当然,这样的设计对于普通用户而言,同样非常有效果。


1、文本的可读性

为了确保文本的可读性,应当根据可访问原则来选择背景的配色和文本的配色以及尺寸:
“WCAG 2.0 AA 要求正文文本的对比度达到4.5:1,而标题文本达到3:1。(正文粗体14pt+,标题18pt+)——WebAim color contrast checker ”

2、文字和图片的叠加
图文混排中,文字和图片的叠加通常会相对更加棘手一些,因为在很多情况下,要保证文本和图片之间有明显的对比度并不是那么容易。
降低背景的透明度,或者增加蒙板,让文字更易于识别。
当然,你还可以给文本换个更醒目的色彩,或者增加阴影来提升对比度。


3、取色与说明
对于普通用户而言也是非常实用而贴心的,比如黑色和海军蓝即使是普通用户在屏幕上并不是那么好分辨的,加个标签能更好的分辨。

4、给图片附上有用的描述


5、链接识别
网页链接最好是能够不通过色彩就可以识别出来。如果一个全色盲用户(完全无法分辨色彩)打开 UK GDS (英国政府数字服务)网站,那么他会看到下面的界面。这个情况下,网站中用色彩来区分的链接他们就全然看不到了。


6、配色
现实世界中,色彩往往是不可控的:红色的苹果旁边,可能会有一堆绿色的树叶。但是在网页中则不然,设计师通常都有着足够的权限来控制好这些问题。


7、表单占位符
在网页表单设计中同样存在问题,苹果官网创建Apple ID的页面表单当中,每个字段都有相应的占位符,但是占位符的对比度通常不够高,弱视的用户很难分辨。在这种情况下,字段的标签说明就很重要了,然而这个表单又没有,这就非常尴尬了。

但是,增加占位符的对比度并不是合理的解决方案,因为占位符必须同用户后续输入的文本清晰的区分开。


8、首选按钮
通常界面中的首选按钮会用更显眼的色彩来强调,Argo 的公司登录界面就是这么设计的。但是Argo 这样的设计仅仅是通过色彩来区分,对于色盲用户而言可能会造成困扰。


9、提示信息
通常成功和失败两类信息都是通过绿色和红色来进行区分的。然而这两种色彩又正好让色盲用户很难区分,这样一来,他们压根就无法区分信息的对错与否。不过,如果你简单的增加一个“Success”的文本说明,或者使用相应的图标来说明,用户就可以更加直观的了解信息了。


10、必须填写的表单字段
通常必须填写的表单字段会用色彩(比如红色)来进行区分,这也使得有一部分用户会无法分辨。


部分部分内容源自互联网,如有侵权请及时联系处理!

本文地址:https://www.grwy.net/wangzhanjianshe/24-350.html

立即咨询 联系我们

立即与国人项目顾问通话0755-23081469

提供您的电话号码,国人项目顾问将致电联系您。
等待时间:5分钟以内

信息保护中请放心填写

预约成功

请保持手机畅通,我们的专业顾问将在5分钟内联系您,感谢您的支持!