今天給大家分享如何制作頂部導(dǎo)航欄，enjoy~

當(dāng)設(shè)計者使用導(dǎo)航或者自定義一些導(dǎo)航結(jié)構(gòu)時，請注意：

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

一、交互方式分析

（1）當(dāng)鼠標(biāo)的懸浮、點(diǎn)擊選中時，導(dǎo)航字體顏色由【淺灰色】變?yōu)椤景咨俊?/p>

（2）鼠標(biāo)點(diǎn)擊選中時，高亮條移動到相應(yīng)位置，且由小變大。

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

二、交互講解一：鼠標(biāo)的懸浮、點(diǎn)擊選中

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

（2）設(shè)置選項(xiàng)組名稱，暫命名為：頂部；（這是為了實(shí)現(xiàn)導(dǎo)航只選中一個的效果）

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

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

2、選中某一個導(dǎo)航菜單，選擇【鼠標(biāo)點(diǎn)擊時】交互事件，添加隱藏事件，勾選【高亮】；

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

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

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

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

7、設(shè)置當(dāng)前元件This為選中狀態(tài)true；

詳細(xì)交互事件如下所示：

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

選中【個人中心】，添加【鼠標(biāo)移入時】事件：選中【子導(dǎo)航】，可見性設(shè)置為【顯示】效果，動畫為：向下滑動，時間：200秒，切記，更多選項(xiàng)為：彈出效果。

如下所示：

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

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

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