为了庆祝 全球无障碍意识日,我们想分享我们插件开发者的作品之一——并展示如何才能使小的无障碍改变对数百万用户产生重大影响。
如果没有我们令人难以置信的插件开发者社区,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 视觉设计过程的信息。

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 文档。大多数人倾向于认为无障碍是开发人员的唯一责任。毕竟,他们才是实施屏幕阅读器功能和进行质量保证测试的人。但这种想法是错误的。如果设计一开始就不是无障碍的,那么开发人员就无法修复它。Sketch 是抵御对比度差、悬停状态差异不足和描述性链接文本不足的第一道防线。在交接给开发人员之前,请查看您的画板和样式指南,并进行无障碍评估。使用 Cluse 这样的插件,您可以在几秒钟内确保您的设计是无障碍的。
在设计和使其更易于访问方面,您的方法是什么?
我总是考虑用同理心来设计。不要将你的受众视为用户。首先,他们都是人。偶尔,从设计师的角色中退一步,站在他们的角度考虑问题。更重要的是,与您认识的可能存在视力障碍的人交谈。让他们坐在您旁边,一起对设计进行认知走查。在我的一家实习公司,我们有一位软件工程师患有红绿色盲。他是我们团队最宝贵的无障碍资源。

设计师如何从一开始就重新思考他们的方法,使他们的设计更易于访问?
设计师必须意识到,无障碍不仅仅是为了有永久性视力障碍的人。您调整的颜色对比度怎么样?它帮助一个人在弱光环境下更容易地浏览您的网站。您省略的那些干扰元素怎么样?您刚刚改善了患有 ADHD 的人的浏览体验。您用户群中更大的一部分可能会面临暂时性和情境性残疾,例如在户外使用低亮度浏览或手臂骨折。这可能会帮助设计师将这种意识框架为不仅仅是无障碍,而是包容性。任何使产品对边缘情况更易于使用的事情最终都会使每个人受益。
“一旦无障碍成为您的新常态,您就不再感到被它限制。它成为设计自然的方法,为创造力打开了大门。”
如果他们无法勾选所有 AAA 选项,那么设计师应该关注哪些方面才能使他们的作品更易于访问?
制作包容性设计并不一定困难或耗时。如果您无法满足所有无障碍指标,请专注于颜色对比度。这是付出最少努力却能获得最大影响力的方法。AA 和 AAA 之间的区别可能只是几个十六进制值而已。

您认为设计无障碍会限制您的创造力吗?
认为设计可访问性会限制创意是一个错误的二元对立。限制性设计和视觉创新绝非对立。事实上,从历史上看,创意限制一直是人类创造力的最大动力。限制促使人们进行实验。一旦可访问性成为你的新常态,你就不再感到被它限制。它将成为自然的设计方法,为创意打开大门。
在设计领域的可访问性方面,你希望未来看到什么?
听起来很奇怪,但我希望像 Cluse 这样的产品需求会减少。我的目标是让包容性设计如此根深蒂固地融入我们的工具和工作流程,以至于不再需要第三方可访问性插件。
作为项目的一部分,Yana 为她的作品展览设计了一些贴纸——我们有五套要赠送!我们还会附赠一些我们自己的贴纸,让这笔交易更甜美。为了有机会赢得奖品,只需向我们发送一条推文,其中包含 6 月 21 日之前完成的可访问性设计示例。我们将在 6 月 22 日宣布幸运获胜者。😎