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设计, 设计文章, 设计师

版权声明

本文来自互联网用户投稿,文章观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符,请点击 举报 进行投诉反馈!

相关文章

立即
投稿

微信公众账号

微信扫一扫加关注

返回
顶部