APP 交互设计中的反馈
用户在网页上的任何操作,不论是单击、滚动还是按下键盘,页面应即时给出反馈。
作为产品设计与用户体验设计的重要参考标准—尼尔森十大可用性原则的第一条“状态可见原则”:即用户在网页上的任何操作,不论是单击、滚动还是按下键盘,页面应即时给出反馈。“即时”是指页面响应时间小于用户能忍受的等待时间。这里所说 的“状态可见原则”,便是我们常说的“反馈”。
反馈,作为iOS人机界面指南的设计原则中的一条,这样被描述:Feedback acknowledges actions and shows results to keep people informed. The built-in iOS apps provide perceptible feedback in response to every user action. Interactive elements are highlighted briefly when tapped, progress indicators communicate the status of long-running operations, and animation and sound help clarify the results of actions.
那么到底什么是反馈?
反馈 (Feedback)在人机交互中用以明示用户的行为,呈现操作结果(成功或失败),并更新于任务进程之中(产品/系统的异常/错误)。为用户的每个行为提供可感知的、即时的反馈,给予用户信赖感。
反馈的类型通常分为以下几种:
操作成功反馈
操作失败反馈
错误提示
反馈的形式
反馈的形式多种多样,以下列出的为常见类型:
1、按下状态
可操作区域,如按钮、列表等,当手指按下去时出现的状态变化,以表明其可操作性(类似于Web短的鼠标悬停)。
Android 7.0 触控涟漪效果
iOS 微信消息列表按下效果
2、活动指示器(Activity Indicators)
用于表明某个任务正在进行,通过将过程可视化,以缓解用户的等待焦虑感。
当程序不知道当前任务的完成比列和不确定完成时间,但需要告知用户当前任务正在进行时,使用活动指示器。通常在以下两种使用场景:
进入新页面,加载新页面内容。如进入视频页面,视频的加载;
提交了某项内容/操作。如提交注册表单、列表上拉加载;
Youku视频加载页
微博粉丝列表加载
3、进度指示器(Progress Indicator)
当一个操作需要一定时间完成时,即时告知当前的进度,保持与用户的实时沟通。进度条在表明程序正在响应的同时,还能告知用户任务的当前进度和具体的完成时间(如果系统知道)。如列表/页面的加载、表单提交后的校验。
Safari的页面加载
QQ发送图片的进度提示
4、实时预览
在用户提交输入之前,让用户先行了解系统将如何处理其输入。如照片的美化操作、搜索的自动补全与实时联想。
微信表情长按可预览表情效果
iOS系统相册在编辑图片时,可实时预览滤镜效果
根据用户的输入,实时提供关于密码强度和有效性反馈
5、Toast
Toast是一种比较轻量的操作反馈/提示(弱化版的对话框),占用屏幕空间小,适用范围广,不会打断用户操作。由于Toast通常展示时长1.5s(成功)或3s(失败),然后自动消失。因比较容易被用户忽略,不适合承载太多文字或重要信息。通常用于:
1.确认用户执行的任务状态或操作结果。如关注成功/已取消关注、收藏成功;
2.简单的数据交互提示,如加载失败、网络连接失败、网络异常等;
使用Toast时应注意:
1.一次只显示一个Toast;
2.文案简单明了,字数不宜太多(尽量不超过15个字符);
3.Toast出现的区域为屏幕正中间,无遮罩;
4.通常在当前页面进行反馈,特殊情况下的成功反馈可不在当前页面;
天猫取消关注提示
6、对话框
对话框(Dialogos)用作告知用户必要的信息或请求用户作出必要的操作。对话框一般由简短的文字信息和操作按钮组成:
1.确认或取消重要的操作,如删除内容;
2.告知用户非常重要(必要)的信息,如观看视频过程中网络切换、系统奔溃;
由于对话框作为模态反馈的方式,会打断用户操作,所以只在必要的时候使用。同时在使用过过程中需注意以下:
1.内容应该简明清晰,一般不多于 2 行;
2.操作按钮最多到 3 个(竖排),一般为 1-2 个(横排),3 个以上建议使用组件 ActionSheet 来完成;
3.一般将用户最可能点击的(或产品希望用户点击的)按钮放在右侧,取消按钮应当始终放在左侧;
4.突出显示可能造成用户损失的操作项,如删除、不保存;
微信修改密码编辑弹窗
7、 其他反馈方式:声音/震动/动效
反馈的形式多种多样,除了以上的几种,还可以使用声音、震动、动效等方式。
短信、邮件发送成功后“嗖”的一声、微信以摇一摇之后的“咔嚓”声、相机拍照时的“咔嚓”声;开启语音时的震动、接受到新消息时的震动;购物车加入商品时的商品的飞入动效等。
微信的“摇一摇”,在摇一摇过程中进行声音提示
电商产品如天猫,将商品加入购物车时,有当前商品飞入导航栏购物车的动效
反馈的位置
不论何种反馈方式,都应该是在恰当的时候出现在恰当的位置。市场上各类产品的反馈位置各异,如
1.状态栏:如网络指示器;
2.导航栏;
3.导航栏与内容之间:如新微博提示、下拉刷新;
4.内容中间:如网络加载提示;
5.底部标签栏上方;
6.屏幕底部;
对于反馈位置的选择,通常可遵循以下原则:
1.当前页面的反馈,通常放在当前操作的位置,以加强操作与反馈的关联性。如下拉刷新、QQ消息的发送、微信朋友圈的数字与小红点提示;
2.页面加载/刷新/跳转或数据提交的反馈,通常放在符合用户预期的位置,以获得用户的关注;
飞行模式下发送的QQ消息时,在当前发送内容的左侧进行发送提示
微信登陆反馈飞行模式下发送的QQ消息时,在当前发送内容的左侧进行发送提示
反馈的整体原则
1.避免过度反馈,以免给用户带来不必要的打扰(能够及时看到效果的、简单的操作,可以省略反馈提示);
2.即时反馈,为用户在各个阶段的操作提供即时的反馈;
3.反馈的信息应简明清晰,以高效辅助用户进行下一步的操作;
4.反馈的方式根据信息的重要程度和相应的场景选择,可同时使用多种反馈方式;
在实际工作中,需根据不同的场景,选用不同的反馈方式,在相应的位置进行反馈,以帮助用户理解,获得更好的产品体验。
参考:
《iOS人机界面指南》
《设计之下》
《微交互》
《About Face 交互设计精髓》
/UI中国
关键字:设计, UI设计, 设计文章, 设计师
版权声明
本文来自互联网用户投稿,文章观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符,请点击 举报 进行投诉反馈!