交互反馈

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

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

反馈原则：

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

必要反馈

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

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

  

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

  

避免过度反馈

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

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

  

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

  

启动页加载

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

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

操作面板（ActionSheet）

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

定义及原则

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

活动指示器（ActivityIndicator）

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

定义及原则

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

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

示例

• 页面启动加载进度条：

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

• 模态加载：

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

• 局部加载：

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

对话框（Modal）

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

定义及原则

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

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

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

视觉样式

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

示例

警告和报错

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

  删除二次确认：

  

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

  表单提交出错：

  

带插图的特殊对话框

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

轻提示（Toast）

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

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

定义及原则

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