养生 装修 购物 美食 感冒 便秘 营销 加盟 小吃 火锅 管理 创业 搭配 减肥 培训 旅游

Axure怎么做出上拉下拉的效果

时间:2024-10-17 12:25:40

Axure是一款非常专业的快速原型设塥骈橄摆计工具,也是产品经理吃饭的家伙,在使用的中我们需要制作出各种各样的功能,比如上下拖动跳转等,今天我们先说一下怎么做出来上下拖动的效果,那么这个效果怎么做出来呢?

Axure怎么做出上拉下拉的效果

工具/原料

Axure

布局

1、首选我们先创建一个动态面板(因为我们这里只做一个效果出来所以关于顶部和底部的菜单,以及内容的填充我就直接简化了),然后在动态面板的状态里面填充内容。

Axure怎么做出上拉下拉的效果

2、我们都知道动态面板是呈现内容的(类似于手机屏幕),而动态面板的状态则是存放内容的就相当于手机屏幕里面的内容。

Axure怎么做出上拉下拉的效果

Axure怎么做出上拉下拉的效果

3、然后我们在状态里面在放一个内容的动态面板,这个面板可以大一点,以为们是在第一个咿蛙匆盗动态面板的状态里面的,展示的内容已经确定了,超出的内容是显示不出来的,所以方便后面的上拉和下拉。

Axure怎么做出上拉下拉的效果

4、我们重复之前的操作,从动态面板里面找到状态,然后在里面填充一些内容,这里我用一些东西给替代了,具体如下图:

Axure怎么做出上拉下拉的效果

移动

1、布局完成之后我们接下来就要让这个布局动起来了,首先我们找打内容的动态面板,大的内容的动态面板,不要找错了。

Axure怎么做出上拉下拉的效果

2、然后找到交互,选择拖动面板时-添加用例-移动-选择拖动的面板-选择移动的方向-确定保存,下图有清晰的步骤,按照下面的步骤进行即可。

Axure怎么做出上拉下拉的效果

3、最后一步就是保存整个设计,然后找到预览,位置如下图所示,(或者是预览快捷键F5),最后我们看一下效果怎么样。

Axure怎么做出上拉下拉的效果

© 一点知识