Axure怎么设计一个左侧二级导航切换效果?

所属分类: 软件教程 / 图形图像 阅读数: 612
收藏 0 赞 0 分享

Axure是产品岗位常用的工具,这里为大家做一个二级导航的样例,点击一级导航,展开其二级导航,点击第二个一级导航,展开其二级导航,并隐藏已经打开的其他二级导航。

一、基础准备工作

1、首先大家通过Axure的部件--矩形,建立如图所示的图样。(基础的我就不太细说了),底色图:灰色,w350/h500;三个彩色的矩形:w300/h40;分别命名为1,2,3,无色的三个矩形:w300/h100;分别对应彩色的命名11,22,33,调整一个彩色的矩形对应一个白色的矩形,排版如图所示;

2、将11,22,33设置为隐藏状态,设置方法:选择图形,在右侧的“部件属性和样式”,选择hidden(隐藏)。

3、调整位置,选择2和22两个矩形,向上移动,至1的下边缘和2的上边缘对齐。同样移动3和33,与2的最下边缘对齐,如图所示

二、用例的设置方法

1、选择蓝色的矩形(也就是1);在“部件交互和注释”-“鼠标单击时”,右键“新增用例”;弹出用例编辑器

2、在用例编辑器,选择"部件“-切换;在最右侧“第四步 配置动作”,选中"11",可见性选择“切换”,并在”更多选项“中选择”展开部件“;选择“22”,可见性选择“隐藏”,选中“收起部件”,其他默认;

选择“33”,可见性选择“隐藏”,选中“收起部件”,其他默认;点击确认;设置完成后,如图所示

3、选择黄色矩形2,在“部件交互和注释”-“鼠标单击时”,右键“新增用例”;弹出用例编辑器;在用例编辑器,选择"部件“-切换;在最右侧“第四步 配置动作”,选中"22",可见性选择“切换”,并在”更多选项“中选择”展开部件“;选择“11”,可见性选择“隐藏”,选中“收起部件”,其他默认;选择“33”,可见性选择“隐藏”,选中“收起部件”,其他默认;点击确认,设置完成后,如图所示

4、选择红色矩形3,在“部件交互和注”-“鼠标单击时”,右键“新增用例”;弹出用例编辑器;在用例编辑器,选择"部件“-切换;在最右侧“第四步 配置动作”,选中"33",可见性选择“切换”,并在”更多选项“中选择”展开部件“;选择“11”,可见性选择“隐藏”,选中“收起部件”,其他默认;选择“22”,可见性选择“隐藏”,选中“收起部件”,其他默认;点击确认,设置完成后,如图所示

5、点击F5预览或者生产原型文件。建议用IE查阅。完成后如图,大家点击试试吧。

相关推荐:

Axure8.0试用到期后怎么激活?

axure8.0怎么使用元件库及母版?

Axure RP 8怎么控制矩形元件颠倒旋转?

更多精彩内容其他人还在看

Visio怎么使用智能鼠标缩放功能?

Visio怎么使用智能鼠标缩放功能?Visio中想要对图纸进行缩放大小,该怎么缩放呢?我们可以使用鼠标来缩放,需要自己设置一下,该怎么设置呢?下面我们就来看看详细的教程,需要的朋友可以参考下
收藏 0 赞 0 分享

proe5.0怎么设计一个逼真的蚊香模型?

proe5.0怎么设计一个逼真的蚊香模型?夏天我们经常点蚊香,想要画一个蚊香模型,该怎么绘制呢?下面我们就来看看详细的教程,很简单,需要的朋友可以参考下
收藏 0 赞 0 分享

Axure怎么新建元件库? Axure元件库的使用方法

Axure怎么新建元件库?想要把常用的组件制作一个元件,放到自己的元件库中,该怎么操作呢?下面我们就来看看Axure元件库的使用方法,需要的朋友可以参考下
收藏 0 赞 0 分享

Solidworks两个圆的公切线怎么画?

Solidworks两个圆的公切线怎么画?Solidworks中的两个圆,想要绘制两个圆的公切线,下面我们就来看看详细的教程,很简单,需要的朋友可以参考下
收藏 0 赞 0 分享

solidworks怎么绘制锥形的弹簧模型?

solidworks怎么绘制锥形的弹簧模型?solidworks中设计模型很简单,想要绘制一个锥形的弹簧的模型,该怎么制作呢?下面我们就来看看详细的教程,需要的朋友可以参考下
收藏 0 赞 0 分享

Catia怎么画电阻丝模型?

Catia怎么画电阻丝模型?Catia中画模型是很方便的,想要绘制电阻丝模型,该怎么绘制呢?主要需要使用曲面设计的命令,下面我们就来看看详细的教程,需要的朋友可以参考下
收藏 0 赞 0 分享

几何画板绘制出的角度怎么标上数字标记?

几何画板绘制出的角度怎么标上数字标记?几何画板画的角度想要添加标记,该恩么添加呢?下面我们就来看看详细的教程,需要的朋友可以参考下
收藏 0 赞 0 分享

美图秀秀怎么给图片中的人物添加眼睫毛?

美图秀秀怎么给图片中的人物添加眼睫毛?图片中的人物睫毛不是很长,为了看上去效果更好,想要给人物添加睫毛,该怎么添加呢?下面我们就来看看详细的教程,需要的朋友可以参考下
收藏 0 赞 0 分享

Autodesk T-Splines 4.0怎么安装?Autodesk T-Splines 4.0详细安装以及破解步骤

Autodesk T-Spline是官方专门为rhino(犀牛)设计的一款最强大的曲面建模软件,很多朋友不知道如何安装,下文小编就为大家带来详细步骤,一起看看吧
收藏 0 赞 0 分享

Autodesk TSplines怎么使用?Autodesk TSplines 4.0使用图文教程

Autodesk T-Splines 4.0 For Rhino是专为犀牛用户打造的一款曲面建模插件,支持Rhino 5 64位版本,下文小编为大家整理了使用教程,一起看看吧
收藏 0 赞 0 分享
查看更多