7-things-about-accessibility-1-1

可访问性(Accessibility)是用户体验设计中的重要一环,好的可访问性设计可以让各种用户更容易浏览和使用(电脑、手机、网页、UI等等),使得有障碍的用户更便捷地感知、理解、互动。理想状态下,设计师和开发者能充分设计,让产品的可访问性达到完美的境界,但是实际状况下,即使添加了如此多的可访问性设计,残疾人和行动障碍者依然用不好手机、电脑等产品,甚至有些“设计”还会人为制造障碍。

今天,我们来探讨一下可访问性设计的一些基本原则吧。当我们在探讨可访问性设计之前,请确保你的产品至少是已经“被设计好了的”,也就是说它至少得符合《Web协会可访问性指南设计规范2.0》《inSection 508》的基本要求,经过充分的开发和测试。

OK,我们开始进入主题了~

1、可访问性设计并非创新的障碍

要让产品可访问性更好,并不是让你做一个丑陋、沉闷而杂乱无章的产品。当你在设计的时候,现有的可访问性设计规范或者“推荐规范”的引入,确实会提供一定的约束,但是它们本身并不只是一种限制,它还是你设计和探索的新方向,毕竟,你设计的最终目标是为用户提供更好的产品——好用好看。

当我们在阅读这些设计规范的时候,请务必记住,这些产品并不只是为我们的同行或者设计同好来设计的,它所涵盖的用户各不相同。

0-bhC1d9AMLq7EA4bv

作为设计师的你,你可以为你的同行和同好设计出极具共鸣的产品,但是从更广泛意义上来说,他们在你产品用户的总量中,占据的比例并不高吧?

0-Y8EzNegFamAO5_zV

为那些真正同你的产品进行互动的各色用户来设计吧。为每一个人设计。你的用户可能是盲人,可能是色盲,视力不佳者,可能是听力障碍者,可能是有行动障碍的老人,可能是有认知障碍的用户。你的用户可能很年轻,也可能很老,他们可能是普通用户,也可能是重度依赖者,也可能是对于用户体验有极高要求的挑剔用户。

拥抱可访问性设计准则吧,如果你想创造一个令人惊艳的产品,那么这是你的必经之路。

2、不要让色彩成为你唯一的视觉传达手段

视觉障碍者所存在的问题各不相同,色盲(男性1/12,女性1/200)、近视(1/30)以及失明(1/188)的用户都会成为你的可访问性设计所照顾的对象。

借助色彩来呈现高亮和互补是显而易见的设计方法。

那么你看看下面灰阶的界面中,有几项填错了?很多人都会人为只有验证码填错了,因为只有验证码的字段有个小三角形,者表明它是有问题的。接下来整屏的灰色也没法让你判断出其他的问题。

0-d3Y0b1mb7p0P10iO

但是当你看到彩色的界面的时候就知道,实际状况并不是这样。设计师使用红色来标识错误的字段,四个字段其实都是错的,对于色盲的用户,这样设计的可访问性简直是灾难性的。实际上,你可以使用粗边框、粗体文字提醒、下划线、斜体来呈现错误状态,而不止是色彩。

0-gjAl4cxEGBazbYNY

3、确保文字和背景有充分的对比

根据WCAG的规定,文本和所处的背景的对比度至少为4.5:1。这套规范主要是要确保弱视者、色盲看清楚屏幕上显示的文字内容。这也就意味着,如果你的文字大小为24px,19px粗体的时候,文字的灰度最少也得是#959595.

1-rlBm6vidbbXu26efnYZWqA

#959595 字体在白色背景上的效果。

对于最小的字体,能用的灰色最低也得到#767676,如果你的背景本身就是灰色的,那么文字的用色还得更沉才行。

1-rOaDGp5GtLG8Fn79pa34Gg

#767676 字体在白色背景上的效果。

有个名为Color Safe的工具,能够确保你的设计用色安全。而WebAIM’s Color Contrast Checker也能帮你进行色彩对比度的检查,确保你选对了色彩。

LOGO和被禁用的元素则不受此标准约束。这里面包括了处于禁用状态的按钮或者菜单选项。不过占位符或者幽灵按钮的内容则依然在规定约束范畴内。

接下来的案例我们看的是著名博客平台Medium,例子中仅有“M” 这个Logo的对比度符合了标准,其他部分的灰度则很难让人看清,更何况是视觉障碍者。

0-tvvQcCsqdHROnBzK

下一个案例是BBC的网站,他们使用不同的色彩来强化对比,很明显他们的网站在对比度上做过很深的功课,因为他们的灰色最浅的用的就是#767676。

0-Y0AhWKKQ3mbgUzWs

下面我还想说说Salesforce。很荣幸我能同Salesforce设计系统团队一同工作,他们刚刚完成了Salesforce1移动客户端的设计工作。

1-o6kxU1Gm4SaOPpTmhPOg0A

这个案例中很明显,他们采用了高对比度的色彩组合。如果你没有深入了解过他们,很难想象这些设计师对于高对比度的色彩组合有多么执着的追求。不过我想你应该也已经明白控制对比度的好处,你的界面会更加优秀。

成为交互设计师的必读好文!

阿里巴巴资深交互设计师经验!
《推荐!交互设计那些事儿(一)》

网易设计总监亲历分享!
《网易美女设计主管!交互设计菜鸟如何入门?》

交互设计师自学指南!
《交互设计师修炼指南!教你从零开始成为优秀交互设计师》

原文地址:medium
优设译者:@陈子木

「子木说」

就像我们之前在探讨原型设计的时候碰到的问题一样,国内许多设计团队压根就没经历过原型设计这个环节,线框图出来直接上视觉稿。可访问性其实也是,许多时候压根没考虑这个问题。也许做前端的同学多少还在可用性(Usability)、可访问性(Accessibility)和可维护性(Maintainability)三件事情上有所了解。

在《Web Content Accessibility Guidelines 1.0(Web内容可访问性指南)》里,对可访问性的描述是:Web内容对于残障用户的可阅读和可理解性。同时指南里还特别指明:提高可访问性也能让普通用户更容易理解Web内容。

本文由优设网原创翻译,请尊重版权和译者成果,转摘请附上优设链接,违者必究。谢谢各位编辑同仁配合。

【优设网 原创文章 投稿邮箱:2650232288@qq.com】

================关于优设网================
“优设网uisdc.com“是国内人气最高的网页设计师学习平台,专注分享网页设计、无线端设计以及PS教程。
【特色推荐】
设计师需要读的100本书:史上最全的设计师图书导航:http://hao.uisdc.com/book/
设计微博:拥有粉丝量94万的人气微博@优秀网页设计 ,欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航:全球顶尖设计网站推荐,设计师必备导航:http://hao.uisdc.com
———————————————————–
想在手机上、被窝里获取设计教程、经验分享和各种意想不到的”福利”吗?
添加 优秀网页设计 微信号:【youshege】优设哥的全拼
您也可以通过扫描下方二维码快速添加:

sdcweixin

点赞
收藏 1

发表评论 快来秀出你的观点

还可以输入 800 个字
 
 
载入中....
相关推荐
评论 收藏