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

01 概述

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

02 材料準(zhǔn)備

Axure PR 9.0

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

03 制作步驟

1、首先我們先準(zhǔn)備把兩張圖片中的其中一張(圖片A)給放在底層作為網(wǎng)頁加載時首先看到的圖片，然后我們需要把同樣大小的圖片B重疊在圖片A上面，因為按照交互邏輯，鼠標(biāo)移動的時候圖片B是一點(diǎn)點(diǎn)跟隨光標(biāo)展開的。

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

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

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

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

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

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

這里我們需要注意，由于軟件對線段橫縱坐標(biāo)的識別會不同于圖形，所以不能簡單地用光標(biāo)的橫坐標(biāo)來設(shè)置線段移動過程中的橫坐標(biāo)坐標(biāo)。

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

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

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

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

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

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

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

缺點(diǎn)

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

05 總結(jié)

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

這就是今天小魚給大家?guī)淼墓鈽?biāo)移動切換效果，趕快動手試一下吧。

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

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