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

PROTO·PIE

本期内容

本期主要的内容是利用PROTO·PIE制作启动/闪屏页

闪屏页/启动页

首先我们讲为什么我们APP中需要启动页/闪屏页，先讲我自己的观点：

1）数据加载

一个应用启动是需要花费时间的，我们大多数的APP在用户打开的时候需要去加载一部分的数据，以达到内部表现层或是数据层的支持效果，而启动页就可以在这个环节中给用户以更好的体验，不至于让一个可能只加载了一半的页面效果展示的用户眼前，当然需要排除网络环境太过于差的用户，通常这个时间会控制在2秒左右，也有动态的，会在加载完需要的数据后才结束启动页，例子就不举了，大家可以在平时接触到很多

2）视觉过渡

我们无法控制用户的屏保和桌面照片，如果我们应用内部的颜色非常跳脱的话我们需要个用户一个视觉上的过渡，避免给用户太大的颜色跳跃，这种时候是会带来非常差的体验的，有部分应该采用的纯黑色然后白色字体的启动页，确实看起来很精致，很高端，但是给用户的视觉体验并不一定非常好，如果用户桌面使用了亮色，这时打开这样一个高大上的APP，启动页就把我闪了一下，OMG~

3）品牌信息传递

通过启动页让用户对自己产品的品牌有一个简单的概念，具有商业意义

4）情感共鸣

用启动页去表达一种情怀，这里最喜欢的就是微信的启动页啦

进入正题

这次的教程非常非常非常（重要的事情说三遍）的简单

思路：第一张页面做启动页，延迟2秒后跳转到产品页面

需要的步骤：场景1-延迟启动Onload-跳转Jump-场景2

场景1

首先在我们的第一个场景中加入我们的启动图片，添加Onload，延迟触发我们的跳转，设置我们的动作为Jump，在protopie中Jump用来跳转场景，场景的添加方式我们在之前有提到过，可以翻阅之前的文章查看哦

Jump的模式设置为Fade，想要其他的效果可以自行调整，其中系统提供了推入，出现，翻转等效果，非常方便只需要你点点鼠标哦

场景2

在场景2中我们放入APP的页面就可以啦，然后打开手机看看效果吧，一个启动页就这么轻松的一分钟搞定了，当然了，启动页大家都非常的习惯了，这里主要为了引出我们的延迟触发和跳转功能，可以用不同的功能组合出神奇的效果哦

附件

protopie入门第四集引导页

下期预告

下期要讲的是一个利用内置陀螺仪进行制作的页面，就叫它倾斜效果制作吧，顺便提一下，protopie官方在不断的努力下顺利更新了第二版哦，感兴趣的朋友可以马上动身下载试用，添加了sketch导入等功能，我个人而言还没有更新到我感兴趣的功能，但是进步还是值得肯定的，确实方便了许多，加油~！