空状态

待校勘

空状态告诉用户没有要显示的内容 - 以及他们接下来可以做什么。

空状态告诉用户没有要显示的内容

介绍

空状态是没有任何内容需要向用户显示。它们可以出现在软件使用过程中的任何位置,包括PC客户端软件和移动端界面。他们可以提醒用户清空搜索结果,应取消的功能或某些情况下的错误。它们甚至可以告诉用户空白区域是故意留空的。

es-2

用法

空状态是人机交互的手段。它应该告诉用户什么是对的,为什么会看到它,以及他们下一步可以做什么。 这是一个吸引用户的机会,增加用户黏性与提升用户参与度。它可以引导用户完成初次使用流程,或帮助他们从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个字符;尽量将线条长度保持和插图的宽度相等;编写副本时应该考虑本地化。

用法

确保消息,宣传性文案用语和插图能协调一致(具有关联性)。不要只是为了有趣而忽略了信息传达的准确性。如果图片发生了改变,要及时修改,保持图片和文本的同步关联性: 一个优秀的空状态的基本指导原则:

  • 标题应以动词开始。用友好,平易近人的语调。
  • 正文应简短且内容丰富,告诉用户发生了什么。并保持语调一致。

Message

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

※ Lighting design system