您的位置:首页 > 软件资讯 > 正文

聊聊移动A,PP中反馈提示的设计方法与实例

来源:网络 作者: 时间:2021-01-13

  给用户及时、恰当的反馈,是交互设计非常重要的一项原则。由搜狐新闻客户端团队撰写的《设计之下》一书中,对操作反馈从形式、内容、位置几个方面做了非常详细的总结,满满干货。今天@青溪Joanna 这篇读书笔记提取了书中的要点并配上实例,分享给大家。

  一、为什么要反馈

  1、以人与人的交流为例

  1)人与人的交流中,无法忍受的一种情况是:对方对自己说的话没有反应,好像视而不见。

  2)没有反馈或是不友好的反馈,就好像冷冰冰的人一样,会给用户带来无助或不悦的负面体验

  2、及时恰当的反馈的用处是什么

  1)能够告诉用户下一步该做什么

  2)帮助用户做出判断和决定

  二、反馈的形式

  反馈的形式多样,所有的提示都应该在恰当的时候出现在恰当的位置, 用简短而清晰的文字提供有用的信息,不让用户产生迷惑。

  1、气泡状提示

  1)用处一

  通常是短暂出现在画面上,就像气泡一样过一会儿就会自己消失,并不需要对它进行任何操作

  通常用于告诉任务状态、操作结果

  下图三个例子都属于操作结果的反馈提示,图1提示添加收藏成功,采用系统自带的toast吐司提示;图2是新微博加载成功的提示,在导航栏下方浮在内容区上方;图3是QQ空间添加到歌单的提示,显示在导航栏背景色与状态栏颜色一致,效果不错。尽管展示位置不同,但这些提示都是短暂的出现在画面上,1秒左右消失。

  2)用处二

  用于引导,就像漫画中的对话框一样,带有一个指向具体位置的小尖,提示用户需要关注哪个位置。

  与用处一不同,这类引导类提示通常不回很快消失。如下图,图1奇妙清单、图2知乎的例子,都提供了关闭按钮,用户既可以点击指引区域也可以点击关闭按钮,来让提示消失;图3来自图片社交App——in,用户点击指引区域才能让提示消失。

  3)不足之处

  容易被用户忽略,所以不适合承载太多文字或重要信息

  2、弹出框

  1)用法

  一般会带有一两句说明文字和两个操作按钮,用于确认和取消重要操作(比如,是否删除内容)

  通常会用明显的颜色,突出显示可能造成哟过户损失的操作项(比如,“删除”、“不保存”)

  2)特点

  弹出框的出现,会强迫用户关注弹窗内容和操作,并屏蔽背景的所有内容

  对用户打扰最大的一种提示

  3)设计注意

  弹出框上的说明、按钮上的文字,最好言简意赅、一目了然,能帮助用户快速做出决策。 因为通常用户都想赶快关掉弹出框,以便接着完成被打断的操作。

  设计过程中要避免滥用弹出框提示,对于不太重要又要反馈的事可以用气泡提示表示。

  3、按钮/图标/链接的按下状态

  1)基于人在现实世界经验

  在现实中按一个按钮会立即有按下状态

  2)人机交互

  当用户在屏幕上按下一个按钮或链接时,也需要有状态的改变,让用户知道界面已经接收到他的操作了。

  如下图,图1是iPhone照片界面,点击按下右上角的“选择”,文字透明度变高、颜色变淡;图2是豆瓣App,点击某个区块时显示背景色表示按下的效果;图3、4是知乎App,点击按下按钮时,背景颜色加深,同时按钮尺寸动效缩小。
黎林添娇 https://www.kugou.com/yy/singer/home/842630.html

【责任编辑:admin】