手机
当前位置:查字典教程网 >软件教程 >其他软件工具 >axure7.0怎么制作折叠和展开的菜单效果?
axure7.0怎么制作折叠和展开的菜单效果?
摘要:AxureRP是互联网行业中产品经理的常用软件,学会它可以快速得画出产品界面的原始样子(交互原型),之后设计师再将其加工,糅合之后便是大家使...

Axure RP是互联网行业中产品经理的常用软件,学会它可以快速得画出产品界面的原始样子(交互原型),之后设计师再将其加工,糅合之后便是大家使用软件看到的样子啦。这里来讲下,产品、网页界面中常见的自由折叠和展开效果制作方法,见下方效果图。

axure7.0怎么制作折叠和展开的菜单效果?1

从左侧部件库中拖拉2个矩形,按照个人设定的样式,直接用鼠标拖拉调整好;然后复制矩形——选中要复制的内容,按住ctrl键,将光标移至矩形处变成一个双十字箭头(可移动标志)后,按住鼠标往旁边拉动,即复制成功。这里以复制两个后的三个为例。

axure7.0怎么制作折叠和展开的菜单效果?2

为便于区分,分别给三个色块填充上不同的颜色,并给六个矩形分别命名,还可分别输入文字加强识别。

axure7.0怎么制作折叠和展开的菜单效果?3

axure7.0怎么制作折叠和展开的菜单效果?4

将下面的三个内容框矩形设为隐藏:选中要隐藏的部件,点击勾选“hidden”;接着,把绿色部分移到黄色标题栏下面,遮住绿色隐藏部分,粉红色类推,变成图中的左侧堆叠形态。

axure7.0怎么制作折叠和展开的菜单效果?5

axure7.0怎么制作折叠和展开的菜单效果?6

点击黄标题栏——双击右侧“鼠标点击时”添加用例——选择左侧“显示/隐藏”部件——右侧配置动作中,勾选黄标题栏——可见性中选择“切换”——勾选“推/拉部件”,方向选择“下方”,点击确定(亦可跟随图示按步骤进行)。

接着,对绿标题栏、粉红标题栏进行同样的操作。标题栏设置完成后,点击演示键,即可查看效果。

axure7.0怎么制作折叠和展开的菜单效果?7

axure7.0怎么制作折叠和展开的菜单效果?8

注意事项:添加用例时,点击的是标题栏部件。而设置显示和隐藏时,勾选的是各标题栏下方的内容框。

【axure7.0怎么制作折叠和展开的菜单效果?】相关文章:

axure怎么绘制APP菜单阻尼滑动的原型图?

BarTender打印洗涤标志的图文教程

几何画板绘怎么制作动图?制彩色同闪三角形的教程

visio怎么快速的勾画出简单3D效果图?

斗鱼TV怎么申请主播开直播间?

Axure RP Pro怎么汉化?axure rp8中文破解教程

亲子拍拍怎么添加亲友共同见证宝宝的成长

Axure绘制好的原型怎么发布和预览?

YY的字幕怎么弄 YY字幕滚屏器的使用详细图文教程

UG怎么绘制键槽腔体孔加强筋?

精品推荐
分类导航