天天看点

《Axure RP7网站和APP原型制作从入门到精通》一2.3 母版使用案例

本节书摘来自异步社区《axure rp7网站和app原型制作从入门到精通》一书中的第2章,第2.3节,作者 金乌,更多章节内容可以访问云栖社区“异步社区”公众号查看

axure rp7网站和app原型制作从入门到精通

这个案例是为了帮你进一步理解什么是自定义事件及其重要性。在这个案例中,我将演示如何使用一个带有自定义事件的母版在4个不同的页面中触发不同的动作。在axure中,如果没有自定义事件,这是无法实现的。

01 在站点地图中创建4个页面,在任意页面的设计区域中添加“上一页”和“下一页”两个部件,还有两条水平线,并将其转换为母版,见图12。

《Axure RP7网站和APP原型制作从入门到精通》一2.3 母版使用案例

02 双击母版,进入编辑状态,选中上一页,在部件交互面板中双击“鼠标单击时”事件,在弹出的用例编辑器中新增自定义事件动作,并在第四步配置动作中新增自定义事件,给其命名为 previous(注意:不支持中文),勾选其前面的复选框(如果不勾选,在母版的交互面板中是看不到该事件的),点击“确定”按钮,见图13。

《Axure RP7网站和APP原型制作从入门到精通》一2.3 母版使用案例

03 选中下一页部件,在部件交互面板中双击“鼠标单击时”事件,在弹出的用例编辑器中新增自定义事件动作,并在第四步配置动作中新增自定义事件,给其命名为next(注意:不支持中文),勾选其前面的复选框(如果不勾选,在母版的交互面板中是看不到该事件的),点击“确定”按钮,见图14。

《Axure RP7网站和APP原型制作从入门到精通》一2.3 母版使用案例

04 将该母版拖放到每个页面的设计区域中。

05 为不同页面中的母版添加自定义交互事件。注意,首页中只能点击“下一页”,所以此页面的母版只添加点击next事件,在当前页面打开 page1即可。在page1/page2的母版中分别添加previous和next事件,让其跳转到相应的页面。在page3的母版只添加previous事件,让其跳转到page2,见图15。

06 按下f5键,快速预览测试效果。

《Axure RP7网站和APP原型制作从入门到精通》一2.3 母版使用案例

继续阅读