UI设计中下拉刷新有什么讲究?

最早的下拉刷新 设计源自于Tweetie 这款应用的设计,设计师Loren Brichter 是这种令人欲罢不能的交互的缔造者。现在,下拉刷新 的交互几乎无处不在,但即便如此也让人无法轻易忽视它带来的快感。从Twitter 到 Gmail,从QQ到新浪微博,它几乎存在于你触手可及的每一个应用当中。

最早的下拉刷新设计源自于Tweetie 这款应用的设计,设计师Loren Brichter 是这种令人欲罢不能的交互的缔造者。现在,下拉刷新的交互几乎无处不在,但即便如此也让人无法轻易忽视它带来的快感。从Twitter 到 Gmail,从QQ到新浪微博,它几乎存在于你触手可及的每一个应用当中。

UI设计中下拉刷新有什么讲究?

今天的文章我们来聊聊下拉刷新要注意的各种问题以及优化的技巧。

下拉刷新是怎么运行的

简而言之,下拉刷新是刷新指示器于下拉手势想结合的产物,同时借助下拉动效完善整个交互。

UI设计中下拉刷新有什么讲究?

下拉刷新本质上是一种特定的手动刷新交互,和其他的同类操作不同的地方在于它采用了更加直觉的下拉操作。它的交互足够清晰明显,不过有的时候设计师依然会使用刷新指示器来显示自动更新的内容。不过,由于自动刷新的机制不需要用户进行任何操作,是因此自动刷新最好还是不要使用刷新指示器了。

什么时候使用下拉刷新

滑动刷新(包括下拉刷新)非常适合于列表、栅格列表和卡片集合之类界面(按照时间降序排列)。这类界面通常会随着时间推移,优先展示最新的内容,并且通常不会采用自动更新来刷新内容。不采用自动刷新的机制的原因很简单,当你滚动到顶部的时候,如果采用自动刷新,内容会不断自动下载显示,对于用户而言,这样的自动显示的机制并不可控。而下拉刷新则很好的解决了这个问题,只有在你使用下拉手势的时候,触发刷新指示器,再行更新,这样也给了用户选择和退出的机会。常见的下拉刷新用例:

UI设计中下拉刷新有什么讲究?

  • 内容流(Twitter,微博,RSS)
  • 收件箱(电子邮件,短信)

以Twitter 为例,推文是按照时间顺序排列,最新的推文在顶部,当用户下拉刷新之后,能够看到最新更新的推文。

什么时候不适合下拉刷新

下拉刷新并非万能的,它有不适宜使用的场景:

  • 屏幕小插件。这类小插件是需要自动更新的。

UI设计中下拉刷新有什么讲究?

  • 地图应用。地图上的内容通常不会以时序排列,也没有明确的方向和内容来源,用户也无法直觉推断出下拉刷新的含义。

UI设计中下拉刷新有什么讲究?

  • 无序列表。有序列表通常能够给用户以下拉更新的期望,而无序列表在这方便则不明显,也无法直观地让用户看出其中的更新。
  • 低更新率的内容。如果列表中的内容并不经常更新,下拉刷新的手势几乎没有存在的意义,因为用户去刷新列表的机率很低,也没有太大的必要。
  • 按照时间先后顺序排列的内容。按照时间先后顺序排列的列表中,最新更新的内容排在最后,用户下拉刷新之后无法立刻看到最新更新的内容,这样列表使用下拉刷新就相当尴尬了。
  • 特殊类型的内容。许多需要实时更新的内容会在短短一分钟甚至更短的时间内失去时效,诸如股票、服务器后台进程之类的信息,最好使用实时自动更新。

如何设计刷新指示器的过渡效果

下拉刷新前后两种状态需要借助过渡动效连接到一起,让用户了解界面到底发生了什么改变。刷新指示器在两种状态过渡过程中一直存在,它一直保持可见,直到刷新完成,新的内容更新出来。

UI设计中下拉刷新有什么讲究?

值得注意的是,在刷新过程中,哪怕用户针对界面有所操作,刷新指示器也不能隐藏,否则它作为指示器的作用就失去意义了。

UI设计中下拉刷新有什么讲究?

下拉刷新 vs. 刷新按钮

许多设计师和开发者将下拉刷新视作为一种节省屏幕空间的方法,毕竟它无需像刷新按钮一样占据一个固定按钮的空间。但是它的问题也同样很明显,下拉刷新没有刷新按钮那么明显直观,实现起来也更加麻烦。

UI设计中下拉刷新有什么讲究?

刷新时长

当用户手指在屏幕上向下滑动,手势触发刷新指示器,以此为视觉反馈告知用户系统已经收到请求了。下拉刷新的交互设计很大程度上是想让用户明白发生了什么,并确保程序能够正常运行。当用户熟悉下拉刷新的操作和交互的结果之后,会逐步信任这种交互。刷新指示器会持续旋转,直到数据完全更新至可用,这样可以防止混乱。

UI设计中下拉刷新有什么讲究?

可用的动效

下拉刷新的过渡动效是一个非常适合发挥创意的地方。由于它是连接两个不同状态的中间态,过渡动效可用帮助用户理解屏幕上发生了什么,精准地理解两个不同UI状态之间的差别。

UI设计中下拉刷新有什么讲究?

结语

下拉刷新推动着UI中的内容的更新变化,提供反馈,给予通知,有时候甚至能够让界面更加富于娱乐,更有意思。

 

译文来自:优设

译者:@陈子木

原文地址:uxplanet

原文作者:Nick Babich

原创文章,作者:Catherine,如若转载,请注明出处:https://www.iamue.com/27105/

(0)
CatherineCatherine
上一篇 2017-05-16 21:39
下一篇 2017-05-16 23:24

相关推荐

  • 关于文档的价值

    作者:杨蓉(资深用研专家,现任极客网运营总监)   高歌在产品经理的培训中,提到了研究分析、产品定义和交互设计,展示了不同格式的文档,几个来自创业公司的童鞋提到了老板不鼓励用文档的问题。让我想起来几个去…

    交互专题 2017-08-07
  • 手机端官网设计:适配还是不适配,这是个问题

    Pc端使用平台:手机端使用平台:红米2增强版 自带浏览器 MIUI6.6.2.0(KHJCNCF)|稳定版

    2017-05-31
  • 交互设计申请关注度最高的5个问题,第一个就头疼.. | 大咖说

    说到交互设计很多同学的第一反应就交互思维、交互体验...准备申请交互专业的同学也是非常心焦!说起来容易做起来难,我们还是多和专业老师取取经。伦艺学姐回答的5个交互专业问题,收好哦~Q1:转专业学生申请应该注意什么?我觉得需要看这个问题怎么定义转专业,因为在一个设计类的学科,很多设计的思维方式和实践能力是共同的,我们可以通过设计的方式去解决问题。如果想要转到交互或者用户体验的专业,其实提供的是一种用交互的方式和研究结果解决现有用户的问题。...

    2018-04-26
  • APP游戏分发模块一级交互设计

    看看阿西如何做原型设计,阿西手把手教大家设计原型。

    交互设计 2014-09-11
  • 腾讯MXD:资讯app为什么都长一个样?

    作者: Celine Wang@腾讯MXD   打开手机,国内的资讯 app 除了品牌 logo 外,几乎都长一个样。就如你敲开不同的门,发现房间不光装修风格一样,还住着品味雷同的主人。是什么造就了它们? 资讯产品的本质是连接内容…

    交互专题 2023-03-03
  • 反应(Reaction):生活中并不是所有的事情都那么“赞”

    我在Facebook跟我所关心的朋友们分享各种各样的事情——从完成60天瑜伽练习的庆祝状态到悼念失亲之殇。从我的故事中也连接了一群相似的人,有相似的故事要分享。有时候我们只是想借助一个简单的方式去告诉分享者我们真的很喜欢他们的故事,或是当看到他们的生活发生挫折,简单地表达一下同情。

    2017-05-26
  • KY技术招聘详情 | 心理领域互联网公司KnowYourself

    如果对【KY内容中心】、【研发中心】、【市场品牌商务】、【运营、创意、用研】、【人事】等更多岗位感兴趣,请查看今天的其他几条推送内容。KY技术部,是KY的技术支持部门。我们通过各种技术手段,提升大家使用KY产品的体验,并为各种创意提供实现支持。我们希望能够以各种技术的优化,能让大家更精准的匹配到适合自己的朋友,能够找到合适的咨询师,能够与KY的交互中找到真正的自己,玩得意犹未尽。本次我们招聘需求详情如下:· 测试工程师 ·工作内容:1....

    2018-03-18
  • 112家IT公司薪水一览表

      本文转自:人人都是产品经理 作者是西电通院2013届毕业硕士,根据今年找工作的情况以及身边同学的汇总,总结各大公司的待遇如下,吐血奉献,公司比较全。以下绝对是各大公司2013届校招的数据,少数几个是201…

    2014-10-13
  • 关于加载设计,你要知道的8种策略和4种样式

    加载的作用在于缓解用户的等待焦虑,同时及时的向用户反馈当前的系统状态,以提升产品的用户体验。

    2017-04-27
  • 在网页设计中,如何运用方框/方形元素?

    如何让方正方框/方形元素不死板有创意?今天这篇好文总结了超多的设计方法和实战案例,建议阅读。

    2017-05-07