不要仅为85%的用户设计:关注无障碍设计

863 阅读16分钟

​点击关注异步图书,置顶公众号

每天与你分享 IT好书 技术干货 职场知识​

​作为设计师,我们更倾向于设计是以解决问题为基础的。尽管我们会因为博物馆没有规划轮椅坡道而毫不犹豫地抗议,但是对界面上的一些明显缺陷却视而不见,尤其是糟糕的视觉设计,可能会成为良好用户体验的障碍。尽管一些人长期以来一直致力于帮助残疾人用户适应这种情况,但我们已经达成共识,广大用户期待针对用户需求进行优化的产品。

世界卫生组织(WHO)统计,全球人口中视力受损的为4%,弱视为4%,盲人为0.6%。 如果你的产品忽视了无障碍设计,将有超过5亿人无法使用你的产品。 2017年,无障碍环境迎来了关键的转折点。这部分归功于诉讼-自2015年以来,已有超过240家美国企业因为网站的可访问性被起诉(华尔街日报,付费专区),多元化和包容性已成为许多大公司优先考虑的事情。如果公司希望产品为广泛的受众提供服务,那么作为一名设计师,你应该关心你的用户,在设计中有同理心和人性化。

可视化界面是深入无障碍设计的一个切入点。 本文中,我们将讨论一些最常见的视觉障碍(尤其是色盲),着重讨论如何微调工作流程和产品界面,以保证所有用户都能正常使用。

1. 无障碍设计影响所有用户

一个无障碍的产品不仅仅造福于8.6%的有视觉障碍的用户。许多网站和应用程序过于复杂,每个人都会或多或少地遇到一些界面问题:当我们疲惫的时候;当我们笨拙地尝试边走路边阅读手机信息的时候;当我们晚上眯着眼睛看屏幕的时候;当我们一手拿着购物篮,一手拿着手机的时候。

即使是具有标准视力的大部分人对色彩也有不同的感知方式,所以,无障碍性不仅仅关乎视力受损的人群。 每个人都有身体和精神上的局限,我们只需在工作中想得更周到一些就可以有效地帮助他们。然而无障碍设计有时意味着在最佳实践和无障碍性之间寻求平衡,创造一个两者兼顾的产品。

2. 视觉障碍如何影响体验

为了创造一个无障碍的产品,我们首先需要了解视力受损的人如何看事物。

根据世界卫生组织(WHO)统计,屈光不正(近视、远视、散光和老视)占视力受损总人数的43%,白内障占33%,青光眼占2%,仅色盲一项就占全球总人数的4.5%,严重影响了用户对设计的体验。

让我们来看看这些问题是如何体现的,如图1所示。

​图1 对某些色盲用户而言,红绿色的用户界面信息传达不佳

主要的色盲类型有以下3种。
(1)单色视觉(全色盲)
虽然并不常见,但是全色盲的人看不到任何颜色。例如,那些只依靠细微颜色渐变来区分元素的界面的人,对于他们来说是非常难以识别的,操作按钮可能都很难找到。

(2)双色视觉(双色视觉)
对于只能看见两种颜色的人来说,色彩缤纷的调色板看上去是由同一种颜色的不同色调组成的。 如果APP通过颜色来表示不同的标签或频道,那么,这类用户不一定能够从该设计中受益。

(3)异常三色视觉(色觉异常)
色觉异常的人,是指眼睛里3种视锥细胞中的一种出现了不同程度的损伤。色觉异常涵盖的范围很广,轻者可能色觉接近正常,严重的话也可能是双色视觉。在你的logo或界面设计中,如果颜色是主要因素,那么有异常三色视觉的用户可能会欣赏不了,尤其是当你的按钮和其他界面元素用了相同的字体和图标时,用户体验会更差。

问题的关键是你不能假设用户都会看到同样的事物。 那么,我们如何优化设计来满足每个人的体验呢?

3. 颜色只是个工具,并非万能钥匙

颜色不仅在很大程度上决定了界面外观,而且在组织内容、定义层次结构、传达界面行为和流程中也起到了重要作用。 这是一个强大的设计工具,但为了有效地使用它,你需要了解其功能和限制。下面我们来讨论一些关键的规则。

• 在选择和使用颜色时,应考虑色盲用户,我们在后面的内容中会展示。
• 避免仅用颜色来传达重要信息——使用图标,最好是文本来阐释颜色信息。
• 确保文字链接从周围的内容中脱颖而出。

由于视觉障碍用户最常见的困难是识别颜色的特定色调,因此应该更多地利用对比度来区分元素,使其清晰易读,如图2所示。

​图2 深色和浅色在一起的对比度较高

图3为高对比度颜色提供了基本的指南。下半部分的深色与上半部分的浅色形成鲜明对比,避免使用下半部分的较浅颜色和上半部分的较深颜色的对比。

​图3 深色和浅色提供强烈的对比,而两种深色搭配会混在一起

如果色环中的邻近色在亮度上没有差别,那么请避免使用两者的对比色,如图4所示。

​图4 互补色对比强烈,而邻近色对比差异较小

不要单靠颜色来传达信息。缺乏对颜色的描述可能会误导用户,耐克的搜索栏就是一个例子,如图5所示。应该在颜色板上添加颜色名来帮助用户理解颜色,用户就无需一遍遍地使用鼠标悬停来确认自己选对了颜色。

图5 颜色板可能会让网上购物的顾客感到困惑

避免单独使用颜色来指示用户如何操作或者要传达的信息,而是将颜色作为用户的辅助信息。

你在设计上使用的颜色越多,混淆色调的概率就越大。因此要限制调色板。下面的15色调色板为常见的色盲类型提供了良好的辨别方案。患有第三色盲的人不能区分如图6中的标有圆点(●)的颜色搭配以及标有三角形(◥)的颜色搭配。

​图6 色盲人群无法区分某些颜色

使用纹理和图案来强化对比。例如,色盲用户可能很难识别图形和图表。在这种情况下,可以使用图案来增强对比,可能的话,也可以直接使用文字说明。当然,是否用不同颜色还取决于你所显示的数据系列,如图7所示。

​图7 纹理可以更好地区分颜色

按钮的目的是引起用户注意并直接操作,在设计按钮时请避免使用容易给色盲用户造成混淆的颜色组合(如红色和绿色,蓝色和黄色)。

此外,请确保这些元素包含清晰可见的文字或图标,使目标明确,如图8所示。

​图8 操作按钮更不应该通过容易混淆的颜色组合来误导用户

4. 创建无障碍的UI设计

将你的设计去色处理,是一个很好的功能性测试。如果完全依赖于颜色的界面,在去色之后逻辑上的问题会被放大,如图9所示。例如,只用颜色的话,去色后界面上各元素的易用性可能会很差,但如果使用形状、颜色和对比来区分关键元素,界面就会非常清晰。

​图9 界面去色可以暴露设计的缺陷

如果使用细微的阴影来创造对比度,就可以保持品牌颜色的一致性和品牌辨识度,如图10所示。

​图10 想要保持品牌颜色的一致性,不妨尝试用阴影来提升对比度

与其把力气花在设计花哨不切实际的界面上,不如设计美观功能实用的用户界面。用不同的颜色来标识悬停(用于非触屏设备)、点击、激活和错误状态,并用图标来辅助颜色和文本,使用标准的组件或者常规的设计样式可以帮我们做到这些。图11是一个不切实际的UI示例,去色后的界面只剩下一连串文字。

​图11 谨防严重依赖红色文字作为唤起动作的标识

对于网站内容,万维网联盟(W3C)的《Web内容无障碍指南2.0(WCAG 2.0)》详细介绍了使网站更易用的建议。级别A是最低要求,级别AA要求音频和视频配有字幕,级别AAA是无障碍最高级别的评级要求。

许多元素都很简单:为图片使用替代文本,已验证的会话过期后仍然保留表单信息。 WCAG 2.0提出的最重要但基本的建议之一是对比度,尤其是关于文本与背景颜色的对比度,如图12所示。

​图12 正如Web无障碍中AAA级别的建议,文字和背景颜色的强对比有利于用户识别

5. “但Dribbble①不喜欢!”

作为设计师,我们希望做出最有创意的解决方案,对吧?

虽然,无障碍设计的确会增加一些设计上的限制,但你已经在各种条框限制中进行设计了,这些限制确保了产品的功能性,而无障碍只是其中的一条限制。

无障碍设计不仅仅针对有视觉障碍的人,每个人都受益于无障碍的内容。无论设计师是否有更高尚的审美目标,这些设计都构建了一个以功能为基础的美好世界。无障碍设计不仅直接,而且对于你、你的老板、你的客户和你的用户也很重要。有了无障碍的基础知识,以及我们列出来的实践范本,你在Dribbble上的作品可能会被广泛流传。

6. 设计师实用工具

了解别人如何看待你的设计是为每个人提供最佳体验的关键。幸运的是,有一些简单的方法可以帮你利用WCAG 2.0确保自己的设计无障碍。

(1)Sketch

Stark是一个出色的Sketch插件,提供各种类型的色盲窗口模拟效果。它还提供了两个选定图层之间的对比率。

建议使用Sketch自带的Symbol②功能来创建UI元素,这样可以很方便地检查所有变量及其状态,不然很容易忘记在哪些地方用了什么,同一元素在不同地方使用的时候也不便于同步。

(2)Photoshop

Photoshop自带颜色色盲检查工具,如图13所示。

​图13 使用Photoshop的校样设置来模拟色盲

(3) 网上工具

• Tanaguru
用这个颜色工具取两个颜色值,它会计算出这两个颜色之间的对比度,也可以给出与所输入颜色相近的颜色和对比度,提高了无障碍性。

• Colorblind Web Page Filter 色盲网页滤镜
该工具可以在网页上模拟不同类型的色盲看到的状态。

• NoCoffee
这个“视觉模拟器”插件可以识别网页上的问题,如敏感度低、对比度低和颜色依赖。

(4)IOS应用程序

Felipe Elioenay开发的Colorblindness App③是我们的最爱之一。用户将手机摄像头对准日常物体,点击想要了解的部分,它就会描述该物体的颜色,用户界面超级简单。

(5)其他工具

Color Oracle是一个mac OS的实用程序,它可以模拟各种类型色盲所看到的屏幕。

7. 自己编写无障碍体验:给开发者的提示

好的设计和好的用户体验可以在很大程度上提升网站无障碍性,但有时我们还需要更进一步将开发也纳入考虑范围。

(1)语义HTML

像屏幕阅读软件这样的辅助技术需要编写符合标准的语义HTML,以提高无障碍性。

HTML5元素是语义HTML,它提供了页面的结构。使用屏幕阅读器的盲人需要在页面中做到选择性阅读,而不是从头到尾听完整个页面。适当地使用标题级别(h1~h6)可以更容易地满足这一需求,用户可以听所有的章节标题,然后有选择性地阅读他们感兴趣的部分。

保持内容和样式的分离也是非常重要的。HTML用于内容和结构,CSS用于表现和设计样式。

(2)图片

对于具有视觉障碍的用户,图片上需要加上替换性的标签来解释图片,也要配上标题和标签来解释缺失的语境。为图片添加这些信息时,应侧重描述其功能。例如,前往图片集”比“图片集”更有用。

(3)视频和音频

使用HTML5视频和音频标签可以让浏览器知道哪里有什么内容,并默认使用系统播放界面,系统自带的播放界面对用户来说既熟悉又无障碍。

(4)表单

对于使用屏幕阅读器的用户来说,如果你不能确保他们能够访问填写表单所需要的所有信息,那么他们填写表单时会有问题。

使用屏幕阅读器的人需要知道每个字段应该输入什么内容,因为他们无法看到字段旁边的标签。 现有的解决方案是标签元素,它将标签文本与表单字段相关联。

HTML5有一个新功能是指定输入字段的数据类型。通过标记预期的数据类型,浏览器将为该数据类型提供最佳的输入类型(例如,数字对应数字键盘或日期对应日期选择器)。

(5)iOS和Android

苹果公司一直以来都支持无障碍设计,例如它的显示缩放功能。在过去几年,苹果公司进一步地发展了这一点,将iOS中动态字体(见图14)、自动布局以及UI堆栈视图等特性结合在一起,形成了高度响应式UI的基础,并且所有的开发人员都能轻松地使用,如图14所示。

​图14 苹果公司在最新的全球开发者大会上推出了动态字体

在2017年全球开发者大会上,苹果公司鼓励更多的第三方开发者支持动态字体;iOS11支持自定义字体,以满足用户对动态字体④大小的偏好。

Android有自己的响应式布局和动态字体解决方案。你可以指定以dp(密度独立像素)和sp(可缩放像素)为单位的度量,根据用户的设置自动进行调整。

8. 无障碍设计最佳设计经验

• 色彩对比是一种强大的设计工具,也是AAA级无障碍设计的支柱。

• 不要仅仅依靠色彩和图标,文本标签会明确告知用户他们看到的选项。

• 填充的图标比线型图标更清晰(苹果公司也这么认为)。如果一定要用线性图标的话,粗线条比细线条更容易识别。

• 用不同的填充图案来增强对比给人一种质地感,也可以帮助用户区分不同的元素。

• 点击区域周围要有足够的留白,以便于用户能够定位和点击它们。

• 可识别的剪影图标效果好于圆圈中带符号的图标。

• 语言要精确,例如在按钮上的动词要让用户明确知道他们可以点击“继续”,而不是笼统的“是”和“否”选项。

• 字母基本高度较小的字体更容易阅读(Brandon Grotesque字体是一个很好的例子),但也要避免使用花体字(比如Lobster字体)。

• 确保文本链接明显可见,例如使用下画线将文本链接和普通文本区分开。

• 确保你的JavaScript和CSS技术不会屏蔽高亮显示。很多用户会高亮显示部分文本来增加对比度。

• 熟悉性和一致性使用户有一个良好的开端。我们应该知道什么时候使用规范的设计样式、常见的交互模式以及原生组件。

• 图标与按钮应方便点击,但不必过大。将它们放在低对比度的容器中,或者增大它们周围的留白,以便于视觉平衡并且方便点击。

• Random A11Y凝聚了一群人的努力,它致力于创建对比度高且好看的色彩搭配。

——————————

本文来源于异步社区,作品《不要仅为85%的用户设计:关注无障碍设计》,未经授权不得转载。

延伸推荐

2018年2月新书

2018年1月重磅新书

小学生开始学Python,最接近AI的编程语言:安利一波Python书单

政策升温:大家都在学大数据,一大波好书推荐

8本新书,送出一本你喜欢的

AI经典书单| 入门人工智能该读哪些书?​​​

​长按二维码,可以关注我们哟

每天与你分享IT好文。


在“异步图书”后台回复“关注”,即可免费获得2000门在线视频课程;推荐朋友关注根据提示获取赠书链接,免费得异步图书一本。赶紧来参加哦!

点击阅读原文,查看更多内容

阅读原文