人机交互过程中很重要的一点就是操作的反馈,我们要对用户的操作给出及时的反馈,即时的响应会给用户增加信赖感。
mPaaS 提供了一系列的反馈组件,需要在不同的场景下选择正确的反馈形式进行反馈。
反馈原则:
为用户在各个阶段的操作提供必要、积极、即时的反馈;
避免过度反馈,以免给用户带来不必要的打扰,能够及时看到效果的、简单的操作,可以省略反馈提示。
必要反馈
为用户在各个阶段的操作提供必要、积极、即时的反馈。
正确示例:打开空白页面明确告知用户需要等待。
错误示例:打开空白页面,没有任何等待提示。
避免过度反馈
过度反馈会给用户带来不必要的打扰,应避免。
错误示例 1:用户主动关闭收银台,会弹出对话框让用户确认是否退出,显得十分多余。
错误示例 2:在服务窗中,删除某个服务窗的时候会展示删除成功的轻提示(toast)。此时页面状态已经发生明显的变化,这个轻提示(toast)完全没有必要。
启动页加载
在应用程序中,启动页是小程序在一定程度上展现品牌特征的页面之一。
本页面将突出展示小程序品牌特征和加载状态。启动页除品牌标志(Logo)展示外,页面上的其他所有元素如加载进度指示,均由 mPaaS 统一提供且不能更改,无需开发者开发。
操作面板(ActionSheet)
操作面板是一种特殊类型的弹出框,集合展示多个操作选项。
定义及原则
操作面板给用户提供多个操作选项进行选择。
操作面板的最大高度是限定的,最多不能超过 5 个操作选项。
操作面板是一种特殊形式的弹出框,它出现的时候页面同时会盖上一层半透明的蒙层。
活动指示器(ActivityIndicator)
加载组件将页面内容的加载过程可视化,减轻用户的等待感。
定义及原则
当用户进入一个新页面或提交了某个操作,页面的加载需要用户等待时,我们应该用进度条告知用户加载的进度。否则,用户的等待会变的茫然和漫长,从而愤然离开你的页面。
我们有直线进度条和圆形进度条两种样式,并且分别对样式进行了统一的定义。
示例
页面启动加载进度条:
用户使用 mPaaS 框架加载一个全新的在线页面的时候,导航栏的下方会出现一个直线形页面加载的进度条,展示当前页面内容加载的进度。加载进度条由 mPaaS 统一提供且不能更改,无需开发者开发。
模态加载:
当页面提交内容以后需要等待时使用模态加载,模态的加载样式将覆盖整个页面。由于无法明确告知具体加载的位置或内容,模态加载可能引起用户的焦虑感,因此应谨慎使用。除了在某些全局性操作下以外,尽量不要使用模态的加载。
局部加载:
局部加载反馈即只在触发加载的页面局部进行反馈,这样的反馈机制更加有针对性,页面跳动小,是 mPaaS 推荐的反馈方式。
对话框(Modal)
对话框出现的目的应该是告知用户必须知道的重要信息,或者让用户做出必要的选择。
定义及原则
对话框由一两句说明文字和操作按钮组成,有两种用法:
确认和取消重要操作(如是否删除内容);
告知用户非常重要的信息(如出现严重错误)。通常会用加粗的颜色,突出显示可能造成用户损失的操作项(比如,“删除”、“不保存”、“取消”)。
对话框一定要慎用。必须是用户非知道不可,或者是用户必须亲自做决策的内容才使用对话框。否则,我们应选用轻提示(toast) 等其他较弱的反馈方式。
视觉样式
标准的对话框由标题、正文、行动选项三部分组成。特殊类型的对话框可以加入图片和插画,更好的向用户传递信息。
示例
警告和报错
当用户的操作会产生不可挽回的损失时,应该出现二次确认的对话框,提示用户注意。
删除二次确认:
当用户的操作发生错误时,对话框告知用户错误的原因以及接下来应该怎么做。
表单提交出错:
带插图的特殊对话框
某些场景下你可能希望对话框加上图形的传达更佳的生动活泼,此时可使用带插图的特殊对话框。
轻提示(Toast)
轻提示(Toast)是一种比较轻量的操作反馈或者提示信息,它其实是一种弱化版的对话框。它就像气泡一样,在界面上展示短暂的时间(1.5 秒或 3 秒),然后自动消失。它不强制用户做任何操作和确认,所以对用户的打扰比对话框小。
轻提示(Toast)一般用来确认用户执行的任务状态或者操作结果,也可以向用户提示一些轻量的信息,如:网络异常、加载失败等。
定义及原则
页面能及时看到状态变化的,不能再使用轻提示(Toast)提示,以免造成过度反馈。
轻提示(Toast)加载属于阻断式加载,也要少用,尽量用其他方式代替。
轻提示(Toast)显示时间较短,文案最多只能展示 15 个字符。