实现手机站侧边导航、幻灯片——Axure8.0

效果图.png

手机站侧边导航(设定屏幕可显示宽度为640px)

1.将矩形元件设置宽度为640,高度任意,然后再设计顶部栏目以及相关内容,如下图:

顶部设计.png


2.设计侧边栏,如下图所示,然后将侧边栏及其内容转换为动态面板且设置为隐藏状态

侧边栏设计.png



3.给按钮设置点击事件。添加动作“显示/隐藏”,选择可见性为切换

事件添加.png

手机站幻灯片

1.在上述的基础上添加矩形以及小圆点,选中幻灯片所有内容转换为动态面板,给动态面板设置三种状态,对应三张幻灯片

幻灯片设计.png


2.进入面板状态1,设置圆点选中状态,复制状态1到状态2、状态3并改变选中圆点。回到主页面,设置页面载入时的事件,添加“等待”动作》添加“设置面板状态”动作,设置为状态2》添加等待》设置面板状态为3》等待》设置面板状态为1

幻灯片面板状态设计.png

3.最后,要注意将侧边导航栏的动态面板置于顶层,防止轮播图遮挡侧边导航

你可能感兴趣的:(实现手机站侧边导航、幻灯片——Axure8.0)