Axure教程:實(shí)現(xiàn)光標(biāo)移動(dòng)切換圖片的效果

0 評(píng)論 3381 瀏覽 4 收藏 7 分鐘

編輯導(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é)議。

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 目前還沒(méi)評(píng)論,等你發(fā)揮!