提交需求
赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!
ProtoPie 2.3版新增的‘条件’(condition)功能可以制作在满足不同条件时发生不同交互反应的原型。本文通过制作‘下拉刷新’学习使用这一功能。
“下拉刷新” 交互的设计方法
ProtoPie 2.3新功能-条件
ProtoPie 2.3版本于12月 4日(美国时间)上线。新版本中,ProtoPie大幅提高了交互效果的表现力。而此次的开发,ProtoPie团队希望让用户制作更多样的交互同时,还可以保证新功能的低学习成本。‘ProtoPie(beta) 7大新功能介绍’中提及的‘条件功能就是出于这种考虑为开发的功能之一。‘条件’功能可以制作在满足不同条件时发生不同交互反应的原型,例如‘下拉刷新’和‘开关按钮’等等。下面就通过制作‘下拉刷新’,来了解一下ProtoPie 新功能-‘条件’的使用方法。
首先需要对‘下来刷新’这个交互进行详细的分解。我们通过手指在触屏上的手势动作,可以将这个交互分成‘滚动目录’和‘手指下拉目录一定距离后离开屏幕’两个部分。
滚动目录,出现加载提示
制作这个交互时,需要被滚动的目录图层和加载图层。而且两个图层间的动作具有关联性。
像这样两个具有关联性的交互动作,可以通过‘联动’功能轻松实现。
Step 1. 图层设置
将制作好的图像素材导入到ProtoPie后,调整图层的初始属性值。
开始时,为了让目录图层(List)挡住加载图层(Spinner),需将加载图层放到目录图层的下面。
将加载图层放置到合适的位置,并如下调整图层属性。
Step 2. 滚页动作
ProtoPie的滚动交互制作方法十分简单。
Step 3. 加载图层的交互
跟随目录图层的向下滚动,加载图层慢慢扩大并旋转出现。此交互需对加载图层(Spinner)赋予三个反应动作。
滚页交互和加载页的交互可以通过‘联动’的使用,轻松制作。
到这里,向下滚动目录,出现加载提示的部分就完成了。
目录滚动一定距离以上时,手指抬起,发生刷新交互
在满足什么样的条件时,发生刷新或不发生刷新,是‘下拉刷新’交互的最重要部分。在这里,我们以页面滚动距离为基准,只有当页面滚动一定距离以上时,才发生刷新交互。
目录图层(List)向下滚动120以上时
不满足上面条件时
根据满足的条件,需要呈现2个以上不同的交互反应时,使用‘条件’就可以轻松完成。另外,如果想确认手指离开屏幕时页面滚动的距离,可以使用‘抬起’触发完成。
Step 4. 设定条件
3. 选择‘条件’后,需要在属性栏中,针对滚页设定条件。 一般滚页是将页面向上滚动的,但‘下拉刷新’则是向下滚动的,所以滚动的距离值是负值。
目录图层回到起始位置途中停止
目录图层停止期间加载图层(Spinner)旋转
加载图层(Spinner)停止旋转的同时目录图层(List)回到原坐标点
这样,‘下拉刷新’的交互就完成了。
在ProtoPie Player上不改变源文件,通过对速度的设置,就可以查看交互的每一个细节。
大牛,别默默的看了,快登录帮我点评一下吧!:)
登录 立即注册