編輯導(dǎo)語(yǔ)：在日常工作中，經(jīng)常會(huì)用到中繼器進(jìn)行頂部導(dǎo)航的設(shè)計(jì)操作，那我們可以如何使用Axure來(lái)進(jìn)行相關(guān)操作呢？本篇文章里，作者利用中繼器為我們展示了頂部導(dǎo)航操作，讓我們一起來(lái)看一下。

原型展示：https://hb04g4.axshare.com

所需原件：

1. 中繼器
2. 文本標(biāo)簽

通過(guò)上一次的左側(cè)導(dǎo)航教程，相信大家已經(jīng)知道通過(guò)中繼器怎么制作左側(cè)導(dǎo)航了，今天我們來(lái)試試另外的方式，來(lái)實(shí)現(xiàn)頂部導(dǎo)航吧~

一、導(dǎo)航制作

如上圖所示，拖入 6 個(gè)文本標(biāo)簽，其中一個(gè)作為一級(jí)導(dǎo)航默認(rèn)顯示狀態(tài)，其余 5 個(gè)作為二級(jí)導(dǎo)航，且設(shè)置成組并默認(rèn)隱藏狀態(tài)。

同時(shí)，在中繼器的數(shù)據(jù)表中進(jìn)行賦值設(shè)置，在這里，我以“N 1”作為一級(jí)菜單，“N1_1”作為二級(jí)菜單的第一個(gè)選項(xiàng)，以此類推來(lái)設(shè)置其余的 5 個(gè)二級(jí)菜單。

二、交互設(shè)置

如上圖所示，我們?cè)O(shè)置【鼠標(biāo)移入】一級(jí)菜單時(shí)，顯示二級(jí)菜單（不同于左側(cè)導(dǎo)航），同時(shí)在更多選項(xiàng)中設(shè)置【彈出效果】，預(yù)覽即可看到鼠標(biāo)移入一級(jí)菜單時(shí)，會(huì)彈出二級(jí)菜單，鼠標(biāo)移出后會(huì)自動(dòng)收起二級(jí)菜單。

三、細(xì)節(jié)優(yōu)化（同左側(cè)導(dǎo)航）

在完成步驟二的交互設(shè)置后，我們會(huì)發(fā)現(xiàn)如果二級(jí)菜單為空值，菜單也會(huì)展示，這樣就無(wú)法達(dá)到我們預(yù)期的理想狀態(tài)，所以需要為二級(jí)菜單增加【載入時(shí)】如果二級(jí)菜單為空值，那么隱藏該菜單，且拉起下方組件，如上圖的設(shè)置所示。

此外，我們需要為二級(jí)菜單設(shè)置一個(gè)選中狀態(tài)，并在點(diǎn)擊時(shí)將該二級(jí)菜單設(shè)置為選中。

設(shè)置完成后，我們選中所有二級(jí)菜單并將它們?cè)O(shè)置為【二級(jí)菜單】的選項(xiàng)組，這樣就可以讓我們?cè)谧龆?jí)菜單的選中時(shí)，達(dá)到“單選”的效果。

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

題圖來(lái)自Unsplash, 基于CC0協(xié)議。