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

手机APP欢迎屏幕原型示例(以微洽为原型)

一般的手机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主界面。

原型示例文件下载:
页: [1]
查看完整版本: 手机APP欢迎屏幕原型示例(以微洽为原型)