【Axure 教程】用中继器做APP启动

简介: 【Axure 教程】用中继器做APP启动

今天教大家用中继器做app的启动页(引导页),该原型使用方便简单,制作完成后,所有交互都已经设定好,您只需要在中继器中导入图片,即可自动生成app的引导页,不需要连外网。


原型预览】

用电脑点击左下方阅读原文或复制打开下面的原型预览地址

https://axhub.im/pro/ac01112ce2eaf28f

【原型下载】

方式2:https://weidian.com/item.html?itemID=3859460809

【原型效果】

1. 推广类引导页

推广类引导页,主要放的是广告,用户可以观看,广告或者选择跳过,具有以下几个功能

自动播放功能:

640.gif

跳过广告功能:

网络异常,图片无法展示
|

点击广告查看详情功能:

640.gif

左右滑动翻页:

640.gif

2. 功能介绍类引导页

功能介绍类引导页,主要是向用户介绍此app的亮点,所以同样具备自动播放、左右滑动查看的功能,此外鼠标点击时,会进入下一张引导页。

640.gif

3. 使用说明类引导页

使用说明类引导页,主要是向用户介绍如何使用该app,所以可以不会自动跳转,通过鼠标单击代表用户已明白,才会进入下一页。

640.gif

【制作教程】

1. 制作手机外框

可以在网上手机外框的素材,如下图所示:

640.png

2. 中继器内制作

2.1 中继器表格

在pic列右键导入图片即可

640.png

2.2 中继器交互

在中继器中放入一张图片,图片大小和手机中部空白大小一致即可

中继器每项加载时设置图片=item.pic

640.png

将中继器转为动态面板,设置动态面板的大小和单张图片大小一致。

2.3 动态面板交互

鼠标向左滑动时,我们需要判断,该图片是不是最后一张,如果不是最后一张,移动动态面板到下一张图片,如果是最后一张,隐藏该动态面板,即可进入首页。

鼠标向右滑动时,要判断是不是第一张,如果是第一张的话不做交互,如果不是第一张的话,动态面板向左移动一张图的距离。

640.png

2.4 鼠标单击时事件

需要分两类, 一类是点击进入下一张引导页,那么鼠标单击时,触发鼠标向左滑动结束时的事件就可以了。另外一种是要打开另外一个页面,这时需要设置在内联框架打开某个页面即可。

2.5 自动播放图片

这个也很简单,拖入一个新的动态面板,让他状态改变的时候,触发向左滑动结束时的事件即可。

640.png

这样就制作完成了,以后使用,仅需导入图片,即可自动生成app的引导页,所以强烈推荐给各位使用。

作者:梓贤vigo;


微信公众号:Axure高保真原型,分享一系列产品经理常用的原型模板、教程、视频、文档等原创内容


本文由微信公众号:Axure高保真原型 授权发布,未经许可,禁止转载

相关文章
|
5月前
|
开发者 iOS开发
UniApp打包教程:使用HBuilder X和AppUploader完成原生App云打包和上架指南“
UniApp打包教程:使用HBuilder X和AppUploader完成原生App云打包和上架指南“
208 3
|
5月前
|
Android开发 移动开发 小程序
binder机制原理面试,安卓app开发教程
binder机制原理面试,安卓app开发教程
binder机制原理面试,安卓app开发教程
|
5月前
|
搜索推荐 前端开发 JavaScript
【专栏】从网页轻松转换为应用越来越便捷
【4月更文挑战第27天】本文介绍了将网页转换为移动应用的在线生成App过程,包括原理(封装网页内容,添加移动特性)、优势(便捷高效,节省成本,快速上线)以及具体步骤(选择工具,准备内容,配置选项,生成测试,发布推广)。同时,注意版权、兼容性和用户体验问题。通过案例分析和实践经验分享,帮助读者深入了解如何通过在线工具实现App梦想,强调了网页优化、用户界面设计和个性化定制的重要性。
140 3
|
2月前
|
网络协议 物联网 测试技术
App Inventor 2 MQTT拓展入门(保姆级教程)
本文演示的是App和一个测试客户端进行消息交互的案例,实际应用中,我们的测试客户端可以看着是任意的、支持MQTT协议的硬件,通过订阅及发布消息,联网硬件与我们的App进行双向数据通信,以实现万物互联的智能控制效果。
141 2
|
2月前
Axure App 垂直滚动
Axure App 垂直滚动
36 0
|
5月前
|
存储 JavaScript 前端开发
uni-app 从vue3项目创建到Pinia管理数据全局使用 持久化存储数据 详细教程
uni-app 从vue3项目创建到Pinia管理数据全局使用 持久化存储数据 详细教程
|
5月前
|
iOS开发 开发者
【教程】uni-app iOS 打包解决 profile 文件与私钥证书不匹配问题
【教程】uni-app iOS 打包解决 profile 文件与私钥证书不匹配问题
|
4天前
|
移动开发 Android开发 数据安全/隐私保护
移动应用与系统的技术演进:从开发到操作系统的全景解析随着智能手机和平板电脑的普及,移动应用(App)已成为人们日常生活中不可或缺的一部分。无论是社交、娱乐、购物还是办公,移动应用都扮演着重要的角色。而支撑这些应用运行的,正是功能强大且复杂的移动操作系统。本文将深入探讨移动应用的开发过程及其背后的操作系统机制,揭示这一领域的技术演进。
本文旨在提供关于移动应用与系统技术的全面概述,涵盖移动应用的开发生命周期、主要移动操作系统的特点以及它们之间的竞争关系。我们将探讨如何高效地开发移动应用,并分析iOS和Android两大主流操作系统的技术优势与局限。同时,本文还将讨论跨平台解决方案的兴起及其对移动开发领域的影响。通过这篇技术性文章,读者将获得对移动应用开发及操作系统深层理解的钥匙。
|
7天前
|
XML 移动开发 前端开发
使用duxapp开发 React Native App 事半功倍
对于Taro的壳子,或者原生React Native,都会存在 `android` `ios`这两个文件夹,而在duxapp中,这些文件夹的内容是自动生成的,那么对于需要在这些文件夹中修改的配置内容,例如包名、版本号、新架构开关等,都通过配置文件的方式配置了,而不需要需修改具体的文件
|
7天前
|
存储 开发工具 Android开发
使用.NET MAUI开发第一个安卓APP
【9月更文挑战第24天】使用.NET MAUI开发首个安卓APP需完成以下步骤:首先,安装Visual Studio 2022并勾选“.NET Multi-platform App UI development”工作负载;接着,安装Android SDK。然后,创建新项目时选择“.NET Multi-platform App (MAUI)”模板,并仅针对Android平台进行配置。了解项目结构,包括`.csproj`配置文件、`Properties`配置文件夹、平台特定代码及共享代码等。
下一篇
无影云桌面