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

Appibilities 简介:Glucode 的 Marianka Cilliers 如何帮助提升应用的无障碍性

“我们建造坡道来提升建筑物的无障碍性,但我们并不总是想到让我们的应用变得无障碍。”

如果某些人根本无法使用,那么漂亮的设计有什么用?在过去几年里,无障碍性一直是 UI/UX 设计中的一个关键话题。对于 Marianka Cilliers,Glucode 的 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 新手,还是回来查看新功能,我们都能让您在几分钟内完成设置并准备好开展最佳工作。

免费开始使用
免费开始使用