认识设计系统
学习目标
完成本单元后,您将能够:
- 认识一个好的设计系统的特点和功能。
- 描述设计师和开发人员如何使用、投稿给以及管理设计系统。
- 说明 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 的诞生历史。