百度360必应搜狗淘宝本站头条
头像打包下载acmecadconverter_8.52绿色版mysql 昨天的日期个人网站源码word文档批量处理大师破解版
当前位置：网站首页 > 技术教程 > 正文

Axure入门案例系列:APP首次引导页

csdh11 2025-01-12 12:41 23 浏览

编辑导读：用户在初次安装或者更新APP的时候，第一印象就来自于APP首次引导页。那么，如何做好APP首次引导页呢？本文作者将基于自身工作经验，梳理了整套APP首次引导页的Axure教程。

APP更新或用户首次安装APP引导页是必不可少的一部分。

准备

  • Axure 8（或Axure 9）软件已安装。
  • 掌握基本的软件使用。
  • 熟悉动态面板。

本教程知识点

详细教程

本文以三页引导页为例，实现引导页的基本功能。

功能

打开APP可以通过拖动切换引导页的展示信息。同时支持跳过，最后一个页面跳转登录页面。

制作方式

1）搭建基础框架

  • 引导页、首页
  • 引导页主要由跳过按钮、引导页内容动态面板、滑动条、立即体验按钮组成
  • 注意：在制作内容时，如果使用局部图片（如案例）注意排版时尽可能的保证图片在每个界面的位置统一

2）制作左滑动效果和右滑动效果

  • 由于在Axure中只有动态面板存在拖动的交互触发时间，所以此处需要采用动态面板的这一属性进行实现。
  • 以左滑为例（动态面板的向左拖动结束交互事件）。
  • 设置滑动结束后的切换面板状态为下一个即可。
  • 设置动画为向左滑动，且为500毫秒。这样可以有一个半秒钟的滑动效果。

3）制作底部滑动条的效果（以左滑为例）

  • 原理：每切换一个引导页，滑动条跟随移动固定距离。且左滑动至最后一张再滑动不在向左移动，向右滑动至第一张不在向右移动
  • 根据原理，可设置每次左滑动移动滑轴50px。同时设置左侧边界可移动区域小于188px

移动50px原理：由于滑轴的长度为为100px、滑杆的长度为200px。整个滑轴可移动的范围为100px，三个页面移动两次，每次移动50px。

左侧小于188px原理：滑轴初始状态（未滑动前）的X左侧坐标为88px，移动两次后为188px。为了防止移动超过，设置限制为188px。

右滑也是基于同样的原理。

4）制作立即体验按钮和滑轴进度的切换展示

在第三个引导页后两个中，存在隐藏（显示）滑动条显示（隐藏）立即体验按钮的交互。这里可以采用动态面板的状态改变时的交互事件。

当添加特定触发条件。切换对应的事件。

状态改变时，动态面板状态为引导页三，隐藏滑动条，等待200毫秒，显示立即体验。

等待100毫秒，是为了有一个视觉上的展示显示效果。

状态改变时，动态面板状态为引导页二，隐藏立即体验，显示滑动条。

注：一定要处理好显示隐藏的顺序，Axure本质上是按照顺序事件的先后顺序进行处理，不同的顺序处理的顺序不同，展示的效果也不同。

5）其他细节处理

  • 跳过
  • 点击事件：直接打开首页即可
  • 鼠标按下事件：设置点击跳过事件为主色，鼠标按下点击时触发器点击效果
  • 立即体验的点击事件：直接打开首页即可

总结

  • 灵活的应用不同元件的交互事件
  • 注意交互的先后顺序
  • 注意元件的命名

本文由 @Brose 原创发布于人人都是产品经理，未经许可，禁止转载

题图来自Unsplash，基于CC0协议。

相关推荐

手机最强Python编程神器，在手机上运行Python

手机编程软件有很多，大部分都很难使用，操作不灵活，甚至不能安装第三方库。...

centos7上安装python3

centos7上默认安装的是python2，要使用python3则需要自行下载源码编译安装。1.安装依赖...

python详细安装教程

本章开始，我们将详细介绍Python编程环境的搭建，工欲善其事必先利其器，所以我们这里先介绍python详细安装教程。由于Python是跨平台的，他可以运行在Windows、Linux、Mac等系统上...

再见!Python 3.6

到上月为止，Python3.6对我来说已经死掉了。...

手把手教你使用Python网络爬虫下载一本小说(附源码)

大家好，我是Python进阶者。前言前几天【磐奚鸟】大佬在群里分享了一个抓取小说的代码，感觉还是蛮不错的，这里分享给大家学习。...

Windows系统下载安装Python3.9(安装Python3.11同理)

本节我们将向大家介绍如何在Windows系统安装Python3.9开发环境，安装Python3.11下载Python3.11安装包即可，安装流程都是一样的下载安装Python3.9环境...

使用python3爬取网页，aria2下载最新电影，Jellyfin播放电影

前言：在我搭建好Jellyfin软件后，因为只能播放本地视频，就想能不能播放网络上的电影，可以每天自动下载并更新，这样就不用我手工下载好，再上传到NAS中播放。或许有更好的方法，那就是直接用电影播放源...

Python第一课:下载与安装

Python自学靠不靠谱？容易上手么？掌握周期长么？如果你真的有兴趣学习Python，那么可以告诉你，只要你兴趣还在，那么你的Python就会了一半，没错，Python就是如此简单，废话不多说，下面跟...

CentOS 7下安装Python 3.10的完整过程

1.安装相应的编译工具yum-ygroupinstall"Developmenttools"yum-yinstallzlib-develbzip2-develope...

Ubuntu 25.04发行版登场:Linux 6.14内核，带来多项技术革新

IT之家4月18日消息，科技媒体linuxiac昨日（4月17日）发布博文，报道称代号为PluckyPuffin的Ubuntu25.04发行版正式上线，搭载最新Linu...

解放双手!Python 自动化下载邮件附件，可自定义时间段

在日常工作中，我们经常需要从邮箱里下载特定日期范围内的邮件附件。想象一下，你需要收集过去几个月内客户发送的报价单、合同等附件，如果手动一个个去查找和下载，那得花费多少时间和精力呀！今天就给大家分享一个...

Python爬取下载m3u8加密视频，原来这么简单

1.前言爬取视频的时候发现，现在的视频都是经过加密（m3u8），不再是mp4或者avi链接直接在网页显示，都是经过加密形成ts文件分段进行播放。...

Python3 网络爬虫:漫画下载，动态加载、反爬虫这都不叫事

一、前言作者：JackCui经过上两篇文章的学习，Python爬虫三步走：发起请求、解析数据、保存数据，已经掌握，算入门爬虫了吗？不，还远远不够！只掌握这些，还只能算门外汉级别。今天，就来带大家继续...

win7装DeepseeK的方法

DeepSeek是一个基于Python的工具或库，因此能否在Windows7上运行取决于以下因素：---###1.**Python版本支持**-DeepSeek需要Python...

Linux环境中利用curl和wget命令下载文件的使用技巧

简介：Linux里常常用来下载文件的命令有curl命令和wget命令。wget命令一般是从特定的URL下载文件。wget有个优点，就是比较稳当，特别适合网络带宽窄或者网络不太稳定的情...

一周热门
最近发表
标签列表