跳过导航
Image showing Marianka Cilliers of Glucode over an accessibility app on a purple background.
#MadeWithSketch

Appibilities介绍:Glucode的Marianka Cilliers如何帮助使应用程序更易于访问

“我们建造坡道使建筑物更易于访问,但我们并不总是考虑使我们的应用程序更易于访问”

如果有些人根本无法使用它,那么美丽的设计有什么用? 近年来,在UI/UX设计方面,可访问性一直是一个关键话题。 对于Marianka CilliersGlucode的UI/UX设计主管来说,这种斗争既是个人问题,也是职业问题。 我们和她坐下来讨论设计中的可访问性,以及他们为什么创建Appibilities,这是一个新的可访问性助手,适用于Sketch


请介绍一下您自己以及Glucode的历程。

在过去的12年中,我一直在南非设计行业工作,自2016年以来一直在Glucode工作。 我是Sketch以及可访问性和包容性设计的倡导者。

Glucode于2009年进入应用程序领域,推出了Creamer Media的Mining Weekly iPhone应用程序。 它是App Store中第一个南非开发的应用程序,目前是国际采矿业的高度评价和信任的新闻来源。 我们继续在金融、保险、健康、运输和娱乐等各个领域创建具有全球竞争力的应用程序。 最近,我们一直在开发Appibilities,这是一个适用于Sketch的iOS可访问性助手。

您认为移动应用程序中的可访问性为什么重要?

好吧,我们建造坡道使建筑物更易于访问,但我们并不总是考虑使我们的应用程序更易于访问。 想想拿起设备订购餐点,或预约并提交医疗索赔是多么容易。 现在想象一下,由于对比度不符合WCAG(Web内容可访问性指南),用户无法读取屏幕上的文本。 或者,按钮使得行动不便的个人难以点击,例如。

您的设计旨在解决用户问题,如果不考虑可访问性,您可能会失去目标。

您的设计旨在解决用户问题,如果不考虑可访问性,您可能会失去目标 —— 因为问题仅为您的部分受众解决。

您对可访问性的方法如何随着时间的推移而变化?

我在2017年的一次UI会议上首次了解了可访问的设计。 让我感到惊讶的是,有些产品(尤其是应用程序)并非对所有人都可以访问。 多年来,我一直致力于观看WWDC会议并参加有关该主题的会议。

我发现令人难以置信的是,可访问的设计也已扩展到包容性设计,因为它不仅要使残疾人可以使用,而且还要使每个人都可以使用。 例如,在头发产品上凸起的形状使视障人士可以区分各种产品 - 但是通过使用形状而不是盲文,它也变得对其他人普遍可用。

您在可访问性方面的个人投资是什么?

我的哥哥从小就一直在与视力作斗争。 几年前,他被诊断出患有青光眼 - 眼睛中的压力积聚会损害将图像发送到您大脑的神经。 如果病情恶化,这可能会导致视力丧失和失明。 我开始注意到他在手机上使用应用程序时遇到了困难。

我决定余生都致力于设计,使其具有可访问性和包容性,从而为我的兄弟和所有人提供便利。

幸运的是,iOS的可访问性功能使他可以增加字体大小、粗体和对比度 - 但是有些应用程序不适用于本机可访问性,这使他难以使用。 我决定余生都致力于设计,使其具有可访问性和包容性,从而为我的兄弟和所有人提供便利。

您注意到应用程序和公司在处理可访问性方面存在哪些常见失败?

我经常注意到的常见失败包括不包含可访问标签以动态缩放的自定义文本、对比度过低以及可点击区域太小。 另一个常见的失败是组件命名不能准确描述功能 - 这特别影响使用VoiceOver读取屏幕上元素的用户。

设计师如何改进这些失败?

对于文本问题,您可以使用本机字体和默认文本大小,以便在用户启用系统设置中的可访问性时动态缩放文本。 您还可以使用Sketch插件,例如CluseStark来检查文本在不同背景下的对比度 - 这里要努力实现的良好比例是4.5:1

选择4.5:1的对比度是为了AA级别,因为它补偿了视力损失相当于约20/40视力的用户通常会遇到的对比敏感度损失。 20/40通常被报告为约80岁老年人的典型视力敏锐度。

您可以提高视觉可访问性的另一种方法是通过设计中的颜色组合。 这可以通过模拟各种形式的色盲来实现,以确保用户能够区分不同的状态。 您可以使用的另一种方法是图标 - 为了增强这些情况下的含义。

在iOS中,请确保您的点击状态至少为44px,以帮助行动不便的用户。

您还应向图像添加替代文本,确保组件的顺序正确,并确保文本标签准确描述组件的功能,以便使用VoiceOver读取屏幕上元素的用户。

您在Appibilities中专注于什么来提高可访问性?

Appibilities将通过检查和建议您使用本机字体和权重来帮助提高可访问性。 San Francisco和New York字体在设计中使用时有特定的规则。 为了帮助您,当它们被不正确地使用时,您将收到警报。

Image showing Appibilities in action in Sketch,

Appibilities将帮助您的另一个方面是,有时在设计过程中会错误地调整画板的大小。 Appibilities将通过确保您坚持本机iOS设备尺寸来帮助您保持画板的检查。

不完整的句子是我们旨在解决的另一个令人沮丧的领域。 Appibilities会提醒您使用省略号 - 并帮助您确保用户始终可以访问不太适合屏幕的信息。

通过使用本机样式、可访问的颜色并为设计提供呼吸的空间,您的应用程序既可以美观又可以访问。

最后但并非最不重要的是,小点击区域对于使用您的应用程序的人来说令人沮丧。 Appibilities将指导您确保所有交互点都具有至少44x44pts的最小可点击区域。

我们希望扩展Appibilities以检查更多的iOS可访问性指南,但我们希望这是朝着可以发挥作用并改善人们生活的设计迈出的一步。 我们还希望将Appibilities扩展到材料可访问的助手。

您如何看待可访问性的未来?

平等地关注视觉美学以及可访问和包容的设计。 通过使用本机样式、可访问的颜色并为设计提供呼吸的空间,您的应用程序既可以美观又可以访问。


我们一直在寻找设计师,以推动Sketch中可能实现的界限。 您是否在Sketch中创建了一些很棒的东西? 通过使用#MadeWithSketch与我们分享,我们可能会在下一个特色帖子中重点介绍您。

您可能也喜欢

免费试用 Sketch

无论您是 Sketch 的新手,还是回来看看有什么新东西,我们都会让您在几分钟内完成设置并准备好完成您的最佳作品。

免费开始
免费开始