Axure怎么制作上下滑动的页面原型?

Axure怎么制作上下滑动的页面原型?Axure中想要设计一个上下滚动的页面,该怎么制作这个页面呢?下面我们就来看看详细的教程,需要的朋友可以参考下

1、在当前Page 中拖入一个动态面板,将面板命名为“显示面板”。这个面板对应着可见内容。该例中的可见面板的位置为{97, 77},大小为{300, 450}。文章源自设计学徒自学网-http://www.sx1c.com/37734.html

Axure怎么制作上下滑动的页面原型? -1文章源自设计学徒自学网-http://www.sx1c.com/37734.html

Axure怎么制作上下滑动的页面原型? -2文章源自设计学徒自学网-http://www.sx1c.com/37734.html

2、点击进入显示面板的 State1。拖动一个动态面板到State1 中,面板命名为“内容面板”。该面板的位置为{0, 0},因为这里要实现的是上下滑动效果,所以宽度与显示面板的一样。高度根据全部显示信息的内容定。进入内容面板的 State1,选择“自动调整为内容尺寸文章源自设计学徒自学网-http://www.sx1c.com/37734.html

Axure怎么制作上下滑动的页面原型? -3文章源自设计学徒自学网-http://www.sx1c.com/37734.html

Axure怎么制作上下滑动的页面原型? -4文章源自设计学徒自学网-http://www.sx1c.com/37734.html

3、在内容面板的State1 中添加一个中继器。进入中继器下的矩形框,因为这里想要在中继器中添加图片,所以直接右键,选择转换为图片,双击转换后的框框就可以添加图片了。文章源自设计学徒自学网-http://www.sx1c.com/37734.html

Axure怎么制作上下滑动的页面原型? -5文章源自设计学徒自学网-http://www.sx1c.com/37734.html

Axure怎么制作上下滑动的页面原型? -6文章源自设计学徒自学网-http://www.sx1c.com/37734.html

4、内容添加好了,接下来就是添加滑动的事件。选择“拖动时”事件,选择垂直拖动。文章源自设计学徒自学网-http://www.sx1c.com/37734.html

Axure怎么制作上下滑动的页面原型? -7

5、还需要添加约束条件,第二个约束值的计算:-(总的内容高度 - 可见内容高度)

Axure怎么制作上下滑动的页面原型? -8

以上就是Axure制作上下滑动的页面原型的图文教程,希望大家喜欢。

我的微信
微信扫一扫
weinxin
我的微信
惠生活福利社
微信扫一扫
weinxin
我的公众号
 
设计学徒自学网
  • 本文由 设计学徒自学网 发表于 2023年12月15日10:48:12
  • 转载请务必保留本文链接:http://www.sx1c.com/37734.html
    本站展示的所有图文软件均来自于互联网,仅用于软件学习研究分享传递,请勿商用,本站如有侵权请联系客服删除。
匿名

发表评论

匿名网友
:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

拖动滑块以完成验证