Axure 制作折叠菜单教程

2018-07-0917:45:34原型设计Comments2,559 views字数 889阅读模式

一、准备元件

  1. 打开 Axure 新建文件,拉出一个矩形,w 为 200 px,h 为 40 px,色值为 #333333,在矩形内输入“一级菜单”,然后命名为“一级菜单”;
  2. 拖进一个矩形,同样 w 为 200 px ,h 为 40 px ,色值改为 #FFFFFF( 纯白色 ),在矩形内输入“选项一”;
  3. 把“选项一” 在复制两个出来,分别叫“选项二 ”、“选项三” 。

完成了以上动作,就可以得到一下的展示,看图:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4119.html

Axure 制作折叠菜单教程文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4119.html

好了,完成之后我们就来开始做第二步 ~文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4119.html

二、设置交互样式

(1)全选“选项一、二、三 ”,右键点击 交互样式设置 ,选择鼠标悬停 – 填充颜色 – 色值为 #F2F2F2 、然后再选 选中 – 填充颜色 – 色值 #E4E4E4 。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4119.html

如图:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4119.html

Axure 制作折叠菜单教程文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4119.html

(2)继续选中“选项一、二、三 ”,右键点击设置选项组名称 ,命名为“选项”、选择“选项一”右键点击 选中( 默认选中 ),完成 。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4119.html

Axure 制作折叠菜单教程文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4119.html

完成了以上的设置,继续下一步 ~文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4119.html

三、设置交互用例

(1)选择“选项一 ”,设置鼠标点击时 – 选中 – 选择 This 为 ture ,点击确定。( 选项二、三同上设置,复制粘贴过去即可 )。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4119.html

完成以上设置,我们的选项就可以点击切换了,看效果:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4119.html

Axure 制作折叠菜单教程文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4119.html

(2)把 “选项一、二、三 ” 选中,右键点击 转换为动态面板,命名为 “选项 ” ,点击把该面板隐藏。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4119.html

(3)设置“一级菜单 ” ,设置鼠标单击时 – 设置面板状态 – 可见性:切换 、 动画:显示时向下 / 隐藏时向上,动画为:线性,250 毫秒 、 勾上置于顶层 、 勾上推动元件,方向为下方,动画为:线性,250毫秒。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4119.html

这样就完成了,为了防止大家设置错误,下面放一张设置的图:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4119.html

Axure 制作折叠菜单教程文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4119.html

再附一张效果图:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4119.html

Axure 制作折叠菜单教程文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4119.html

完成以上的制作,我们会看到了这只是单个菜单而已,我们可以给它复制多个折叠菜单在一起。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4119.html

四、进阶

(1)全选所有元件、动态面板 – 右键点击组合,然后我们给它复制粘贴 n 个,按照以下方式排列:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4119.html

Axure 制作折叠菜单教程文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4119.html

(2)因前面用户设置的时候,我们已经把 “推动元件 ” 设置好了 ,所以后面无需再设置。但前面所做的,我们把 “选项一 ” 设置为默认选中状态,这里我们又复制了两个,所以我们需要把多复制出来的两个 “选项一 ”去掉默认选中状态 。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4119.html

设置完,继续看效果:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4119.html

Axure 制作折叠菜单教程文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4119.html

百度云链接:https://pan.baidu.com/s/1Axn4oFEmWkhsNtdfPlKrlA 密码:89j0文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4119.html

  • 本站内容整理自互联网,仅提供信息存储空间服务,以方便学习之用。如对文章、图片、字体等版权有疑问,请在下方留言,管理员看到后,将第一时间进行处理。
  • 转载请务必保留本文链接:https://www.cainiaoxueyuan.com/yuanxing/4119.html

Comment

匿名网友 填写信息

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

确定