认识设计系统
学习目标
完成本单元后，您将能够：
- 认识一个好的设计系统的特点和功能。
- 描述设计师和开发人员如何使用、投稿给以及管理设计系统。
- 说明 Salesforce Lightning Design System (SLDS) 如何帮助开发人员在 Salesforce Platform 上构建解决方案。
- 描述 SLDS 与大多数设计系统有何区别，为什么。
Salesforce Lightning Design System (SLDS) 现在有两个版本。
Salesforce Lightning Design System 2 (SLDS 2) 在 Spring ‘25 中推出。原来 SLDS 现在被称为 SLDS 1。
此 Trailhead 徽章一般侧重于设计系统、SLDS 整体构架和 SLDS 1。要了解更多有关 SLDS 2 的信息，请了解 SLDS 2 入门学习路径。
SLDS 2 使用全新的 CSS 框架构建，该框架使用样式挂钩将结构与视觉设计分开。样式挂钩是 CSS 自定义属性，支持更深入的自定义和主题设置，使您能够更快地创建独特的体验。
您可以通过在组织中选择 Salesforce Cosmos 主题以选择 SLDS 2。请参见 Salesforce Cosmos 主题和 SLDS 2 可用性。
设计系统是什么？
深入探索它的魔力之前，我们先来定义设计系统。
设计系统的定义 |
释义 |
|---|---|
|
设计系统是由可重用 UI 元素（称为组件）和可重复设计模式组成的集合。 组件可能包括按钮、菜单、声音、动画、可视化图案等。部分设计系统包含基于 UI 平台构建的完整功能组件。SLDS 等其他设计系统则提供独立于平台的组件。组件提供 HTML 和 CSS，但不提供功能性代码。 模式是针对常见用户问题或任务的可重用、有文档记录的解决方案。模式由组件、布局和交互的特定组合组成，可构建完整的用户体验。与简单组件不同，模式为用户目标或流程（如多步骤表单或登录页面）提供上下文和最佳实践。 简言之，UI 模式指导组件如何组织和交互，以提供最佳的用户体验。 |
设计系统是一套指导产品创建的综合标准。该系统包括由模式、组件、指引及最佳实践组成的库，确保设计一致性。 设计系统为团队提供整体框架与共享术语，以简化产品开发流程。 相较之下，设计模式提供单一的解决方案，是设计系统架构中的独立元素。 将组件视为构建块，将模式、规则和指引视作使用这些构建块的详细说明。 |
设计系统遵循清晰、易用的标准、原则和指引。 |
设计系统中的组件高度标准化，外观和感觉都很容易辨认。模式为组合和使用组件提供结构化、有目的性的计划。 |
|
设计师通过组合组件和模式设计 UI。 开发人员通过多种方式组合设计系统的组件，以 HTML 和 JavaScript 构建应用程序，实现设计师的 UI 设计。设计指引提供把组件组装成针对特定用例的模式的说明。 如果组件设计已存在对应代码，开发人员可直接调用该代码。否则，开发人员将使用自己的 HTML 和 JavaScript 代码构建 UI。开发人员使用设计系统的模式和指引，以帮助自己创建代码。 |
使用单个组件不能做什么，但是把那些积木拼在一起，您几乎无所不能。 |
一个好的设计系统是：
-
可扩展的。随着设计系统日趋成熟，可以花更少时间和金钱在打造基础元素上（积木）。开发人员在不同产品和功能中重复使用那些元素。
-
高效的。设计系统节省时间和精力，让设计师和开发人员腾出时间聚焦可用性和意义。
-
视觉上统一的。设计系统的详细说明（模式、规则、指引）立足于目的。它的审美元素源自用户需求。标准化组件强化视觉风格和品牌形象，从而产生外观一致、提供一致的用户体验的产品和功能。
-
共享的。可复用、文档化、简单易用的元素支持协作，使得交接项目的某些部分或者在别人的基础上工作更容易。
立即开始构建
跟积木一样，设计系统帮助您立即开始构建。使用预先设计好的组件让您可以集中精力解决复杂问题，交付最好的用户体验。
设计系统的另一个巨大好处是它让您可以规模化管理设计。组件、模式、规则和指引组成的库有助于在不同设计师、开发人员、团队以及产品之间保持一致性。设计系统随着需求变化而变化，使设计师和开发人员可以在复杂平台上快速、轻松地更新界面和工具。
了解参与者
任何设计系统的好坏都取决于它的利益相关者。
-
消费者是使用设计系统的元素构建应用程序的设计师、开发人员和利益相关者。如果公司（如 Salesforce）拥有在公司平台上开发应用程序的客户生态系统，则消费者可以来自于创建设计系统的公司内部和外部。
-
投稿人创作构成设计系统的元素和图案。对于每一次版本发布，任何人都可以提出新的图案、组件或指引，或提议修改现有内容。
-
管理者是设计系统的守护者。这个由工程师、产品设计师以及视觉设计师组成的团队维护这个设计系统，监督它的代码，教社区如何用它。管理者审核提出的更新，并且结合更新进化这个设计系统。
如果您在读这个内容，您很可能是 SLDS 消费者或投稿人。
Salesforce 的 Lightning Design System
在 Salesforce，我们的一切均围绕设计系统。Salesforce Platform 如此强大的一个原因是它可以灵活满足各种不同用户的复杂需求。
我们还在快速发展壮大，扩展我们的产品范围和我们的员工人数。随着我们不断成长，我们满足更多用户需求。我们迫切需要高效、规模化地设计出统一的产品体验。
SLDS 帮助 Salesforce 团队做到这一点。用例特有的模式帮助设计师更快速迭代，更高效打造统一的解决方案。组件开发人员总是拥有最新的框架，包含干净、易用的标记和像素完美的 CSS，帮助他们以更少的错误更快地工作。客户和合作伙伴用经常更新、干净、一致的系统在 Salesforce Platform 上构建自定义，这个系统包含清晰的说明和设计示例，消除对任何软件进行反向工程的冲动。
大多数设计系统提供完全可用的代码。但是由于 SLDS 支持如此多不同的代码库，比如 Lightning Web 组件 (LWC) 和 React，它必须保持独立。Salesforce 通过 Lightning 基础组件提供实现 SLDS 组件设计的功能代码。（要进一步了解 SLDS 与其他设计系统的区别，请参考本单元末尾的资源部分。）
下面，我们将回顾很久很久以前 SLDS 的诞生历史。