使用Axure制作出一个左侧二级切换效果具体操作流程

2024-10-14 10:38:53阅读量:131 字体:

相信使用Axure的用户还是蛮多的,不过你们晓得Axure如何制作出一个左侧二级切换效果呢?下文就为你们带来了使用Axure制作出一个左侧二级切换效果的具体操作流程。

使用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查阅。完成后如图,大家点击试试吧。

按照上文为你们分享的使用Axure制作出一个左侧二级切换效果的具体操作流程,你们是不是都学会操作的方法啦!

推荐阅读

  • qq相册怎么转移到另一个qq

    qq相册怎么转移到另一个qq

    qq相册要转移到另一个qq,可以借助转载功能进行转移,使用QQ进入另一个QQ的相册即可进行转载。具体操作方法如下: qq相册怎么转移到另一个qq 1、打开手机QQ软件,点击联系人”,再点击...

    阅读: 694

  • 花呗账单日怎么修改

    花呗账单日怎么修改

    花呗的账单日可以通过修改还款时间来修改,修改花呗的还款时间后,出账单的日子也会改变,通过设置修改花呗的账单日的具体操作步骤如下: 花呗账单日怎么修改 1、打开支付宝app,先点击下方的我的&rdquo...

    阅读: 760

  • 抖音怎么0.5倍速播放

    抖音怎么0.5倍速播放

    抖音视频播放有四种倍速选择,要设置0.5倍播放,在视频播放中即可直接设置。具体操作方法如下: 抖音怎么0.5倍速播放 1、打开手机抖音app,进入视频播放,长按视频,进入播放设置页面。 2、点击倍速...

    阅读: 771

  • 删除微信表情包

    删除微信表情包

    很多人的微信添加了很多表情包,如果要将微信内添加的表情包删除,进入微信的表情功能页面即可进行删除。具体操作方法如下: 删除微信表情包 1、打开手机微信app,点击我”,再点击表情&rdqu...

    阅读: 772

  • 家人地图如何开启永久位置

    家人地图如何开启永久位置

    家人地图是高德地图推出的家人定位查询功能,要开启家人地图永久位置分享,可以直接在家人地图设置中开启。具体操作方法如下: 家人地图如何开启永久位置 1、打开手机高德地图app,点击我的”。 ...

    阅读: 823

  • 快手号怎么修改不了,只有复制

    快手号怎么修改不了,只有复制

    快手号只有复制,修改不了,是因为近期已经修改过快手号了,从修改时开始需要等待90天后才能再次修改。修改快手号的具体操作方法如下: 快手号怎么修改不了,只有复制 1、打开手机快手app,点击左上角三条横...

    阅读: 707