Axure怎么设计上下滑动页面原型_设计上下滑动页面原型的技巧分享

许多网友还不太了解Axure,也还不了解Axure设计上下滑动页面原型的操作,而下面就分享了Axure设计上下滑动页面原型的操作方法,希望感兴趣的朋友都来共同学习哦 。


Axure怎么设计上下滑动页面原型_设计上下滑动页面原型的技巧分享


我们需要先打开Axure软件,在当前Page 中拖入一个动态面板,将面板命名为“显示面板” 。这个面板对应着可见内容 。该例中的可见面板的位置为{97, 77},大小为{300, 450} 。
Axure怎么设计上下滑动页面原型_设计上下滑动页面原型的技巧分享


Axure怎么设计上下滑动页面原型_设计上下滑动页面原型的技巧分享


然后点击进入显示面板的 State1 。拖动一个动态面板到State1 中,面板命名为“内容面板” 。该面板的位置为{0, 0},因为这里要实现的是上下滑动效果,所以宽度与显示面板的一样 。高度根据全部显示信息的内容定 。进入内容面板的 State1,选择“自动调整为内容尺寸”
Axure怎么设计上下滑动页面原型_设计上下滑动页面原型的技巧分享


Axure怎么设计上下滑动页面原型_设计上下滑动页面原型的技巧分享


【Axure怎么设计上下滑动页面原型_设计上下滑动页面原型的技巧分享】接着在内容面板的State1 中添加一个中继器 。进入中继器下的矩形框,因为这里想要在中继器中添加图片,所以直接右键,选择转换为图片,双击转换后的框框就可以添加图片了 。
Axure怎么设计上下滑动页面原型_设计上下滑动页面原型的技巧分享


Axure怎么设计上下滑动页面原型_设计上下滑动页面原型的技巧分享


内容添加好了,接下来就是添加滑动的事件 。选择“拖动时”事件,选择垂直拖动 。
Axure怎么设计上下滑动页面原型_设计上下滑动页面原型的技巧分享


最后我们还需要添加约束条件,第二个约束值的计算:-(总的内容高度 - 可见内容高度)
Axure相关攻略推荐:
Axure中流程图添加连接线具体方法介绍
Axure RP8将RP文件导入具体操作方法
Axure RP实现提示框悬停功能的具体操作流程
Axure怎么设计上下滑动页面原型_设计上下滑动页面原型的技巧分享


根据上文讲解的方法,你们是不是都学会了呀!

    推荐阅读