下拉刷新的设计方法-ProtoPie‘条件’教程

原创文章 分类: 教程 版权:
3665 14 26 3
2016-12-06
0.0
编辑推荐

ProtoPie 2.3版新增的‘条件’(condition)功能可以制作在满足不同条件时发生不同交互反应的原型。本文通过制作‘下拉刷新’学习使用这一功能。


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

ProtoPie 2.3新功能-条件


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

Image title





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

Image title          Image title


滚动目录,出现加载提示

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

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

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


    Step 1.  图层设置

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

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

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

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

Image title

    Step 2. 滚页动作

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

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

Image title


    Step 3. 加载图层的交互

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

  • 大小
  • 透明度
  • 旋转

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

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

Image title                    Image title                    Image title


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

Image title



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

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


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

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

    不满足上面条件时

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

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

   

     Step 4. 设定条件

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

Image title

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

Image title

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

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

Image title


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

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

Image title


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

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

Image title

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

   

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

Image title




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


Image title




ProtoPie

162粉丝/6关注

小有见解首页新秀原创小生
如何使用交互原型作品参加领克设计大赛?4款值得你在2018年底试用的原型工具

扫描二维码
去手机端查看海报

ProtoPie

TA已经获得3枚勋章啦

  • 成就勋章

    • 特别勋章

    • 身份勋章

  • 已拥有

  • 作品

    创造者才是真正的享受者。

  • 经验

    经验是一所好学校,可它的学生却经常旷课。

  • 活跃

    大神都是从围观群众开始的

  • 拓展

    作品、经验、活跃还不能满足你?

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