快捷搜索:  汽车  科技

axure怎么设置个人标签(Axure制作自动显示的列表标题)

axure怎么设置个人标签(Axure制作自动显示的列表标题)同时设置此动态面板“菜单”透明度为50%(具体值可以根据自己喜好设置)现在开始设置显示/隐藏的菜单标题,首先看列表一共有多少列,且每列的长度多少,然后使用“矩形”填充到对应每列的标题上,全部布局好后,选择全部的“矩形”转换成动态面板,命名为“菜单”开始制作,把需要用的元件在面板上进行布局,布局好后,顶部菜单元件设置成动态面板,命名为“topmenu”且设置动态面板在页面中固定位置,通过设置属性->固定到浏览器,设置如下图同理设置底部元件固定在页面最下方,把底部元件设置成动态面板,然后通过设置属性->固定到浏览器设置好后,为了能使能出现滚动条,那么就把表格插入多条,这样就能出现滚动条了

看到一个管理软件上出现了这种标题自动显示,有效的解决标题随着列表向上滚动而不知道对应的列名称。个人觉得不错。所以想着用Axure制作一下这个交互

这个交互制作完成之后如下显示:

axure怎么设置个人标签(Axure制作自动显示的列表标题)(1)

成果图

制作前先考虑了一下,在什么时候出现隐藏的那个列表标题呢?由于上方有一个元件,那么就考虑当列表元件碰到上方的元件的时候显示标题,且标题固定在页面位置。通过成功图中看,需要固定位置的元件有三个,一个是顶部菜单、一个是列表菜单,一个是底部显示

开始制作,把需要用的元件在面板上进行布局,布局好后,顶部菜单元件设置成动态面板,命名为“topmenu”且设置动态面板在页面中固定位置,通过设置属性->固定到浏览器,设置如下图

axure怎么设置个人标签(Axure制作自动显示的列表标题)(2)

axure怎么设置个人标签(Axure制作自动显示的列表标题)(3)

同理设置底部元件固定在页面最下方,把底部元件设置成动态面板,然后通过设置属性->固定到浏览器

axure怎么设置个人标签(Axure制作自动显示的列表标题)(4)

设置好后,为了能使能出现滚动条,那么就把表格插入多条,这样就能出现滚动条了

现在开始设置显示/隐藏的菜单标题,首先看列表一共有多少列,且每列的长度多少,然后使用“矩形”填充到对应每列的标题上,全部布局好后,选择全部的“矩形”转换成动态面板,命名为“菜单”

axure怎么设置个人标签(Axure制作自动显示的列表标题)(5)

同时设置此动态面板“菜单”透明度为50%(具体值可以根据自己喜好设置)

axure怎么设置个人标签(Axure制作自动显示的列表标题)(6)

最后设置交互,之前已经考虑过了实现方式,窗口向上滚动时列表碰到顶部菜单显示,窗口向下滚动时列表碰到顶部菜单隐藏,通过if判断来实现,具体设置如下

axure怎么设置个人标签(Axure制作自动显示的列表标题)(7)

同理设置窗口向上滚动时的用例

axure怎么设置个人标签(Axure制作自动显示的列表标题)(8)

设置完之后就完成了所有设置,点击预览即可看到文章前面的效果图了。这里主要讲的是列表菜单自动显示隐藏,顶部菜单及底部元件是我自己加上的,这里可根据自己喜好添加。

到此文章结束,欢迎大家批评建议,谢谢大家

猜您喜欢: