Axure怎么设计绝对位置的滑屏插件原型?

Axure中设计网页原型很简单,想要制作滑屏插件,这个效果是手机软件启动时使用的,可以展示一些信息、介绍等内容,Axure原型工具如何制作绝对位置的滑屏插件,下面我们就来看看详细的教程。

软件名称:
原型设计工具Axure RP Pro 8.1破解版 中文汉化破解版(附汉化包+注册码+安装教程)
软件大小:
90.5MB
更新时间:
2018-05-24

1、首先创建一个新的空白页面,在工作区域拖入相关元件,如下图所示。

Axure怎么设计绝对位置的滑屏插件原型?_第1张图片

2、将各个元件的样式进行调整,并对页面中的值进行描述,如下图所示。

Axure怎么设计绝对位置的滑屏插件原型?_第2张图片

3、元件样式调整完成后,对各个元件的名称进行命名,后面做交互事件时能够清晰,如下图所示。

Axure怎么设计绝对位置的滑屏插件原型?_第3张图片

4、将三个椭圆的选中状态的样式进行设置,如下图所示。

Axure怎么设计绝对位置的滑屏插件原型?_第4张图片

5、将准备好的元件复制到动态面板中,并调整合适的位置,如下图所示。

Axure怎么设计绝对位置的滑屏插件原型?_第5张图片

6、选中三个矩形,将三个矩形转换为动态面板,并对动态面板的名称进行命名如下图所示。

Axure怎么设计绝对位置的滑屏插件原型?_第6张图片

Axure怎么设计绝对位置的滑屏插件原型?_第7张图片

7、下面开始对动态面板的交互事件进行设置,首先是拖动时的效果,如下图所示。

Axure怎么设计绝对位置的滑屏插件原型?_第8张图片

8、然后再做拖动结束时的交互效果,如下图所示。

Axure怎么设计绝对位置的滑屏插件原型?_第9张图片

Axure怎么设计绝对位置的滑屏插件原型?_第10张图片

Axure怎么设计绝对位置的滑屏插件原型?_第11张图片 

9、交互事件设置完成后,补充一步,将三个圆放入一组中,并将第一个圆设置为选中状态,如下图所示。

Axure怎么设计绝对位置的滑屏插件原型?_第12张图片

10、所有工作准备完成,f5预览一下效果,拖动页面,效果就出现了,如下图所示。

Axure怎么设计绝对位置的滑屏插件原型?_第13张图片

Axure怎么设计绝对位置的滑屏插件原型?_第14张图片

以上就是Axure制作绝对位置滑屏插件的教程,希望大家喜欢,请继续关注脚本之家。

相关推荐:

Axure8怎么将所有页面导出为图片?

axure怎么制作下拉多选部门的控件?

Axure图片显示不完整或扭曲该怎么解决?

你可能感兴趣的:(Axure怎么设计绝对位置的滑屏插件原型?)