Axure教程：跟隨鼠標(biāo)移動的導(dǎo)航菜單特效

9 評論 12882 瀏覽 68 收藏 4 分鐘

本篇教程將展示如何使用Axure制作一個可以跟隨鼠標(biāo)移動導(dǎo)航菜單特效，enjoy~

一、最終效果

二、制作過程

我們先了解一下本教程中用到的元素：菜單按鈕+菜單背景+跟隨背景移動的色塊。

下面我們開始制作，首先將菜單按鈕+菜單背景+跟隨背景移動的色塊排列至固定位置。

如下圖所示：

在這里大家可能發(fā)現(xiàn)：同時出現(xiàn)了三個藍(lán)色背景塊，我們這么做，主要是為了方便記錄鼠標(biāo)移動后色塊移動的位置。

A：225×200 / B：385×200 / C：515×200。

記錄完成后，我們只保留第一個藍(lán)色背景塊，刪除其他的；并且將藍(lán)色背景的原件名稱定義為“背景”。

下一步，我們開始制作交互操作。

選擇“HOME”按鈕，在右側(cè)交互欄，雙擊“鼠標(biāo)移入時”，按下圖設(shè)置，這里需要注意一點，“移動”選項需要選擇“絕對位置”，坐標(biāo)值按照我們記錄的錄入，X：225 / Y：200。

使用同樣的方法，對“order”&“account”2個按鈕進(jìn)行設(shè)置，并且將坐標(biāo)值分別設(shè)置為X：385 / Y：200 和 X：515 / Y：200。

完成上述設(shè)置后，我們已經(jīng)實現(xiàn)了鼠標(biāo)移動會出現(xiàn)跟隨的背景色塊功能。

下一步，我們來設(shè)置點擊后的圓角特效。首選選擇藍(lán)色色塊，在右側(cè)屬性面板，點擊“鼠標(biāo)按下”，在彈出的面板里，勾選“圓角半徑”，將值設(shè)為“50”。

設(shè)置完成后，F(xiàn)5進(jìn)行預(yù)覽，就可以看到最終效果了。

三、源文件下載

https://pan.baidu.com/s/1lRPnYgnEEMEkcoP5dIcpQw

 

作者：ZQZ原型師，專注原型設(shè)計/交互設(shè)計

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

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

更多精彩內(nèi)容，請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
美國物流筆記
美國物流筆記：nmfclist.com
22篇作品 149909總閱讀量
03-276393 瀏覽
營銷體系及產(chǎn)品認(rèn)知提升——360度看營銷系統(tǒng)
05-123851 瀏覽
小宇宙、蜻蜓、荔枝、酷我……哪個平臺的播客最“好聽”？
11-281161 瀏覽
心急翻不了小紅書
09-074190 瀏覽
創(chuàng)業(yè)指南，12種常見融資渠道的優(yōu)缺點及適合階段
05-191479 瀏覽
團(tuán)店模式救得了社區(qū)團(tuán)購嗎？
評論
評論請登錄

  1. 感謝，我想問一下為什么我這個只有第一個可以點到，另外兩個都沒有點擊到，是不是因為絕對位置沒有設(shè)置好？

    回復(fù)

    1. 鼠標(biāo)移出時我那個色塊就回去原來的位置了，這個怎么調(diào)整？

      回復(fù)

    2. 能吧文件共享一下嘛 這樣好判斷問題

      回復(fù)

  2. 很實用

    回復(fù)

    1. 感謝支持！ ?? 歡迎訂閱~

      來自江蘇 回復(fù)

  3. 可以，簡單的交互效果，新人適用

    回復(fù)

    1. 嗯哼~ 很多新入門的小白，很需要這樣的教程。

      來自江蘇 回復(fù)

  4. 不錯，謝謝分享

    回復(fù)

    1. 感謝支持~

      來自美國 回復(fù)