Axure实战12:创建一个GuidePage引导页示例

·  阅读 1741
Axure实战12:创建一个GuidePage引导页示例

在本章中,你将学会使用动态面板和交互动作构建一个GuidePage引导页。

1.png

项目背景

在常用的移动端产品设计中,用户首次下载并打开App时,客户端常常采用启动页+引导页的方式呈现给用户。

一方面可以缓解加载App数据内容时的等待焦虑,另一方面可以通过几张图片简介介绍产品的亮点,或者核心功能。

可以说,启动页和引导页是当前客户端设计中不可或缺的一部分。

那么本章中,我们就来创建一个GuidePage引导页。

项目搭建

首先,创建一个新项目,命名为GuidePage。

2.png

页面框架

为了更加符合移动端设计,这里加入手机壳框架,日常工作中也可以储备一些目前主流手机机型的框架原型。

3.png

这里引用的是网络下载的iPhone机型的外壳,下面我们就在这个外壳框架内完成页面及交互。

拖入一个“动态面板”组件,命名为“主体框架”。

将主体框架动态面板放在手机壳中,设置尺寸大小为375*745,并添加2个状态和重命名。

4.png

这样,我们就得到了一个主体框架动态面板和三个状态页面:启动页、引导页、登录页。

页面样式-启动页

接下来,我们完成下每个页面的样式,首先是启动页。

在App产品设计中,启动页常常一闪而过,因此不需要做太多设计,常见的启动页有展示应用logo、展示应用名称、展示应用slogan等。

这里,我们就放一个logo图片。

5.png

拖入一个“图片”组件,命名为logo。

设置它的位置为页面居中,上边距为200。设置它的尺寸为100*100。

双击图片,即可打开本地选择图片载入,这里我们选择一张logo图片。

6.png

页面交互-启动页

页面样式完成后,我们来看下启动页的交互。

启动页与引导页的关系是,当页面展示的时候,启动页加载展示差不多1秒钟,然后自动跳转到引导页。

明白了这个交互逻辑后,我们来实现它。

7.png

我们以logo图片为中间件,新建了2个载入时的交互动作。

选中logo图片,在“交互”工具栏中选择新建交互,选择“载入时”,选择“等待”,设置等待2000ms。

再在下面新建动作,选择“设置面板状态”,目标为“主体框架”,选择状态为“引导页”,进入动画为“逐渐+500毫秒”,退出动画为“逐渐+500毫秒”。

在浏览器中预览下效果:

8.png

页面样式-引导页

启动页完成后,我们来完成引导页的基础样式。

在动态面板中,切换面板状态为引导页。

9.png

我们先分析下引导页的逻辑。

引导页一般由3~4个页面组成,自动向左滑动展示下一页,最后一页有个按钮“立即体验”,点击“立即体验”,跳转到登录页。

我们发现引导页每个页面也很简答,基本由图片+文字说明组成,那我们先完成前面3~4个页面的样式。

我们依旧可以使用动态面板来完成多个页面。

10.png

拖入一个“动态面板”组件,命名为“引导页”。

设置位置为(0,0),尺寸为375*745。

这里科普一个知识点。

动态面板是可以叠加的,也就是一个动态面板内部可以放一个动态面板,面板里面再可以放面板,循环嵌套。

我们这里是在主体框架的动态面板中,放了一个引导页的动态面板。

我们双击进入引导页动态面板,创建4个状态,用来防止我们不同的引导页的页面。

11.png

然后在第一个面板中,我们放一张图片和文字。

拖入一个“图片”组件,两个“文本标签”组件,下面页面的轮博的点,可以用1个“矩形2”组件和2个“圆形”组件来绘制,这里就不赘述了。

图片部分,这边选择了网上开源免费的插画作为引导页的图片。

12.png

同理,我们在面板2、面板3、面板4,也绘制页面。

不同的是,我们面板4就需要加一个按钮,其实也是矩形组件罢了。

13.png

页面交互-引导页

下面我们实现下引导页滑动的交互动作。

选中引导页,在“交互”工具栏中,新建交互 ,选择“载入时”,选择“设置动态面板”,目标为“引导页”,设置状态为“下一项”,勾选“向后循环”。

顺便加入些动画,让交互更加友好些。设置进入动画为“向左滑动+500毫秒+缓进缓出”,设置退出动画为“向左滑动+500毫秒+缓进缓出”。

在更多选项中,勾选“循环间隔3000毫秒”,勾选“首个状态延时3000毫秒后切换”。

14.png

交互动作好像很多的样式,其实也就实现了引导页在展示的时候,首先延时等待3秒,然后自动向左切换动态面板状态罢了。

我们再加入一个交互动作,即当我们鼠标移入时,停止轮博,免得一直滚动不停。

在“交互”工具栏中新建交互,选择“鼠标移入时”,选择“设置面板状态”,目标为“引导页”,设置状态为“停止循环”。

15.png

这样,我们就完成了引导页的自动轮博和停止了。

下面我们完成引导页到登录页的跳转。

16.png

我们双击“引导页”动态面板,进入内页,选择状态4。

选中“立即体验”的按钮,在“交互”工具栏中新建交互,选择“单击时”,选择“设置面板状态”,目标为“主体框架”,状态为“登录页”。

进入动画为“逐渐+200毫秒”,退出动画为“逐渐+200毫秒”。

这样,当我们点击“立即体验”按钮时,主体框架就可以跳转到登录页了。

页面样式-登录页

登录页的样式也比较简单,我们放了1个logo图片(图片组件)、两个按钮(矩形2组件)、勾选图片(图片组件)、阅读条款(文本标签组件)。

17.png

我们整体在浏览器中预览下效果:

1.png

哈哈哈,效果不错!

为了让这个网站能够公开访问,我们可以生成html文件,然后发布到gitHub或者gitee中,这样就可以将网站分享给朋友们了。

网站地址

引导页: ricardowesley.gitee.io/guidepage

快来动手试试吧!

如果本专栏对你有帮助,不妨点赞、评论、关注~

分类:
开发工具
收藏成功!
已添加到「」, 点击更改