数极客首页

Axure教程:用Axure实现简书、微博的下拉刷新效果

本文从原型设计的角度来探究背后的交互逻辑,研究如何利用经典原型工具Axure实现这样的交互效果。

Axure教程:用Axure实现简书、微博的下拉刷新效果

目前各大应用主要采取两种下拉刷新方式,一种以简书、知乎为代表的内容版块固定的刷新方式,另一种以微博、今日头条为代表的内容版块向下滑动的刷新方式。

Axure教程:用Axure实现简书、微博的下拉刷新效果

一、以简书、知乎为代表的下拉刷新

1.观察交互动作

  • 向下滑动时:刷新按钮缓缓向下垂直移动,并以自身为中心点进行旋转,当向下移动到一定距离时停止移动。
  • 滑动结束时:手指松开屏幕时,刷新按钮消失,刷新按钮的初始位置出现加载按钮,并以自身为中心点进行旋转;旋转结束后,系统更新页面内容,同时在内容的上方出现了一段提示内容更新数量的toast文字,几秒后提示信息消失。
Axure教程:用Axure实现简书、微博的下拉刷新效果

简书交互分析(元件名参照下文)

2.准备元件

首先准备好相关元件,元件素材中需要用到两个动态面板:

  • 第一个动态面板:承载内容,设置3个面板状态,每个状态为不同的内容。为了便于区分内容,本案例中将不同面板内的文字和占位符通过不同的颜色来进行区分。该动态面板命名为”信息流“。
  • 第二个动态面板:主要用于处理下滑过程中和下滑结束时,刷新按钮、加载按钮和推荐提示的切换显示,我们将第二个动态面板命名为“刷新”,3个状态分别命名为刷新、加载和推荐,默认隐藏该面板。

3.设置交互用例

1).信息流动态面板—设置拖动时用例:

  • 动作1:设置“刷新”动态面板的状态为“刷新”;
  • 动作2:垂直拖动“刷新”动态面板,移动范围在当前元件的Y轴坐标到Y轴坐标+200之间;
  • 动作3:旋转刷新图标按钮,以自身中心点为参照,顺时针旋转180度,旋转时的动画效果为缓慢退出,动画时间为500毫秒。
Axure教程:用Axure实现简书、微博的下拉刷新效果

设置拖动时用例的动作

2).信息流动态面板—设置拖动结束时用例

  • 动作1:移动刷新动态面板回到拖动前位置,动画效果设置为线性动画,时间500毫秒;
  • 动作2:设置刷新动态面板状态为加载,进入和退出动画效果为逐渐,时间均为500毫秒;
  • 动作3:旋转加载图标按钮,以自身中心点为参照,顺时针旋转1080度。旋转时的动画效果为缓进缓出,动画时间为1000毫秒(1秒);
  • 动作4:等待2000毫秒(2秒);
  • 动作5:隐藏刷新动态面板;
  • 动作6:设置信息流动态面板为向后循环下一个状态,进入和退出的动画效果为逐渐,时间均为500毫秒;
  • 动作7:设置刷新动态面板的状态为推荐,进入动画效果为向下滑动,时间为500毫秒,并勾选显示面板;
  • 动作8:等待1000毫秒(1秒);
  • 动作9:隐藏刷新动态面板,动画效果为向上滑动,时间为500毫秒。
Axure教程:用Axure实现简书、微博的下拉刷新效果

设置拖动结束时用例的动作

二、以微博、头条为代表的下拉刷新

1.观察交互动作

  • 向下滑动时:内容向下移动至一定距离时,页面的背景层出现刷新提示文字信息。过一段时间后,刷新提示文字变化,提醒释放刷新内容。
  • 滑动结束时:内容向上移动一段距离时,页面背景层提示正在进行内容刷新;等待一段时间后,内容发生了变更,同时在页面上方出现了推荐提示信息,提示推荐了xx条新内容。
Axure教程:用Axure实现简书、微博的下拉刷新效果

微博交互分析(元件名参照下文)

2.关于准备元件的一些说明

首先我们需要添加两个动态面板:

  • 第一个动态面板用来设置刷新过程中的文案提示和图标切换,共有3个状态:下拉刷新、释放刷新和加载,命名为刷新提示;
  • 另外一个动态面板用来存放切换的内容,该动态面板有3个状态,不同面板内的文字和占位符通过不同的颜色来进行区分,命名为内容。

将两个动态面板选中转换为新的动态面板,命名为显示层;再将显示层转换为新的动态面板,命名为操作层。

这里我们对显示的内容完成了两层的嵌套,里面一层显示层主要用来切换显示的内容,外面一层作为我们拖动的操作层,拖动事件的交互用例都通过操作层来进行设置。

最后我们还需要单独准备一个矩形框,用来显示推荐内容的数量,默认设置为隐藏。

3.设置交互用例

1).加载图标-载入时用例:为刷新提示动态面板的加载状态设定一个载入事件,载入时循环切换指示器动态面板的状态,从而利用指示器的状态改变来实现加载图标的自动旋转。

Axure教程:用Axure实现简书、微博的下拉刷新效果

设置载入事件

2).指示器-状态改变用例:拖动一个空动态面板,设置3个状态,状态改变时,1000毫秒内顺时针旋转720度,动画效果为线性。

Axure教程:用Axure实现简书、微博的下拉刷新效果

设置状态改变事件

3).操作层动态面板-拖动时用例

  • 动作1:垂直拖动显示层动态面板,拖动范围限定在操作层底部以上的300个像素;
  • 动作2:设置刷新提示动态面板状态为下拉;
  • 动作3:等待1000毫秒(1秒);
  • 动作4:设置刷新提示动态面板状态为释放,进入和退出的动画效果为逐渐,时间500毫秒。
Axure教程:用Axure实现简书、微博的下拉刷新效果

设置拖动时用例的动作

4).操作层动态面板-拖动结束时用例

  • 动作1:移动显示层动态面板到坐标(0,40),这个位置正好刷新提示的内容显示出来;
  • 动作2:设置刷新提示动态面板状态为加载中;
  • 动作3:等待2000毫秒(2秒);
  • 动作4:移动显示层动态面板到拖动前位置,即回归初始位置;
  • 动作5:设置内容动态面板循环切换下一个状态;
  • 动作6:显示推荐提示语内容,动画效果为逐渐显示,时间为500毫秒,并选择至于顶层;
  • 动作7:等待1000毫秒(1秒);
  • 动作8:隐藏推荐提示语,动画效果为逐渐隐藏,时间为500毫秒。
Axure教程:用Axure实现简书、微博的下拉刷新效果

设置拖动结束时用例的动作

上述的讲解,希望能够帮助到有兴趣学习的同学。大家看完以后,如果还有一些细节上的东西存在疑问,可以下载源文件,来进一步的观摩和分析。

下载链接:https://pan.baidu.com/s/1mkmV2FQ 密码:subx

 

本文由 @kevin 原创发布。未经许可,禁止转载

题图来自Unsplash,基于CCO协议

新一代大数据用户行为分析与数据智能平台:数极客(https://www.shujike.com),是支持无埋点、前端埋点、后端埋点、API导入四种混合数据采集方式,整合分析用户行为数据和业务数据,可以自动监测网站、APP、小程序等多种渠道推广效果分析,是增长黑客们必备的互联网数据分析软件。数极客支持实时多维分析、漏斗分析、留存分析、路径分析等十大数据分析方法以及APP数据分析网站统计网站分析小程序数据统计用户画像等应用场景,业内首创了六种提升转化率的数据分析模型,是数据分析软件领域首款应用定量分析与定性分析方法的数据分析产品

发表评论

相关文章