Skip to main content
Build the future with Agentforce at TDX in San Francisco or on Salesforce+ on March 5–6. Register now.

认识设计系统

学习目标

完成本单元后,您将能够:

  • 认识一个好的设计系统的特点和功能。
  • 描述设计师和开发人员如何使用、投稿给以及管理设计系统。
  • 说明 Salesforce Lightning Design System (SLDS) 如何帮助开发人员在 Salesforce Platform 上构建解决方案。
  • 描述 SLDS 与大多数设计系统有何区别,为什么。

设计系统是什么?

深入探索它的魔力之前,我们先来定义设计系统。 

有人在疑惑设计系统是什么

设计系统的定义

释义

设计系统是一个可重复设计模式和可复用代码的集合,称为组件。

组件包括按钮、菜单、声音、动画、可视化图案等等。在有些设计系统中,它们可能是完全可用的,建立在 UI 平台之上。而在其他系统中,包括 SLDS,它们是独立于平台的。

可以把一个设计系统想象成一套积木(甚至是儿童和成人都喜爱的经典塑料拼装玩具)。

设计系统遵循清晰、易用的标准、原则和文档。

跟深受人们喜爱的积木一样,设计系统中的组件高度标准化,外观和感觉都很容易辨认。

开发人员通过多种方式组合设计系统中的组件,用 JavaScript 开发应用程序。设计指引提供把组件组装成针对特定用例的模式的说明。

使用单个组件不能做什么,但是把那些积木拼在一起,您几乎无所不能。

把积木拼接在一起,扣紧,打造一艘宇宙飞船

一个好的设计系统是:

  • 可扩展的。随着设计系统日趋成熟,可以花更少时间和金钱在打造基础元素上(积木)。开发人员在不同产品和功能中重复使用那些元素。
  • 高效的。设计系统节省时间和精力,让设计师和开发人员腾出时间聚焦可用性和意义。
  • 视觉上统一的。一个设计系统的模式立足于目的。它的审美元素源自用户需求。标准化组件强化视觉风格和品牌形象,从而产生外观一致、提供一致的用户体验的产品和功能。
  • 共享的。可复用、文档化、简单易用的元素支持协作,使得交接项目的某些部分或者在别人的基础上工作更容易。

立即开始构建

跟积木一样,设计系统帮助您立即开始构建。使用预先设计好的组件让您可以集中精力解决复杂问题,交付最好的用户体验。

设计系统的另一个巨大好处是它让您可以规模化管理设计。组件、规则和指引组成的库有助于在不同设计师、开发人员、团队以及产品之间保持一致性。设计系统随着需求变化而变化,使设计师和开发人员可以快速、轻松地更新一个复杂平台上的界面和工具。

了解参与者

任何设计系统的好坏都取决于它的利益相关者。

  • 消费者是使用设计系统的元素构建应用程序的设计师、开发人员和利益相关者。如果公司(如 Salesforce)拥有在公司平台上开发应用程序的客户生态系统,则消费者可以来自于创建设计系统的公司内部和外部。
  • 投稿人创作构成设计系统的元素和图案。对于每一次版本发布,任何人都可以提出新的图案、组件或指引,或提议修改现有内容。
  • 管理者是设计系统的守护者。这个由工程师、产品设计师以及视觉设计师组成的团队维护这个设计系统,监督它的代码,教社区如何用它。管理者审核提出的更新,并且结合更新进化这个设计系统。

如果您在读这个内容,您很可能是 SLDS 消费者或投稿人。

Salesforce 的 Lightning Design System

在 Salesforce,我们的一切均围绕设计系统。Salesforce Platform 如此强大的一个原因是它可以灵活满足各种不同用户的复杂需求。

把积木拼接在一起,扣紧,打造一艘宇宙飞船

我们还在快速发展壮大,扩展我们的产品范围和我们的员工人数。随着我们不断成长,我们满足更多用户需求。我们迫切需要高效、规模化地设计出统一的产品体验。

SLDS 帮助 Salesforce 团队做到这一点。用例特有的模式帮助设计师更快速迭代,更高效打造统一的解决方案。组件开发人员总是拥有最新的框架,包含干净、易用的标记和像素完美的 CSS,帮助他们以更少的错误更快地工作。客户和合作伙伴用经常更新、干净、一致的系统在 Salesforce Platform 上构建自定义,这个系统包含清晰的说明和设计示例,消除对任何软件进行反向工程的冲动。

大多数设计系统提供完全可用的代码。但是由于 SLDS 支持如此多不同的代码库,比如 Lightning Web 组件和 React,它必须保持独立。(要进一步了解 SLDS 与其他设计系统的区别,请参考本单元末尾的资源部分。)

下面,我们将回顾很久很久以前 SLDS 的诞生历史。

资源

在 Salesforce 帮助中分享 Trailhead 反馈

我们很想听听您使用 Trailhead 的经验——您现在可以随时从 Salesforce 帮助网站访问新的反馈表单。

了解更多 继续分享反馈