Axure 实例 - 抽屉式菜单

早前的 Axure 是一款适合 Web 原型的设计工具,但随着移动风潮的兴起,6.x 之后的 Axure 开始加入了一些适合移动设备的触发事件,比如 OnDrag 和 OnSwipe,这使得 Axure 也可以模拟出类似触摸屏的操作效果。这次实例要模拟的是时下爆红的 Drawer Menu[抽屉式菜单],不过这种设计最早好像被称为 Left Nav Flyouts,只是后来因为操作方式和效果很像我们日常生活中的抽屉,所以得了此名。它的好处在于,[关闭]状态下可以为移动设备寸土寸金的屏幕提供更多的展示空间,[开启]状态下又有足够多的面积来放置各种内容,并且滑动式的操作方式也符合人们对于触摸屏的习惯,如今已经可以在各种移动应用中看到这种设计。

预览 | 下载

要求:
1、在屏幕上向右滑动为开启菜单,在开启状态下向左滑动则关闭菜单。
2、考虑到这种设计的存在和操作方式对新手来说较为隐蔽,所以要提供可实现同种功能的点击式按钮,为开关式操作,点击一次为开启,再点击一次为关闭。
3、设计过程中要考虑规避误操作的可能性。

拖入一个与手机模型屏幕同尺寸的 Dynamic Panel,命名为[mask],其主要的作用是作为后续所有元素的容器,因为要把操作的可视范围限定在屏幕的空间内。

在[mask]中拖入另一个与屏幕同尺寸的 Dynamic Panel,命名为[screen-1],用于放置第一屏的内容。

在[screen-1]中再拖入一个 Dynamic Panel,命名为[button],用于存放控制菜单的按钮,在[button]中添加两个 State,命名为[button-r][button-l],并分别在其中放置一个 Button Shape 作为按钮。由于这个按钮的操作方为开关式,即要通过一个按钮的重复点击实现[开启]和[关闭]两种操作,所以需要用动态面板来存放不同功能的按钮形态。

在[mask]中再拖入一个与屏幕同尺寸的 Dynamic Panel,命名为[screen-2],用于放置菜单的内容,并将其与之前的[screen-1]叠加,放在[screen-1]的后面。

最后拖入另一个 Dynamic Panel,命名为[lock],放置在[mask]之上,设为隐藏状态,作用是防止在操作时多次的向右滑动造成的 bug,宽度与[mask]相同,但高度要稍小于前者,因为要留出[button]的空间可进行点击。

为[mask]添加 OnSwipeRight 事件,并设置动作:
1. Move Panel,设置[screen-1]的移动坐标为 x,移动 200px,动画效果为 linear,时长 200ms。

2. Set Panel state to State,将[button]的 State 改为[button-l]。

3. Show Panel,显示[lock]。

完成后的事件列表如下:

为[lock]添加 OnSwipeLeft 事件,并设置动作:
1. Move Panel,设置[screen-1]的移动坐标为 x,移动 -200px,动画效果为 linear,时长 200ms。

2. Set Panel state to State,将[button]的 State 改为[button-r]。

3. Hide Panel,隐藏[lock]。

完成后的事件列表如下:

为[button-r]中的按钮添加 OnClick 事件,并设置动作:
1. Move Panel,设置[screen-1]的移动坐标为 x,移动 200px,动画效果为 linear,时长 200ms。

2. Set Panel state to State,将[button]的 State 改为[button-l]。

3. Show Panel,显示[lock]。

完成后的事件列表如下:

为[button-l]中的按钮添加 OnClick 事件,并设置动作:
1. Move Panel,设置[screen-1]的移动坐标为 x,移动 -200px,动画效果为 linear,时长 200ms。

2. Set Panel state to State,将[button]的 State 改为[button-r]。

3. Hide Panel,隐藏[lock]。

完成后的事件列表如下:

完成后的效果可以在 Mac 下通过 TouchPad 的多指操作很贴切的模拟出手机触屏的感觉,当然通过鼠标左键长按进行拖拽式的滑动也可以得到同样的效果,不过有时会出现不太灵敏的状况。

  • Reed

    thx a lot !