下拉刷新用户界面模式

自译外文 分类: 经验/观点 版权: 原作者: babich
2188 14 12 1
2016-10-26
10.3
编辑推荐

Pull to Refresh UI Pattern

下拉刷新用户界面模式

下拉刷新(或手动刷新)模式允许用户使用触摸来下拉数据列表以加载更多数据。 “Pull-to-refresh”手势最开始是由Loren Brichter在Tweetie应用程序中引入,不知在时候它变得如此受欢迎,无数的应用程序采取了这种方式。 今天,“下拉刷新”功能是许多流行应用程序的自然组成部分,包括Twitter,Gmail,Tweetbot等等。

在这篇文章中,我们将讨论,看看什么时候“pull-to-refresh”可以被更完美的实现,以及讨论其他的刷新方式。

  • 他是怎么工作的

刷新指示器仅与刷新手势或操作结合显示。 下面的动画显示了完整的交互模型。


Image title

图片来源:Material Design

下拉刷新需要用户操作或手势动作手动刷新屏幕内容。 这很明显,但有时设计师使用刷新指示器来显示自动更新内容。 由于自动刷新机制不需要来自用户的任何操作,因此自动刷新内容不应当显示刷新指示器。

  • 什么时候使用下拉刷新

滑动刷新适用于刷新最近内容排序的列表、网格列表和卡集合(按重要程度、按日期降序排序的集合)。 此集合通常代表不断更新的项目流,并且您不能使用自动更新内容(例如同步),因为你向上滚动到顶部,它会自动把你自向上滚动以来的最新内容将下载。 因此,不要让应用程序自动加载更多内容,而是使用下拉刷新手势来给用户提供刷新操作的“反悔”的机会。 pull-to-refresh的适当用例有:

1.内容Feed(Twitter,RSS)
2.收件箱邮件(电子邮件,短信)

例如:Twitter有一个tweets列表,它是在tweets订购的最近的信息。 用户拉动以查看最近的tweets。 他们显示在列表的顶部 - 添加最新的tweets。

Image title

图片来源:cyrilmottier

  • 什么时候不应该使用滑动刷新

滑动刷新不应在以下情况下使用:

1.主屏幕控件。 因为主屏幕控件应自动更新内容。

Image title

图片来源:Material Design

2.地图。 由于地图没有主方向或内容来源,用户可以推断出刷新手势将会起作用。

Image title

图片来源:Material Design

3.无序列表。 如果用户没有首先查看有序列表视图,则不期望下拉将进行刷新,并且因此手势对于用户既不可发现也不直观。

4.低“更新率”内容。 如果应用程序通常需要频繁刷新的内容,则手势不太必要,因为当用户查看列表/网格/卡集合时需要更新列表/网格/卡集合。 示例:天气窗口小部件,列表项按时间顺序排序。对于按时间顺序(最早的第一个)排序项目的垂直滚动视图,您应该使用刷新按钮,新加载项目在列表的最下面是很尴尬的。

5.特殊内容类型。 当要刷新的内容在一分钟或更短的时间内变为旧内容时,诸如股票数据/图表,服务器/后台进程监视或拍卖报告等情况。

  • 如何设计刷新指示器

动画应该作为UI的不同状态之间的中间过程,帮助用户理解发生了什么时,屏幕上的变化。是刷新指标转换为视图,所以它应该保持可见,直到刷新完成并且所有新内容可见,或者用户离开刷新内容。

Image title

执行:在内容更新期间保持刷新指示器可见。图片来源:Material Design


在此次更新期间在视图上显示内容的任何用户活动(例如滚动)不应让刷新指示器离开屏幕

Image title

不要隐藏刷新活动的状态。图片来源:Material Design

  • 设计技巧

1.拉动刷新与“刷新”按钮
很多开发者考虑使用“pull-to-refresh”作为一种节省屏幕空间的方法。它显然很节省空间,因为在屏幕上没有什么内容。但是像任何其他基于手势的动作,你必须知道它要怎样操作。因此,它不像一个简单但清晰的“刷新”按钮直观。大多数时候,刷新按钮从开发者的角度来看更容易实现,并且从用户的角度来使用更方便(因为它总是可见和可用的)。

Image title


iOS应用程式的[刷新]按钮


2.刷新时间

用户的等待时间从他们改变屏幕内容时开始(操作动作)。立即,系统应该给出一些视觉反馈以确认它已经接收到请求。 UX的很大一部分作用是让用户知道发生了什么,并告诉他或她应用程序正常工作。用户对刷新发生的信心直接与其技术表示有关。这就是为什么你的刷新指标器应该继续旋转,直到数据可用。这将吸引用户注意力并且不会混淆。

3.iPad上的Thumb-Reach问题
在移动设备上显示列表时,拉动操作是正常的,但在横向模式下,它在iPad上看起来很奇怪。你需要伸展你的拇指或将设备放在平坦的表面上,以便舒适地进行操作。

Image title

图片来源:tapsmart


功能动画
Pull-to-refresh是一个伟大的创造。如前所述,动画应该作为UI的不同状态之间的中间过程。用于拉动刷新的动画可以帮助用户跟随屏幕上的元素的运动并且准确地理解两个UI状态之间的相关。

Image title

平滑的过渡使界面感觉失重。图片来源:Zee Young


结论:
正确使用pull-to-refresh作为内容更新的推动者:有反馈,通知,有时甚至有点娱乐。


谢谢!


Satchcin

https://dribbble.com/Satchcin

1380粉丝/181关注

原创小生
震与情-天灾无情人有情篮球场-这个赛场,你就是MVP

Satchcin

Satchcin

https://dribbble.com/Satchcin

原创小生

京ICP备14007358号-1 / 京公网安备11010802014104号 / Powered by 2008-2017 UI.CN