母版制作的导航菜单项对应页面变色

AxureRP8.0教程 小楼一夜听春语 2064℃ 0评论

标题有点拗口,我来详细的说一下。

当我们做一些网站项或者APP项目的原型时,会把多个页面中所包含的相同模块制作成母版,然后再应用到页面中。

例如,导航菜单就是多个页面中包含的相同模块。

不过,我们往往在打开不同页面时,需要导航菜单中对应的菜单项有改变样式的效果。

那么,这样的交互要如何来实现呢?

我的思路是这样的:

1、点击导航菜单的菜单项,能够在当前窗口打开相应的页面;

2、为每个菜单项添加选中时的样式,当我们把菜单项变为选中状态时,才能够改变菜单项的颜色;

3、在页面打开时,根据不同的页面把不同的菜单项变为选中的状态。

以上这三句,要理解清楚,再继续往下。

前戏不充分,单纯的模仿动作,是没有什么好效果的。

当然,如果你已经准备充分了,那就继续弄下面…

第一步,先添加一个新的母版,并命名。

第二步,从页面面板中将页面拖入编辑区,会自动出现一个带有页面名称的矩形。

这样做的好处是,在这个矩形的属性中,有一个【引用页面】的设置,默认指向了对应的页面。

这个设置等同于为这个矩形添加了【鼠标单击时】在【当前窗口】打开指定页面的交互。

也就是说,思路分析中的第1点,通过拖拽页面就已经完成了。

第三步,我们要为拖进来的页面(矩形)设置元件名称。

注意,这一步的元件命名一定要与页面名称完全一致,包括大小写也要一致。

第四步,根据思路分析中的第2点,我们要让这些矩形变为选中状态时,能够改变颜色。

那么,就把这些矩形全选,在属性中设置【选中】时的交互样式。

第五步,根据思路分析的第3点,在页面打开时,根据不同的页面把不同的菜单项变为选中的状态。

这就需要我们在每个(注意是每个)菜单项元件的【载入时】,进行条件判断,判断当前打开的页面名称是否与与元件名称相同。

我们需要使用系统变量PageName获取当前打开的页面的名称,并通过系统变量(This.name)获取当前元件(This)的名称属性(name)进行比较。如果不了解系统变量,请先阅读《AxureRP制作原型中变量的使用(3) 》。

然后,当符合条件的时候,添加动作【选中】“当前元件”。

注意:这一步,因为使用了系统变量,所以每个元件的交互都是一样的。我们只需要为其中一个元件添加交互用例,然后复制粘贴给其他元件。

第六步,将做好的母版内容添加到页面中。

第七步,为每个页面添加一些内容,然后进行预览,就能够看到我们想要的交互效果。

最后,邀请大家关注微信订阅号“iaxure”(二维码在本站首页右上方),及时获取本站最新动态内容。

硬广插入:《两天掌握Axure RP 8》线下培训,北京、上海正在招生,报名地址http://www.kouer.com。

源文件下载:http://downloads.iaxure.com/master_menu.rp

 


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

小楼老师再出新作,倾力打造Axure RP 8精品课程系列,以最短的时间高效完成学习目标,入门进阶与实战案例并重,是0基础的新手从入门到精通的必备课程。

《AxureRP 8 入门与实战 - 入门篇》------从零入门进阶的最佳课程------【点此查看详情】

《AxureRP 8 入门与实战 - 案例篇》------实战手册图书的同步视频------【点此查看详情】


转载请注明:Axure原创教程网 » 母版制作的导航菜单项对应页面变色

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

表情

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

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(3)个小伙伴在吐槽
  1. 请问,棒棒大,到底有多大?
    大楼2017-08-14 13:21 回复
  2. 用动态面板不是也行嘛
    ritchey2017-08-16 15:06 回复
  3. 点击菜单元件,交互用例没有“载入时”啊!!!!
    打包旅行2017-08-17 14:32 回复