Axure:PC端常見圖片展位懸停效果(一)

16 評論 15309 瀏覽 75 收藏 7 分鐘

本文我來嘗試著用axure,將懸停時放大的效果做一下,一起來看看~

為了增加鼠標移入時的響應,一般會在鼠標手勢之外另外再加一些特殊的效果突出體現,目的是告之用戶“你已經碰到我了”。

常見的效果有以下幾種:

1、懸停時圖片放大

圖1:woshipm首頁輪播右側的圖片展位

圖2:36Kr列表頁圖片展位

2、懸停時邊框突出(或增加陰影)

圖3:優酷視頻列表 – 懸停時有陰影

圖4:當當網商品列表 – 懸停時連線變化

3、懸停時浮層隱現(包括一些特殊的動畫)

圖5:woshipm首頁的輪播圖

圖6:土豆網的視頻列表

這一篇我們先來嘗試著用axure,將懸停時放大的效果做一下。

所需要元件:

  • 動態面板 * 1
  • 圖片元件 * 1

涉及交互事件(用例):

  • 鼠標移入時
  • 鼠標移出時

涉及動作:設置尺寸。

涉及動畫:線性。

一、最簡達成目標

1. 新建一張圖片,將其命名為“圖片”(養成為元件命名的好習慣)

直接將圖片拖入到編輯界面;或者拖入一個圖片元件再雙擊導入圖片。

2. 添加交互,達到以下效果

  • 鼠標移入時,圖片放大;
  • 鼠標移出時,圖片復原。

那么,就需要設置兩個用例:鼠標移入時、鼠標移出時,可參照下圖進行相應設置:

注意:

  1. 放大設置的寬高要比默認的寬高大,要不然看不到效果—— 示例中圖片元件默認為400*400,設置放大后的尺寸為450*450。
  2. (兩個動作的)錨點要選擇為“中心”,即保證中心不動,默認為“左上角”。
  3. 可適當選擇使用動畫,增加一些效果—— 該階段原型暫未使用動畫。

好,現在預覽先看一下效果:

可以看到,鼠標移入移出時,圖片(尺寸)放大或還原的效果已經達到。但是,我們上文中提到的效果,圖片并沒有跑出展位的區域。所以,我們還要給這個圖片,加一個展示區域 —— 動態面板。

3. 新建一個動態面板,設置寬高與圖片相同,命名為“1”

示例原型為400*400

4. 圖片元件“圖片”剪切粘貼至動態面板“1”中

OK,再來預覽一下效果,正常的情況應該如下圖:

二、優化之處

(1)設置尺寸時,我們是使用的是純數字 —— 絕對值。當我們需要使用其他圖片時,這個數字很有可能需要重新調整一下(圖片尺寸變了)。

主要的場景:后期維護、復用。

不小心就忘了調整,導致效果出錯(圖片變形)。

此處可以調整為:

a、鼠標移入時:

  • 寬:[[this.width * 1.1]] —— 當前元件寬度的1.1倍
  • 高:[[this.height * 1.1]]?—— 當前元件高度的1.1倍

b、鼠標移出時:

  • 寬:[[this.width / 1.1]] —— 當前元件寬度除于1.1(恢復后放大前)
  • 高:[[this.height / 1.1]]?—— 當前元件高度除于1.1(恢復后放大前)

(2)增加一定的動畫,將圖片放大/縮小效果更平滑一些。

此處選擇的動畫是:線性 500ms完成到放大/縮小后的尺寸。

以上2個優化點的設置位置如下圖:

優化后的效果:

是不是看上去更舒服一些了?!

以上,圖片懸停放大的制作基本完成,預覽一下自己的RP,看看效果出來了沒?

有問題請留言!希望大家閱文過程中發現問題,及時指出,大膽懷疑,我都會一一回復的。

后續動態預告

  1. 本文提到的另外兩種預覽效果如何實現;
  2. 中繼器制作3級菜單。

相關閱讀

Axure中繼器:2級菜單最簡潔的打開方式

Axure:一個簡單的進度條,了解“觸發事件”動作

Axure:菊花轉(頁面加載動畫)如何制作

Axure:巧用交互樣式實現多tab切換效果

 

本文由 @牧逸 原創發布于人人都是產品經理。未經許可,禁止轉載

題圖來自 Pexels,基于 CC0 協議

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 話說為什么會要動態面板呢?還是不理解 ??

    來自湖北 回復
    1. 用動態面板能固定顯示區域,要不然圖片放大之后,其顯示區域是不是也放大了?效果就有差別了啊

      來自浙江 回復
  2. 話說,鼠標移出時尺寸應該是原來的尺寸吧,不能除以1.1,不然圖片會變小的。

    來自江蘇 回復
    1. 一乘一除,最后結果還是1,怎么會變小呢?

      來自浙江 回復
    2. 我明白了,我的鼠標交互做在動態面板上,所以this實際上是動態面板的大小。你的是做在圖片上的,所以要在變大1.1倍的基礎上再除回去。

      來自江蘇 回復
    3. 對的。要放到圖片上面
      再說一下,實際操作中,我是先把圖片做好,然后再將圖片轉為動態面板的。這樣省事一些。
      但要注意,此時的動態面板的尺寸是自適應的,要調整為非自適應尺寸,以下兩步都可以實現
      1、修改動態面板尺寸,再改回來
      2、點擊動態面板,右側屬性,找到那個勾選,去掉即可

      來自浙江 回復
  3. 為什么我做的。。只放大不縮小。。。

    來自河北 回復
    1. https://quqi.com/s/787633/YWVETayu0I5iQTKL/67
      原型地址在這里,可以下載下來對比下,看看哪里錯了

      來自浙江 回復
    2. 首先感謝您的解惑,不過我發現出問題的原因是您文章里的[[this.height \ 1.1]] 是不對的 ,您原型上函數是[[this.height / 1.1]],一個\ 和 / 可能您寫文章的時候疏忽了 ?

      來自河北 回復
    3. 我靠,這個鍋必須背。當時一邊寫一邊畫原型的發現錯了(直接復制過去的),只改了原型,這里沒改。相當抱歉,我馬上改一下

      來自浙江 回復
  4. 在為圖片添加交互的時候,提前把動畫選為 線型 延遲500毫秒也行

    回復
  5. 簡單翔實,為作者點贊

    回復
  6. 忌日快樂……大晚上看到還真是刺激了一把??

    回復
    1. 只是一個截圖,少俠不必較真

      來自浙江 回復
  7. 是否可以給個安裝包????網上都不靠譜,經常閃退!!1306656033@qq.com謝謝!

    回復
  8. 新手必看

    回復