龙空技术网

Axure 交互案例:放大缩小图片

一口嘎嘣脆脆 68

前言:

此时看官们对“axure移入时放大”都比较看重,我们都想要知道一些“axure移入时放大”的相关内容。那么小编同时在网摘上搜集了一些关于“axure移入时放大””的相关内容,希望小伙伴们能喜欢,小伙伴们一起来学习一下吧!

产品经理在进行原型设计的时候,时常会遇到这样一种动态效果:鼠标移入到页面中的某个图片或者图标上,图标会进行放大,提醒用户现在鼠标所在的位置为当前的图片。移出该图片时,图片的尺寸回复为原本大小。

通常我们会在图片的展示页面中用到它,比如电商网站中商品的展示页面。

在前面的分析中,我们基本知道这个交互的逻辑是怎样的了,那么这个效果在Axure RP9中应该怎么样去操作设置呢?我们一步步来看看。







一、准备页面元素。




这里我们使用了两张商品的图片,是这个效果的主要部分,其他的元素大家可以按照自己的实际情况去绘制,这里就不浪费这个时间了。








二、设置交互




1、选中需要设置的图片(先设置其中一个)

2、将检查窗口的标签切换到“交互”标签,方可进行交互设置。

3、点击新建交互,创建一个新交互。选择用例事件,按照我们的交互效果,这里选择的是鼠标移入时事件。

4、接着选择用例动作,同样根据我们的需要选择“设置尺寸”动作

5、配置“设置尺寸”动作,选择当前部件即可对当前选择的图片的尺寸进行设置。

6、设置好放大后图片的尺寸,左边选择缩放时的锚点。可以根据你的实际需要选择缩放时的动画与动画时间,或者不选择动画。

7、预览看一下效果。

8、鼠标移入时图片放大的交互设置我们就完成了,接下来我们要设置的是,当鼠标移出图片的时候,图片恢复为原来的大小。经过前面的设置,相信大家对于这个设置已经有思路了。在刚才的交互设置的下方,选择“新建交互”

9、选择事件。没错,这里我们要选择的是“鼠标移入时”相对应的事件“鼠标移出时”。

10、动作和动作的配置与“移入时”类似,不同的是图片的尺寸是图片的原尺寸。

11、点击确定,完成交互设置。


12、这时候预览一下最终效果。







通常我们不止在一张图片上应用这个交互。在确保交互的设置没有问题之后,就可以将这个交互应用到其他图片中了,这里有这样两种方法可以复刻这个交互。


1、复制交互设置,粘贴到另外的图片的交互用例中。选择需要复制的交互,CTRL+C(或者右键菜单选择“复制”)。选中新的图片,直接CTRL+V即可复制用例交互成功。


2、复制带交互的图片。

双击图片更改图片,选择实现准备好的不同的图片即可。




Axure 9有很多朋友在使用上还比较生疏,如果有需要的话,大家可以把需要了解或者不清楚如何制作的案例告知我们,我们将会给大家讲述,在Axure 9中该如何解决问题、制作案例,期待大家的反馈。


标签: #axure移入时放大