'Axure技巧分享：個人中心二級菜單的交互實現'

在實現web端的頂部導航頭像個人中心二級導航的原型，很多新手都會忽略Axure自帶的一些高級交互效果，而採用冗餘而複雜的交互事件。那麼，要如何簡單去實現這個效果呢？

在實現web端的頂部導航頭像個人中心二級導航的原型，很多新手都會忽略Axure自帶的一些高級交互效果，而採用冗餘而複雜的交互事件。那麼，要如何簡單去實現這個效果呢？

原型效果如下：

在實現web端的頂部導航頭像個人中心二級導航的原型，很多新手都會忽略Axure自帶的一些高級交互效果，而採用冗餘而複雜的交互事件。那麼，要如何簡單去實現這個效果呢？

原型效果如下：

一、頁面佈局

（1）主要從左側元件庫拉入【圖片】元件，在樣式中設置圓角半徑變為圓形；拉入【文本標籤】作為名稱。三角形則可以採用頂部欄的鋼筆工具勾畫。將上述三個元件組合，命名為：個人中心；

（2）再從左側元件庫拉入四個矩形作為子菜單，寬高為100 X 40；一個矩形作為背景，寬度為100 X 160，併為其背景添加陰影；將上述五個元件組合，命名為：二級導航；並將其設為隱藏。

如下圖所示：

在實現web端的頂部導航頭像個人中心二級導航的原型，很多新手都會忽略Axure自帶的一些高級交互效果，而採用冗餘而複雜的交互事件。那麼，要如何簡單去實現這個效果呢？

原型效果如下：

一、頁面佈局

（1）主要從左側元件庫拉入【圖片】元件，在樣式中設置圓角半徑變為圓形；拉入【文本標籤】作為名稱。三角形則可以採用頂部欄的鋼筆工具勾畫。將上述三個元件組合，命名為：個人中心；

（2）再從左側元件庫拉入四個矩形作為子菜單，寬高為100 X 40；一個矩形作為背景，寬度為100 X 160，併為其背景添加陰影；將上述五個元件組合，命名為：二級導航；並將其設為隱藏。

如下圖所示：

二、新手誤區實現的交互

（1）為【個人中心】添加【鼠標移入時】交互事件

1）二級菜單的顯示：左側元件 —— 顯示/隱藏 —— 勾選二級導航：可見性為顯示，動畫為向下滑動，時間為200毫秒。

如下圖所示：

在實現web端的頂部導航頭像個人中心二級導航的原型，很多新手都會忽略Axure自帶的一些高級交互效果，而採用冗餘而複雜的交互事件。那麼，要如何簡單去實現這個效果呢？

原型效果如下：

一、頁面佈局

（1）主要從左側元件庫拉入【圖片】元件，在樣式中設置圓角半徑變為圓形；拉入【文本標籤】作為名稱。三角形則可以採用頂部欄的鋼筆工具勾畫。將上述三個元件組合，命名為：個人中心；

（2）再從左側元件庫拉入四個矩形作為子菜單，寬高為100 X 40；一個矩形作為背景，寬度為100 X 160，併為其背景添加陰影；將上述五個元件組合，命名為：二級導航；並將其設為隱藏。

如下圖所示：

二、新手誤區實現的交互

（1）為【個人中心】添加【鼠標移入時】交互事件

1）二級菜單的顯示：左側元件 —— 顯示/隱藏 —— 勾選二級導航：可見性為顯示，動畫為向下滑動，時間為200毫秒。

如下圖所示：

2）三角的旋轉：左側元件 —— 旋轉 —— 勾選三角：旋轉為相對位置，角度180fx ，方向為順時針，錨點為中心，動畫線性，時間200毫秒。

如下圖所示：

在實現web端的頂部導航頭像個人中心二級導航的原型，很多新手都會忽略Axure自帶的一些高級交互效果，而採用冗餘而複雜的交互事件。那麼，要如何簡單去實現這個效果呢？

原型效果如下：

一、頁面佈局

（1）主要從左側元件庫拉入【圖片】元件，在樣式中設置圓角半徑變為圓形；拉入【文本標籤】作為名稱。三角形則可以採用頂部欄的鋼筆工具勾畫。將上述三個元件組合，命名為：個人中心；

（2）再從左側元件庫拉入四個矩形作為子菜單，寬高為100 X 40；一個矩形作為背景，寬度為100 X 160，併為其背景添加陰影；將上述五個元件組合，命名為：二級導航；並將其設為隱藏。

如下圖所示：

二、新手誤區實現的交互

（1）為【個人中心】添加【鼠標移入時】交互事件

1）二級菜單的顯示：左側元件 —— 顯示/隱藏 —— 勾選二級導航：可見性為顯示，動畫為向下滑動，時間為200毫秒。

如下圖所示：

2）三角的旋轉：左側元件 —— 旋轉 —— 勾選三角：旋轉為相對位置，角度180fx ，方向為順時針，錨點為中心，動畫線性，時間200毫秒。

如下圖所示：

（2）為【個人中心】添加【鼠標移出時】交互事件

1）二級菜單的顯示：左側元件 —— 顯示/隱藏 —— 勾選二級導航：可見性為隱藏，動畫為向上滑動，時間為200毫秒。

2）三角的旋轉（與上一交互事件相同）

注意：為了使鼠標移入顯示【二級導航】菜單時，二級菜單繼續顯示；移出【二級導航】菜單時，二級菜單隱藏；還需要將【個人中心】的鼠標移入移出交互事件，複製粘貼給二級導航；當然還有的新手，通過添加熱區，來控制鼠標的交互事件，這樣的步驟比較複製冗餘。

而且，當鼠標剛離開【個人中心】，移入【二級菜單】時，會出現上滑下滑的情況，影響用戶體驗。動效如下：

在實現web端的頂部導航頭像個人中心二級導航的原型，很多新手都會忽略Axure自帶的一些高級交互效果，而採用冗餘而複雜的交互事件。那麼，要如何簡單去實現這個效果呢？

原型效果如下：

一、頁面佈局

（1）主要從左側元件庫拉入【圖片】元件，在樣式中設置圓角半徑變為圓形；拉入【文本標籤】作為名稱。三角形則可以採用頂部欄的鋼筆工具勾畫。將上述三個元件組合，命名為：個人中心；

（2）再從左側元件庫拉入四個矩形作為子菜單，寬高為100 X 40；一個矩形作為背景，寬度為100 X 160，併為其背景添加陰影；將上述五個元件組合，命名為：二級導航；並將其設為隱藏。

如下圖所示：

二、新手誤區實現的交互

（1）為【個人中心】添加【鼠標移入時】交互事件

1）二級菜單的顯示：左側元件 —— 顯示/隱藏 —— 勾選二級導航：可見性為顯示，動畫為向下滑動，時間為200毫秒。

如下圖所示：

2）三角的旋轉：左側元件 —— 旋轉 —— 勾選三角：旋轉為相對位置，角度180fx ，方向為順時針，錨點為中心，動畫線性，時間200毫秒。

如下圖所示：

（2）為【個人中心】添加【鼠標移出時】交互事件

1）二級菜單的顯示：左側元件 —— 顯示/隱藏 —— 勾選二級導航：可見性為隱藏，動畫為向上滑動，時間為200毫秒。

2）三角的旋轉（與上一交互事件相同）

注意：為了使鼠標移入顯示【二級導航】菜單時，二級菜單繼續顯示；移出【二級導航】菜單時，二級菜單隱藏；還需要將【個人中心】的鼠標移入移出交互事件，複製粘貼給二級導航；當然還有的新手，通過添加熱區，來控制鼠標的交互事件，這樣的步驟比較複製冗餘。

而且，當鼠標剛離開【個人中心】，移入【二級菜單】時，會出現上滑下滑的情況，影響用戶體驗。動效如下：

三、簡潔高效實現的交互

（1）只需要為【個人中心】添加【鼠標移入時】的交互事件

1）二級菜單的顯示：（注意：需要將“更多選項”設為“彈出效果”）左側元件 —— 顯示/隱藏 —— 勾選二級導航：可見性為顯示，動畫為向下滑動，時間為200毫秒，更多選項設為彈出效果。

如下圖所示：

在實現web端的頂部導航頭像個人中心二級導航的原型，很多新手都會忽略Axure自帶的一些高級交互效果，而採用冗餘而複雜的交互事件。那麼，要如何簡單去實現這個效果呢？

原型效果如下：

一、頁面佈局

（1）主要從左側元件庫拉入【圖片】元件，在樣式中設置圓角半徑變為圓形；拉入【文本標籤】作為名稱。三角形則可以採用頂部欄的鋼筆工具勾畫。將上述三個元件組合，命名為：個人中心；

（2）再從左側元件庫拉入四個矩形作為子菜單，寬高為100 X 40；一個矩形作為背景，寬度為100 X 160，併為其背景添加陰影；將上述五個元件組合，命名為：二級導航；並將其設為隱藏。

如下圖所示：

二、新手誤區實現的交互

（1）為【個人中心】添加【鼠標移入時】交互事件

1）二級菜單的顯示：左側元件 —— 顯示/隱藏 —— 勾選二級導航：可見性為顯示，動畫為向下滑動，時間為200毫秒。

如下圖所示：

2）三角的旋轉：左側元件 —— 旋轉 —— 勾選三角：旋轉為相對位置，角度180fx ，方向為順時針，錨點為中心，動畫線性，時間200毫秒。

如下圖所示：

（2）為【個人中心】添加【鼠標移出時】交互事件

1）二級菜單的顯示：左側元件 —— 顯示/隱藏 —— 勾選二級導航：可見性為隱藏，動畫為向上滑動，時間為200毫秒。

2）三角的旋轉（與上一交互事件相同）

注意：為了使鼠標移入顯示【二級導航】菜單時，二級菜單繼續顯示；移出【二級導航】菜單時，二級菜單隱藏；還需要將【個人中心】的鼠標移入移出交互事件，複製粘貼給二級導航；當然還有的新手，通過添加熱區，來控制鼠標的交互事件，這樣的步驟比較複製冗餘。

而且，當鼠標剛離開【個人中心】，移入【二級菜單】時，會出現上滑下滑的情況，影響用戶體驗。動效如下：

三、簡潔高效實現的交互

（1）只需要為【個人中心】添加【鼠標移入時】的交互事件

1）二級菜單的顯示：（注意：需要將“更多選項”設為“彈出效果”）左側元件 —— 顯示/隱藏 —— 勾選二級導航：可見性為顯示，動畫為向下滑動，時間為200毫秒，更多選項設為彈出效果。

如下圖所示：

2）三角的旋轉（與上述交互事件一致）

（2）還需要為【二級導航】添加【隱藏時】，三角旋轉的交互事件。直接將上述的旋轉事件複製粘貼就行。

四、預覽效果

作者：火星人～艾斯，公眾號：艾斯的Axure峽谷

本文由 @火星人～艾斯 原創發佈於人人都是產品經理。未經許可，禁止轉載

題圖來自Unsplash，基於CC0協議