最新消息:本站教程基于Axure RP 9.0.0.3723及更高版本,请在学习前确认软件版本是否符合要求,以免因为界面差异导致学习障碍!

动态面板的应用(2)

教程 小楼一夜听春语 96浏览

百度贴吧的登录方式有两种,扫描二维码登录或者通过用户名与密码登录。

当用户点击登录面板右上方的蓝色三角形图标时,能够切换不同的登录方式。

原网页地址:http://tieba.baidu.com/f/user/passport

实现这样的功能模块,可以通过组合实现。

将两个不同登录面板的组合重叠摆放,显示其中一个的时候,隐藏另外一个。

这样的解决方案没有什么问题,只是元件重叠摆放不方便修改,交互动作略有复杂。

如果通过动态面板来实现相同功能模块的话,会更简单、清晰。

动态面板不但可以容纳其它元件,而且还可以分层容纳。

动态面板的每一层称为“状态(State)”。

首先,我们准备好两个登录面板之后,不需要进行组合操作,而是将默认显示的扫码登录面板先[转换为动态面板]。

此时,在概要面板中,我们能够看到刚才的扫码登录面板被放入了一个动态面板的“State1”状态中。

接下来,我们要做的是,把用户名密码登录的面板,放入动态面板的另一个状态中。

在概要面板中,动态面板名称的后方点击添加状态的按钮。

此时,概要面板中会出现新的状态“State2”,我们将用户名密码登录面板的所有元件在概要中点中,拖入“State2”中。

此时在画布中,会自动打开动态面板“State2”的状态编辑区。

我们需要把用户名密码登录面板的元件,摆放在这个状态的原点位置上。

警告:快捷工具栏中元件的坐标,X和Y轴的数值都是“0”。

完成两个状态内容的添加之后,我们可以为这两个状态重命名。重命名可以在概要面板中完成,也可以在动态面板的编辑区上方完成。

在修改状态名称时,我们还能够发现,点击状态的名称就能切换到相应状态的编辑区。

另外,我们也可以在概要面板中,为动态面板添加一个自定义名称,例如“登录面板”。

完成两个状态的编辑之后,需要给图标添加交互事件。

在用户名密码登录的状态中,我们点中二维码图标,添加交互事件。

在二维码图标被[单击时],[设置面板状态]到“扫码登录”的状态。

同样,在扫码登录的状态中,我们还要点中手机图标,添加交互事件。

在手机图标被[单击时],[设置面板状态]到“用户名密码登录”的状态。

完成这些交互事件之后,关闭状态编辑区,回到页面中,将底部元件摆放在动态面板下方。

此时,我们就通过动态面板完成了同样的功能模块。

温馨提示:因为案例内容较多,并未对元件的样式设置进行讲解,如有问题可参考《常用样式设置》。

/教程源文件/

不习惯看文字教程?还有《Axure RP 9萌新修炼视频》奉上!

转载请注明:IAXURE » 动态面板的应用(2)