一个设计Axure高保真导航组件的思路

内容纲要

高保证导航组件需要满足的需求/效果,以下图为例:

1.选中的一级导航,对底色做改变(表示选中)

2.选中的二级导航,字体颜色改变(表示选中)

3.点击二级导航,跳转到对应页面,且跳转之后,上述1、2效果不会被充值。

最难的就是“跳转之后效果1、2不重置”。

1.思路一:

1.1 绘图:

一级导航:图标、文字、背景色块组成的分组

二级导航:动态面板,一个一级导航项目,对应一个动态面板的状态

页面内容:用框架,点击导航,只改变页面框架内的内容,这样的话,就不会存在页面跳转后一、二级导航的选中效果被重置的难题了

1.2 效果:

(1)所有一级导航“背景色块”编组

(2)通过一级导航的点击事件,切换一级导航“背景色块”的选中/未选中状态。

(3)通过一级导航“背景色块”选中状态改变事件,切换一级导航项目选中效果(背景色块变色)和二级导航动态面板的状态;

(4)所有二级导航“背景色块”编组。通过二级导航的点击事件,切换二级导航项目的选中效果(从而改变文字变色)和跳转效果。

(5)页面内容:用框架,点击导航,只改变页面框架内的内容,这样的话,就不会存在页面跳转后一、二级导航的选中效果被重置的难题了

2.思路二:

2.1 绘图,同思路一

2.2 效果:

大致思路,同思路一,这里需要解决的是页面跳转之后,页面会重新加载,如果保证一、二级导航的选中效果不被充值,以下是解决方法。

(1)设置一个全局变量nav,用于传递页面名称PageName,操作位置:项目-全局变量

(2)在具体的页面,当页面加载时,把页面名称赋值给nav全局参数。

(3)以下是母版,内容是页面导航。每个页面导航项目加载时,判断导航名称是否等同于nav参数(也就是页面名称),如果是,则选中,如果不是则不选中。通过选中/不选中事件,控制导航项目的选中效果(底色改变或文字颜色改变)

这里面的关键点:页面加载事件先于组件加载事件执行。

上述思路可以用于二级导航。那么一级导航呢?

(1)也是用一个全局参数传递数据

(2)一级导航被选中(或一级导航的背景色块被选中)的时候,把一级导航的名称传入全局参数。一级导航的名称建议从页面的文字组件获取,而不是手写,这样的话,做出来的导航可移植性更强。

(3)页面跳转之后重新加载页面,一级导航的每个项目加载的时候,都拿自己的名称与全局参数做比较,如果相同,则呈现一级导航的选中效果。