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

动态面板的应用(1)

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

一般来说,组合能够做的事情,都可以通过动态面板来实现。

就像《元件组合的应用(1)》、《元件组合的应用(2)》以及《元件组合的应用(3)》中所有的案例都可以用动态面板代替组合。

怎么代替呢?

只将多个元件组合的步骤改为将多个元件[转换为动态面板]。

在点中多个元件后,右键菜单中就能够看到[转换为动态面板]的选项。

然后,所有对组合的设置,全部改为对动态面板的设置即可。

那么,组合和动态面板的区别在哪里呢?

组合就像把多个元件捆在一起,我们在画布中点中组合后,能够通过再次点击点中组合中的元件。

而动态面板就像把多个元件放入了一个透明的箱子中,在画布中没有办法直接点中动态面板中的元件。

所以,如果想操作动态面板中的元件,需要双击动态面板,打开这个箱子,在动态面板的专属编辑区中(下图),才能对元件进行操作。

从上方的描述就能看出,不管是将东西捆在一起,还是装入同一个箱子,目的都是为了能够统一的操控。

这就是组合和动态面板的相似之处,所以,动态面板能够代替组合。

我们再通过一个例子来加深对动态面板的了解。

假设页面中有个用于登录的文字按钮,当点击这个按钮时,页面中呈现一个登录面板,同时登录面板四周带有灰色半透明的遮罩层。

首先,我们需要准备登录按钮,以及登录面板的所有元件。

如果通过组合来实现的话,我们需要将组成登录面板的元件组合到一起,并命名。

然后,将登录面板的组合设为隐藏状态。

并且,为登录按钮添加[单击时][显示][登录面板]的交互。

在交互设置的[更多选项]中,选择[灯箱效果],就能够在显示登录面板时,四周带有半透明的遮罩。

遮罩效果的颜色与透明度都能通过[灯箱效果]选项下方的[背景颜色]进行设置。

此时,在浏览器中查看原型,点击登录按钮就能够弹出带有半透明遮罩的登录面板。

但是,这个登录面板的位置如果想要居中的话,需要在画布中摆放到中央的位置。

接下来,我们通过动态面板实现相同的交互效果。

回到将登录面板多个元件组合的步骤。

在这一步,我们选择将多个元件[转换为动态面板]。

并且,为动态面板命名,随后将其隐藏。

登录按钮的交互设置保持不变,只不过这一次动作的目标元件是动态面板做成的登录面板。

动态面板如果仅仅能够代替组合,就没有存在的理由。

所以,动态面板有着它自己的特性。

例如,自动在浏览器的窗口中居中。

在动态面板的右键菜单中,有[固定到浏览器]的选项。

打开设置窗口之后,勾选[固定到浏览器]的复选框。

并且,设置动态面板水平与垂直方向都居中显示。

此时,在浏览器中查看原型,点击登录按钮就能够弹出带有半透明遮罩的登录面板,并且这个登录面板是自动居中的。

/教程源文件/

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

转载请注明:iaxure.com » 动态面板的应用(1)