本文是關于在Axure8.0中，如何去仿制“人人都是PM”首頁導航，一起來看看~

原效果圖：

我的電腦屏幕分辯率是1366*768，所以在這里取可視區(qū)為1345，故拖入矩形設置寬為1345，截屏測量得到“人人都是PM”一級導航的高為60，故矩形的高設置為60。 然后給導航背景條添加陰影X為1，y為2，再根據(jù)測量的LOGO位置將下載的LOGO放入到導航，同理添加導航前三項文字，以及“分類瀏覽”右側的圖標（在這里我使用的是圖片）

導航設計.png

由效果圖知道，當鼠標移入導航的文字時會下方出現(xiàn)藍色的線條，在這里實現(xiàn)的方法是對矩形下邊框進行顯示隱藏。

設置初始狀態(tài)下邊框為四邊不可見：

導航樣式.png

設置交互樣式：

交互樣式.png

首頁一級導航的要點在于：鼠標移入導航項可以顯示子菜單，且鼠標可以移入子菜單，移出子菜單和導航項時則隱藏子菜單，這里以第二項“分類瀏覽”為例。

設計子菜單，并轉換為動態(tài)面板。

為了實現(xiàn)移出子菜單時隱藏子菜單的效果，所以在子菜單的動態(tài)面板下放置一個熱區(qū)，熱區(qū)的上邊距和子菜單一定要保持一致且寬高要大于子菜單（該熱區(qū)是為了設置鼠標從子菜單移入熱區(qū)時能隱藏子菜單），再設置面板和熱區(qū)在默認情況下為隱藏狀態(tài)

子菜單.png

設置分類瀏覽的的鼠標移入事件，在鼠標移入時將“分類瀏覽”右側的圖標設置為打開狀態(tài)的圖片，且設置子菜單和熱區(qū)為顯示狀態(tài)。

改變列表圖標.png

顯示面板.png

最后就是設置鼠標移出子菜單和導航項時隱藏子菜單的效果。因為有下面兩種狀態(tài)，所以不能直接在導航項設置移出隱藏子菜單的動作，在這里采用的辦法是給導航項下面加一個矩形（或熱區(qū)），類似于上述“子菜單”下的熱區(qū)，下邊距和“導航項”必須保持一致，且寬度和高度比導航項大。（為了讓鼠標移入該矩形或熱區(qū)時才隱藏子菜單，而不影響鼠標移入子菜單時面板的狀態(tài)）

• 情況一：鼠標移出導航項進入子菜單，此時鼠標移出導航項子菜單是顯示狀態(tài)；
• 情況二：鼠標移出導航項不進入子菜單，此時鼠標移出導航項子菜單是隱藏狀態(tài)。

綜上，需要讓鼠標移入子菜單仍然保持顯示狀態(tài)則設置的動作如下:

• 在情況一時，鼠標移入子菜單下的矩形或熱區(qū)才隱藏子菜單；
• 在情況二時，鼠標移入導航項下的熱區(qū)才隱藏子菜單。

子菜單面板隱藏.png

最后考慮到鼠標可能移出的方向有以下幾個，所以除了上述兩個隱藏事件，還需要給導航左右兩項設置移入時隱藏子菜單的動作。

隱藏效果分析.png

補充.png

套用上述的方法就可以實現(xiàn)一級導航的效果了，其中還添加了“測試”按鈕，用于測試登錄狀態(tài)下導航的顯示效果（注冊、登錄按鈕隱藏，顯示消息和頭像），這部分其實就是動態(tài)面板的狀態(tài)改變。

另外二級導航的效果也比較簡單，類比上述交互樣式的鼠標懸停以及“鼠標移入”時控制邊框顯示隱藏就可實現(xiàn)二級導航的效果，最終效果如圖：

未登錄狀態(tài)下，鼠標移入一級導航下的子菜單：

一級導航未登錄狀態(tài)效果.png

登錄狀態(tài)下，鼠標懸停在二級導航：

二級導航登錄狀態(tài)效果.png

總結：

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

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