跳过导航
Main image for the Global Accessibility Awareness Day post
#MadeWithSketch

无障碍设计:与 Cluse 开发者 Yana Gevorgyan 的对话

“作为设计师,创造人人都能使用的产品是我们的道义责任”

为了庆祝 全球无障碍意识日,我们想分享我们一位插件开发者的杰出工作,并展示小的无障碍更改如何对数百万用户产生重大影响。


如果没有我们令人难以置信的插件开发者社区,Sketch 就不会成为今天的平台。他们创建的工具使设计出色的产品更容易。在使您的设计具有无障碍性方面,我们的插件开发者社区构建了一些很棒的工具来提供帮助。其中之一就是 Cluse。

Yana Gevorgyan,一位来自 MICA 的应届产品设计毕业生,注意到无障碍性并不总是设计师工作流程的自然组成部分。因此,她创建了 Cluse —— 一款独特的颜色对比度插件,可确保您的设计符合 WCAG 2.0 标准。

我们采访了 Yana,了解她对设计中的无障碍性的看法,并进一步了解 Cluse 的出色而简单的滑块系统。


是什么启发您创建 Cluse?

我是在几个月前创建 Cluse 的,作为获得 2020 年 5 月学士学位的顶点项目。这个想法是由我对同行和同事的观察激发的。

在我上次实习期间,团队花费大量时间将十六进制值从 Sketch 复制粘贴到在线对比度检查器。如果您每天使用多个产品,这种时间会很快累积起来,这意味着一些团队会跳过检查颜色对比度或可访问的字体样式。我设想 Cluse 将无障碍性融入设计师当前的工作流程中,使包容性设计更加方便,从而更加普及。

“世界上大多数人都连接到互联网,并依靠它来完成日常任务。其中有来自不同背景、年龄和身体能力的人。虽然并非所有物理空间都可以供残疾人使用,但没有理由让网站也以同样的方式。”

设计和开发插件的过程是怎样的?

在第一次考虑 Cluse 的想法时,我观察了设计师当前的无障碍工作流程。经过用户研究后,我得出结论,大多数设计师都最小化 Sketch,并去在线对比度检查工具寻求指导。人们强烈偏爱使用滑块调整十六进制值直到通过 WCAG 的对比度检查器。我的路径很明确:将设计师最喜欢的无障碍工具集成到他们最喜欢的原型设计工具中。我想确保设计师无需离开 Sketch 即可进行无障碍设计。

在我的设计过程中,我是一个功能主义者:形式服从功能。像插件这样的外围设备必须建立在它们所补充的产品的用户体验之上。用户希望在交互和视觉效果中看到熟悉的模式。因此,Cluse UI 的视觉设计与 Inspector 非常相似。我实际上专门为 Sketch Mac 应用创建了一个假的样式指南,以确保我的集成相对平滑和准确。如果您有兴趣,可以在 我的网站上阅读有关 Cluse 视觉设计过程的更多信息。

Yanas mock style guide for Sketch helped her create a plugin that felt like part of Sketch.

Yana 的目标是使 Cluse 的设计尽可能接近 Sketch 的 Mac UI。

至于开发过程,Sketch API 文档是一个良好的开端,但我与本机 macOS API 进行更复杂集成的最佳指南来自设计社区。我非常感谢 Matt Curtis 的教程,该教程介绍如何使用 HTML、CSS 和 Javascript 构建 Sketch 插件。他的写作简洁明了,即使是新手程序员也可以轻松上手,并为 Sketch 不断增长的插件存储库做出贡献。

“我经常思考富有同情心的设计。不要将您的受众视为用户。首先,他们是人。”

Cluse 与 Sketch 的其他无障碍插件有何不同?

Sketch 有很多对比度检查器插件,这让我很高兴。这个概念很简单:您选择两个图层,运行插件并获得 WCAG 合规性评级。但通常情况下,用户的旅程就此停止,没有任何上下文或行动号召。您不知道为什么您获得了 WCAG 不及格评级,也不知道如何修复它。Cluse 是唯一一款实际上允许您在不切换应用的情况下对失败的十六进制值进行处理的对比度检查器。得益于前景和背景亮度滑块,设计师可以实时调整其颜色对比度,并比以往更快地进行无障碍设计。

为什么无障碍性在设计中如此重要?

作为设计师,创造人人都能使用的产品,而不仅仅是少数人,是我们的道义责任。我们在生活中越来越多地使用技术 —— 尤其是在 COVID-19 大流行期间,当更多任务已从物理层面迁移到虚拟层面时。世界上大多数人都连接到互联网,并依靠它来完成日常任务。其中有来自不同背景、年龄和身体能力的人。虽然并非所有物理空间都可以供残疾人使用,但没有理由让网站也以同样的方式。设计师可以赋予用户权力,而这只需要调整几个十六进制值。我认为这是一笔划算的交易。

“设计师可以赋予用户权力,而这只需要调整几个十六进制值。我认为这是一笔划算的交易。”

Sketch 如何帮助您(和其他人)设计更易访问的产品?

通往无障碍性的道路始于设计师的 Sketch 文档。大多数人倾向于认为无障碍性是开发人员的唯一责任。毕竟,他们是实施屏幕阅读器功能并进行 QA 测试的人。但是,这种想法是错误的。如果设计从一开始就不可访问,则开发人员无法修复。Sketch 是防止对比度差、悬停状态之间的区分不足以及非描述性链接文本的第一道防线。在交给开发人员之前,请查看您的画板和样式指南,并进行无障碍评估。借助像 Cluse 这样的插件,您可以在几秒钟内确保您的设计具有无障碍性。

在设计和使其可访问方面,您的方法是什么?

我经常思考如何以同理心进行设计。不要把你的受众仅仅看作是用户。首先,他们是人。时不时地,从设计师的角色中抽身出来,设身处地为他们着想。 更好的方法是,和任何你认识的可能有视力障碍的人聊聊。让他们坐在你旁边,对设计进行一次认知演练。 在我实习期间,我们有一位红绿色盲的软件工程师。他是我们团队最有价值的辅助功能资源。

Using Cluse to test whether an image is AA accessible in Sketch.

设计师如何从一开始就重新思考他们的设计方法,使他们的设计更易于访问?

设计师必须意识到,辅助功能不仅仅是为永久性视力障碍人士准备的。 你调整的颜色对比度? 它帮助人们在光线不足的环境下更轻松地浏览你的网站。 你省略的令人分心的元素? 你刚刚改善了患有多动症的人的浏览体验。 甚至更大比例的用户群可能会面临暂时的和情境性的残疾,例如在户外低亮度下浏览或手臂骨折。 这可能有助于设计师将这种意识框架化为包容性,而不是辅助功能。 任何使产品对你的边缘案例更易用的东西最终都会使每个人受益。

“一旦辅助功能成为你的新常态,你就不再感到受到它的限制。 它成为设计的自然方法,打开了创造力的大门。”

如果他们无法满足每个 AAA 标准,设计师应该关注哪些方面才能使他们的作品更易于访问?

进行包容性设计不一定困难或耗时。 如果你不能满足每个辅助功能指标,请关注颜色对比度。 这是以最小的努力获得最大影响的方法。 AA 和 AAA 之间的差异可能只有几个十六进制值。

Checking color accessibility with the eyedropper tool.

你认为为辅助功能而设计会限制你的创造力吗?

认为为辅助功能而设计会限制创造力的观点是一种错误的困境。 限制性设计和视觉创新绝非对立。 事实上,从历史上看,创造性限制一直是人类创造力的最大动力。 约束促进实验。 一旦辅助功能成为你的新常态,你就不再感到受到它的限制。 它成为设计的自然方法,打开了创造力的大门。

就设计领域的辅助功能而言,你希望在未来看到什么?

尽管听起来很奇怪,但我希望像 Cluse 这样的产品的需求会减少。 我的目标是让包容性设计深深扎根于我们的工具和工作流程中,以至于不再需要第三方辅助功能插件。


作为项目的一部分,Yana 为她的作品展览设计了一些贴纸——我们有五套要赠送! 我们甚至会添加我们自己的一些贴纸来增加吸引力。 要有机会获胜,只需在 6 月 21 日之前 发推特给我们 ,并提供一个出色的可访问性设计的例子。 我们将于 6 月 22 日公布幸运的获胜者。 😎

您可能还喜欢

免费试用 Sketch

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

免费开始
免费开始