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

一、最終效果

二、制作過程

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

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

如下圖所示：

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

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

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

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

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

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

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

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

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

三、源文件下載

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

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

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

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