火星网校
Axure 9 教程:移动端引导页/欢迎页滑屏交互
发布时间：2024-01-18 16:59:16 浏览量：160次
当你第一次打开一款应用的时候常常会看到很棒的引导页设计，它们在你未使用产品之前提前告知你产品的主要功能与特点，第一次印象的好坏会极大地影响到后续的产品使用体验。因此很多产品都在努力将这几个页面设计好，从一开始就引人入胜。那么接下来我和大家一起用Axure9来做一个移动端引导页的demo。
1. 拉出一个手机壳子啦啦啦啦
哈哈哈哈没有壳子也行，那就拖个矩形出来吧（壳子原型链接在下面大家可自行下载哦）。有的朋友可能问为啥是粉红色的，因为这是一个母版~
2. 再找几张图片“伪装”成引导页
像我一样，我是在花瓣下载的~
3. 把这几张引导页放在一个动态面板里
首先得需要把图片尺寸和手机主界面大小调整一致，当然得你自己喜欢。调整好之后我们可以把其中一个引导页设为动态面板（点击当前选中图片，右键单击“转换为动态面板”），设为动态面板后新增两个状态，引导页有几页这边就新增几个状态啊同学们！可以给每个状态给个名称或者ID方便后面添加交互。
4. 添加交互
在主界面选择我们引导页的动态面板，右侧交互，因为我们习惯性从左往右滑动引导页进入APP界面，当然你喜欢往哪边就往哪边哈~我这里选择从左往右滑动进入。
首先分析一下原型交互思路：
（1）在第一个界面从左往右滑动界面时往第二个界面滑动，第二个界面往第三个界面滑动
- 情景一：面板状态=1，动态面板向2滑动
- 情景二：面板状态=2，动态面板向3滑动
（2）在第三个界面从右往左滑动界面时往第二个界面滑动，第二个界面往第三个界面滑动
- 情景一：面板状态=3，动态面板向2滑动
- 情景二：面板状态=2，动态面板向1滑动
下面加入交互
选中动态面板，右侧选择“向左拖到结束时”。
加入情景1：
设置面板状态
加入情景2：
设置面板状态：
新建交互，“向左拖到结束时”
加入情景1：
设置面板状态：
加入情景2：
设置面板状态：
这是三页引导，如四页五页在此基础进行添加就可以了，如果不是看了不是很清楚的朋友，可以添加一下我的微信号“13667321807”在线为你解答哦~这边也有产品交流群，欢迎小伙伴的加入！
附上本原型实例链接：
https://pan.baidu.com/s/1Vh_7htgGc2hQEkBnXTyANw
提取码：6rp5
作者：妖怪口袋；微信公众号：妖怪口袋，不定时更新axure9原型案例。
本文由 @妖怪口袋 原创发布于人人都是产品经理。未经许可，禁止转载
题图来自Unsplash，基于CC0协议
热门课程推荐
热门资讯
-
想要了解iPhone6界面设计的尺寸规范吗？这里为您详细介绍iPhone6的UI设计尺寸规范，包括界面尺寸、图标尺寸、可点击高度规范、搜索栏高度规范以及界面元素之间的距离规范。
-
将为大家介绍12个绝佳的UI设计网站,这些网站不仅可以为你提供灵感,还可以帮助你学习新的技巧,助力你的创意之旅!dribbbleDribbble 是一个面向设计师的...
-
3. 移动端UI设计中常见的5种APP界面类型，你get到了吗？
通过介绍移动端UI设计中的闪屏页、引导页、浮层引导页、空白页和首页等5种APP界面类型，帮助大家更好地了解UI设计的基本知识
-
怎样可以提升你的UI设计能力!第一个:站酷站酷想必是设计师都知道的一个网站,里面不止有UI设计的资源,还有其他设计的,不如:平面设计、网页设计、字体...
-
在移动端设计中,列表页和表单页是不可或缺的部分。一个好的列表页和表单页设计能够让用户轻松地获取信息并产生点击欲望,从而提高点击率。本文将为你...
-
对于想要提高自己的设计能力和创造力的小白和UI设计师来说,这本书是一个很好的选择。4.《设计的觉醒》(IKKO TANAKA)推荐理由: 这本书是日本现代平面...
-
探索零基础UI设计培训的时长与薪资前景。了解数字艺术教育领域的专业课程，以及培训后的职业发展机会。
-
ui设计应该让用户一目了然,能够快速找到所需的信息和功能。在设计过程中,应尽量使用简洁的图标、文字和色彩,避免过多的视觉干扰。符合用户习惯:ui设...
-
想了解武汉UI设计培训班的费用是多少吗？不知道学UI设计要花多少钱？不妨看看这篇文章，了解UI设计培训班的学费价格以及学习内容。
-
10. 设计中的色彩心理学:浅析中西方色彩的历史演变与设计应用
摘要:本文探讨了色彩的历史演变和设计应用。通过对色彩在早期文明社会中的实用运用、不同文化背景下色彩观念的差异、色彩在设计中的重要性以及新兴技...
