首页 网站搭建教程正文

17设计网-设计师如何做无障碍设计?

资讯畅通无阻,是指任何人在任何情况下都可以平等、便捷及可接触及利用资讯。由于因特网的覆盖范围越来越广,对于有身体限制的人群来说,通过因特网获取信息的迫切性越来越大,这就要求因特网产品进行信息无障碍的优化。它在我们国家的受益人群至少包括:残疾人口8500多万,60岁以上老人2亿多,数量巨大。首先要考虑到信息可访问性可以给产品带来更多的用户。

现在,智能手机已经掀起了一场无障碍辅助工具的革命,而站在这个关键点上的互联网设计师们,也将开始行动起来,首先从下面这些简单易行的事情入手,来优化无障碍环境。

论读屏幕

对视障者而言,通过听读屏语音,就可以获得您设计的界面信息。阅读软件就像是他们理解因特网世界的眼睛一样,其原理就是直接读取界面上的文字,如果没有 icon按钮的无障碍标记,阅读屏幕上的文字就会被读取到“无法发音”,视障人士就不能获得这些信息,自然就不能使用自己设计的功能。

办法如下:

必须为产品代码添加无障碍标签(Android: contentDescription; iOS: accessibilityLabel,可在相应的开发文档中轻松找到,可发送给您的合作研发同学)。装饰 icon可以隐藏标签不读取,提高屏幕阅读的效率。如果不建议不做处理也不加标签,那么用户听到的就是“无标签”,这会让用户觉得这里有什么重要信息无法阅读,从而感到不安。标记语义短而准确,尽可能使用动词。需要查看焦点顺序,以确保不会被错误的焦点顺序误导页面的意思。

而且,最好由设计者在语义上加以标注,因为设计者是对页面中的图形应用最了解的人。不要用“放大镜”或“searchBtn_123”来描述“搜索”,比如这样。

色彩方面

色彩可用于区分信息数据的类别和维度,还可帮助传达重要信息,如情绪。但是,全世界8%以上的男性和0.4%的女性都被色觉障碍所困扰。一般我们把这种人称为“色盲”,他们是典型的认为自己的肤色有问题的人。

颜色”的目标是“容易识别”,指的是网络产品的内容信息的颜色,对于任何人来说,都应该有足够高的辨识度和舒适感,我从四个方面来介绍。

1.较安全的色彩

下列人群:

设计配色时,设计者应随时自我检测,以避免明度相似的橙黄绿两种颜色,明度相似的红绿两种颜色,因为这样的配色必然会引起色盲用户的阅读困难。而且,在红绿色盲的眼睛里,红色也不是最亮最显眼的颜色。与此相反的是,红色在它们看来很深,而暗红色几乎接近黑色。这样,色盲人士就很难在文章中区分出暗红色的强调,从而忽略了关键信息(在设计时,可以使用这个插件来模拟色盲人士的眼睛: ColorOracle)。

不同文化:

由于颜色在不同国家的文化中代表着不同的含义,因此对国际使用者也有一定的阻碍。红色在西方文化中常被用来代表负面的倾向,而绿色则代表正面的倾向,而在东方文化中则相反。

特别群体:

对部分孤独症患者而言,高饱和高对比色,甚至仅仅是黄色,都会使他们感到不舒服和不安,因此,在孤独症康复中心里,过于对比刺激色不会出现。

此外,老年群体随着年龄的增长,晶状体变黄变浊,会选择性地吸收蓝光,从而导致老年人对蓝色的识别能力明显下降,如果您的主流用户是老年人,请尽量避免在关键按键上使用蓝色。

2.增强文字对比度

文字的对比度与可读性密切相关,它是衡量文字颜色与背景颜色之间的明度差。AA规范的文本对比度为:4.5:1,如果字号足够大(>18 pt,或粗体>14 pt),则标准可降至3:1。当符合4.5:1的标准使你的页面视觉看起来不那么美观时,尝试一些局部增强视觉效果的方法:

其它可读性要注意的是:尽量不要在图片上叠加文字,除非你能保证图片背景颜色单一,对比度足够大。

“Material Design”设计规范建议,需要一种淡色调,以确保上层文字的可读性;而不建议使用高度对比的文字,因为这会使部分视觉障碍者看到的文字变得模糊。

uisdc-xx-20201125-2.jpg

3.多种视觉变量

在数据可视化中,颜色是一种最常用的视觉变量。但对不能识别颜色的用户来说,如果颜色是惟一的提示信息,他们就不能理解你所传达的信息。那还有什么改进的办法?

不要把颜色作为唯一的视觉变量:除了颜色之外,我们还可以附加图标,纹理或文本以进行标注。

颜色盲态: Trello是一个工具产品,它提供了色盲态,当你标注信息时,可以根据不同的纹理开启或关闭色盲态,而不会影响非色盲态用户。

用明度饱和度来衡量:尽管色盲者的色相识别能力较弱,但他们对明度、饱和度非常敏感。用明度和饱和度来区分信息。举个例子:传统热力图习惯上用热高热低表示热热, Google Analaytics热图采用深蓝表示热高,浅蓝色表示热低,简单有效。

控制论

控制项可以是按钮、连结、输入方块或任何带有事件监听器的 HTML项目。控制项太小或彼此太近,都会对使用者造成不好的体验。

例如,那些不能用指尖精确定位的(患有震颤病)用户,或者由于年龄原因导致灵活性下降的老年用户,将很难点击过小的控制。

为使用户能够准确地选择控制项, Material Design建议至少使用48×48 dp, iOS设计系统将目标热区大小限制为44×44 pt,而 WCAG的 WEB规格则建议至少使用44×44 px。控制的外观上可以是24 x 24 px,但在所有边缘处都有一个额外的填充,这样控制就能达到44×44 px。过近的控件可能会被误点击伤,因此也建议控件之间的距离要足够大,以减少误触。对于 pc, Microsoft的建议是间距至少为8 px,而 Material Design建议的控件间距至少为8 dp。可以根据上述说明查看自己设计的控件。

有关文本

一、文本大小:

具有视觉障碍的用户可能会将字号调得过大。您需要确保您的设计在使用较大的字体时,不会出现内容溢出或字体混乱。在设计时,可以用超过2倍的字体来测试你的设计。

因特网早期设计的网页字体介于9-14 px之间,与20年前不同,现在浏览器的字体可以用于任何大小的设备,小到智能手表大到4 K屏幕,我们不能再用固定字体来设计产品。字体应像设计本身一样灵敏。举例来说,可以让使用者自订字号、行高或字距等,以达到舒适的阅读水平。

二、文字风格:

文本作为信息传递的重要载体,对很多用户而言,装饰性字体或草书字体更难阅读。而且使用过细,过小,斜体字和全大写文字,也会降低识别率。

有关动效

有效率的动画可以使页面充满活力,但是如果使用不当,动效的滥用不仅会分散用户的注意力,严重的话,对某些用户来说是致命的(临床上引起光敏性癫痫的一个诱因就是闪光图片的刺激)。

身为经验设计者,学习无障碍会让我们收获很多。现在所做的改进当然不是一劳永逸的,而是我们开始不断地和更广泛的用户进行交流。持续改善产品的可访问性,让产品更加友好,让美好的互联网世界更加平等,我们希望能够继续朝着这个目标前进。

版权声明

本文不代表任何人观点,不代表本站立场。
本文未经许可,可以免费转载。

评论