使用Axure做闲鱼app下拉刷新高保真交互

​《老司机教你做交互第二期》

效果篇

我可以学到什么篇

①几乎所有的下拉刷新效果你都可以做出

②知道动态面板制作的妙用

③学会简单的函数，通过元件的坐标执行一些命令

④幽默感

1.分析

首先分析一下闲鱼下拉刷新的交互

一共有三种状态：下拉刷新、松开刷新、加载中

让我们一起来分析一下这三种状态

下拉刷新

触发条件：页面下拉距离小于A像素时（A自定义看要多少，我们这里定义A=50）

刷新提示：文案“下拉刷新”

动画：鱼眼睛是（· ·）两个点，嘴巴是笑的，鱼鳍上摆

松开刷新

触发条件：页面下拉距离大于等于A像素时

刷新提示：文案“松开刷新”

动画：鱼眼睛是（><），嘴巴是闭着的，鱼鳍下摆

加载中

触发条件：页面下拉距离大于等于A像素时松开

刷新提示：省略号动画

动画：鱼眼睛是（· <），嘴巴是笑着的，鱼鳍下摆

分析完后我们就知道要做些什么了，接下来开始讲解原型绘制部分

2.绘制原型

第一、画出页面

顶部：375*75

页面内容：创建一个矩形，把矩形转为动态面板，这是名称“页面内容”，大小375*592

页面拖动交互：

交互函数设置

拖动面板时，垂直拖动【页面内容】动态面板，当【页面内容】动态面板y值小于125时，移动【页面内容】动态面板到达（0，75）。当【页面内容】动态面板y值大于等于125时，移动【页面内容】动态面板到达（0，125），等待1000ms后，移动至（0，75）

拖动效果展示

第二、画出提示文案和鱼

因为鱼和提示文案是跟谁页面内容移动的，所以我们要在【页面内容】动态面板里添加提示文案和大黄鱼

提示文案

创建一个动态面板命名【提示】，设置三种状态①文本内容：下拉刷新②文本内容：松开刷新③加载中省略号动画

大黄鱼

由于我们只是为了实现效果，所以这个鱼我用钢笔随便画了一下，大家不要在意，重点是动效的实现思路。。。

鱼主要分成几部分：

①左右眼睛：这里我比较懒，直接画椭圆，然后打字，动效设置文本就ok，命名：【左眼】、【右眼】

②嘴巴：动态面板创建两种状态，分别画两种嘴型，命名【嘴巴】

③左右鱼鳍：画一个鱼鳍然后镜像，这里动效主要用旋转，命名：【左手】、【右手】

第三、设置动效

①拖动时：当【页面内容】下拉超过50像素时，即y值≥125，设置【提示】面板改为“松开刷新”状态。左右手上摆，【嘴】面板改为一条线的嘴型状态，左右眼睛设置文本为（> <）。

新建交互【拖动时】-情形1

②拖动结束时：当【页面内容】下拉超过50像素时，即y值≥125，设置【提示】面板改为“加载中”状态。左右手下摆，【嘴】面板改为笑的嘴型状态，左右眼睛设置文本为（· <）。

新建交互【拖动结束时】-情形1

③考虑到怎么让提示文案和大黄鱼回到初始状态

新建交互【拖动时】-情形1

完成这三个交互后，让我们来看看效果：

这时候我们发现还有省略号跳动的动效，这只需要用动态面板就可以实现，创建一个动态面板，命名控制，添加两个状态，设置页面载入时设置动态面板向后循环，循环间隔400ms，以下是动态面板交互设置

看看最终效果

好了，教程就到这里，其实为了不侵犯肖像权，我是故意把鱼画得这么丑的，大家应该知道我基本功很强。有不会的步骤可以

关注公众号：Axure原型武士，回复“闲鱼下拉刷新”即可获得原型文件，看看源文件里的参数。

没有我Axure画不出的交互，大家说出任何交互，我做教学，下期再会~我是奥斯特洛夫老司机