交互设计工具protopie入门第四集

PROTO·PIE

本期内容

本期主要的内容是利用PROTO·PIE制作我们的引导页，引导页是一款产品的重要部分，如何给用户第一印象是非常重要的一个环节，从最原始的闪屏页到现在加入引导页，再到引导页交互的不断发展，已经有了多种多样的形式，但是如果设计师们或者产品经理想做一个动画效果在引导页上怎么与程序员交流就成了很大的难题，口头说说的怎么能够保证最终效果呢，这时候我们就需要用到我们的交互设计原型工具了，例如我们的菠萝头派

引导页我认为可以分为3类：无引导页，图片引导页，交互引导页。这里的分类只是我个人的观点，当然在引导页上文案内容肯定是我日常工作中最关心的部分，但我们这是工具教程，就不涉及相应内容了

图片引导页

目前市面上最简单的引导页就是没有引导页，哈哈

我们来讲图片引导页的方式，图片引导页会使用多张图片的方式，只做图片切换就可以实现，那这时候我们只需要做页面图片，这里我使用sketch做了3张简单的页面，利用Proto·Pie中一个很简单的功能就可以实现我们想要的效果了

SKETCH图片

首先用Sketch导出我们的素材，然后新建一个PROTOPIE文件，将3张图片素材导入进去

导入素材

在PROTOPIE中提供了一个非常方便的引导页制作方法，叫做Page，可以在工具栏的事件区找到，也可以点击Add Trigger后选择Page

添加触发事件

添加完Page后我们需要为它选择绑定对象，也可以理解为切换区域，这时候我们新建一个容器Container，拖放至屏幕大小，然后选择Page的绑定对象为容器，在这里我们同时把3张图片放到容器中去，在放到容器前我们把3张图片整齐排列，如图所示，因为我们拖到容器之中后再调整图片顺序会比较不方便

将图片置入容器前

这样我们就完成了初级引导页的制作，是不是非常的方便，快打开手机运行看一下效果吧

交互引导页

这里的交互引导是由官方提供的源文件，再次感谢，我所指的交互引导页是在视觉感官上与使用者有更多交流，有更好用户体验的一种方式

首先我们看一下文件的内容

交互引导

其中用到了Chain，我称之为联动，简单来说就是一个元素在X，Y轴上的变化可以触发其他元素的动作，例如该例中用切换页的变化影响其他元素的动作，真正我们手动切换的是5张页面的变化，其中3张有图标+文案，截图给大家看一下

切换页

就是它了，这个长图就相当于我们在第一个例子中的3张图片，从这个例子中大家可以发现我们的切换页可以用一张长图实现，而不用多张图片，但最终的效果都是一样的，我个人觉得多张图片更好理解和控制，看大家个人喜好

下面来讲一下Chain联动，我们选中Chain可以看到我们的目标对象是切换页容器，而下面的影响因素是Scroll X，就是X轴的滚动，也就是我们横向的切换

Chain

这样我们在Chain下添加交互动作的时候可以发现下边多了一项Mapping，在其中我们可以具体设置Scroll X对我们交互动作的影响，从X轴的值 X1到X2我们所需要的交互都在其中设置就好了，我觉得官方的例子做的非常好，简单，便于理解，大家可以很容易地从其中学到制作的方法，那接下来我就跟着例子尝试着做一下这样的效果，文件也放在附件中供大家参考，具体制作流程不在这里详细描述了，如果大家有疑问的话可以在评论中提问或者发信息给我

当然，更附加的引导页制作方式肯定还有很多，过于复杂的方式还是建议各位学习一下AE

虽然引导页的制作方法方式多种多样，但是在实际应用过程中切勿过分使用交互效果，而应该借助不同的效果以达到我们的目的，包括用户的视觉停留，文案效果增强等，动效并不是一款APP的灵魂

附件

protopie入门第四集引导页

下期预告

在下期打算更新的内容主要是闪屏页的制作，内容可能比较少，大家希望在后面的文章中加入什么内容都可以留言告诉我哦