一天上手Axure RP (2.2) Web案例

续:《一天上手Axure RP (2.1) Web案例

这次我们完成第二阶段,Banner。


STEP 1 . Banner内容


动态面板:把准备的Banner第一张包含的内容,放在画布上,全选(内容)后右键,选择"Convert to Dynamic Panel"转为动态面板。

然后调整面板的大小、位置。当然,也有另外中方式添加动态面板,就是从组件库(Libraries)中拖出动态面板。

Dynamic Panel

新增面板状态:一个状态就是一个滚动的页面,我们现在添加至三个,并在里面添加不同内容。

add State

最后就会形成这样的结构(右侧Outline面板):

Outline


STEP 2 . 前/后控制手柄


手柄icon:组件库中拖出"Angle Left"icon,拉大后发现线条很粗。改一些样式,就可以让它"减肥"。

Angle Left

"Angle Right"一样设置。

隐藏手柄:同时选中左右手柄,右键选择"Set Hidden"隐藏它们。

Set Hidden

显示手柄:当鼠标进入Banner动态面板的时候,手柄就会出现,离开时就会隐藏。

在Banner动态面板的"PROPERTIES > Interactions"中好像没有鼠标进入离开的事件?....点击"More Events"就会发现更多事件。

我们这里选择"OnMouseEnter"和"OnMouseOut"事件。

Mouse Enter

为了在配置事件时能方便找到某些组件,这就是为什么要为组件命名的原因。"OnMouseOut"同理,最后事件如下:

Mouse Event


STEP 3 . 控制Banner


分析:按左边手柄,则显示上一张Banner,如果到了第一张则自动循环到最后一张,其动画效果是往右边滑动出现。所以:

Set Panel State

右边手柄则反之。

打完收工,可以看到听话的Banner了。

Result


看视频可以看到,更多内容,更细节的操作哟。

工具能表现你的思考结果,甚至过程,过分依赖工具则会束缚你的思维。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容