快好知 kuaihz

Axure教程之抽屉菜单

作为刚做产品的小白,我网上查过很多有关抽屉菜单的实现方式,但是都没有说到选中效果的实现,然后我通过同学发我的原型模板,知道了他的实现,现在做下总结。

1、先将整个的背景颜色调为浅灰色,之后拉入一个动态面板,并调整自己想要的大小尺寸,在属性设置中将动态面板设置为自动调整为内容尺寸,然后双击该动态面板,将该动态面板命名为“菜单1”,再添加一个状态,分别命名为收起和展开。

2、点击收起,拉入一个矩形,将尺寸设置为动态面板尺寸后,把矩形命名为“菜单1收起”并设置文字为菜单1,把填充颜色设为白色,拉入一个下拉箭头的图片,调整尺寸,将两个元件进行组合,勾选组合的允许触发鼠标交互。

3、添加“菜单1收起”的鼠标悬停和选中的交互样式,分别把字体颜色为蓝色,填充颜色为浅灰色。

4、为“菜单1收起”添加鼠标点击的用例,将面板状态设置为展开,并选中推动/拉动元件。

5、将“菜单1收起”内容复制到动态面板的展开状态页面,把下拉图片换成上拉,将矩形的名称改为“菜单1展开”,同时将鼠标点击的交互的面板状态设为收起。

6、将“菜单1展开”复制,粘贴一次作为子菜单并对应修改名称和文字为子菜单1(注意复制的时候不要复制到了组合),修改鼠标的点击用例,选中当前元件。

7、复制粘贴子菜单,然后分别修改对应的名称和文字。

这样整个动态面板的设置就完成拉,这仅仅只是一个菜单,我们可以将该动态面板多复制粘贴几次,这样就能形成多个菜单了。

经过预览,发现还有一个问题——那就是点击一个子菜单之后再点击一个子菜单,发现两个子菜单都是选中状态,这时候我们就需要进行接下来的步骤进行完善他。

8、随便拉入一个原件,将名称命名为辅助且背景填充的透明度改为透明,添加隐藏用例,将所有的子菜单选中状态都设为未选中

9、修改所有的子菜单的鼠标点击用例,先隐藏辅助视图,然后再设置当前元件的选中状态,最后显示辅助视图(如果一开始就知道有这一步,可以先添加辅助视图,然后直接在步骤6的时候直接设置对应的用例,就不用后期一个个子菜单进行修改)。

再预览一次,现在就显示没有问题啦。

不过这个还可以再优化一下,就是比如说:我选中了子菜单后,将菜单收起,就看不到对应选中的子菜单在什么位置了,所以在子菜单鼠标点击用例的时候可以将对应所在的“菜单收起”设置为选中,然后再辅助视图的隐藏用例中再添加“菜单收起”的选中状态设为未选中

这样就彻底完成啦。

本站资源来自互联网,仅供学习,如有侵权,请通知删除,敬请谅解!
搜索建议:Axure教程之抽屉菜单  抽屉  抽屉词条  菜单  菜单词条  教程  教程词条  Axure  Axure词条  
原型

 Axure教程:微信聊天列表原型...

对于Axure的学习,就是要多做练习,本文是微信原型制作的第一章,希望对同样正在学习的朋友有所帮助。本章主要制作聊天列表原型,实现滑动效果。原型基于Axure8...(展开)

原型

 Axure 原型 | 用Axur...

软件行业从业6年,流程图看过太多,大部分流程图是在考验阅读者的理解能力,近期在设计公司新版APP,对流程图的绘制也有点体会心得。用Axure绘制流程图好处是可以...(展开)

原型

 Axure教程:计数文本域实现

制定UI规范时,遇到实现“限制字数的文本域”的交互问题,即当用户输入的字数长度超过限制要求,如何只保留规定长度的文本?效果如下:我们知道【Number】类型的文...(展开)