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

您所在的位置:网站首页 axure如何等比例缩小 Axure 交互案例:放大缩小图片

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

2023-09-21 08:26| 来源: 网络整理| 查看: 265

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

 

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

 

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

 

 

一、准备页面元素。

 

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

 

                           

 

二、设置交互

 

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

 

 

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

 

 

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

 

 

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

 

 

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

 

 

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

 

 

7、预览看一下效果。

 

 

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

 

 

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

 

 

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

 

 

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

 

 

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

 

 

 

 

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

 

 

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

 

 

 

2、复制带交互的图片。

 

 

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

 

 

 

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



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3