涨姿势! 对于可访问性设计师必知的7件事(上) - 优设-UISDC

涨姿势! 对于可访问性设计师必知的7件事(上)

2015/04/20 9168评论区

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

优设大课堂

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:https://www.uisdc.com/7-things-about-accessibility-1

发表评论 加载中....

评论加载中....

uisdc

评论区都快饿瘪了,看看我期盼的小眼神...

sketch 优设大课堂 转场动效 设计师 扁平化设计 交互设计师 界面设计 排版布局 职场 平面设计 设计师专访 素材下载 视觉设计 设计流程 配色 web前端开发 用户体验设计 AI教程 设计理论 海报设计 字体下载 神器下载 设计规范 设计趋势 psd下载 动效设计 图标设计 产品设计 logo设计 ICON 神器推荐 职场规划 App设计 字体设计 酷站推荐 交互设计 ui设计 设计师职场 优秀网页设计 用户体验 ps技巧 酷站 PS教程 网页设计 经验分享
wechat

优设官方微信

50万设计师关注

微信号:youshege

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里