手机APP欢迎屏幕原型示例（以微洽为原型）

best919 · 发表于 2014-9-1 21:32:40

一般的手机APP在第一次运行时都会显示欢迎屏幕（多屏），以手指滑动来演示功能介绍。本次结合Justinmind的一些特性，截取微洽APP的3张欢迎和1张主功能屏幕，来实现类似的效果。
下图原型模板选用了Justinmind提供的 iPhone5 模板。屏幕为纵向 320x538

我们将3张欢迎屏幕的图片大小调整为手机模板屏幕的大小，在第三张图片的“开始体验之旅>>”上方放1个热点部件。然后将这4个部件进行“组合”，并与手机模板工作区左上边缘（坐标为0，0）对齐。然后再添加3个椭圆部件（24x24）放在模板工作区下方位置，并将第一个椭圆部件填充为红色（用以指示当前屏幕位置）, 另两个填充为蓝色，整体效果如下：

【实现目标】第1张图只能向左滑动；第2张图可左右滑动；第3张图只能向左滑动或点击“开始体验之旅>>”打开显示微洽主界面。在第1－3张图片滑动时屏幕下方的3个椭圆部件也会动态切换显示当前屏幕位置（变为红色）。
【说明】Justinmind生成原型时，只显示模板工作区内的信息，处于此区域外的所有部件都不会被显示。利用这个特性将多个屏幕或部件组合起来，通过手势进行滑动时，效果非常平滑连贯（虽然也可以使用动态面板的不同层来切换实现类似的效果，但效果会差一些）。

【具体操作步骤】
（仅对第1张图片上的事件进行简略介绍，其它图片上的事件类同。大家可以下载原型示例打开后查看具体的设置）

1、选中第1张图片；2、添加向左滑动事件（滑动一次向左移动相对位置为-320px, 如果是向右滑动则为320px）：

3、更改第1个椭圆部件样式：

4、更改第2个椭圆部件样式：

当在第3张图片上点击 “开始体验之旅>>” 则打开微洽APP主界面。

原型示例文件下载：

屏幕切换效果60.rar (144.71 KB, 下载次数: 48)