# 空状态
待校勘
空状态告诉用户没有要显示的内容 - 以及他们接下来可以做什么。
# 介绍
空状态是没有任何内容需要向用户显示。它们可以出现在软件使用过程中的任何位置，包括PC客户端软件和移动端界面。他们可以提醒用户清空搜索结果，应取消的功能或某些情况下的错误。它们甚至可以告诉用户空白区域是故意留空的。
# 用法
空状态是人机交互的手段。它应该告诉用户什么是对的，为什么会看到它，以及他们下一步可以做什么。 这是一个吸引用户的机会，增加用户黏性与提升用户参与度。它可以引导用户完成初次使用流程，或帮助他们从Salesforce获得更多价值，而不会立即用太多信息吓跑用户。这是一个强化自身品牌的好方法，同时可以为使用过程中提供有趣的体验，增加软件使用过程中的趣味性。 在设计空状态时，要考虑它对桌面和移动用例的的不同特点。例如，它是在两种环境中使用，还是只在一种环境中使用？文案用语是否适用于移动用户？图像如何在小屏幕上如何显示？
# 部分
每个空状态都必须有一条主题文案（消息）。一个CTA，另外，提示语和文字说明是可选的。
 | |
| Empty state with body text only | Empty state with an illustration and body text |
 |  |
| Empty state with an illustration, headline, and body text | Empty state with an illustration, headline, body text and call to action |
# 信息
# 概述
空状态消息由两部分组成：
- 标题是为了传递更多信息，同时个页面增加一些乐趣。
- 正文文本添加细节便于更加吸引用户。
为了便于阅读，每行文字长度不能超过66个字符；尽量将线条长度保持和插图的宽度相等；编写副本时应该考虑本地化。
# 用法
确保消息，宣传性文案用语和插图能协调一致（具有关联性）。不要只是为了有趣而忽略了信息传达的准确性。如果图片发生了改变，要及时修改，保持图片和文本的同步关联性： 一个优秀的空状态的基本指导原则：
- 标题应以动词开始。用友好，平易近人的语调。
- 正文应简短且内容丰富，告诉用户发生了什么。并保持语调一致。
Messages in empty states can include a headline and body text
# Call to Action(CTA)
# 概述
Call to action代表行动指令。它是一个按钮，引导人们做出最正确的选择。Call to action（行动指令）可帮助用户从空状态移动到一个对他们有帮助的新页面（组件/元素）。 CTA（Call to action行动指令）是可以选择的，但很有帮助。它们应该尽可能具体，回答问题用户接下来应该做什么？
# 用法
编写CTA（行动指令）时，要考虑用户下一个最有可能的最佳操作。CTA（行动指令）可以让用户（按照优先顺序）：
- 单击立即执行操作
- 启动一种方法来帮助“填补”空状态
- 启动向用户讲解该功能的介绍
- 在新页面中启动Trail head（开始）模块
- 在新页面中启动相关的帮助内容
当然，并非所有CTA(行动指令)都有明确的下一步操作。 选择CTA（行动指令）时的一些注意事项：
- 许多平台的功能受用户权限的限制。看到您的CTA（行动指令）的所有用户是否都有权限？如果没有，请考虑更通用的CTA，或者根本不考虑。
- 当前空洞状态是教育用户重要，还是让用户快速进行下一步操作更重要？如果这是一个用户经常进行的操作（例如，创建新记录），应该告诉用户解决问题的办法，以便用户可以学习。如果它是一个是一次性的动作，那么请使用其他形式或者快捷的方式。
- 你需要两个CTA（行动指令）吗？通常情况下，一个就足够了，但偶尔你会想要一个帮助用户“填充”空状态的主CTA，再加上一个提供上下文或指向学习机会的CTA（行动指令）。如果第二个CTA（行动指令）有用，则应将其放在正文之后（或者如果没有正文，则代替正文）。
- 不要重复CTA（行动指令）中的标题。 CTA（行动指令）展示位置：
- 在文案后面直接显示文本链接。
- 文案链接，在视觉上与文案分开。
- 文案链接+图标，在视觉上与消息分开。
- 使用两个CTA（行动指令），将主CTA（行动指令）与消息分开，并在文案后面放置辅助CTA（行动指令）。切勿使用两个以上的CTA（行动指令）。
 |  |
| Call to action as a link in the body text | Call to action as a link below the body text |
 |  |
| Call to action as a button below the body text | Call to action in the body text and as a button below |
# 插画
# 概述
对于空状态，插图是可选的 - 但它们是增加趣味和视觉兴趣的好方法，同时帮助用户了解他们的情况。 用法 准确地使用插图- 许多人可能会忙碌而且容易混淆。 以来来说要使用软件规范里的插图，只有规范里没有合适的插图才可以绘制新插图。
- 选择一个有趣的并适合当前状态的合适插图。应该在没有文案解释的情况狂下，也能清晰地的理解图片要传达的内容。
- 应该把文案写在背景颜色上，而不要写在图片上，因为需要考虑图片没有加载出来的情况下文案也能够被理解。
 |  |
| Keep characters in the background | Don’t put characters at the forefront of an illustration |
当空状态图有彩色时：
- 保持图片上前景对象的是白色的（如下图）
- 不要从对象中删除填充
- 背景色永远不要用纯白色
 |  |
| Keep white fills in foreground objects | Don’t remove fills from objects |
插图应该使用来帮助描述当前状态的，有时候并不一定非得使用插图。如果您的插图没有任何帮助增加用户理解的作用，那么请抛弃他。下列情况下可能不需要插图：
- 在其他组件内部使用组件时不需要插图
- 插图并不能让当前状态变的更加清晰的时候不需要插图
- 与其他空组件同时出现的时候不需要插图 如果有必要使用插图，那么应该根据情况选择合适的图片（插图）尺寸 。
- 当空状态可能是页面上的唯一内容或主要焦点时（例如，在“设置”页面上），请使用大图。
- 如果页面上有多个空状态，或者组件将在多个页面上使用，请使用小插图。
- 插图可以作为一个整页，还可以在页面的主体或侧边栏中，或在组件中存在。
 |  |
| Empty state illustration scaling for a large area | Empty state illustration scaling for a small area |
——《论语》