“下拉刷新” 交互的设计方法

ProtoPie 2.3新功能-条件

ProtoPie 2.3版本于12月 4日(美国时间)上线。新版本中，ProtoPie大幅提高了交互效果的表现力。而此次的开发，ProtoPie团队希望让用户制作更多样的交互同时，还可以保证新功能的低学习成本。‘ProtoPie(beta) 7大新功能介绍’中提及的‘条件功能就是出于这种考虑为开发的功能之一。‘条件’功能可以制作在满足不同条件时发生不同交互反应的原型，例如‘下拉刷新’和‘开关按钮’等等。下面就通过制作‘下拉刷新’，来了解一下ProtoPie 新功能-‘条件’的使用方法。

首先需要对‘下来刷新’这个交互进行详细的分解。我们通过手指在触屏上的手势动作，可以将这个交互分成‘滚动目录’和‘手指下拉目录一定距离后离开屏幕’两个部分。

滚动目录，出现加载提示

制作这个交互时，需要被滚动的目录图层和加载图层。而且两个图层间的动作具有关联性。

• 目录图层: 跟随手指发生滚动
• 加载图层: 跟随目录滚动的距离，慢慢变大的同时旋转而出

    像这样两个具有关联性的交互动作，可以通过‘联动’功能轻松实现。

    Step 1.  图层设置

    将制作好的图像素材导入到ProtoPie后，调整图层的初始属性值。

1. 开始时，为了让目录图层(List)挡住加载图层(Spinner)，需将加载图层放到目录图层的下面。

2. 将加载图层放置到合适的位置，并如下调整图层属性。

• 锚点改为图层中心
• 大小设置为0*0
• 透明度为0   

    Step 2. 滚页动作

    ProtoPie的滚动交互制作方法十分简单。

1. 先在工具栏的插入图层菜单中，选择插入’滚页容器层’。然后根据目录的显示范围调整容器层的位置和大小。
2. 拖拽目录图层(List)到滚页容器层里面. (更详细的滚页制作介绍请参考这里)  

    Step 3. 加载图层的交互

    跟随目录图层的向下滚动，加载图层慢慢扩大并旋转出现。此交互需对加载图层(Spinner)赋予三个反应动作。

• 大小
• 透明度
• 旋转

    滚页交互和加载页的交互可以通过‘联动’的使用，轻松制作。

1. 选择滚页容器层，添加’联动‘触发模块。
2. 选中加载图层(Spinner)，在‘联动’下面依次添加 ‘大小’‘透明度’‘旋转’三个反应模块，并如图设置各属性值。

        到这里，向下滚动目录，出现加载提示的部分就完成了。

目录滚动一定距离以上时，手指抬起，发生刷新交互

    在满足什么样的条件时，发生刷新或不发生刷新，是‘下拉刷新’交互的最重要部分。在这里，我们以页面滚动距离为基准，只有当页面滚动一定距离以上时，才发生刷新交互。

    目录图层(List)向下滚动120以上时

• 目录图层(List)回到起始位置途中停止
• 加载页面(Spinner)旋转
• 加载页面(Spinner)停止旋转的同时，目录图层回到起始坐标

    不满足上面条件时

• 目录图层(List) 回到起始坐标

    根据满足的条件，需要呈现2个以上不同的交互反应时，使用‘条件’就可以轻松完成。另外，如果想确认手指离开屏幕时页面滚动的距离，可以使用‘抬起’触发完成。

     Step 4. 设定条件

1. 选中滚页容器层后添加‘抬起’触发。
2. 在‘抬起’下面添加‘条件。

    3. 选择‘条件’后，需要在属性栏中，针对滚页设定条件。 一般滚页是将页面向上滚动的，但‘下拉刷新’则是向下滚动的，所以滚动的距离值是负值。

    目录图层回到起始位置途中停止

1. 目录图层(List)因为具有滚动的特性，所以选中滚页容器层后添加‘滚页’反应
2. ‘滚页’反应的‘滚页至’设置为‘-70’

    目录图层停止期间加载图层(Spinner)旋转

1. 选中加载图层(Spinner)添加‘旋转’反应,并设置旋转、方向和速度等数值。
2. 使用‘反复’属性，可以快速制作持续发生的交互动作。

    加载图层(Spinner)停止旋转的同时目录图层(List)回到原坐标点

1.  选中滚页容器层,添加‘滚页’反应，将 “滚页至”设置成0。
2.  将两个滚页反应和一个旋转反应的发生顺序调整到合适的数值。

    这样，‘下拉刷新’的交互就完成了。

    在ProtoPie Player上不改变源文件，通过对速度的设置，就可以查看交互的每一个细节。

    点击下载‘下拉刷新’ 范例PIE文件