Axure 学习:简单的下拉菜单为什么做不好?

​很多同学在学习axure的时候,总是会发现有的时候明明看起来很简单的内容,却怎么也做不好,总是会出现这样或那样的问题。

原因是细节。有的同学没有注意到细节,忽略了,造成做好的内容总是存在一些小问题。本文以一个交互案例为主,结合同学们在学习中出现过的问题,来详细看看。(本文出现的问题是学员在初期进行学习时出现过的问题,如有雷同,纯属巧合)

先说说交互案例,用的是下拉菜单这个案例。

鼠标移入某个按钮,下方出现菜单。                         

Axure 学习:简单的下拉菜单为什么做不好?_第1张图片

Axure 学习:简单的下拉菜单为什么做不好?_第2张图片

 

鼠标可以移入下方的菜单进行选择。

Axure 学习:简单的下拉菜单为什么做不好?_第3张图片

鼠标移出菜单或者方才的导航按钮则菜单隐藏。

这个交互案例是一个非常常见的交互案例,出现的问题也是很多同学都会出现的问题。

这里总结了不同的同学出现的问题,所以会用到的截图也不一定是跟这里案例完全相同的,先跟大家说明一下,以免造成误会。

情况一

鼠标无法下移到菜单上做选择。

Axure 学习:简单的下拉菜单为什么做不好?_第4张图片

为什么会出现这个问题呢?

看看这位同学这时候的设置是怎样的

Axure 学习:简单的下拉菜单为什么做不好?_第5张图片

这个时候可以看出触发部件和显示的部件是两个独立的个体,在鼠标移入触发部件时,确实显示了“发布”,但是当鼠标想要移动到“发布”上进行点击时,触发了图中移出时事件,所以“发布”隐藏了。因此会出现无法移动到“发布”上的问题。

解决思路:具有整体思维,将触发部件和显示的部件作为一个整体去进行考虑。移出的是这个整体,而不是单独的触发部件。

将不同的部件作为整体处理,可以采用组合的方式,也可以采用动态面板的方式。组合需要考虑部件和部件之间的间隙,这些间隙默认不属于这个组合,可以用矩形或其他部件填补这些间隙。动态面板需要考虑面板的数量,太多面板容易影响软件的运行速度和流畅度。

情况二

菜单的背景在移动选择时显示不完全。

Axure 学习:简单的下拉菜单为什么做不好?_第6张图片

可以看出问题所在吗?在显示下拉菜单时,背景框的范围包括了触发部件,但是当鼠标移动到下拉菜单上时,触发部件上的背景框消失不见了。

我们找找原因。交互上很简单,就是简单的移入显示,移出隐藏,在我们的预览中,没有毛病。

Axure 学习:简单的下拉菜单为什么做不好?_第7张图片

Axure 学习:简单的下拉菜单为什么做不好?_第8张图片

那么问题可能出在哪里呢?这里,交互样式设置。

Axure 学习:简单的下拉菜单为什么做不好?_第9张图片

设置了鼠标悬停时,样式发生变化。所以当鼠标移动到下拉菜单上时,鼠标并没有悬停在触发部件上,所以,这个样式在鼠标移动到别的部件上时并不能使用。

解决思路:按照这位同学的思路,我们还用交互样式设置的方法来。将增加一个选中的交互样式,在显示下来列表的同时,设置目标部件为选中。设置列表隐藏的时候,设置目标部件为未选中。

Axure 学习:简单的下拉菜单为什么做不好?_第10张图片

看看效果:

Axure 学习:简单的下拉菜单为什么做不好?_第11张图片

情况三

下拉菜单闪烁般显示隐藏,不固定显示或隐藏。 

Axure 学习:简单的下拉菜单为什么做不好?_第12张图片

这个问题的原因是什么呢?

鼠标在同一个位置,但是在这个位置上可能会先后出现移入时和移出时这两个事件。可能有点抽象,从这个案例来看。

Axure 学习:简单的下拉菜单为什么做不好?_第13张图片

仔细看第一个交互,设置了下拉菜单在显示时置于顶层显示了。置于顶层显示就把触发部件遮挡了,实际上变成了这样:

Axure 学习:简单的下拉菜单为什么做不好?_第14张图片

在这个情况下,已经移出了触发部件,所以同时触发了鼠标移出时事件,执行了隐藏下来菜单的动作,下拉菜单隐藏。又回到初始状态。

Axure 学习:简单的下拉菜单为什么做不好?_第15张图片

鼠标这时候还是在同样的位置,所以又触发了“鼠标移入时”的事件。所以会出现一直显示隐藏动作交替执行,造成闪烁的感觉。

解决思路:不要置于顶层显示。只要不造成遮挡,这个问题就迎刃而解了。

下拉菜单虽然是不难得交互案例,但是由于每个人有不同的做法,不同的做法可能产生不同的问题。这里只是列举了几个我们的同学在学习的初期遇到的几个问题,相信有不少朋友也遇到过同样的问题,尤其是刚开始学习的朋友。如果遇到问题的话,可以参考其中的一种或者几种去考虑。

PS:文中所用截图为陪学网VIP学员学习过程中的产出作业的截图,未经许可,请勿随意使用。

你可能感兴趣的:(在线学习,干货分享,axure,产品经理,职场和发展,axure)