视觉无障碍在APP界面设计中的应用

汪大丁

（武汉理工大学 艺术与设计学院，武汉 430070）

引言

无障碍设计的普适性原则是其所特有，是其他设计理念所无法企及的存在，正因如此，在我们的日常生活中，对于无障碍设计的关注度变得越来越高。视障者作为无障碍设计的核心人群，满足视障者在APP使用中的需求，不仅仅是为社会做贡献，也是为APP在极端环境下的使用考虑更佳的解决方案，视觉无障碍作为无障碍设计中一个最重要的组成部分，是APP界面设计中不可或缺的元素。因此，在当前的APP界面设计中，设计师有必要对用户在APP的不同体验以及需求进行分析，总结视觉无障碍设计的特性和作用，探寻具体有效的应用形式和应用方法。

一、视觉无障碍概况

（一）视觉无障碍设计

作为联合国提出的新主张，无障碍设计这个概念的名称在1974年被首次提出①。为达到“无障碍”的美好目标，它不仅专注于对一切为人所用的环境与物体进行设计，致力于对人类的动作反应、行为意识进行研究，还在为清除那些让用户感到困扰的交互操作以及界面设计提供指导。尽管它不能做到真正意义上的平等，也不能使每一个人都满意，但是它的设计理念是向这个方向发展的。

在WCAG 2.0②（Web Content Accessibility Guideline）Web内容无障碍指南中，将产品界面设计中遇到的主要障碍类型划分为了视力障碍（Visual impairments）、听力障碍（Hearing impairments）、运动障碍（Motor impairments）和智力障碍（Intellectual disabilities），人类是拥有视觉、听觉、触觉等诸多感知“通道”的整合体。其中，视觉无障碍是一个可以面向所有公众的视觉设计系统，该系统的最终目标是创建一个无障碍的可视环境，使信息尽可能准确地传达给公众。

（二）视觉障碍人群分类

视觉障碍人群主要来自于以下四个方面：视觉敏锐度下降的人群、对比灵敏度下降的人群、色彩的感知度发生损坏的人群以及有效视野改变的人群。用户视觉的敏锐度下降即人眼能够分辨物体细节的能力下降，例如近视、远视或白内障会导致用户视觉敏锐度下降。在视觉敏锐度较弱的普通用户眼里，图像的细节会变得模糊，只有较大的图像轮廓才能让他们得以正确辨识，如图1中A；对比的灵敏度也就是眼睛在前景色和较弱的背景色之间分辨明亮度的能力。对比灵敏度较低的用户看到的图像会呈现透过阳光或沙尘看到的样子，蒙了一层厚厚的灰色，如图1中B；而对于色彩的感知度即对于色相的理解程度，色弱或者全色盲的感知度下降是指眼睛在辨色过程中有环节出了问题，辨别颜色的能力发生了障碍。而其中色盲群体的问题还可以细分，色盲以红绿色盲较为常见，色盲对于人群的感知度可以大致分为红色盲、绿色盲、蓝色盲和全色盲，如图1中C；有效的视野灵敏度发生改变由视网膜的病变导致。视野消失可能发生在视野中部（如青光眼），也有可能是发生在视野的周边（如急性糖尿病或白内障引起的急性视网膜病变），他们能够看到的物体图像是损坏的，如图1中D。除了色彩感知度损坏对于普通人来说为随机变量以外，视觉敏锐度下降、对比灵敏度下降、有效视野改变都为固定变量，时常在各年龄段的人群中出现，APP为当代人不可或缺的日用产品，解决消费者在使用中的视觉障碍问题是当代设计研究人员的当务之急。（图1）

图1 视觉障碍人群模拟视图

二、APP界面设计中视觉无障碍的应用

（一）视觉无障碍应用于APP界面设计中的必要性

我们每天都会在使用APP的时候频繁地接触到验证码，验证码作为APP校验身份的首要工具，往往在入口处就给有视力障碍的人群带来了不好的体验，视障者往往在入口处就失去了正常的使用资格，而常用的读屏软件也不能解决验证码图片的不清晰和可读性差等问题。（图2）

图2 校验身份的验证码样式图

除此之外，作为当代互联网行业最常见的营销手段——红包，采用了传统的深入人心的黄红配色，但在红绿色盲的眼中，红色近似于灰色和黄灰色，这使得有视觉障碍的人群在使用这项活动时体验感极差，甚至连最基本的文字信息的可视性都会受到影响。（图3）

图3 红包界面的色盲模拟视图

大型的手机硬件厂商一般都会因为安卓完全开源的技术特点来内置自己的软件，为了满足系统的精简与流畅，厂商往往直接删除掉安卓系统里内置的无障碍操作系统服务，这样做虽然满足了绝大部分安卓手机目标群体的需求，但也误伤了小部分的弱势群体的利益，使得有视觉障碍的人群拿到了一个无法很好地使用的“阉割”手机。

综上所述，虽然现有产品在开发中会出现迎合商业价值而做出妥协放弃无障碍设计的情况，但笔者认为，在现如今这样供大于求，消费品泛滥的时代，将消费者进行详细划分后，仍然可以在一些小的方面找到切入点，在APP的界面设计中考虑视觉无障碍，不仅为视障者解决了实际的困难，也使得普通用户能够拥有更好的使用体验。

（二）视觉无障碍应用于APP界面设计中的方式

1.提高产品对比度

根据2018年6月5日，W3C的可访问性指南工作组（Accessibility Guidelines Working Group，AG WG）发布的Web内容可访问性指南（Web Content Accessibility Guidelines，WCAG，2.1）中的正式推荐标准③，文字和背景色的对比度至少是4.5∶1；如果是大于等于24 px/ 19 px bold 的文字，对比度至少是3∶1。这项规范可以帮助视障用户更好地使用互联网产品。（图4）

图4 web应用程序的推荐对比度

使用满足对比度标准的颜色，不仅不会影响产品的美观，而且可以提升产品的无障碍性。以Google Chrome为例，新的配色方案符合WCAG 2.1规范，有足够高的对比度。所有的设计元素，都能最大程度地满足WCAG 2.1 AAA 标准，在明暗两种背景下的配色，几乎都满足 WCAG 2.1 AAA 标准（color contrast ratio >4.5）。此外，Google 在深浅背景上使用的颜色，都不是直接套用的标准色，而是根据不同背景调整后的颜色。而即使是使用标准色，Google也尽量使之和白背景的对比度满足AA 标准（黄色、橙色例外）。

2.图形结合颜色

在界面设计时，不能只依靠颜色传达诸如状态指示、视觉控件、实时响应等信息。如果只用颜色进行区分，在一定程度上会造成用户的不方便、甚至不能分辨图像中颜色的区别。不同视障者看到的画面是不同的，所以同时使用多种视觉线索传达重要信息是很必要的，颜色的使用只是作为强调或补充已经能看明白的信息。如图5所示，在登陆入口中，视力正常的用户能轻易分清邮箱地址是错误状态，但色盲用户（绿色色盲）就完全看不出。解决办法有很多种，比如采用图形结合颜色的方式：在登陆入口的优化版本上，除了使用颜色区分的形式以外，还可以将错误状态的形状改为菱形，以区别于正确状态下的圆形形状，加上“请输入正确的邮箱地址”之类的提示性文字信息，来表明错误状态。（图5）

图5 登陆入口视觉无障碍优化视图

3.不同元素做明确的区分

表单输入框的形式有很多，现代风格的表单设计往往倾向于极简主义，抛弃了传统表单的基本属性，例如清晰的边框、明显的标签，这都大大降低了用户的使用体验。传统输入框样式界限明晰标签清楚，中间可填充颜色。输入框有明确的边界，这对用户的输入特别是有视觉障碍的用户来说十分重要。清晰的边框，可以让用户明确知道点击目标的位置和大小。如果没有清晰的边框，视障者可能很难找到输入框的位置确定输入框的面积，从而在使用时变得异常困难。（图6）

图6 表单视觉无障碍优化视图

4.增加提示信息

文本提示能时刻告诉用户输入框的目的，但是常用的视觉设计手法会出现在文本框中输入占位字符这样的形式，这样的处理手法实际上是不好的，用户在实际操作时，往往因为输入内容将占位字符抵消掉，而使用户忘记输入的目的，如果采用在文本框外增加文本提示的视觉设计，当用户在输入内容的时候就可以时刻提醒用户自己在输入些什么。可以更好地做到视觉无障碍设计，满足各种用户的需求。（图7）

图7 文本提示信息无障碍优化视图

三、结语

（一）视障用户仍然是产品销售的目标用户

世界上约有4%的人口视力低下，0.6%视盲。这些用户需要借助屏幕阅读器/盲文阅读器的帮助来操作手机。7～12% 的男性有不同形式的色觉缺陷（如色盲），他们难以区分某些特定颜色组合。低视力状况随着年龄的增长而增加，50岁以上的人中一半以上有一定程度的低视力状况。全球增长最快的人群是60岁以上的人，过了40岁以后大多数人都需要老花镜才能清楚地看到小物体或文字。如果能将视觉无障碍很好地落实在APP界面设计中，那么全世界将有10%的人从中获益。此外，视觉无障碍也不仅仅是出于人道主义方面的考量，它产生的商业效益仍然十分可观。

（二）视觉无障碍可以保证APP在极端情况下仍可以使用

当代的设计有很多各方面都很不错的产品，例如苹果公司的系列产品，但并不是每个人都有机会去使用它，现实中的大多数人，用的仍然是老旧、性能差的手机。大多数的人会在强烈的阳光下、在行驶的交通工具上以及在昏暗的环境中使用各种APP。如果没有视觉无障碍的设计意识，APP上线后很可能在真实的使用场景中无法正常使用。所以为了让使用条件不是很好的用户仍然能正常使用APP，也为了让更多视障者能更好地操作APP，将视觉无障碍应用到APP界面设计中，是一件非常有必要的事。■

注释：

①李斌，万莉君.从无障碍设计迈向通用设计[J].包装工程，2007，28（8）：186-188，225.

② 张昆，主编.信息无障碍 提升用户体验的另一种视角[M].北京：清华大学出版社，2018.

③万维网联盟（中国）.Web内容可访问性指南[EB/OL].（2018-06-05）http://www.chinaw3c.org/archives/2145/.