跳过导航
#MadeWithSketch

构建更佳体验:Sketch 如何帮助 Salesforce 维护其行业领先的设计系统

我们与 Salesforce 团队讨论了助手和大规模设计,以发现卓越设计系统的关键

一个好的设计系统让每个人的生活更轻松。它为设计师提供了在批准的结构中工作所需的元素和指导。它帮助开发者使用可预测的、一致的组件进行工作。它还帮助企业更快地设计和构建新产品,所有这些都具有一致的用户体验。

如果您了解设计系统,您可能了解 Salesforce。Salesforce 的 Lightning 设计系统是行业领导者,拥有数千个组件、明确的说明以及关于颜色和尺寸的明智且经过深思熟虑的决策。此外,它还附带一个 Sketch 图库,因此上手和使用非常简单。

自 2015 年推出以来,Lightning 设计系统已经发生了很大的演变,但在与该系统上的 PM 高级总监 Kirupa Chinnathambi 交谈后,很明显,核心目标在今天仍然相同。“正如 Lightning 设计系统的创始工程师之一 Stephanie Rewis 所描述的,最初的目标是为团队提供一种可扩展和可维护的方式,来采用我们 UX 指导的最新演变,”他说。对于团队而言,这意味着出色的文档、大量的视觉资产、强大的沟通渠道和整个生态系统中的反馈循环等等。

A screenshot of the Lightning Design System homepage.

Lightning 设计系统主页

“今天,我们认为这两个目标及其输出是理所当然的,”Kirupa 继续说道。“但是,当 Lightning 设计系统首次上线时,团队确实在开辟新天地,几乎没有先前的艺术作品可以参考。” 如今,该团队不断发展 Lightning 设计系统的功能 —— 并将这种发展建立在研究、客户反馈、遥测和行业趋势的基础上。但是,这两个最初的目标始终摆在前沿。

但是,Lightning 设计系统如此巨大的成功还有另一个关键方面 —— 这种方面更多地与人有关,而不是设计。

使其更具个性化

“对我们而言,最重要的一个方面是与使用我们的设计系统构建其 UX 的团队建立良好的关系,”Kirupa 说。对于 Lightning 设计系统,从 Salesforce 内部团队(他们正在不断发展公司的各种产品)到使用该平台构建自己的解决方案的外部设计师和开发者,每个团队都是如此。

“对我们而言,最重要的一个方面是与使用我们的设计系统构建其 UX 的团队建立良好的关系”

“在我们广阔的生态系统中保持密切沟通——直接和间接地——是一项耗时的任务。但它也非常有意义,因为它确保我们将时间花在构建正确的东西上。”

这些关系也为团队带来了另一个有价值的好处——提供幕后花絮,了解设计和工程的角色如何不断发展。“我们获得了一个更准确的、虚线的路线图,我们可以在其中创造性地填充内容,”Kirupa 解释道。“我们对 设计和开发者工具的投资(对于设计系统团队来说相当独特)是我们以有针对性的方式对这些见解做出反应的一个例子。”

对于 Salesforce 而言,这些工具包括功能强大的 Sketch 插件、专用的 UI 设计工具包,以及最近推出的一款新助手 —— Lightning Design System Linter。

规则就是用来遵守的

当我们发布带有 Sketch 68 的 助手时,我们希望帮助您发现文档中的问题,与设计系统保持一致,并为协作准备您的文件。对于 Salesforce 而言,创建一个可以帮助用户遵循 Lightning Design System 规则的助手是不费吹灰之力的。

“在我们广阔的生态系统中保持沟通是耗时的。但它也非常有意义,因为它确保我们将时间花在构建正确的东西上。”

“定义使用该系统的规则非常重要——在设计和工程方面都是如此,”Lightning 设计系统首席软件工程师 John Earle 说。但对于 Salesforce 团队而言,让这些规则易于遵循也同样重要。

“对于像 Lightning Design System 这样庞大的系统,即使是经验丰富的 Salesforce 设计师也可能使用与令牌不对应的颜色值或文本大小,”他继续说道。这些小错误会产生连锁反应,导致代码中出现硬编码值。并且由于以后很难更改这些值,因此最终用户的体验不一致。

在 Sketch 文档中使用 Lightning Design System Linter 非常简单。添加后,它将在后台运行,如果您的设计的任何方面不符合 Lightning Design System 的规则,它将显示通知。

“让用户了解这些规则——并确保它们得到执行——与规则本身同等重要,”John 继续说道。“我们的大多数规则都直接位于系统内部,位于元数据中。API 会传播这些规则,这就是为什么我们可以构建和使用强制执行工具(例如我们的 SLDS 验证器)以及现在的 Lightning Design System Linter。”

家庭的一部分

当与 Lightning Design System 的 Sketch 插件、Sketch UI 工具包以及 Salesforce 提供的字体、颜色和图标结合使用时,它会形成一个非常强大的组合。您不仅拥有设计所需的所有组件和资产,而且还拥有有关如何正确使用它的信息 —— 以及一个在您犯错时告诉您的助手。

“我们的设计系统的受众群体涵盖所有技能水平——从设计师、开发者和产品经理到 管理员和‘偶然’设计师,对于他们而言,设计师帽子只是他们已经戴过的众多帽子中的一顶,”Kirupa 说。“最令人欣慰的是看到我们不同技能水平的客户使用我们提供的指导、工具和开箱即用的解决方案,将他们自己的用户体验变为现实。”

对于用户而言,这一切都意味着您是否将所有时间都花在 Sketch 中并不重要

A screenshot showing Salesforce’s Lightning Design System plugin being used in Sketch.

或者您是否喜欢 编写代码

A screenshot of someone working on Salesforce content using a code editor.

无论您如何工作,Lightning Design System 都可以帮助您 —— 借用公司的使命宣言 —— 构建美观、高性能且易于访问的产品体验。现在,所有这些都由一个强大的助手提供支持。

助手简洁性

在我们放 Salesforce 团队离开之前,我们想了解他们构建 Lightning Design System Linter 的经验。我们的团队将 Assistants 设计成易于创建的 —— 他们的努力得到了回报吗?

“构建我们的 Assistant 让我非常愉快!” John 笑着说。“设置很快 —— 我在几分钟内就启动并运行了我的第一个规则。我喜欢上下文对象让我可以轻松访问文档属性,因此我不需要爬过层层才能找到我需要的东西。Typescript 环境帮助我遵守正确的接口,并在 VS Code 中通过自动完成功能指导我。最重要的是,我可以让 Jest 在我开发时监视更改,因此我不需要手动重新编译我的代码。开发体验有完善的文档记录且现代化 —— 令人愉快的工作体验。”

“构建我们的 Assistant 让我非常愉快!开发体验有完善的文档记录且现代化 —— 令人愉快的工作体验。”

很高兴听到像 Salesforce 这样庞大而成功的团队的反馈。但这并不是他们在 Sketch 中进行设计验证的计划的终点。“我们只是初步发布了 Assistant,”John 说。“将来,我们希望验证图层之间和图层内部的间距。并且我们希望将 Assistant 连接到我们的 Lightning Design System 插件,以便为工程师生成规范。这些规范将引用设计系统令牌值和组件蓝图,因此工程师无需费力寻找他们需要使用的东西。”

展望未来

除了其 Assistant 之外,Salesforce 的未来一片光明。虽然 Kirupa 不能过多谈论他们的计划,但他确实分享了一些小信息。“我们将继续投资于过去一年我们一直在积极讨论的大方向,包括指导和文档工具支持、更丰富的组件样式(通过 Styling Hooks)、可访问性支持(包括 WCAG 2.0 和 2.1)、移动友好型增强改进的颜色系统等等。”

但对于 Kirupa 来说,比这些未来计划更令人兴奋的是看到人们如何使用 Lightning Design System 来创造出色的作品。有时,他们所做的事情远远超出了团队的计划。“我最喜欢的一个有趣的故事是,有人在 Dreamforce 的展位上停下来,并解释了他们如何使用设计系统来帮助构建虚拟现实体验,以浏览他们的数据,”他笑着说。“我常常怀疑他们是否来自未来!”

您可能也喜欢

免费试用 Sketch

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

免费开始
免费开始