Axure高保真教程:图片列表(放大效果)

新知榜官方账号

2023-07-04 15:20:23

一、制作完成后应具备以下效果

鼠标移入图片时,图片有有一个放大缩小的效果
鼠标单击图片时,显示对应图片的大图,点击空白地方隐藏大图

二、制作材料准备

制作的原型的元件包括:中继器、图片元件,动态面板。

1.中继器内部元件

添加一个中继器原件,将中继器内部的矩形删除,然后在中继器放置一个图片元件,设置图片比例,右键将图片转为动态面板,取消自适应内容。导入图片至中继器表格内即可。

2.中继器外部元件

添加一个大图的元件,大小和中继器里的图片比例一致,右键转为动态面板,固定在浏览器中部,设置默认隐藏。

三、交互制作

1.中继器每项加载时交互
设置中继器内的图片元件显示对应图片即可。

2.鼠标移入图片时交互
通过设置尺寸的交互,将图片放大1.1倍,增加动画效果,等待500毫秒后再将图片大小还原。

3.鼠标单击图片时交互
使用显示的交互,显示大图动态面板,勾选灯箱效果,设置灯箱颜色和透明度,将图片的值传到大图里。

以上交互设置完成后,即可生成交互效果的原型模板。

产品经理的价值在于准确发现和满足用户需求,把需求转化为产品,并协调资源推动产品落地,创造商业价值。

本文由@AI产品人原创发布于人人都是产品经理。

本页网址:https://www.xinzhibang.net/article_detail-5396.html

寻求报道,请 点击这里 微信扫码咨询

关键词

Axure 高保真 教程

分享至微信: 微信扫码阅读

相关工具

相关文章

相关快讯