Axure教程：实现光标移动切换图片的效果

honghu2

Axure教程：实现光标挪动切换图片的结果

编纂导读：本文跟大师分享，若何用Axure实现光标挪动切换图片的结果，作者从预览图，到所需原件，再到操作步调都逐一开展了阐发，并对进程中必要注重的问题举行了先容，但愿对你有所开导。

01 概述
今天小鱼在腾讯大数据网站上搜寻数据的时辰找到了一个很是好玩的图片交互结果(以下图)，可能第一眼看到的时辰会感觉坚苦,可是现实上建造的时辰是很是简略的，下面小鱼就来教大师若何建造如许的交互结果吧。


02 质料筹备
Axure PR 9.0

两张图片(小鱼偷懒用分歧色彩的取代，蓝色A，赤色B)
03 建造步调
一、起首咱们先筹备把两张图片中的此中一张(图片A)给放在底层作为网页加载时起首看到的图片，然后咱们必要把一样巨细的图片B堆叠在图片A上面，由于依照交互逻辑，鼠标挪动的时辰图片B是一点点跟从光标开展的。





二、可是若何实现让图片B跟从光标一点点开展呢，咱们必要把图片B给设置为动态面板，取名屏幕。

动态面板的感化现实上可以理解为给一张照片添加了一个相框，无论你的照片多大相框的面积巨细决议了你的照片的可视面积， 以是此时咱们必要把这个屏幕的宽度给拉到最小，这里只能设为1，安排在图片A的最左边。





三、最关头的步调来了，咱们必要设置一个感到区域，如许光标在移入这内里的时辰，动态面板可以按照光标的横坐标X值开展。

因而咱们添加一个与图片A不异长宽的热区而且置于顶层，对热区设置的交互结果为当鼠标挪动时，设置动态面板的尺寸。

注重这里的锚点应当设置为左边，由于必要它从左边开展， 咱们只必要改变更态面板的宽度为光标的X坐标减去动态面板它的X的坐标就可以得出它开展的宽度，结果图以下，一个简略的交互小结果就出来了。



四、此外若是想要添加线段作为翻页朋分线，设置一条线段放在图片的最左边，在感到区设置线段的交互结果。

这里咱们必要注重，因为软件对线段横纵坐标的辨认会分歧于图形，以是不克不及简略地用光标的横坐标来设置线段挪动进程中的横坐标坐标。

好比小鱼这里显示的是线段的坐标其实是(68,273)，而与线段左边对齐的图形的坐标确是(196,145。

甚么意思呢？就是当你预览的时辰，即便视觉上看，所辨认的坐标点固然重合可是坐标却不是不异的。

这里可以察看到，线段的横坐标与图形相差了128个单元，以是设置线段挪动时辰咱们必要设置它的横坐标为[[cursor.x-128]],纵坐标设置与线段的本来纵坐标不异便可便是273. 固然若是你这里用了从网站上下载的图形，就不会呈现如许的环境，设置挪动坐标时横坐标依照光标的坐标便可。



终极预览链接：
04 优错误谬误阐发长处如许的交互结果可以节流用户切换图片时辰的点击次数，只必要将光标放入图片摆布挪动便可以举行切换图片。若是两张图片之间有比拟或其他接洽更易让用户将两张图片举行视觉比拟操作，不必要频仍地切换。不必要将图片分隔安排，节流网页建造的空间， 给用户简便的交互体验感。错误谬误交互结果可能只合用于对图片的展现，交互功效的延展性较弱，好比对分歧图片内的icon设置单击跳转链接的交互结果.该交互结果图片切换的数目有限，交互体验跟着图片的增长可能会降低，究竟结果用户不想一向经由过程挪动光标的方法来切换到本身想要的图片，如许的环境更合用鼠标点击和banner轮播的夹杂切换结果.05 总结
现现在，咱们在互联网上看到的图片的切换结果是层见叠出的，比方：点击切换，滑动切换，主动轮播切换等等。每种切换结果的存在都有它的来由，其目标都是为增长用户的搜查效力和交互体验，设计师必要连系详细环境给出分歧的切换交互结果。

这就是今天小鱼给大师带来的光标挪动切换结果，从速脱手试樱花视频一下吧。

本文由 @Zia 原创公布于人人都是产物司理，未经作者允许，制止转载。

题图来自Unsplash，基于CC0协定。