中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

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

01 概述

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

02 材料準備

Axure PR 9.0

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

03 制作步驟

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

2、但是如何實現讓圖片B跟隨光標一點點展開呢，我們需要把圖片B給設置為動態面板，取名屏幕。

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

3、最關鍵的步驟來了，我們需要設置一個感應區域，這樣光標在移入這里面的時候，動態面板可以根據光標的橫坐標X值展開。

于是我們添加一個與圖片A相同長寬的熱區并且置于頂層，對熱區設置的交互效果為當鼠標移動時，設置動態面板的尺寸。

注意這里的錨點應該設置為左側，因為需要它從左側展開， 我們只需要改變動態面板的寬度為光標的X坐標減去動態面板它的X的坐標就能得出它展開的寬度，效果圖如下，一個簡單的交互小效果就出來了。

4、另外如果想要添加線段作為翻頁分割線，設置一條線段放在圖片的最左側，在感應區設置線段的交互效果。

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

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

什么意思呢？就是當你預覽的時候，即使視覺上看，所識別的坐標點雖然重合但是坐標卻不是相同的。

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

最終預覽鏈接：https://s2r02p.axshare.com

04 優缺點分析

優點

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

缺點

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

05 總結

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

這就是今天小魚給大家帶來的光標移動切換效果，趕快動手試一下吧。

本文由 @Zia 原創發布于人人都是產品經理，未經作者許可，禁止轉載。

題圖來自Unsplash，基于CC0協議。