今天給大家分享如何制作頂部導航欄，enjoy~

當設計者使用導航或者自定義一些導航結構時，請注意：

• 盡可能提供標識、上下文線索，避免用戶迷路；
• 保持導航樣式和行為一致或者減少導航數量，降低用戶學習成本；
• 盡可能減少頁面間的跳轉（例如：一個常見任務需要多個頁面跳轉時，請減少至一到兩次），讓用戶移動距離保持簡短。
• 一級類目建議在 2-7 個以內。標題長度長 2-6 個。

一、交互方式分析

（1）當鼠標的懸浮、點擊選中時，導航字體顏色由【淺灰色】變為【白色】。

（2）鼠標點擊選中時，高亮條移動到相應位置，且由小變大。

（3）鼠標移入個人中心，【子菜單】先下拉彈出顯示；鼠標移出個人中心，【子菜單】上拉隱藏；

二、交互講解一：鼠標的懸浮、點擊選中

（1）選頂部欄所有菜單選項，在其【屬性】欄中的交互樣式，設置鼠標懸浮和選中時，字體顏色的變化，顏色設置為白色#ffffff。

（2）設置選項組名稱，暫命名為：頂部；（這是為了實現導航只選中一個的效果）

三、交互講解二：高亮條移動

1、高亮條的移動，主要是利用元件的隱藏位移及顯示；

2、選中某一個導航菜單，選擇【鼠標點擊時】交互事件，添加隱藏事件，勾選【高亮】；

3、設置【高亮】矩形的寬度尺寸為2，錨點為中心，主要是使其變??；如下：

4、移動【高亮】至絕對位置，X軸[[This.x+10]]、Y軸[[Target.y]]；如下圖所示：

5、添加等待事件，事件110毫秒；

6、設置【高亮】矩形的寬度尺寸為80，主要是使其變大；同上；

7、設置當前元件This為選中狀態true；

詳細交互事件如下所示：

四、交互講解三：個人中心子菜單彈出

選中【個人中心】，添加【鼠標移入時】事件：選中【子導航】，可見性設置為【顯示】效果，動畫為：向下滑動，時間：200秒，切記，更多選項為：彈出效果。

如下所示：

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

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

題圖來自Unsplash，基于CC0協議