作为iOSer,如何让自己的项目更有温度?(上)

2,893 阅读5分钟

持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第9天,点击查看活动详情


前言

从1990年起,每年的五月第三个星期天是全国助残日,机缘巧合下,我认识了许多残疾人,他们乐观,开朗,很多时候和普通人没什么区别。

在交流的过程中,我发现他们很多都用的是苹果手机,特别是视力残疾类的。至于为什么,很多人都说,它的辅助功能比较好用,特别是旁白功能,对于基本上全盲的人来说,这个功能让他们至少可以通过手机让自己不与这个世界脱轨。

正好我也是iOSer,以前也了解过苹果的辅助功能,特别是iphone12pro,搭配深感摄像头后,启动旁白功能,打开放大器后,竟然能读出外面的世界是什么样子的 -- 链接 当时我真的震惊了,觉得苹果公司能在小众,不为人知的地方下功夫,真的十分佩服。

咱们虽然不能在底层去做到苹果公司的成就,但是苹果公司还是给我们开发者提供了能帮助残疾人使用的api---Accessibility

所以,今天有空想谈谈 iOS 中的 Accessibility(辅助功能)-- VoiceOver(旁白),看看我们在开发过程中,能不能通过简单的设置,让残疾人更好的使用我们的app。

正文

开启 VoiceOver

iOS 自带 VoiceOver 这个屏幕阅读工具,它让用户无需观看屏幕就可以和软件进行交互。是专门为视力有问题的人士设计的。

开启方式

使用 VoiceOver 最便捷的方法是打开你设备上的设置,点击辅助功能 ▸ 旁白

当然,本人现在的软件版本是15.5,不同版本和不同型号的手机,支持的辅助功能也不同。

如何使用 VoiceOver

VoiceOver 带有一些方便的手势预设,可以很轻松地浏览一个应用。下面是一些常用的应用内使用 VoiceOver 的手势:

- 单击屏幕上的任意位置,VoiceOver 会大声念出项目的辅助功能属性中的识别信息 (identifying information)。
- 向左或向右轻扫 (swipe),VoiceOver 会选择下一个可视辅助功能项目并大声念出该项目。右扫则向右向下移动,左扫移动方向相反。
- 向下轻扫可以逐个地念出每个字母(或汉字、符号等)。
- 双击选中聚焦的项目。
- 三指轻扫,向左或向右轻扫,可以在不同页面视图间前进或后退

作为iOS开发者,当然可以不用这么麻烦,每次都需要打开/关闭这个功能,所以呢,在xcode中,苹果给我们提供了一个检查你的app对VoiceOver支持程度的Tool,同时也给出了修改建议。

截屏2022-06-02 上午11.21.34.png

打开后我们可以看到

image.png

使用

下面,咱们来说说如何使用该功能

检测点(Inspection Pointer )的使用

这个功能类似我们在真机上开启了 VoiceOver。当我们开启了这个功能,就可以把指针悬停在任意 UI 元素上查看其属性。(这个功能最好在真机上试,比较准)

就用之前写的demo试试把

Jun-02-2022 12-52-34.gif

点击 检测点(Inspection Pointer )后再点击 app上的任何控件,上面就会显示这个点击的地方的元素,打开电脑声音,也会听到,VoiceOver所发出的声音,这就是使用者真实感受到的声音。

检查点详情(Inspection Detail)

检查点详情面板中包含了所有我们需要查看并和 App 中的辅助功能属性交互的内容:

- Basic: 显示当前高亮元素的属性内容。
- Actions: 我们可以在这里执行类似点击按钮、滚动视图这样的动作。点击这个面板中的 Perform 按钮,会在设备上执行某个动作。
- Element: 显示当前元素的类、内存地址和视图控制器。在撰写本文时,这里有时候工作不太正常。
- Hierarchy: 显示元素的视图层级树,让我们可以更容易地理解复杂的视图关系。

检查音频

在Accessibility Inspector中

截屏2022-06-02 下午1.38.26.png

红框的位置就是当用户使用旁白后所听到的,下面我们来看,苹果自带应用中,是如何出来的把

image.png

截屏2022-06-02 下午1.43.47.png

咱们可以看到,在设置->电池,中的图表,竟然可以出来,不得不佩服苹果自带应用,确实做的很人性化。

审计 (Audit) 功能找出问题

咱们知道如何去使用这个Tool了,现在就要看,自家的app,在功能上有什么可以改进的了。

还是看看咱们建议的demo

image.png

按照步骤可以看到,这里出现有两个警告。

点击绿色的眼睛可以弹出一张图片,就显示的那个有问题的控件

image.png

再点击❓

截屏2022-06-02 下午1.53.47.png

可以看到有修改建议。

根据建议,咱们就可以做出适当的修改了。

咱们在看看详情界面

截屏2022-06-02 下午1.55.44.png

哇。。。这么多修改建议。

看来改的东西还蛮多呢。

接下来,咱们就来着手修改这些功能。请看下一篇。