刷新的主要作用是刷新页面中的缓存,从服务器获取新的内容。它又分为自动刷新和手动刷新,自动刷新就是每当我们打开一个 APP 时,APP 就会自动给服务器发送一个请求,推送最新的内容。但是当我们浏览完了推送的内容或对推送的内容不敢兴趣,这时就需要手动刷新页面中的内容。

这篇文章主要分享五种手动刷新的方式,以及他们的使用场景和优缺点。

 

下拉刷新

下拉刷新几乎无处不在,通过向下滑动的手势动作轻松获取推荐信息。它是由设计师 Loren Brichter 发明创造,首次应用于 Twitter 这一应用中,并且 Twitter 已经获得了“下拉刷新”的设计专利。使用场景:适用于列表、卡片集合等界面,内容按照时间降序排列的场景。

  • 优点:交互方式简单便捷,符合用户使用习惯,使用场景广泛。
  • 缺点:用户向下浏览过多内容后,再使用下拉刷新的成本比较高,所以需要配合其他刷新方式一起使用。如下图:
以知乎、哔哩哔哩、虾米音乐为例,这三个APP 分别以文字、视频、音乐为主要内容,它们分别按照列表、栅格列表、卡片集合三种方式排布,用户可以根据自己的喜好来刷新页面内容,整个页面里的内容按时间降序来排列。

 

除了常规的操作,下拉刷新还被设计师玩出了一些新花样。
1.加入品牌形象
我们都知道,在刷新的过程中会有短暂的等待时间,并且伴随有动画提示。很多公司把品牌形象植入到这个过程中,替换了简洁的刷新按钮,这种方式可以把自己的品牌形象从细节上传达给用户,如下图:

 

2.添加有趣句子
在什么值得买 APP 的首页进行下拉刷新,会出现一些有趣的短句,比如“读书破万卷,剁手如有神”、“天青色等烟雨,好物在等你”等等,增加趣味性,缓解用户的等待,如下图:

 

3.添加惊喜
在淘宝和京东的首页下拉刷新,分别会出现“淘宝二楼”和“视频答题红包”,在用户等待刷新的同时为用户创造突然的惊喜,如下图:

 

tab刷新

当用户向下浏览了很多内容后,这时感到有些枯燥,想获取新的内容,这时就可以使用 tab 刷新,省去返回顶部下拉的步骤。为了提示用户,通常 tab 图标会变成一个刷新按钮的样子。使用场景:试用于内容单一,需要刷新全部内容,且底部 tab 不会消失的场景中。

  • 优点:很便捷的就可以刷新页面的全部内容,节省了用户的操作成本。
  • 缺点:有时页面为了沉浸式体验,底部 tab 栏会消失。
以 AcFun 为例,AcFun 是一款视频类 APP,在首页浏览一定内容后,首页 icon 自动变成刷新,点击就可以刷新页面所有的推荐内容。 

 

提示刷新

有些 APP 的内容是一部分一部分刷新的,总是会在浏览完新的内容后碰到旧的,这时就可以使用提示刷新。通常会使用文字作为提示,并使用 APP 主题色。使用场景:适用于内容刷新有数量限制的场景中。

  • 优点:避免用户看到重复的内容,省去了用户返回顶部下拉的步骤,节省了用户的操作成本。
  • 缺点:暂时没有想到,欢迎大家在留言区补充~
以百度贴吧和哔哩哔哩为例,百度贴吧的首页每次刷新12条内容,哔哩哔哩的首页推荐每次刷新10个视频,每当看完这些新的推荐内容系统就会提示“刚刚看到这里,点击刷新”。 

 

模块刷新

页面由不同的模块构成,通常出现在某个内容模块的底部,使用一个独立的按钮来进行刷新。通常会用“换一换”、“换一批”等类似按钮显示。使用场景:适用于同一个页面有较多模块、每个模块内容相对独立的场景中。

  • 优点:更加灵活,用户可以按照自己的需求对单个模块进行刷新。
  • 缺点:会占用更多的页面面积。如下图:
以腾讯动漫和腾讯视频为例,它们分别是漫画、视频类 APP。因为它们的界面都是由不同类型的内容组成,所以分为了很多个模块。用户如果对某个模块中显示的内容不够感兴趣,又不想点击进去看全部内容,那么就可以单独对这个模块刷新了,省去了返回顶部下拉刷新的麻烦步骤。同时为了节约页面面积,它们会在刷新按钮旁边放置“查看更多”,或一些其他的推荐内容。模块刷新还有一个特殊的例子,那就是开眼 APP,在浏览内容的过程中,模块底部会弹出刷新按钮。特殊的地方在于它的刷新按钮是弹出来的,动效比较容易引起人的注意。我对这种刷新方式的理解是:开眼的产品目标是为用户提供有料、有趣、好玩的高品质视频,用户群里比较年轻,充满个性,这种活泼的刷新方式更贴合品牌形象。如下图:

 

摇一摇刷新

通过摇晃手机的交互方式刷新内容,常见于社交应用中。如下图:
例如 SOUL,在首页中摇一摇手机,伴随着“Bi Ling”一声,就刷新了推荐的用户,由于它的用户展现使用了类似地球仪的样式,所以它不可以用下拉刷新。而且”微信摇一摇交友”的影响力非常大,它使用这种方式很贴合软件的主题,也很符合用户的使用习惯。

  • 优点:脱离了手机屏幕的交互方式,不需要设计刷新按钮,且具有一定趣味性。
  • 缺点:交互方式有点慢,没有点击屏幕快捷。而且比较容易误触,有一次我躺床上玩,手机掉脸上它就刷新了。摇久了会累(*^▽^*)~

 

划重点

下拉刷新主要针对首屏展示的内容,当用户向下浏览内容比较多时返回顶部不便,就可以使用 tab 刷新,当用户发现新推送的内容浏览完了看到了旧内容,就可以使用提示刷新。根据实际情况结合多种刷新样式共同使用,最终达到提高用户使用体验的目的。

 

参考引文:

《APP常见的几种刷新类型》http://1t.click/autm

《下拉刷新的三层境界|UI|教程》http://1t.click/autn

《UI设计中下拉刷新有什么讲究?》http://1t.click/autp

《浅谈“加载刷新”与“品牌设计”的思考》http://1t.click/autq

 

原文地址:海盐社(公众号)

作者:青山

转载请注明:韦德1946 » 盘点APP中的那些刷新方式

登录收藏
 
你可能喜欢的:
如何衡量交互成本2.0如何衡量交互成本2.0
网易云音乐 | LOOK直播页改版设计网易云音乐 | LOOK直播页改版设计
产品体验设计-交互篇(二)产品体验设计-交互篇(二)
Material Design Environment Light and shadowsMaterial Design Environment Light and shadows
你过来,我有1个设计技巧想对你说你过来,我有1个设计技巧想对你说
为什么你的设计无法让别人记住(一)?为什么你的设计无法让别人记住(一)?
圆角矩形背后的含义|深度解析圆角矩形背后的含义|深度解析
交互基础——页面加载方式交互基础——页面加载方式
一篇文章读懂交互设计7大定律一篇文章读懂交互设计7大定律
音频 | 开屏页设计,看这篇就够了!音频 | 开屏页设计,看这篇就够了!