---
schema_version: "1"
id: 200debfc591aeaecf9b26202da1c591dd1b5c879031cb25e814f90d9ece13176
title: 标准组件
collection: architect
version: next
locale: zh-cn
portal_url: https://docs.salesforce.com/architect/next/zh-cn/reference-diagrams/guides/kit-of-parts.md
canonical_url: https://staging.architect.salesforce.com/docs/architect/zh-cn/reference-diagrams/guide/kit-of-parts.html
source_site: staging.architect.salesforce.com
content_type: documentation
content_hash: 26f9651d25f06a97d0d7ff8a9d090bc9487f71724e8f4af7ef30aa2fa3c390e9
products:
- 参考图表
- Architect Site Content Repo
updated_at: 2024-09-15T00:00:00Z
---
## 标准组件
标准组件可让您轻松构建、自定义和重用高质量、一致的图表。此专业样式用于所有 Salesforce 图表模板，并适用于我们的合作伙伴工具，用于绘制用例图表：
查找如何在[参考架构库](https://architect.salesforce.com/diagrams#reference-architecture-gallery)中使用组件的示例
## 最佳实践
以下部分介绍了标准组件中包含的[标题](#标题)、[卡片](#卡片)、[图标](#图标)和[连接器](#连接器)的详细最佳实践。
## 标题
标题应出现在所有图表上，并包含：
- 受众可以快速理解的标题
- 图表涵盖内容的清晰描述、目的和意图
- （可选）您的徽标或公司名称，以传达作者
- （可选）用于澄清用作分类的图标、设计或符号的密钥
该大小应至少占据图表高度的 10% 和宽度的 100%。
描述的字体大小应至少是标题大小的一半。
当使用的图标、连接器、颜色等未在图表本身上指定标题时，应包含密钥。键应尽可能分组为偶数行。
## 卡片
图表的所有属性应使用卡片表示。卡片可以调整大小，并且可以有透明或彩色的填充。卡片的多个部分提供了变体，您可以使用它们来表示图表中的不同概念。
### **卡片解剖**
下面是一个示例卡，描述了不同的部分。唯一必需的卡片内容是标题。其他部分可根据需要用于特定用例。
**卡片图标**
卡片图标是代表卡片属性的可视资产
**卡片标题**
卡片标题是可以快速理解的卡片名称，它包含卡片代表的房地产、区域或概念
**卡片属性**
卡片属性是基于文本的属性详细信息，以列表形式表示，并在您需要捕获和传输多个数据点时使用
**卡片页脚**
卡页脚提供了属性的其他特征。示例包括：软件包/对象/ API 名称、所有权、功能等。
**卡页脚图标**
页脚图标部分用于可视资产，以显示有关房地产的其他信息。示例包括：渠道、共享服务、功能等。页脚图标应包含在图表密钥中/解释。
### **卡片变体**
使用不同的部分会为不同的用途提供不同的卡片变体。您可以根据需要混合和匹配卡片结构，以在图表中创建这些变体。请参阅以下示例：
有关如何使用这些变体的意见，请参考[参考架构图库](https://architect.salesforce.com/diagrams#reference-architecture-gallery)。
根据需要，利用调整卡片大小和颜色的功能来区分类型，并创建清晰易懂的图表。
## **容器**
卡片也可以用作容器，即多个属性的分组。您可以将卡片嵌套在另一个卡片中，以表示层次关系，或根据需要对相关属性进行分类。
## **图标**
Salesforce 图表提供了一组基本的 Salesforce 产品徽标以及其他图标来表示图表中的房地产和其他区域。
您可以在[参考架构图库](https://architect.salesforce.com/diagrams#reference-architecture-gallery)中找到如何使用图标的示例
_有关其他图标，请参阅 [Lightning 设计系统图标。](https://www.lightningdesignsystem.com/icons/)_
## 连接器
连接器应始终使用弯头连接线，并尽可能笔直，以提高可读性。
**连接器**代表两个卡片之间的关系、集成或流程步骤。线样式表示不同类型的连接，应表示在您的图表键中。端点表示集成或流程连接器的方向。端点还指示关系连接器上的基数和定序。
**药片**用于提供有关连接的详细信息。有关药丸的使用示例，请参考[解决方案架构](/docs/architect/zh-cn/reference-diagrams/guide/section-solution-architecture)和[交互流程](/docs/architect/zh-cn/reference-diagrams/guide/section-interaction-process-flow)图。
## 可访问性
全世界约有[13 亿](https://www.salesforce.com/company/legal/508_accessibility/#:~:text=Product%20Accessibility%20Status&text=Around%20the%20world%2C%20approximately%201.3,global%20economy%20that%20includes%20everyone.)人患有某种形式的残疾,占世界人口的 15 % 。可访问性是使您的图表对所有查看者都可以理解。有两个特定的重点领域可以帮助您的图表更容易访问：针对屏幕阅读器进行优化和适当地使用颜色对比度。
您可以在 [Salesforce 设计博客](https://medium.com/salesforce-ux/tagged/accessibility)中找到有关无障碍设计的更多资源。
**屏幕阅读器**
屏幕阅读器是一种软件应用程序，可以大声读取文件、应用程序或网站中的单词。屏幕阅读器可以为无法清楚查看图表的个人阅读图表。屏幕阅读器兼容性的最佳格式是 PDF（可移植文档格式）。与图像和不可访问的应用程序不同，屏幕阅读器可以访问 PDF，以阅读单词、形状和颜色。在与其他人共享时，将图表导出为 PDF 格式可以提高可访问性。
**颜色对比度**
增加颜色对比度是帮助图表更易于访问的另一种方法。当满足[网页内容可访问性](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html)指南 (WCAG) 的最低颜色对比度（文本后面的背景颜色和文本本身的颜色之间的比率为 4.5:1）时，人们将能够更好地识别和阅读您的图表。
[Salesforce 颜色系统](https://medium.com/salesforce-ux/the-salesforce-color-system-c7c6b5b9c577)中的每个颜色都有一个介于 0 和 100 之间的数字。为图表选择颜色时，请确保文本后面的背景颜色至少大于或小于文本颜色 50 点。例如，如果您的背景颜色是 80，那么您的文本颜色不应高于 30。考虑根据需要将 50 点规则用于边框和轮廓。
**是否有 Salesforce 图表输入或问题？**请在[这里](https://docs.google.com/forms/d/e/1FAIpQLSe5RmVA2ZtpfGlR2u436FA4QN6QmJGdAWxtZ_AcRLMAH_US9Q/viewform?usp=sf_link)告诉我们您的想法。
Lucidchart
元素
微型
Google 幻灯片