編輯導(dǎo)讀：本文跟大家分享，如何用Axure實(shí)現(xiàn)光標(biāo)移動(dòng)切換圖片的效果，作者從預(yù)覽圖，到所需原件，再到操作步驟都一一展開(kāi)了分析，并對(duì)過(guò)程中需要注意的問(wèn)題進(jìn)行了介紹，希望對(duì)你有所啟發(fā)。

01 概述

今天小魚(yú)在騰訊大數(shù)據(jù)網(wǎng)站上搜查數(shù)據(jù)的時(shí)候找到了一個(gè)非常好玩的圖片交互效果(如下圖)，可能第一眼看到的時(shí)候會(huì)覺(jué)得困難,但是實(shí)際上制作的時(shí)候是非常簡(jiǎn)單的，下面小魚(yú)就來(lái)教大家如何制作這樣的交互效果吧。

02 材料準(zhǔn)備

Axure PR 9.0

兩張圖片(小魚(yú)偷懶用不同顏色的代替，藍(lán)色A，紅色B)

03 制作步驟

1、首先我們先準(zhǔn)備把兩張圖片中的其中一張(圖片A)給放在底層作為網(wǎng)頁(yè)加載時(shí)首先看到的圖片，然后我們需要把同樣大小的圖片B重疊在圖片A上面，因?yàn)榘凑战换ミ壿?，鼠?biāo)移動(dòng)的時(shí)候圖片B是一點(diǎn)點(diǎn)跟隨光標(biāo)展開(kāi)的。

2、但是如何實(shí)現(xiàn)讓圖片B跟隨光標(biāo)一點(diǎn)點(diǎn)展開(kāi)呢，我們需要把圖片B給設(shè)置為動(dòng)態(tài)面板，取名屏幕。

動(dòng)態(tài)面板的作用實(shí)際上可以理解為給一張照片添加了一個(gè)相框，不管你的照片多大相框的面積大小決定了你的照片的可視面積， 所以此時(shí)我們需要把這個(gè)屏幕的寬度給拉到最小，這里只能設(shè)為1，放置在圖片A的最左側(cè)。

3、最關(guān)鍵的步驟來(lái)了，我們需要設(shè)置一個(gè)感應(yīng)區(qū)域，這樣光標(biāo)在移入這里面的時(shí)候，動(dòng)態(tài)面板可以根據(jù)光標(biāo)的橫坐標(biāo)X值展開(kāi)。

于是我們添加一個(gè)與圖片A相同長(zhǎng)寬的熱區(qū)并且置于頂層，對(duì)熱區(qū)設(shè)置的交互效果為當(dāng)鼠標(biāo)移動(dòng)時(shí)，設(shè)置動(dòng)態(tài)面板的尺寸。

注意這里的錨點(diǎn)應(yīng)該設(shè)置為左側(cè)，因?yàn)樾枰鼜淖髠?cè)展開(kāi)， 我們只需要改變動(dòng)態(tài)面板的寬度為光標(biāo)的X坐標(biāo)減去動(dòng)態(tài)面板它的X的坐標(biāo)就能得出它展開(kāi)的寬度，效果圖如下，一個(gè)簡(jiǎn)單的交互小效果就出來(lái)了。

4、另外如果想要添加線段作為翻頁(yè)分割線，設(shè)置一條線段放在圖片的最左側(cè)，在感應(yīng)區(qū)設(shè)置線段的交互效果。

這里我們需要注意，由于軟件對(duì)線段橫縱坐標(biāo)的識(shí)別會(huì)不同于圖形，所以不能簡(jiǎn)單地用光標(biāo)的橫坐標(biāo)來(lái)設(shè)置線段移動(dòng)過(guò)程中的橫坐標(biāo)坐標(biāo)。

比如小魚(yú)這里顯示的是線段的坐標(biāo)實(shí)際上是(68,273)，而與線段左側(cè)對(duì)齊的圖形的坐標(biāo)確是(196,145。

什么意思呢？就是當(dāng)你預(yù)覽的時(shí)候，即使視覺(jué)上看，所識(shí)別的坐標(biāo)點(diǎn)雖然重合但是坐標(biāo)卻不是相同的。

這里可以觀察到，線段的橫坐標(biāo)與圖形相差了128個(gè)單位，所以設(shè)置線段移動(dòng)時(shí)候我們需要設(shè)置它的橫坐標(biāo)為[[cursor.x-128]],縱坐標(biāo)設(shè)置與線段的原來(lái)縱坐標(biāo)相同即可即是273. 當(dāng)然如果你這里用了從網(wǎng)站上下載的圖形，就不會(huì)出現(xiàn)這樣的情況，設(shè)置移動(dòng)坐標(biāo)時(shí)橫坐標(biāo)按照光標(biāo)的坐標(biāo)即可。

最終預(yù)覽鏈接：https://s2r02p.axshare.com

04 優(yōu)缺點(diǎn)分析

優(yōu)點(diǎn)

1. 這樣的交互效果可以節(jié)省用戶切換圖片時(shí)候的點(diǎn)擊次數(shù)，只需要將光標(biāo)放入圖片左右移動(dòng)就可以進(jìn)行切換圖片。
2. 如果兩張圖片之間有對(duì)比或者其他聯(lián)系更容易讓用戶將兩張圖片進(jìn)行視覺(jué)對(duì)比操作，不需要頻繁地切換。
3. 不需要將圖片分開(kāi)放置，節(jié)省網(wǎng)頁(yè)制作的空間， 給用戶簡(jiǎn)潔的交互體驗(yàn)感。

缺點(diǎn)

1. 交互效果可能只適用于對(duì)圖片的展示，交互功能的延展性較弱，比如對(duì)不同圖片內(nèi)的icon設(shè)置單擊跳轉(zhuǎn)鏈接的交互效果.
2. 該交互效果圖片切換的數(shù)量有限，交互體驗(yàn)隨著圖片的增加可能會(huì)下降，畢竟用戶不想一直通過(guò)移動(dòng)光標(biāo)的方式來(lái)切換到自己想要的圖片，這樣的情況更適用鼠標(biāo)點(diǎn)擊和banner輪播的混合切換效果.

05 總結(jié)

現(xiàn)如今，我們?cè)诨ヂ?lián)網(wǎng)上看到的圖片的切換效果是層出不窮的，例如：點(diǎn)擊切換，滑動(dòng)切換，自動(dòng)輪播切換等等。每一種切換效果的存在都有它的理由，其目的都是為增加用戶的搜尋效率和交互體驗(yàn)，設(shè)計(jì)師需要結(jié)合具體情況給出不同的切換交互效果。

這就是今天小魚(yú)給大家?guī)?lái)的光標(biāo)移動(dòng)切換效果，趕快動(dòng)手試一下吧。

本文由 @Zia 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。

題圖來(lái)自Unsplash，基于CC0協(xié)議。