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

元件组合的应用(1)

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

在微信公众号的后台,有一种鼠标进入时能够改变颜色的选项。

在上图中能够看到,当鼠标指针进入某一个选项时,图标、文字以及背景矩形都改变了颜色。

图标与文字编程了绿色,背景矩形变为了灰色。

首先,我们准备元件。

一个选项的元件由一个形状图标、一个文本标签以及一个矩形组成。

矩形元件,我们需要设置默认的样式为灰色的虚线边框。

文本标签元件保持默认的样式,只需修改其中的文字。

图标同样是形状元件,保持默认的颜色。

但是,我给大家提供的素材中,这三个图标是SVG文件。

如何使用呢?

复制三个图标文件,粘贴到Axure的画布中。

此时,就能够看到三个重合在一起的图标。

把它们分开摆放。

但是,现在还不能正常使用。

因为此时它们还是SVG图像元件,不能改变颜色。

我们需要在图标上点击右键,选择[变换图片]子菜单中的[转换SVG图片为形状]的选项。

转换之后,SVG图片变成了一个组合。

在画布上方的快捷工具栏中点击[取消组合]按钮(或者在右键菜单中),删除多余的矩形元件,只保留图标的形状元件。

这样,我们就能够对图标进行填充颜色的设置了。

我们分别为图标、文本标签以及矩形元件设置[鼠标悬停的样式],具体操作在《Axure的7种交互样式(1)-鼠标的交互样式》中有详细的讲解。

画布中点中所有的图标,在交互面板的属性设置中,点击[添加交互样式]按钮,将[鼠标悬停的样式]中[填充颜色]设置为绿色。

继续在画布中点中所有的文本标签,在交互面板的属性设置中,点击[添加交互样式]按钮,将[鼠标悬停的样式]中[字色]设置为绿色。

继续在画布中点中所有的矩形,在交互面板的属性设置中,点击[添加交互样式]按钮,将[鼠标悬停的样式]中[填充颜色]设置为灰色。

此时,在浏览器中查看原型的话,鼠标指针进入每个元件时,都会出现变色效果。

但是,并不会一个选项的所有元件同时改变颜色。

所以,我们需要解决的问题是,如何让鼠标指针进入某个选项的时候,三个元件能够一起改变颜色。

操作很简单,先把每个选项的元件组合起来,[组合]按钮在画布上方的快捷工具栏或者右键菜单中。

但是,仅仅组合的话,还是达不到我们想要的效果。

我们需要鼠标指针进入组合区域时,每个内部元件都能触发鼠标指针相关的交互样式。

接下来,就是最骚最重要的一步操作。

分别点中画布中的每个组合,在属性中勾选[触发内部元件鼠标交互样式]的选项。

此时,再次在浏览器中查看原型,就能够看到正确的结果了。

/教程源文件/

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

转载请注明:IAXURE » 元件组合的应用(1)