官人,赶快进来翻个牌子吧!

AxureRP8.0教程 小楼一夜听春语 2177℃ 0评论

这次的教程,让我虎躯一震,让我实在不知道该取个什么名字!

写之前,自己准备了好几包纸巾。

就怕自己把自己给感动的不住喷涌…泪水!

那么,是什么样的一个内容,让我如此的感动兴奋呢?

主要讲一下,关于Axure RP 8中为元件新增的两个触发事件【选中时】和【取消选中时】。

这两个触发事件,在很多时候能够派上用场,并且非常易用,能够简化交互的实现过程。

例如,当前这个案例,我们先来看一下截图。

温馨提示:大家先把屏幕挡一下。

上面这张图,是默认的状态。

当我们点击任何一个查看按钮时,会显示相应的图片。

大家注意,除了图片显示出来,按钮也改变了颜色。

那么,当我们再次点击这个按钮时,刚刚显示出来的图片会消失,并且按钮也恢复之前的样子。

如果,不再次点击相同的按钮,而是点击另外一个查看按钮呢?

大家能够看到,当点击另外一个查看按钮时,显示了对应的图片,并且被点击的按钮改变了样式。

而之前点击的按钮的样式恢复了初始样式,并且对应的图片也消失了。

也就是说,点击同一个查看按钮可以切换显示或隐藏对应的图片,并且切换被点击按钮的的样式;点击不同的查看按钮时,则只能显示被点击按钮对应的图片,改变被点击按钮的样式,其他的图片和按钮要恢复初始状态。

总算是说明白了…估计有的同学都想上厕所了…

好了,接下来,我们先压制一下心中的欲火,分析一下实现的思路。

实际上思路分析就是把要实现的效果中所有的交互分解出来,共包含以下几点:

1、除了背景图片,所有的图片初始状态都是隐藏的,显示的时候在背景图片上方显示出来。

2、每个查看按钮都有两种颜色,默认状态下的颜色,和点击之后的颜色。

3、每个查看按钮点击的时候,都能够切换颜色。

4、每个查看按钮点击变为粉红色的时候,都能够显示出对应的图片。

5、每个查看按钮点击恢复初始状态的时候,都能够隐藏对应的图片。

6、所有的查看按钮,只能够有一个改变颜色,并且只能够将改变颜色按钮对应的图片显示出来。

接下来,我们根据思路分析把这个案例,逐步制作出来。

第一步、先准备原件。

放入一个矩形,向右拉动形状左上角的小三角形,将其设置为圆角,并且输入文字“查看”;为了美观一些,也可以在样式中,点击文字阴影按钮,勾选【阴影】的选项。

然后,放入一个图片元件,双击导入背景图片;并且,在背景图片上再覆盖一个图片元件,命名为“GirlPhoto”,导入第一张查看时显示图片。

最后,按照思路分析第1点,在图片元件“GirlPhoto”上点右键将其【设为隐藏】。

第二步、按照思路分析第2点,为查看按钮设置另一种状态下的样式。

这个样式,我们在元件属性的交互样式设置中进行【选中】时样式的设置。

友情提示:有没有人觉得把脸挡上,这图更好看了?

第三步、根据思路第3点,我们给查看按钮添加交互,【鼠标单击时】通过【切换选中状态】的动作,切换“当前元件”的选中状态。这样就能在多次点击查看按钮时,让按钮在两种样式间切换。

贴胸提示:当完成这一步后,大家可以预览原型,点击查看按钮,看看样式是否正常在切换。

第四步、根据思路第4点,按钮变为选中状态时,要把相应的图片显示出来。

我们为查看按钮的【选中时】添加交互,设置动作为【显示】图片元件“GirlPhoto”,并且加上【逐渐】的动画效果。

第五步、根据思路第5点,按钮变为未选中状态时,要把相应的图片恢复隐藏。

我们为查看按钮的【取消选中时】添加交互,设置动作为【隐藏】图片元件“GirlPhoto”,并且加上【逐渐】的动画效果。

第六步、我们将刚刚做好的所有内容全选,然后,按下Ctrl键(Mac系统为Command键)不放,向右拖动这些内容,进行复制。

注意:不能分开复制,分开复制会解除元件之间的交互关系,导致交互失效。

复制完毕之后,双击每一个“GirlPhoto”元件,分别导入不同的本地图片。

导入完成后,大家可以进行预览,点击所有的查看按钮,都能够显示或者隐藏与按钮对应的图片。

那么,如何才能只让一个按钮改变颜色,并且只显示与改变颜色按钮相对应的图片呢?

最后,关键的一步,在软件编辑区将所有的查看按钮选中,在属性中【设置选项组名称】为“Button”。

当然,这一步也可以在复制操作之前进行,复制之后每一个查看按钮也都会有相同的选项组名称。

当设置了选项组名称之后,就能够实现我们想要的交互效果了。

有些同学不太明白,为什么加了一个名称就能够实现这个效果?

这是软件的一个内置规则,凡是添加了同一组名称的元件,在选中时只能唯一选中最新选中的一个元件,其它元件自动恢复未选中状态。

举个例子:

上学时班里分组,所有分到一个组的相当于具备了相同的组名称;然后选组长,如果A被选了组长,相当于A被选中;再次选组长时,如果B被选了组长,这时B被选中;这时,A就会自动撤销了组长身份,也就变成了未选中。

那么,设置选项组名称,实际上就是告诉软件,我们把哪些元件分到了同一组,软件知道后,就会在我们选中这一组中某个元件时,自动把其他元件的选中取消掉。

以上就是本篇教程所有内容,感谢大家访问阅读!

最后,邀请大家关注微信订阅号“iaxure”(二维码在本站首页右上方),及时获取本站最新动态内容。

硬广插入:《两天掌握Axure RP 8》线下培训,北京、上海正在招生,报名地址http://www.kouer.com。

源文件下载:http://downloads.iaxure.com/select_toggle.rp

素材文件获取方法:下载源文件后,生成HTML文件,在images文件夹中能够找到这些图片素材。


~~~~~~~~~~~~ 正文结束 下面没了 ~~~~~~~~~~~~

小楼老师再出新作,倾力打造Axure RP 8精品课程系列,以最短的时间高效完成学习目标,入门进阶与实战案例并重,是0基础的新手从入门到精通的必备课程。

《AxureRP 8 入门与实战 - 入门篇》------从零入门进阶的最佳课程------【点此查看详情】

《AxureRP 8 入门与实战 - 案例篇》------实战手册图书的同步视频------【点此查看详情】


转载请注明:Axure原创教程网 » 官人,赶快进来翻个牌子吧!

喜欢 (16)or分享 (0)
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(3)个小伙伴在吐槽
  1. 能不能不放那么动感的图片 😐
    超级MEI2017-08-15 16:52 回复
  2. =.=翻牌子成功,小楼姐姐,我要翻你的牌子 😀
    几点小土2017-08-16 09:15 回复
  3. 上班被boss看到我在看这篇文章,于是我解释了好久我是在好好“学习”......
    ygy2017-08-17 11:16 回复