Axure RP 9 动态面板——手机屏幕

我们通常在耍手机的时候,都会向下滑动,查看内容,那么如何实现呢?

今天,我们练习一个App屏幕向下滑动,查看内容的案例。

1、打开Axure RP 9 ,选择“新建”

2、在元件库选择“动态面板”,拖动到编辑区,将宽和长设置为375 X 667,如下图:


拖动动态面板

3、选中该动态面板,将名称设置为“手机屏幕”


设置名称“手机屏幕”

4、双击动态面板,切换元件库,将“卡片”元件拖入面板,拖动三个“卡片”元件,竖直排列,先ctrl+a全选,再ctrl+g 组合。选中该组合,将组合名称命名为“内容”,点击“关闭”。

如下图:


组合

5、切换元件库,将一个矩形拖入,对齐动态面板的左上角。


拖入矩形

6、将矩形的宽长设置为375 X 667,再点击“底层”,将矩形设置在底层。


设置底层

7、选中该动态面板,点击“新建交互”。


新建交互

8、选择“拖动时”,再选择“移动”,选择“内容”即选择前面我们创建的组合。


选择“拖动时”


选择“移动”
选择“内容”

9、因为我们是上下滑动,所以设置“跟随垂直移动”。


设置“跟随垂直移动”

10、点击“更多选项”,点击“添加界限”。“顶部>=0”,再一次添加界限,“底部<0”,点击完成。

点击“更多选项”
添加界限
设置界限

11、预览效果。点击预览,在预览页面中,按住鼠标左键不放,就发现矩形框内的卡片可以上下拖动。完结,撒花!


点击预览
预览效果

你可能感兴趣的:(Axure RP 9 动态面板——手机屏幕)