在實(shí)現(xiàn)web端的頂部導(dǎo)航頭像個(gè)人中心二級(jí)導(dǎo)航的原型，很多新手都會(huì)忽略Axure自帶的一些高級(jí)交互效果，而采用冗余而復(fù)雜的交互事件。那么，要如何簡(jiǎn)單去實(shí)現(xiàn)這個(gè)效果呢？

原型效果如下：

一、頁(yè)面布局

（1）主要從左側(cè)元件庫(kù)拉入【圖片】元件，在樣式中設(shè)置圓角半徑變?yōu)閳A形；拉入【文本標(biāo)簽】作為名稱。三角形則可以采用頂部欄的鋼筆工具勾畫。將上述三個(gè)元件組合，命名為：個(gè)人中心；

（2）再?gòu)淖髠?cè)元件庫(kù)拉入四個(gè)矩形作為子菜單，寬高為100 X 40；一個(gè)矩形作為背景，寬度為100 X 160，并為其背景添加陰影；將上述五個(gè)元件組合，命名為：二級(jí)導(dǎo)航；并將其設(shè)為隱藏。

如下圖所示：

二、新手誤區(qū)實(shí)現(xiàn)的交互

（1）為【個(gè)人中心】添加【鼠標(biāo)移入時(shí)】交互事件

1）二級(jí)菜單的顯示：左側(cè)元件 —— 顯示/隱藏 —— 勾選二級(jí)導(dǎo)航：可見(jiàn)性為顯示，動(dòng)畫為向下滑動(dòng)，時(shí)間為200毫秒。

如下圖所示：

2）三角的旋轉(zhuǎn)：左側(cè)元件 —— 旋轉(zhuǎn) —— 勾選三角：旋轉(zhuǎn)為相對(duì)位置，角度180fx ，方向?yàn)轫槙r(shí)針，錨點(diǎn)為中心，動(dòng)畫線性，時(shí)間200毫秒。

如下圖所示：

（2）為【個(gè)人中心】添加【鼠標(biāo)移出時(shí)】交互事件

1）二級(jí)菜單的顯示：左側(cè)元件 —— 顯示/隱藏 —— 勾選二級(jí)導(dǎo)航：可見(jiàn)性為隱藏，動(dòng)畫為向上滑動(dòng)，時(shí)間為200毫秒。

2）三角的旋轉(zhuǎn)（與上一交互事件相同）

注意：為了使鼠標(biāo)移入顯示【二級(jí)導(dǎo)航】菜單時(shí)，二級(jí)菜單繼續(xù)顯示；移出【二級(jí)導(dǎo)航】菜單時(shí)，二級(jí)菜單隱藏；還需要將【個(gè)人中心】的鼠標(biāo)移入移出交互事件，復(fù)制粘貼給二級(jí)導(dǎo)航；當(dāng)然還有的新手，通過(guò)添加熱區(qū)，來(lái)控制鼠標(biāo)的交互事件，這樣的步驟比較復(fù)制冗余。

而且，當(dāng)鼠標(biāo)剛離開(kāi)【個(gè)人中心】，移入【二級(jí)菜單】時(shí)，會(huì)出現(xiàn)上滑下滑的情況，影響用戶體驗(yàn)。動(dòng)效如下：

三、簡(jiǎn)潔高效實(shí)現(xiàn)的交互

（1）只需要為【個(gè)人中心】添加【鼠標(biāo)移入時(shí)】的交互事件

1）二級(jí)菜單的顯示：（注意：需要將“更多選項(xiàng)”設(shè)為“彈出效果”）左側(cè)元件 —— 顯示/隱藏 —— 勾選二級(jí)導(dǎo)航：可見(jiàn)性為顯示，動(dòng)畫為向下滑動(dòng)，時(shí)間為200毫秒，更多選項(xiàng)設(shè)為彈出效果。

如下圖所示：

2）三角的旋轉(zhuǎn)（與上述交互事件一致）

（2）還需要為【二級(jí)導(dǎo)航】添加【隱藏時(shí)】，三角旋轉(zhuǎn)的交互事件。直接將上述的旋轉(zhuǎn)事件復(fù)制粘貼就行。

四、預(yù)覽效果

作者：火星人～艾斯，公眾號(hào)：艾斯的Axure峽谷

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

題圖來(lái)自Unsplash，基于CC0協(xié)議