（翻译）下拉刷新（Pull to refresh）

问题概述

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

示例

用途

• 用于刷新或更新任意可更新的内容，例如列表、网格列表、按时间逆序排列的卡片集合（即卡片集合按时间先后顺序反向排列）。例如：
  
  • 内容 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.