您好、欢迎来到现金彩票网!
当前位置:双彩网 > 信息框提示 >

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

发布时间:2019-06-04 02:30 来源:未知 编辑:admin

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

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

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

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

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

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

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

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

  iOS系统在删除邮件、照片时,通过拟物化的动画效果,让用户知道操作已经生效,即——不要的邮件或照片已经被丢入了垃圾桶。 这种形象的动画,帮助用户清晰感受到操作的执行过程,并增添了乐趣。

  在一些会持续比较久的操作里,比如下载、删除大量文件,用动态的进度条展示已完成的进度,并在可能的时候提供解释信息,能够减少用户的焦虑。

  如下图,图1、2是新浪微博App,在写微博界面点击“发送”,回到原界面同时状态栏提示发送状态;图3是网易邮箱大师App,邮件发送后离开写邮件界面,同时右上角提示邮件的发送进度。

  通常发送内容时,需要一定的时间,为了不让用户空等、还能去做点别的事儿,将等待过程弱化是很有必要的。

  如下图,图1是QQ音乐添加歌单的提示,前文也有提到;图2是AppFlow,加载内容时在导航栏提示,加载完成后再回到原状态,这种方式在Reeder中也有用到。

  如下图,豆瓣App,加载首页内容,暂无更新的提示。既告知了用户结果,又引导用户去搜索更多兴趣,让首页内容变得更加丰富。

  如下图,Keep下载视频的提示,进度条显示在底部,此位置较为明显也不会影响用户浏览内容区。

  青溪Joanna,微信公众号-青溪札记(qingxizhaji),交互设计师一枚,喜欢体验各种App,关注社交、在线O、工具类产品;擅长需求分析、交互设计,有一定前端开发经验;业余时间喜欢网球、ukulele、简笔画,正在努力攒技能。

  人人都是产品经理(是以产品经理、运营为核心的学习、交流、分享平台,集媒体、培训、社群为一体,全方位服务产品人和运营人,成立8年举办在线+期,线+场,产品经理大会、运营大会20+场,覆盖北上广深杭成都等15个城市,在行业有较高的影响力和知名度。平台聚集了众多BAT美团京东滴滴360小米网易等知名互联网公司产品总监和运营总监,他们在这里与你一起成长。

http://indiacrazy.com/xinxikuangtishi/130.html
锟斤拷锟斤拷锟斤拷QQ微锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷微锟斤拷
关于我们|联系我们|版权声明|网站地图|
Copyright © 2002-2019 现金彩票 版权所有