探索 SLDS 资源

学习目标

完成本单元后，您将能够：

• 描述 SLDS 的主要资源：设计指引、组件蓝图以及设计令牌。
  
• 访问与 SLDS 的设计、无障碍以及语音和铃声有关的 SLDS 指引文档。
  

设计系统团队介绍

您知道设计系统团队负责 SLDS。但是团队的责任不止于此。团队的官方目标是：

通过人工指导和内部工具在我们的整个产品中建立高品质、与品牌相符的体验。

我们来剖析这段话。 

设计系统团队提供人工指导，赋能设计师和开发人员做出高品质、与品牌相符的设计方案。该团队还帮助投稿人理解细小的变动如何影响更大的系统，以及如何贡献跨产品、跨用例可用的元素。最后，该团队开发工具，比如交互指引和视觉设计指引，涵盖上层理念、设计模式以及页面类型。

SLDS 的基本要点

我们来看 SLDS 的基本要点。为了保证他们的产品与 Salesforce 的用户体验一致，产品团队可以在 lightningdesignsystem.com 上找到全套设计资源。

设计指引描述基于具体用例的模式。模式与蓝图相关联（文档化、简单易用的 CSS）。消费者使用蓝图通过 Lightning Experience 开发网络和原生应用程序。设计指引解决事关 Salesforce 用户体验的大局问题，比如：数据如何显示？数据如何输入？如何处理搜索？UI 如何提示信息正在加载？SLDS 有两种设计指引。

• 蓝图，设计指引的一种，是静态、独立于框架、简单易用的 HTML 和 CSS，面向 UI 元素，如复选框、页面页眉，以及动态菜单。开发人员使用蓝图构建组件。（蓝图的全称是组件蓝图。人们往往把它们简称为组件，但其实不是很准确。组件通常是完全可用的，但是 SLDS 中 HTML5 和 CSS 是静态的。您必须把某个 SLDS 蓝图与一个 JavaScript 框架相结合，用户才能与之交互。）
  
• 令牌，另一种设计指引，是保存视觉设计属性的命名实体。在 Salesforce 中，我们用它们取代硬编码的值（比如关于间距的颜色或像素值的十六进制值）。令牌帮助我们保持可扩展、一致的 UI。使用设计令牌可以为设计师节省时间，有助于保持一致性。更重要的是，当某个设计师使用某个令牌时，每次在 SLDS 中更新那个令牌时，它的每个用例都会自动更新，不需要手动更新。使用令牌来代表设计属性使得设计系统团队可以轻松更新和扩展网络及原生应用程序的设计元素。
  

更多资源

SLDS 还包括：

• 工具，比如 API、插件和设计工具包，使得用 SLDS 进行开发更快速、更简单。
  
• 语音和铃声指引，使 Salesforce 的内容清晰、一致、吸引人，不管是在应用程序里还是网络上。这些指引适用于所有 Salesforce 文本，从官方通信到屏幕上的说明和错误提示。
  
• 无障碍指引帮助残疾人识别、理解、导航 Salesforce 应用程序，与之交互以及向其投稿。所有 Salesforce 应用程序都努力达到 WC3 WCAG 2.0 AA 行业标准，做到对于所有用户都是可识别、可操作、可理解、健全的。例子包括：
  
  

• 为所有基于鼠标的操作提供键盘交互替代方法
  
• 正确标记所有表单字段和按钮
  
• 为所有图片、视频、图标和 SVG 提供基于文本的替代方法
  

每个 SLDS 组件都必须表明它的身份、操作模式并且声明辅助技术，必须使用 ARIA 标记来向辅助技术使用者表明它自己的身份。要了解有关无障碍的更多信息，请参阅资源部分。

SLDS 的未来

Salesforce 是设计系统空间领域的行业领导者。SLDS 是全球第一个开源企业设计系统。如今，SLDS 团队正在提出关于下一代设计系统的问题，比如：设计系统如何利用人工智能？我们是否能让任何人在任何 JavaScript 平台上都可以使用 Lightning Web 组件？我们能否在不重写代码的情况下做到这一点？多个设计系统如何在彼此的基础上构建，把用例拓展到其他主题？

不管答案是什么，问题将会不断涌现。我们希望随着 SLDS 继续发展，您可以加入我们。

资源

• Creating Confident Users Through “Clicks, not Code”（通过“点击而不是代码”让用户更自信）
  
• Web Content Accessibility Guidelines (WCAG) 2.0
  
• SLDS Design Guidelines（SLDS 设计指引）
  
• SLDS Blueprint Overview（SLDS 蓝图概述）
  
• SLDS Design Tokens（SLDS 设计令牌）
  
• SLDS Voice and Tone（SLDS 语音和铃声）
  
• SLDS Accessibility Overview（SLDS 无障碍概述）
  
• Lightning Design System 网站