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

相关推荐

  • 译文|为未来的SaaS应用,提供新的交互及视觉设计

    本文介绍给大家一些基本需要关注的点,以及我们设计团队通过在相当长的时间内的试验和学习,如何为在线办公应用Zoho设计更好的用户体验?

    2017-05-20
  • 【干货】用户体验是个什么鬼。

    接上篇文章,我们既然已经了解到了用户需求,且已经为用户需求设计了功能去解决了他们的问题。然而问题又来了,用户依然在用我的竞品,而不用我的产品,这是为什么?

    2017-06-04
  • 米尔顿格拉泽谈动态设计

    上周我参加了谷歌的I/O大会,加入了一个关于跨平台设计的小组座谈,这一次会议有非常多有趣的新事物,让人有种第一次走在拉斯维加斯大道上一样的惊奇。

    2014-12-30
  • 交互设计篇-如何处理需求

    如何处理需求,是产品经理的基本功,不管是来自老板还是客户的,亦或来自企业内部(运营、业务)及产品本身的发展,产品经理都需要把需求的收集、分析、管理做到有效进行。一、需求收集用户调研运用场景:产品规划初期或者遇到重大版本迭代,需要重新架构设计时,将会进行用户问卷、用户访谈的方式去挖掘用户的真实需求。基本方法:用户问卷-定量研究的方法,问卷问题一般为15个左右,包含用户基础资料信息(包括年龄、收入、教育水平等人口统计学范畴信息)和主观性的信...

    2018-05-06
  • 腾讯2016年度7个创新功能,你最爱哪个?

    作者:腾讯   那么,在你眼里,创新是什么样的? 是对产品的颠覆式变革?是将原有技术植入新的领域?是新的产品和领域的开拓?抑或,只是某一个让你会心一笑的新功能? 在腾讯,每月都有微创新奖的评选,在内部开启…

    交互专题 2017-08-07
  • 用户吐槽:新版新浪微博的5大槽点

    昨天新浪微博发布了新版V6,据说是“加强基于兴趣的信息传播,在提升用户内容获取效率、阅读体验基础 上,面向垂直领域认证用户推出兴趣内容生产、传播及变现工具,完善内容生产与消费生态。微博计划打造一张以信息…

    2014-10-15
  • 屏幕外的交互设计:界面设计 ≠ 屏幕设计

    网易UEDC – Vicol :在互联网做设计的朋友,工作中几乎每天都接触着电脑和手机屏幕,像我的交互设计 工作也以接需求画原型图写文档为主。但我今天想说的,和这些看起来没有什么关系。我想说点屏幕外的交互设计 。

    2017-09-28
  • 屏幕尺寸越来越多,“首屏为王”还有效么?

    作者:Amy Schade@nngroup,翻译:小球娘   几句话概述:把什么内容放在页面顶部(第一屏的位置)以及把什么内容藏在第一屏位置之后将始终影响用户体验——无论屏幕大小。有平均84%的用户会区别对待页面第一屏内容和…

    交互专题 2017-08-07
  • 极有可能被低估的三种有趣的网页设计趋势

    设计出不同凡响的网站是许多设计师一直追求的事情,所以大家着迷各种时尚的元素,漂亮的配色,流行的趋势,复古的样式,等等。经过时间验证的经典设计、固定的搭配是不错的选择,而逐步展露头角的新趋势,则能更好的满足这一需求。

    2017-05-26
  • 用户体验地图

    利用用户体验地图实现产品的情感化设计;先来看一张图:我们可以将用户体验地图分为三个区域,其中:# ZONE A 提供了对地图的界定;# ZONE B 是视觉化的用户体验过程;# ZONE C 描述了用户的痛点;我们通过拆分各个区来实现一个用户体验地图的构建;A区:1 : 表示一个角色,即体验的用户是谁,或者说你的产品的目标客户群体是什么样类型的人;2 :表示待调研的场景,即在用户什么情景下会使用你的产品;B区:3 :可分段的体验过程,即...

    2018-03-28