Axure产品设计原型之--toggle,页面跳转,页面滚动

很多好的案例分享在这里----http://www.webppd.com/forum-4-1.html
这个案例很好---http://http://162i93.share.axure.org/#g=1&p=%E7%82%B9%E6%BB%B4%E5%8E%9F%E5%9E%8B

安装axure8.0
安装汉化包


Axure产品设计原型之--toggle,页面跳转,页面滚动_第1张图片
image.png

这是界面


Axure产品设计原型之--toggle,页面跳转,页面滚动_第2张图片
image.png

做了四个元素,最上一层是动态面板,点击“视图”--“功能区”--“概要”,可以隐藏掉暂时不用的图层,利于我们制作


Axure产品设计原型之--toggle,页面跳转,页面滚动_第3张图片
image.png

1.页面上下滚动

Axure产品设计原型之--toggle,页面跳转,页面滚动_第4张图片
image.png

1)创建最外层包裹容器,一个动态面板,双击该面板,出现如下弹出框,命名content,content包含的子集叫content-item


Axure产品设计原型之--toggle,页面跳转,页面滚动_第5张图片
image.png

2)双击content-item进入,我们再在content-item上放一个长长的动态面板


Axure产品设计原型之--toggle,页面跳转,页面滚动_第6张图片
image.png

3)双击该动态面板content-itemD的state1进入,放内容
Axure产品设计原型之--toggle,页面跳转,页面滚动_第7张图片
image.png

4)关键点在这里。打开content-item,设置它的拖动动作。
Axure产品设计原型之--toggle,页面跳转,页面滚动_第8张图片
image.png

然后我们点击右上角“预览”,发现效果不太好,可以垂直拖动但是会拖出头,拖出尾


Axure产品设计原型之--toggle,页面跳转,页面滚动_第9张图片
image.png

5)双击进入,我们需要加一个限制
Axure产品设计原型之--toggle,页面跳转,页面滚动_第10张图片
image.png

Axure产品设计原型之--toggle,页面跳转,页面滚动_第11张图片
image.png

header应该是<=0的哈,图错了
这样就可以有边界的上下滚动长内容,不至于让它滚出去

2.点击跳转页面

Axure产品设计原型之--toggle,页面跳转,页面滚动_第12张图片
image.png

3.点击显示隐藏

Axure产品设计原型之--toggle,页面跳转,页面滚动_第13张图片
image.png

Axure产品设计原型之--toggle,页面跳转,页面滚动_第14张图片
image.png

初始化是menuCon不可见,所以选中menuCon,右击--‘设为隐藏’

问题是,很多类似交互是toggle方式做的,同一个按钮要控制俩种状态
此时


Axure产品设计原型之--toggle,页面跳转,页面滚动_第15张图片
image.png

反推,应该还添加一个点击事件:当menuCon可见时,让它隐藏
就是这样啦


Axure产品设计原型之--toggle,页面跳转,页面滚动_第16张图片
image.png

4.切换页面效果

Axure产品设计原型之--toggle,页面跳转,页面滚动_第17张图片
image.png

content动态面板框中放了三个state,state1(粉色),state2(绿色),state1(橘色)
header上放了三个按钮分布控制
挑一个说,green吧
看点击green,动态面板发生的页面切换效果


Axure产品设计原型之--toggle,页面跳转,页面滚动_第18张图片
image.png

看点击green,green按钮本身发生的效果,

类似于咱们$(this).addClass('active').siblings().removeClass('active');的操作
Axure产品设计原型之--toggle,页面跳转,页面滚动_第19张图片
image.png

接着设置自己的选中样式

学习其他操作再来分享哈~~

你可能感兴趣的:(Axure产品设计原型之--toggle,页面跳转,页面滚动)