滑动菜单 | Sliding Menu

制作一个可以从移动端界面侧面滑入的菜单。

STEP 0:下载移动端练习文件

如果你还没有练习文件,请下载AxureMobile练习文件.rp并在Axure RP中打开它,该文件包含了Axure移动端教程中对应的每个页面。

STEP 1:设置

在移动端练习文件中打开“滑动菜单”页面,在画布上有两组元件:左侧的组合构成了原型的UI,右侧的组合构成了滑动菜单。

选中画布上的“滑动菜单”组合并将其移动到坐标为(0,0)的位置,以便和画布的左边缘和上边缘对齐,然后点击样式工具栏中或检视窗口中样式页签下的“隐藏”复选框将其隐藏。

STEP 2:通过汉堡包图标显示“滑动菜单”

在概要窗格中,选中“汉堡包滑动菜单按钮”元件(就是原型头部左上方的汉堡包图标),然后在检视窗口中的属性页签下双击“鼠标单击时”来添加一个新的鼠标单击时用例。

在用例编辑器中,点击左侧“添加动作”栏中的“显示”(位于“显示/隐藏”下面),在右侧“配置动作”栏中,选择“滑动菜单”。

在右侧“配置动作”栏的底部,设置“动画”下拉列表的选项为“向右滑动”,在“时间”后面的文本框中输入“400”。

点击“确定”按钮关闭用例编辑器。

STEP 3:通过菜单的返回按钮隐藏“滑动菜单”

在画布上点击被隐藏的“滑动菜单”组合以选中它,然后再次点击以便在组合内进行编辑,这样会使得组合以及其包含的内容暂时处于可见状态以供编辑。

选中组合左上角的箭头图标,然后在检视窗格中的属性页签下双击“鼠标单击时”来添加一个新的鼠标单击时用例。

在用例编辑器中,点击左侧“配置动作”栏中的“隐藏”(位于“显示/隐藏”下面),在右侧“配置动作”栏中,选择“滑动菜单”。

在右侧“配置动作”栏的底部,设置“动画”下拉列表的选项为“向左滑动”。(注意“时间”字段设置成与前面“显示”动作一样的值“400”。)

点击“确定”按钮关闭用例编辑器。

STEP 4:预览

预览原型,点击汉堡包图标以显示菜单,然后点击箭头图标隐藏菜单。

(备注:如果你想在“设备框架”页面提供的设备框架中预览页面,打开“设备框架”页面,双击“内容框架”,然后在弹出的对话框中选择“滑动菜单”。)

评论(0 个评论)

发表回复

您的电子邮箱地址不会被公开。