本文是關(guān)于在Axure8.0中，如何去仿制“人人都是PM”首頁導(dǎo)航，一起來看看~

原效果圖：

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

導(dǎo)航設(shè)計.png

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

設(shè)置初始狀態(tài)下邊框?yàn)樗倪叢豢梢姡?/p>

導(dǎo)航樣式.png

設(shè)置交互樣式：

交互樣式.png

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

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

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

子菜單.png

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

改變列表圖標(biāo).png

顯示面板.png

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

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

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

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

子菜單面板隱藏.png

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

隱藏效果分析.png

補(bǔ)充.png

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

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

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

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

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

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

總結(jié)：

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

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