问题概述

  用户想获得更多的内容,或是刷新当前在屏幕上显示的内容。

示例

用途

  • 用于刷新或更新任意可更新的内容,例如列表、网格列表、按时间逆序排列的卡片集合(即卡片集合按时间先后顺序反向排列)。例如:

    • 内容 feeds(Twitter, RSS);
    • 收件箱 (emails, text messages)。
  • 使用本模式刷新整个页面的内容。例如:
    • 浏览器上的标签页 (Google Chrome)。
  • 用于设计支持触摸屏的程序时。

解决方案

  用户在屏幕上用手指进行下拉,列表上方显现刷新标识(可视化标识),指示内容刷新进度。如果还没有到达刷新阈值用户手指就离开屏幕,则终止刷新,隐藏刷新标识。

在用户动作之后马上进行可视化反馈

  用户动作(滑动屏幕更新内容)开始后就在等待程序反馈。发现用户动作,应用程序应立即向用户进行可视化反馈,告知已收到其请求。用户相信程序正在进行内容刷新,这与可视化反馈直接相关。直至数据加载完毕,刷新标识应持续运行,以提示用户程序正在进行内容刷新,避免造成疑惑。[1]

仅用户动作触发刷新标识

  仅允许用户手动触发内容刷新,只在进行刷新时才显示刷新标识。如果确实想告知用户内容正在自动刷新(同步通知),应避免使用与内容刷新相同的指示标识[2]。

具有意义的状态转换

  刷新标识充当页面视图不同状态间的中介,在屏幕发生变化时帮助用户了解正在发生的事情。应一直显示刷新标识,直到内容刷新活动结束且显示新内容后再将其隐藏,或者是在用户离开当前窗口后再隐藏。[3]

说明

为什么使用本模式

  有时,人们认为本模式是刷新操作中的额外步骤,用户得手动触发应用程序中的刷新或内容加载过程。下拉刷新动作意味着手动请求更新,这让用户参与到刷新过程中,在用户与内容之间建立了一个“表层”。[4]
  多数情况下,内容刷新这类操作可以使用自动同步程序来完成,不需要用户参与。例如,用户在浏览器上使用电子邮箱时,邮箱后台服务会自动显示收到的最新的电子邮件(并在后台持续更新收件箱内容)。因此,为什么移动设备上的电子邮箱客户端程序不保持一致呢?
  手动刷新的确为用户界面带来了好处,它是内容同步操作的极大补充:

  • 使用便利。用户想什么时候刷新就什么时候刷新:
  • 让高级用户用起来很自然。本模式已经成为移动程序必备的标准功能,下拉刷新动作十分普及,高级用户期望程序支持该动作,这让程序开发者很难忽视该模式;
  • 具备背景和连续性。使用本模式刷新整个页面的内容。用户登录Twitter后,程序不会将用户带到Twitter时间线(Twitter timeline)的陌生位置,而是显示他们最后阅读的推文。如果用户想看新的推文,他们需要手动下拉刷新内容;[5]
  • 给对数据流量少的用户节省带宽。[6]

讨论

  本模式帮助用户进行内容更新,但它不具有普适性,也存在缺点。

显示的“刷新”按钮 VS 隐藏的下拉刷新动作

  很多开发者认为使用本模式可以节省屏幕空间(消除界面混乱),虽然该模式确实明显节省了屏幕空间,但用户得知道程序具备下拉刷新功能。下拉刷新属于隐藏功能,它不像“刷新”按钮那么直观。“刷新”按钮,既便于开发者实现功能,又便于用户使用(该按钮一直可见并可用)。

使用“刷新”按钮或自动更新的时机

  在以下情况时可以考虑使用“刷新”按钮:

  • 查看可平移内容时(例如地图)。查看这类内容时没有主方向或者内容原点,用户无法以这些为参考来手动刷新:[7]
  • 列表项目按时间顺序排列。如果列表项目按时间先后反向排列(PS:新的项目放后面),则应使用刷新按钮,这时使用下拉刷新将新的内容放在列表后面就显得很尴尬;
  • 存在无序列表项目集合。用户最初浏览无需列表内容时,并没有指望下拉操作会带来什么特殊的效果,也不会凭直觉去下拉刷新。这类程序有图库软件、日历软件等;
  • 应用系统中没有需要频繁刷新的内容。例如,Evernote 程序中的内容都靠用户自己刷新。[8]

  当事情变化太快时(一分钟或更少时间的刷新也不够快),不使用刷新按钮,或即使有按钮也要提供自动刷新功能[9]。例如:

  • 实时股票信息:
  • 拍卖报告。
iPad上的“拇指可及”问题

  在移动设备上使用下拉刷新很自然,但在iPad上用就比较奇怪(尤其在宽屏模式下)。仅仅靠一个拇指几乎无法进行内容更新操作,必须要伸大拇指或将iPad放平才能惬意地操作用户界面。[10]

加强型下拉刷新

  在Google Chrome程序中,下拉刷新功能已经扩展出另外两种用法——打开一个新的标签页和关闭当前标签页。加强型下拉刷新与标准下拉刷新模式类似,都是下拉屏幕,然后释放屏幕来刷新。

  但是,使用Chrome中的加强型下拉刷新,用户下拉然后右划,会关闭当前标签页,同理,下拉后左划会打开一个新的标签页。加强型下拉刷新给了用户三种选择,而不是标准模式中仅有的一类方式。使用加强型下拉刷新打开一个新的标签页效率更高,因为用户是用一个流畅的动作来完成的该功能。

原文地址:http://ui-patterns.com/patterns/pull-to-refresh
[1]原文:The user’s confidence in the fact that the refresh is happening, is directly correlated to the visual feedback. You will want to let your refresh indicator continue spinning until data is loading in order to engage the user and prevent confusion.
[2]原文:If you do want to notify users about automatically updating content (syncing), you should refrain from using the same indicator.
[3]原文:Refresh indicators act as intermediaries between different states of the view, helping users to understand what is going on as the screen changes. Refresh indicators should remain visible until the refresh activity completes and any new content is visible, or the user navigates away from the screen.
[4]原文:As the pull-to-refresh gesture signifies a manual request for updates, it requires a user involvement into the process and creates a superficial layer between users and their content.
[5]原文:It brings context and continuity. When users open Twitter, the application won’t throwing users to an unfamiliar spot in their Twitter timeline. Instead, the app brings them to the last read tweet. If users want to load new tweets they do it manually by pull-to-refresh.
[6]原文:It also saves bandwidth for data-conscious customers
[7]原文:When you have a view with pannable content (e.g. map). Because such view has no primary direction or content origin from which users can presume the swipe to refresh gesture will originate.
[8]原文:When the application does not contain content that typically needs to be refreshed on a frequent basis. For example, Evernote app where content is likely not being refreshed without user knowing about it.
[9]原文:Consider no refresh button (or auto-refresh in addition to a button) whenever the things are changing too fast (refreshed becomes stale within a minute or less).
[10]原文:It’s almost impossible to update the content using one-thumb interaction — you need either stretch your thumb or put the device on a flat surface in order to comfortably operate with user interface.

(翻译)下拉刷新(Pull to refresh)相关推荐

  1. Vant-ui 移动端下拉刷新

    这个是基于上一篇文章,上拉加载更多,继续的下拉刷新 这里面利用到了 vant组件库里的 PullRefresh 下拉刷新时会触发 refresh 事件,在事件的回调函数中可以进行同步或异步操作,操作完 ...

  2. android下拉菜单刷新,android下拉刷新列表实现(pull to refresh)

    android中提供了ListView控件,listview能够为我们展现丰富的内容,有时候我们为了提升用户体检,需要更炫而且更好用户体验的效果,pull to refresh(下拉刷新列表效果)就应 ...

  3. Mint UI—loadmore—Pull down下拉刷新将下拉刷新的箭头标志更换成其他图片(图文)

    Mint UI-loadmore-Pull down下拉刷新将下拉刷新的箭头标志更换成其他图片 <div slot="top" class="mint-loadmo ...

  4. Android自定义控件之仿美团下拉刷新

    android美团下拉刷新控件自定义控件 目录(?)[+]   美团的下拉刷新分为三个状态:  第一个状态为下拉刷新状态(pull to refresh),在这个状态下是一个绿色的椭圆随着下拉的距离动 ...

  5. scrollview下拉刷新_SwiftUI之View Tree 实战3(下拉刷新)

    不得不说,在SwiftUI中,Preference这项技术实在是太神奇了,这也是我为什么写这么多与其相关文章的原因,它的原理是如此的简单,但加上我们的想象力,它却又无所不能. 在本篇文章中,我们将再次 ...

  6. ListView下拉刷新、上拉载入更多之封装改进

    在Android中ListView下拉刷新.上拉载入更多示例一文中,Maxwin兄给出的控件比较强大,前面有详细介绍,但是有个不足就是,里面使用了一些资源文件,包括图片,String,layout,这 ...

  7. 仿新浪微博实现ListBox下拉刷新和到底部自动加载

    一.下拉刷新 下拉刷新实现思路: 1.定义一个PullDownToRefreshPanel容器控件.为它添加3种状态模板,分别是PullingDownTemplate,ReadyToReleaseTe ...

  8. dropload.min.js 下拉刷新后,无法上拉加载更多

    使用方法 1.引入文件 <script src="/app/media/js/dropload.min.js"></script> 111111111111 ...

  9. Android学习之——ListView下拉刷新

    背景知识 ListView使用非常广泛,对于使用ListView的应用来说,下拉刷新是必不可少要实现的功能. 我们常用的微博.网易新闻,搜狐新闻都使用了这一功能,如下图所示.     微博 搜狐新闻 ...

最新文章

  1. Wt::WPaintDevice
  2. scrapy-splash抓取动态数据例子十三
  3. Java中wait和sleep方法的区别
  4. 【24小时内第四更】为什么我们要坚持写博客?
  5. linux环境 Oracle客户端连接远程Oracle服务端
  6. java jpa_Java JPA 语法知识
  7. ASP.NET页面与IIS底层交互和工作原理详解 (二)
  8. 你和大厂 Offer 有多近?C 认证免费测试一波,提前备考大厂
  9. 局域网计算机无法配置网关,在内网中,为什么不设置“默认网关”计算机也能互相通讯?...
  10. 安卓-利用android studio制作简单的QQ登陆login界面
  11. SqlHelper方法
  12. xshell安装python
  13. WinForm CefSharp 笔记一(入门篇)
  14. h5课件制作_用H5做课件的好处,你知道多少?
  15. 光照 (4) 漫反射光照
  16. 看董事长陈睿发言谈B站变化,我与B站共成长
  17. average函数python_在Python3 numpy中mean和average的区别详解
  18. 动环监控设备维护与故障处理,动环监控系统调试
  19. 动态口令,动态密码生成(OTP)
  20. 用HTML5写ZZULI官网(八)

热门文章

  1. [Swift通天遁地]八、媒体与动画-(13)CoreText框架实现图文混排
  2. html跳动的心,css3跳动的心制作
  3. 极路由3-HC5861无拆机获取root连接ssh
  4. 用计算机升级ipad系统软件,教大家如何在苹果手机iPhone和平板电脑iPad上手动更新应用程序...
  5. kitty终端使用笔记
  6. java没有编译器吗_java有编译器吗
  7. Python中计算圆的周长,面积
  8. Python常用模块(一)pandas
  9. 创业这10种死法,你死在哪一种了
  10. 《缠中说禅108课》49:利润率最大的操作模式