交互设计基础聊聊移动APP中反馈提示的设计方法与实例.pdfVIP

交互设计基础 | 聊聊移动 APP 中反馈提示的设计方法与实例 给用户及时、恰当的反馈，是交互设计非常重要的一项原则。由搜狐新闻客户端团队撰写的《设计 之下》一书中，对操作反馈从形式、内容、位置几个方面做了非常详细的总结，满满干货。今天 @ 青溪 Joanna 这篇读书笔记提取了书中的要点并配上实例，分享给大家。 一、为什么要反馈 1 、以人与人的交流为例 1）人与人的交流中，无法忍受的一种情况是：对方对自己说的话没有反应，好像视而不见。 2 ）没有反馈或是不友好的反馈，就好像冷冰冰的人一样，会给用户带来无助或不悦的负面体验 2 、及时恰当的反馈的用处是什么 1）能够告诉用户下一步该做什么 2 ）帮助用户做出判断和决定 二、反馈的形式 反馈的形式多样，所有的提示都应该在恰当的时候出现在恰当的位置， 用简短而清晰的文字提供有 用的信息，不让用户产生迷惑。 气泡状提示 1）用处一 下图三个例子都属于操作结果的反馈提示，图 1提示添加收藏成功，采用系统自带的 toast 吐司提示 ；图2是新微博加载成功的提示，在导航栏下方浮在 内容区上方；图 3是 QQ 空间添加到歌单的提示 ，显示在导航栏背景色与状态栏颜色一致，效果不错。尽管展示位置不同，但这些提示都是短暂的 出现在画面上， 1 秒左右消失。 2 ）用处二 用于引导，就像漫画中的对话框一样，带有一个指向具体位置的小尖，提示用户需要关注哪个位置 。 与用处一不同，这类引导类提示通常不回很快消失。如下图，图 1奇妙清单、图 2知乎的例子，都提 供了关闭按钮，用户既可以点击指引区域也可以点击关闭按钮，来让提示消失；图 3来自图片社 交App —— in，用户点击指引区域才能让提示消失。 3 ）不足之处 容易被用户忽略，所以不适合承载太多文字或重要信息 弹出框 1）用法 2 ）特点 3 ）设计注意 按钮 / 图标/链接的按下状态 1）基于人在现实世界经验 2 ）人机交互 如下图，图 1是iPhone 照片界面，点击按下右上角的 选择“ ”，文字透明度变高、颜色变淡；图 2 是豆 瓣App ，点击某个区块时显示背景色表示按下的效果；图 3 、4 是知乎 App ，点击按下按钮时，背景 颜色加深，同时按钮尺寸动效缩小。 声音 1）常见例子 2 ）设计注意 振动 1）用处 2 ）例子 3 ）设计注意 动画 1）用处 2 ）例子 三、反馈的内容 信息 1）设计注意 警告 1）用处 2 ）特点 错误 1）用处 2 ）设计注意 确认 1）用处 2 ）设计注意 四、反馈出现的位置 状态栏 1）优点 2 ）缺点 3 ）例子 如下图，图 1 、2是新浪微博 App ，在写微博界面点击 发送“ ”，回到原界面同时状态栏提示发送状态 ；图3是网易邮箱大师 App ，邮件发送后离开写邮件界面，同时右上角提示邮件的发送进度。 通常发送内容时，需要一定的时间，为了不让用户空等、还能去做点别的事儿，将等待过程弱化是 很有必要的。 导航栏 1）使用场景 2 ）例子 如下图，图 1是QQ 音乐添加歌单的提示，前文也有提到；图 2是AppFlow ，加载内容时在导航栏 提示，加载完成后再回到原状态，这种方式在 Reeder 中也有用到。 内容区上方 1）使用场景 屏幕中心 1）使用场景 2 ）设计注意 菜单栏上方 1）使用场景 2 ）例子 如下图，豆瓣 App ，加载首页内容，暂无更新的提示。既告知了用户结果，又引导用户去搜索更多 兴趣，让首页内容变得更加丰富。 底部（覆盖菜单栏） 1）使用场景 2 ）例子 如下图， Keep 下载视频的提示，进度条显示在底部，此位置较为明显也不会影响用户浏览内容区。 五、反馈的设计原则 # 专栏作家 # 青溪 Joanna ，微信公众号 -青溪札记（ qingxizhaji ）