Axure高保真(axure可以做高保真设计吗)

导读：图片列表是一种常见的显示方式，所以今天笔者就和大家分享一下如何在Axure中制作一个可以用repeater查看大图的图片列表。
第一，制作完成后，应该有以下效果。当鼠标移入图片时，图片有放大和缩小的效果。
点击鼠标图片时会显示相应图片的大图，点击空白处隐藏大图。
制作完成后，再次使用时，只需将图片导入repeater表中，即可自动生成交互效果。
原型地址：https://2a9rvm.axshare.com/#g=1
二。制作材料要制作的原型的元素包括：复读机、图片元素、动态面板。
1.中继器的内部组件。首先，我们添加一个原始的repeater，删除repeater附带的矩形，然后在repeater中放置一个图片组件。在这种情况下，图片的宽度是200，高度是200。在这里，可以根据你需要展示的画面比例进行设置。鼠标右键完成后，图片会变成一个动态面板，然后需要通过动态面板来做移入、移出、移出的效果。这里需要取消动态面板的自适应内容。
repeater表的第一列可以重命名为picture，用鼠标右键导入下表中的图片，也可以直接复制粘贴图片。
2.中继器的外部组件只需要一张图片。这张图比较大，图片大小可以自己设定。宽高比应该和复读机里的图一样。在这种情况下，它是500宽和500高。然后我们需要把大图变成动态面板，然后固定在浏览器中间，默认隐藏。
3.互动制作1。当加载每个中继器时，我们需要将中继器表中存储的图片设置为中继器中的图片元素。这里我们设置图片的交互，选择值===item.picture设置后的效果如下图所示。
2.当鼠标移动到图片中时进行交互。当鼠标移入图片时，我们希望相应的图片具有动态缩放效果。我们通过设置大小的交互，将图片的大小设置为原来的1.1倍，锚点在中间。设置大小的交互需要添加线性动画，动画时间为500毫秒。然后使用等待交互等待动画时间的引入。因为之前的动画时间是500毫秒，所以这里也是等待500毫秒。最后，我们使用了再次设置大小的交互来恢复图片的大小。因为前面放大了1.1倍，这里也缩小了1.1倍。同样，我们给他加了一个线性动画，动画时间是500毫秒。
3.鼠标点击图片时的交互在repeater中鼠标点击图片时，我们用display的交互来显示大图的动态面板。这里需要勾选灯箱效果，这样点击空白的地方大图会自动隐藏。灯箱的颜色是50%透明度的黑色。最后，我们需要将鼠标点击图片的值转移到大图中，这里图片的值实际上是repeater表中图片列的值，所以我们设置大图的值===item.picture
这样，我们就完成了复读机图片列表放大图的原型模板。我们下次使用的时候，只需要导入图片就可以自动生成交互了。方便吗？有兴趣的同学可以去试试。
本教程到此结束。感谢您的阅读。下次见，88~
本文由@AI产品负责人原创发布。每个人都是产品经理。未经许可，禁止复制。
来自Unsplash的图像，基于CC0协议。