学习目标
完成本单元后，您将能够：
- 描述Salesforce Lightning设计系统是什么以及它的用途。
- 描述设计系统所依据的关键设计原则。
介绍闪电设计系统
Salesforce用户体验团队一直在努力将Enterprise UX推向21世纪，并为能够提供Lightning设计系统而感到自豪。设计系统使您可以轻松构建符合新Salesforce Lightning外观的应用程序，而无需将UI反向设计为自定义CSS。实际上，使用新的设计系统标记会导致在没有编写任何CSS的情况下具有Lightning外观和感觉的页面。感兴趣吗？激动吗？我们是！阅读。
闪电设计系统是相当的一口，所以我们在这里称之为“设计系统”。
您可能使用了其他类似的设计系统，例如Twitter Bootstrap或Foundation来构建网站。这个设计系统的主要好处是：
- 它是为构建Salesforce应用程序而量身定制的。使用Design System标记和CSS框架会生成反映Salesforce Lightning外观的UI。关注构建应用程序是一个重要的记住。设计系统不会过度执行诸如填充和边距之类的默认设置，而其他一些框架则专注于构建营销页面。设计系统可让您轻松指定所需的确切布局，同时符合新的Lightning UI。
- 它不断更新。只要您使用的是最新版本的设计系统，您的页面就会始终与Salesforce UI更新保持同步。
- 辅助功能被烘焙到组件背后的CSS框架中。
- CSS完全由slds-前缀命名，并且使用slds-scope类作用域以避免CSS冲突。
设计系统捆绑了四种类型的资源来帮助您构建应用程序。
- CSS framework — 定义UI组件，例如页面标题，标签和表单元素，网格布局系统和单一用途的帮助程序类，以帮助进行间距，大小调整和其他视觉调整。
- Icons — 包括我们的动作，自定义，文档类型，标准和实用程序图标的PNG和SVG（包括个人和spritemap）版本。
- Font — 印刷术是我们产品的核心。我们从头开始设计了全新的Salesforce Sans字体，为我们的产品提供独特的视觉语音和个性，并将其作为设计系统的一部分提供给您。
- Design Tokens — 这些设计变量允许您调整视觉设计的各个方面以匹配您的品牌。可定制的变量包括颜色，字体，间距和大小。
设计系统围绕现代浏览器的功能而构建，并具有一些最低限度的浏览器要求。 Chrome，Safari和Firefox的现代版本已经过全面测试。对于Microsoft Internet Explorer（MSIE），Design System仅支持版本11和Microsoft Edge。早期版本的MSIE的用户可能会遇到诸如缺少图标等问题。
核心设计原则
设计系统代表的Lightning Experience UI是使用四个核心设计原则制作的。我们鼓励您在开发应用程序时记住它们。
- 清晰 —消除歧义。使人们有信心地看到，理解和行动。新的用户界面减少了混乱，使用户可以很容易地找到他们需要的信息。
- 效率— 简化和优化工作流程。智能地预测需要帮助人们更好，更聪明，更快地工作。例如，新的Lightning用户界面按钮可以改善行动号召力。
- 一致性 — 通过对相同的问题应用相同的解决方案，创造熟悉性并增强直觉。例如，新UI在所有上下文中强制执行一个按钮样式。
- 美丽 — 通过周到和优雅的工艺，展现对人们时间和关注的尊重。一个UI可以美丽吗？我们这么认为！
你可以在哪里使用设计系统
新的设计系统使得在一系列技术堆栈中构建符合Lightning的Salesforce应用程序变得简单易行。
- Visualforce pages 通过远程对象或JavaScript远程访问来访问Salesforce数据。设计系统还不兼容<apex>标签，但请留意这个空间。
- Lightning pages and components 可用于Salesforce1和Lightning Experience
- Mobile apps 通过Mobile SDK或其他API访问Salesforce
- Standalone web apps Heroku或类似平台提供
模块先决条件
该模块的其余部分包括一些有趣的手动技术工作。在您进入之前，请查看以下先决条件：
- 您必须有权访问Salesforce开发者帐户。
- 示例页面假设您具有Web开发（HTML，CSS，JavaScript）和Salesforce管理的一些知识。
- 该模块着重于使用Visualforce页面中的设计系统，因此有一定的技术经验是有益的。 但是，尽管代码示例是特定于Visualforce的，但您可以在其他堆栈中重复使用它们，但只需进行较小的自定义操作。