Axure 实例 - 模拟 iOS 的动作列表

iOS 中有一个叫做 Action Sheet[动作列表]的控件,用于通过一次点击,在弹出的面板中为用户提供更多的可操作内容。Android 里也有类似的设计,区别在于 iOS 的交互方式是从屏幕底部向上滑出,而 Android 则是直接在屏幕中间弹出。我比较喜欢 iOS 的设计,列表由下至上滑出时会有一种优雅的感觉,不会显得太突兀。今天闲来无事就用 Axure 模拟了一个类似的效果。

预览 | 下载

要求:
列表出现方式由屏幕底部至下而上滑出,关闭方式则方向与之相反。

放置一个 Button Shape 在屏幕底部,作为[开启]列表的按钮,命名为[btn-open]

拖入一个与屏幕同尺寸的 Dynamic Panel,命名为[mask],设置其可见方式为隐藏,其主要的作要把操作的可视范围限定在屏幕的空间内

在[mask]中放置一个与屏幕同尺寸的 Rectangle,底色设为黑色,透明度 70%,用以实现列表滑出后的半透明遮罩效果。

在 Rectangle 的下方放置一个 Dynamic Panel 作为这次的主角 Action Sheet,命名为[menu],与屏幕同宽,但高度为屏幕的 2/3。

在[menu]中放置一个 Rectangle 用来存放列表中的内容,底色要与屏幕色调有所区别,同时添加一个 Button Shape 作为[关闭]列表的按钮,命名为[btn-close]

为[btn-open]添加 OnClick 事件,并设置动作:
1. Show Panel,显示[mask]。

2. Move Panel,设置[menu]的移动坐标为 y,移动 -Npx,动画效果为 linear,时长 200ms,其中 N 为[menu]的高度值。

完成后的事件列表如下:

为[btn-close]添加 OnClick 事件,并设置动作:
1. Move Panel,设置[menu]的移动坐标为 y,移动 Npx,动画效果为 linear,时长 200ms,其中 N 为[menu]的高度值。

2. Hide Panel,隐藏[mask],由于要考虑到动画的时间,所以这里要设置一个高于动画时长的延时,比如 700ms。

完成后的事件列表如下:

搞定收工。