第9节 检视功能-元件交互
冰炫：小楼老师，我能跟你请教个问题吗？
小楼：哇！看头像是很高冷的美女呀。
冰炫：老师！你嘴好甜哦！你这样我会不好意思的！
小楼：嘿嘿！你有什么问题呀？
冰炫：哦……差点被你给夸得忘记问了！今天我在网上买饮料时候，看到网站上的选择饮料分类，选择的时候只能选中一种，被选中的分类标签会改变颜色，其它的恢复默认颜色。感觉有些像你刚才给Alice.讲的单选按钮组的效果。（图6-58）
（图6-58）
小楼：嗯，这个也是组的效果，但不是单选按钮组，而是选项组。
冰炫：选项组？我好像在矩形的属性里看见过。是不是像单选按钮一样给每个矩形设置相同的选项组组名，就可以了？
小楼：不是，你说的这个交互效果只加组名还不行。还要设置交互样式，并且添加交互动作，通过交互动作让每个矩形被鼠标点击时变为选中的状态。
冰炫：交互动作？不好意思，老师，我还没做过有交互的原型呢！不知道你说的交互在哪里添加。
Alice.：好像就是刚才属性面板中没有讲的那部分吧？
小楼：是的。正好你们两个都没接触过交互的设置，我就给你们一起说说交互是怎么回事。
在检视功能的属性面板中，可以为原型添加交互。
一般来说一个交互的过程就像我们日常生活中的某件事情的过程。
比如：帅哥小楼早晨出门的过程和一个按钮的点击交互过程的描述是相似的。（图6-59）
（图6-59）
所以，我们在原型的制作过程中，设置每一个交互时，都要遵循图6-60的过程。这样才能准确、完整的完成交互设置。
（图6-60）
案例10：点击按钮等待3秒钟后打开作者的网站地址
具体步骤如下：（图6-61）
（图6-61）
画布中放入一个按钮元件，点中这个元件。（选择主体）
在属性中，双击触发事件【鼠标单击时】打开用例编辑界面，或者点中这个触发事件，然后点击【添加用例】的按钮。（选择触发并设置情形）
在动作列表中找到并选择【等待】的动作。（选择动作1）
在右侧的配置动作面板中设置{等待时间}为“3000”毫秒。（设置目标）
在动作列表中找到【打开链接】的动作，选择【当前窗口】打开链接的动作。（选择动作2）
在配置动作中，选择【链接到url或文件】。（选择目标）
在{超链接}文本框中输入地址：http://www.iaxure.com。（设置目标）
特别说明：在Axure中动作是由上至下按组织动作中的顺序执行的，本案例中的两个动作不可颠倒顺序。就如同生活事件中，要先拿雨伞，才能打开雨伞，而不可能先打开雨伞，再拿雨伞。如果需要调整动作的顺序，可以在用例编辑界面的组织动作中拖动调整，或者在属性面板中进行拖动调整。
冰炫：哦，原来这样就是添加交互呀！
小楼：对呀！知道了怎么添加交互，我们来看看你说的那个选择饮料分类的效果。
案例11：唯一选项选中效果
放入多个无边框矩形元件并进行样式设置，包括：调整尺寸、编辑文字、设置圆角半径（3px）以及编辑填充颜色（白色）和字体颜色（灰色）。（图6-62）
（图6-62）
为所有元件设置交互样式，【选中】时的交互样式为蓝色的填充颜色和白色的文字颜色。（图6-63）
（图6-63）
将“全部甜品饮品”的元件，默认设置为【选中】状态。这个状态在画布中没有效果，而在浏览器中查看原型时，“全部甜品饮品”的元件会呈现为蓝色的样式。（图6-64）
（图6-64）
为每个元件添加交互，【鼠标单击时】【选中】【当前元件】。（图6-65）
（图6-65）
为所有元件【设置选项组名称】为“DessertType”。（图6-66）
（图6-66）
小楼：你们都明白了吗？
冰炫：明白了，老师！我感觉设置交互其实就是我们能够接触到的交互效果在软件中用另一种语句完成描述。这样软件就会按照既定描述去给用户进行反馈。
Alice.：嗯，我也明白了！老师！如果想准确的设置交互就必须先按你说的，找准关键的元素（主体、触发、情形、动作、目标、设置），然后把它们组织起来形成整个交互的过程。
小楼：嗯，不错！不过，要想熟练的进行交互的设置，一定要多加练习。
第10节 检视功能-组合属性
冰炫：老师，我还想问个问题，就是怎么让元件在鼠标指针进入的时候改变样式呀？
小楼：刚才的例子里面不是有吗？加上鼠标悬停的交互样式就可以了！
冰炫：不是的，老师。我刚刚表达不准确，我是想问几个元件怎么同时改变样式呀？
小楼：同时改变？你的意思是，鼠标进入一个元件时，有多个元件要改变样式？
冰炫：是的，老师。比如，我做一个菜单列表的时候，鼠标指针进入一个菜单项的时候，菜单项的背景和上面的文字，都要改变成另外一种样式。对了就像网易云课堂的首页菜单。（图6-67）
小楼：这个不难！我给你示范一下。
（图6-67）
在Axure RP 8中可以通过快捷功能中的组合图标或<Ctrl+G>键将多个点中的元件组合在一起，组合除了能够共同移动位置，还能够进行命名、添加交互、设置属性。取消组合可以通过快捷功能中的取消组合图标或者<Ctrl+Shift+G>键取消组合。（图6-68）
（图6-68）
案例12：触发组合中所有元件的鼠标交互
放入矩形元件和文本标签，组成各个菜单项的基本内容。（图6-69）
（图6-69）
为各个菜单项中的矩形设置【鼠标悬停】的交互样式为白色的填充颜色。（图6-70）
（图6-70）
为各个菜单项中的文本标签设置【鼠标悬停】的交互样式为黑色的文字颜色。（图6-71）
（图6-71）
将各个菜单项中，除水平线以外的元件组合。（图6-72）
（图6-72）
在组合的属性中勾选【允许触发鼠标交互】。（图6-73）
（图6-73）
特别说明：元件组合后如果需要对组合中的某个元件进行编辑，需要先点中组合，再点击元件。或者，在概要中直接点击需要编辑的元件，然后进行编辑。
原创文章，作者：交互精选，如若转载，请注明出处：https://www.iamue.com/36633/
