跳过导航
#MadeWithSketch

构建更出色:Sketch 如何帮助 Salesforce 维持其行业领先的设计系统

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

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

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

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

A screenshot of the Lightning Design System homepage.

Lightning Design System 首页

“如今,我们认为这两个目标及其成果是理所当然的,”Kirupa 继续说道。“但当 Lightning Design System 首次上线时,团队实际上是在开辟新的领域,几乎没有先例可以参考。”如今,团队不断发展 Lightning Design System 的功能——并将这种演变建立在研究、客户反馈、遥测和行业趋势的基础上。但那些最初的两个目标从未远离核心位置。

但还有一个关键因素使 Lightning Design System 如此成功——它更多地是关于人而不是设计。

使其个性化

“对我们来说,最重要的一点是与使用我们的设计系统构建其 UX 的团队保持良好的关系,”Kirupa 说。对于 Lightning Design System 而言,这包括从 Salesforce 内部不断发展公司各种产品的团队,到为自己的解决方案使用该平台的外部设计师和开发人员。

“对我们来说,最重要的一点是与使用我们的设计系统构建其 UX 的团队保持良好的关系”

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

这些关系也为团队带来了另一个宝贵的益处——提供设计和工程角色如何不断演变的幕后一瞥。“我们获得了一张更准确的虚线路线图,我们可以发挥创意来填充它,”Kirupa 解释道。“我们对 设计和开发工具 的投资,对于设计系统团队来说是相当独特的,就是一个我们如何以目标导向的方式对这些见解做出反应的例子。”

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

规则是为了遵守而制定的

当我们在 Sketch 68 中发布 助手 时,我们希望帮助您发现文档中的问题,与设计系统保持一致,并准备您的文件以进行协作。对于 Salesforce 而言,创建一个帮助用户遵循 Lightning Design System 规则的助手是顺理成章的事情。

“在广阔的生态系统中保持沟通是一项耗时的任务。但它也确实很有意义,因为它确保我们把时间花在构建正确的事物上。”

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

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

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

“让用户了解这些规则——并确保执行这些规则——与规则本身一样重要,”John 继续说道。“我们的大多数规则都直接存在于系统中,位于元数据中。API 传播这些规则,这就是为什么我们可以构建和使用执行工具,例如我们的 SLDS Validator,以及现在推出的 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 的经验。我们的团队设计了易于创建的助手——他们的辛勤工作得到了回报吗?

“构建我们的 Assistant 真是太棒了!”约翰笑着说。“设置非常快——我几分钟内就创建了第一个规则并运行起来。我喜欢上下文对象可以让我轻松访问文档属性,这样我就不需要层层查找我需要的内容了。TypeScript 环境帮助我遵守正确的接口,并在 VS Code 中通过自动完成功能指导我。最棒的是,我可以在开发过程中让 Jest 监视更改,这样我就不需要手动重新编译代码了。开发体验有良好的文档记录且非常现代化——使用起来非常愉快。”

“构建我们的 Assistant 真是太棒了!开发体验有良好的文档记录且非常现代化——使用起来非常愉快。”

听到来自 Salesforce 这样庞大且成功的团队的反馈真是太好了。但这并不是他们 Sketch 中设计验证计划的终点。“我们只是触及了 Assistant 首次发布的表面,”约翰说。“未来,我们希望验证层之间和层内的间距。我们还希望将 Assistant 连接到我们的 Lightning Design System 插件,以生成工程师的规范。这些规范将参考设计系统令牌值和组件蓝图,因此工程师无需费力就能找到他们需要使用的内容。”

展望未来

除了 Assistant 之外,Salesforce 的未来也一片光明。虽然 Kirupa 无法过多谈论他们的计划,但他还是分享了一些小细节。“我们将继续投资我们在过去一年中积极讨论的一些重要领域,包括指南和文档工具支持、更丰富的组件样式(通过样式钩子)、无障碍支持(包括 WCAG 2.0 和 2.1)、移动友好增强功能改进的色彩系统等等。”

但对于 Kirupa 来说,比任何这些未来计划更令人兴奋的是看到人们如何使用 Lightning Design System 来创造惊人的作品。有时,他们会远远超出团队的预期。“我最喜欢的酷故事是,有人在 Dreamforce 的展位前告诉我,他们如何使用设计系统来帮助构建一个用于浏览数据的虚拟现实体验,”他笑着说。“我常常想知道他们是不是来自未来!”

您可能还会喜欢

免费试用 Sketch

无论您是 Sketch 的新手,还是回来查看新功能,我们都将在几分钟内让您做好准备,开始完成最佳工作。

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