Axure RP 9萌新修炼手册-第五章-交互应用(5)

AxureRP9教程 小楼一夜听春语 552℃ 0评论

第六节 动态面板

动态面板是交互原型中非常常见的元件,通过它能够实现很多常见的交互效果。

如果想用好动态面板,必须对这个元件先进行详细的了解。

我们将动态面板放入画布之后,它是一个带有半透明颜色的元件。

实际上我们所看到的颜色并不是动态面板的颜色,这是为了方便我们进行编辑所带有的颜色,在查看原型时,动态面板是完全透明的元件。

当然,在画布中也能够让透明的元件变得完全透明,通过导航栏中的【视图】菜单,取消【遮罩】子菜单中【动态面板】的勾选项即可。(图1-24)

一、容器

动态面板是一个容器,并且可以分层(多个状态)。

也就是说它可以放入其他元件,并且可以每一层放入不同的元件内容。

如果不需要多层的话,动态面板能够像组合一样使用,把元件放入动态面板默认的层(状态)中,完成统一的交互。

如果比喻组合与动态面板的话,组合相当于将东西捆一起,而动态面板是装进去。

我们在画布中放入一个动态面板元件并双击元件,就能够进入动态面板的默认状态“State1”中。(图5-81)


我们将一个图片元件拖入“State1”中,并【关闭】动态面板的状态编辑,此时,在页面中,我们能够看到动态面板中有我们所放入的元件。(图5-82)

但是,在页面中,我们只能够看到图片元件的一部分。

因为,页面中动态面板的尺寸实际上是动态面板状态内容的可见区域,也就是动态面板状态中的蓝色虚线框。

如果想完整的呈现图片元件,需要将图片元件放在可见范围内或者调整页面中动态面板的尺寸包含图片元件的所在区域。如果不想动态面板的左上方出现空白,需要把状态中的内容摆放在原点的位置。

在动态面板的状态编辑中,【隔离】按钮能够显示或隐藏页面内容。(图5-83)

大致了解了动态面板的结构和操作,我们来制作一个案例。

案例23:二级菜单的展开与收起

这个案例中,点击一级菜单能够展开和收起二级菜单。

收起的菜单:(图5-84)

展开的菜单:(图5-85)

1、准备相关的元件,完成一个一级菜单和一个二级菜单。

菜单的样式有一些细节:

  • 一级菜单【高度】40像素,二级菜单【高度】32像素;
  • 一级菜单【左侧】【边距】16像素,二级菜单【左侧】【边距】45像素,文字均为【左侧对齐】;
  • 所有【填充】【颜色】为“#FBFBFB”;
  • 一级菜单中的图标为图标字体,图标字体文件在随书资源中已提供。

关于图标字体的设置内容。

如果使用在线CSS文件,地址为:http://downloads.iaxure.com/css/common.css。

如果通过@font-face使用本地字体文件,代码为:{

font-family:iconfont;

src:url(../fonts/iconfont.eot);

src:url(../fonts/iconfont.eot#iefix) format("embedded-opentype"),

url(../fonts/iconfont.woff) format("woff"),

url(../fonts/iconfont.ttf) format("truetype"),

url(../fonts/iconfont.svg#iconfont) format("svg")

}

另外,菜单在鼠标进入时带有变色效果,所以,还要为一级菜单和二级菜单添加【鼠标悬停】的交互样式,将【填充颜色】设置为“#F4F4F4”。(图5-86)

接下来,我们的主角动态面板该上场了。

但是,不用向画布中拖入动态面板。

我们只需要将二级菜单的矩形元件全选,然后在上下文菜单中选择【转换为动态面板】。(图5-87)

这样操作之后程序就自动在画布中添加了一个动态面板元件,并将选中的元件放置在了动态面板的默认状态“State1”中。(图5-88)

这个操作的结果,和我们放入动态面板、双击打开、放入元件、关闭状态编辑,再在动态面板的上下文菜单中选择【自适应内容】,是一样的结果。

最后,我们将三个二级菜单(动态面板)分别命名为“Submenu01~Submenu03”。

2、为元件添加交互。

这个交互也非常简单,为每个一级菜单【单击时】添加【显示/隐藏】的动作,【切换】显示或隐藏对应的二级菜单,因为点一下一级菜单展开二级菜单,再点一下一级菜单还要隐藏二级菜单。

并且,我们还需要勾选【更多选项】中的【推动/拉动元件】,【方向】为【下方】,这样在展开与收起二级菜单的时候,下方的菜单才会跟随。(图5-89)

最后,我们把做好的一级菜单和二级菜单重叠摆放。(图5-90)

二、固定

动态面板能够固定在页面的某一位置上。

案例24:登录面板居中显示

例如,点击登录按钮,显示一个登录面板,这个登录面板出现在屏幕的正中央,同时带有半透明遮罩效果。(图5-91)

1、准备相关的元件

因为页面内容较多,也不是我们需要关注的重点,所以只制作一个登录按钮。

登录面板的内容,我们制作之后,将其【转换为动态面板】。(图5-92)

还记得怎么转换吗?如果不记得,把书翻回去看吧!

前面的都没掌握,怎么好意思翻到这里的?惭不惭愧?

最后,将动态面板命名为“LoginPanel”并隐藏

2、为元件文字添加交互。

注意,登录按钮和注册按钮用的是一个元件,我们 只需要给“登录”这两个字添加交互。

双击矩形元件,进入文字编辑状态,划选“登录”两个字,交互功能面板中选择【单击时,设置可见性】,【显示】登录面板“LoginPnael”,同时【更多选项】中选择【灯箱效果】。(图5-93)

因为,登录面板应该在最顶层显示,所以,添加交互时,可以勾选【置于顶层】的选项。

遮罩的【背景颜色】保持默认的灰色即可,如果有需要可以自行更改。

完成以上步骤之后,我们预览原型,已经能够看到点击登录按钮显示登录面板并带有半透明的遮罩效果。

但是,还需要让登录面板自动居中。

这就要在动态面板“LoginPanel”上点击鼠标右键,上下文菜单中选择【固定到浏览器】。

在固定到浏览器的窗口中,设置【水平固定】到【居中】,【垂直固定】到【顶部】。(图5-94)

注:这里大家会发现,选择【左侧】与【顶部】时,边距的值不能够编辑,这是因为【顶部】与【左侧】的固定位置是通过摆放来确定的。而【右侧】与【底部】受浏览器窗口宽高不固定的影响,需要通过设置边距的值来确定位置。

【提示】图书案例源文件及素材,请关注微信公众号“chanpinban”后,回复“萌新手册”获取。


~~~~~~~~~~~~ 正文结束 下面没了 ~~~~~~~~~~~~

小楼老师全新打造Axure RP 9精品课程,以独有的教学方法与技巧,帮助你以最短的时间高效的完成学习目标。

《Axure RP 9 萌新修炼视频》-----从零入门进阶的优质课程------【点此查看详情】


转载请注明:Axure原创教程网 » Axure RP 9萌新修炼手册-第五章-交互应用(5)

喜欢 (4)or分享 (0)
头像
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(3)个小伙伴在吐槽
  1. 头像
    元件的隐藏,还是不要用“勾选隐藏”的方式。建议用给默认时隐藏的元件,加“载入时,隐藏本身”的方式。原因:这样更方便的查看原型内容:隐藏的元件,不取消“隐藏”,不能看到内容。以及案例中的,还要移动摆放元件为“收起”的位置。
    zgq544572019-05-12 00:42 回复
    • 小楼一夜听春语
      1、添加交互隐藏元件本身增加了步骤。 2、是不是方便查看内容,各人习惯不同,有人还认为能看到隐藏内容导致页面混乱,甚至要将隐藏内容的遮罩颜色取消,变成完全透明。 另外,教程传达给读者的是知识点,不是固定的行为模式。掌握了知识点,结合个人习惯就好。就好像你知道可以通过交互隐藏,那你自己这样做觉得符合个人习惯,那就这样做好了。如果我在教程里写添加交互去隐藏,就会有更多人出来询问,为什么不勾选一下隐藏,要加交互这么费事干嘛?所以,从教程角度来讲,我不认为有什么不妥。
      小楼一夜听春语2019-05-12 12:52 回复
      • 头像
        恩恩,有道理。哈哈 :mrgreen:
        zgq544572019-05-13 19:27 回复