全部产品

交互反馈

更新时间:2019-09-09 15:12:22

人机交互过程中很重要的一点就是操作的反馈,我们要对用户的操作给出及时的反馈,即时的响应会给用户增加信赖感。

mPaaS 提供了一系列的反馈组件,需要在不同的场景下选择正确的反馈形式进行反馈。

反馈原则

  1. 为用户在各个阶段的操作提供必要、积极、即时的反馈;
  2. 避免过度反馈,以免给用户带来不必要的打扰,能够及时看到效果的、简单的操作,可以省略反馈提示。

必要反馈

为用户在各个阶段的操作提供必要、积极、即时的反馈。

  • 正确示例:打开空白页面明确告知用户需要等待

    1

  • 错误示例:打开空白页面,没有任何等待提示

    2

避免过度反馈

过度反馈会给用户带来不必要的打扰,应避免。

  • 错误示例 1:用户主动关闭收银台,会弹出对话框让用户确认是否退出,显得十分多余。

    3

  • 错误示例 2:在服务窗中,删除某个服务窗的时候会展示删除成功的 toast。此时页面状态已经发生明显的变化,这个 toast 完全没有必要。

    4

启动页加载

在应用程序中,启动页是小程序在一定程度上展现品牌特征的页面之一。

本页面将突出展示小程序品牌特征和加载状态。启动页除品牌标志(Logo)展示外,页面上的其他所有元素如加载进度指示,均由 mPaaS 统一提供且不能更改,无需开发者开发。

5

操作面板(ActionSheet)

操作面板是一种特殊类型的弹出框,集合展示多个操作选项。

6

定义及原则

  • 操作面板给用户提供多个操作选项进行选择。
  • 操作面板的最大高度是限定的,最多不能超过 5 个操作选项。
  • 操作面板是一种特殊形式的弹出框,它出现的时候页面同时会盖上一层半透明的蒙层。

活动指示器(ActivityIndicator)

加载组件将页面内容的加载过程可视化,减轻用户的等待感。

定义及原则

当用户进入一个新页面或提交了某个操作,页面的加载需要用户等待时,我们应该用进度条告知用户加载的进度。否则,用户的等待会变的茫然和漫长,从而愤然离开你的页面。

我们有直线进度条和圆形进度条两种样式,并且分别对样式进行了统一的定义。

7

示例

  • 页面启动加载进度条:

    用户使用 mPaaS 框架加载一个全新的在线页面的时候,导航栏的下方会出现一个直线形页面加载的进度条,展示当前页面内容加载的进度。加载进度条由 mPaaS 统一提供且不能更改,无需开发者开发。

8

  • 模态加载:

    当页面提交内容以后需要等待时使用模态加载,模态的加载样式将覆盖整个页面。由于无法明确告知具体加载的位置或内容,模态加载可能引起用户的焦虑感,因此应谨慎使用。除了在某些全局性操作下以外,尽量不要使用模态的加载。

9

  • 局部加载:

    局部加载反馈即只在触发加载的页面局部进行反馈,这样的反馈机制更加有针对性,页面跳动小,是 mPaaS 推荐的反馈方式。

10

对话框(Modal)

对话框出现的目的应该是告知用户必须知道的重要信息,或者让用户做出必要的选择。

11

定义及原则

对话框由一两句说明文字和操作按钮组成,有两种用法:

  1. 确认和取消重要操作(如是否删除内容);
  2. 告知用户非常重要的信息(如出现严重错误)。通常会用加粗的颜色,突出显示可能造成用户损失的操作项(比如,“删除”、“不保存”、“取消”)。

对话框一定要慎用。必须是用户非知道不可,或者是用户必须亲自做决策的内容才使用对话框。否则,我们应选用 toast 等其他较弱的反馈方式。

视觉样式

标准的对话框由标题、正文、行动选项三部分组成。特殊类型的对话框可以加入图片和插画,更好的向用户传递信息。

12

13

示例

警告和报错

  • 当用户的操作会产生不可挽回的损失时,应该出现二次确认的对话框,提示用户注意。

    删除二次确认:

    14

  • 当用户的操作发生错误时,对话框告知用户错误的原因以及接下来应该怎么做。

    表单提交出错:

    15

带插图的特殊对话框

某些场景下你可能希望对话框加上图形的传达更佳的生动活泼,此时可使用带插图的特殊对话框。

16

17

轻提示(Toast)

Toast 是一种比较轻量的操作反馈或者提示信息,它其实是一种弱化版的对话框。它就像气泡一样,在界面上展示短暂的时间( 1.5 秒或 3 秒),然后自动消失。它不强制用户做任何操作和确认,所以对用户的打扰比对话框小。

Toast 一般用来确认用户执行的任务状态或者操作结果,也可以向用户提示一些轻量的信息,如:网络异常、加载失败等。

18

定义及原则

  • 页面能及时看到状态变化的,不能再使用 Toast 提示,以免造成过度反馈。
  • Toast 加载属于阻断式加载,也要少用,尽量用其他方式代替。
  • Toast 显示时间较短,文案最多只能展示 15 个字符。