An image to describe post

「无障碍」

原文地址:

https://developer.apple.com/design/human-interface-guidelines/foundations/accessibility

An image to describe post

Approximately one in seven people have a disability that affects the way they interact with the world and their devices.
Accessibility is not just about making information available to people with disabilities — it’s about making information available to everyone, regardless of their capabilities or situation. Designing your app with accessibility in mind means prioritizing simplicity and perceivability and examining every design decision to ensure that it doesn’t exclude people who have different abilities or interact with their devices in different ways.

世界上大约有七分之一的人患有残疾,并影响着他们与设备交互的方式。这个事实,我们还是不容忽视的,哪怕有的人没有残疾,不需要借助辅助功能完成交互,我们也应该为他们尽量清除使用上的障碍。我觉得做产品设计的目标,是要为用户提供功能上的感知,操作上的便捷,而不是单纯的主观炫技。

为了能够达到上述说的目标,在做产品的无障碍设计时,需要遵循以下几个原则:

Simplicity(简易性)

Enabling familiar, consistent interactions that make complex tasks simple and straightforward to perform

关键词:熟悉、一致性

熟悉:意味着用户在进行这个虚拟的交互时,能够联想到现实中的交互行为,比如当用户想要关掉房间里面的灯,他通过按下 app 中具有灯的外形的控件,并且获得了反馈:房间里的灯灭了;而这个反馈与现实中他去手动关灯的反馈是一致的;那么,我们可以得到结论:这个灯的交互对于用户来说,会是熟悉的。

一致性:一致性是一个很大的命题,它涉及到系统的概念,系统内元素、交互动作、操作范式的一致性,还有系统内和系统外的一致性🤔,这个可以单独开一个专页来讲讲。

Perceivability(可感知性)

Making sure that all content can be perceived whether people are using sight, hearing, or touch.

确保用户可交互的内容都能被感知,在业务目标不断累积的当下,要做到这一点,其实并不容易,要做出可感知范围内的设计方案,需要持续对系统有足够的观察和应对预案。

Support personalization(支持个性化)

Use standard components(使用标准组件)

Audit and test your app or game for accessibility.(审核和测试您的应用程序或游戏的可访问性)


Interactions 交互

手势

Don’t override the platform gestures.

不要覆盖平台手势,我见过有不少国内的 app 喜欢干一件事,覆盖原有的系统手势,最常见的一个应该是:双击状态栏返回页面顶部。

Prefer simplified gestures for common interactions.

对于常见交互,使用简单手势进行操作。复杂手势对很多人来说操作都不够方便,比如多指手势、长按或重复按按钮。但我对于长按手势,还是持乐观态度的,像我之前在中控屏上就尝试过使用长按手势调出编辑卡片的操作,虽然会牺牲一定的可见性,但因为编辑操作用的频率不高,而把按钮隐藏起来,能减少低频操作的信息干扰。

When possible, make your app’s core functionality accessible through more than one type of physical interaction.

如果可以的话,请设计一种以上的物理交互来访问您 App 的核心功能。替代交互的常见例子不只是出现在手机拍照时可以用音量键代替屏幕内的快门键,还有当我们在web产品中打开一个弹窗时,虽然可以通过用鼠标点击“关闭”按钮关掉弹窗,也可以点击“取消”关闭弹窗,但也可以通过点击键盘上的“esc”关闭弹窗,而且这个操作更符合操作直觉,也容易被忽略。

An image to describe post

按钮和控件

Consider giving links a visual indicator in addition to color, such as an underline.
 It’s fine to use color to identify a link, but if you use it as the only indicator, people — such as those with color blindness or cognitive or situational attention impairments — may not be able to perceive the distinction.

考虑给链接一个除了颜色之外的可视化指示器,例如下划线。使用颜色来识别控件状态是可以的,但是如果把颜色作为唯一的指标,人们ーー比如那些有色盲、认知或情景注意力缺陷的人ーー可能无法察觉到这种区别。这个更偏向于制定指示性控件时会遇到的问题,比如「tab」,有的设计师会直接用字重区分已选中的tab和未选中的tab,但其实加上一条下划线,会更好与文本产生差异。

An image to describe post

用户输入

Let people input information by speaking instead of typing.

**让用户通过说话而不是打字来输入信息。**对于需要无障碍人士来说,语音功能是个足以替代部分生理残缺的重要功能,这方面需求还挺值得研究的;但是,面对大多数人,在可输入/可语音的场景下,而不是一定要语音的场景下,语音输入依然是个“optional feature”,毕竟,它的隐私性并没有文字那么充足。

Haptics 触感

Support the system-defined haptics.
Many people rely on haptics to help them interact with apps when they can’t see the screen.

支持系统定义的触感。许多人在看不到屏幕的情况下依靠触感来与产品互动。

这一点虽然写得简单,但是来自设备的触觉反馈,还挺让我印象深刻的,好的触觉引擎,能够带来优秀的交互体验,而差的触觉,也会让用户想立马关掉;「触觉」虽然不是一个设计时的必选项,但对于创造非凡交互体验的目标来说,是必不可少的,当然它离不开优秀的震动马达来支持,这就是来自硬件上对设计的限制了。


VoiceOver 画外音

这部分功能虽然是为无障碍人士提供,但是我作为普通人来说,使用下来却几乎没有办法写出体验,主要原因是交互逻辑跟通用逻辑完全不一样了,退出机制一时之间没法适应…所以,希望以后有机会能好好了解无障碍吧。(苦笑)


Text display 文本展示

**As font size increases, keep text truncation to a minimum.**In general, aim to display as much useful text in the largest accessibility font size as you do in the largest standard font size. Avoid truncating text in scrollable regions unless people can open a separate view to read the rest of the content.

无论字体大小增加到什么程度,始终保持一屏内文本截断的完整性。正常来说,使用最大的无障碍字体中显示的有效文字数量,要和最大的标准字体一样多。从官方提供的图例中可以看出,在一屏中,无论是小号字还是大号字,显示内容都是一样多,用开发的话来说就是,标签数量没有减少。在普通视角下,这是为了保证阅读效率,在无障碍视角下,当用户启用了旁白功能时,这不仅保证了视觉上的阅读效率,还能让用户能完整听完一屏内的完整内容。

An image to describe post

Consider adjusting layout at large font sizes. When font size increases, inline items and container boundaries can crowd text, making it less readable. For example, if you display text inline with secondary items — such as glyphs or timestamps — the text has less horizontal space. At large font sizes, an inline layout might cause text to truncate or result in overlapping text and secondary items.

考虑在大的字体尺寸下调整布局。当字体尺寸增大时,边框内的内容就会挤占文本,使其不容易阅读。例如,如果你将文本内容与次要内容--如图形或时间--一起展示,文本的横向空间就会缩小。在大号字体尺寸下,可能会导致文本被截断,或者导致文本和二级项目重叠。

An image to describe post

这里讲得太细了,其实就是要注意当字号增大时,要注意不同文本之间因为换行而导致的排版问题,比如标点挤压,间距过小或过大等;对于这样的问题,有异曲同工之妙的解决方案有这个:即刻的排版设置,可以让用户自主调节间距,对标点挤压和段间距也做到了可自定义的程度,还提供了文本预览,方便用户调节。

An image to describe post


Color and effects 颜色和效果

Avoid using color combinations as the only way to distinguish between two states or values.

避免使用颜色组合作为区分两种状态或数值的唯一方法。官方这个建议,是为了避免色盲人士难以区分颜色的问题,比如许多色盲用户很难区分蓝色和橙色,还有红色和绿色、红色和黑色,以及红色或绿色与灰色的组合。

非色盲用户看到的 / 色盲用户看到的

An image to describe post

Use strongly contrasting colors to improve readability.

使用强对比的颜色来提高可读性。对比度的问题,在日常设计中也容易被忽略,设计师为了追求美观,在颜色选择上缺乏考虑对比度,在验证界面中相邻颜色的对比度是否符合最低可接受水平时,可以参考在线色彩计算工具 Web Content Accessibility Guidelines (WCAG),也可以试试 在线检测工具: Contrast Checker

感谢你的阅读。