編輯導(dǎo)讀：當(dāng)工作中需要進(jìn)行左側(cè)導(dǎo)航操作時(shí)，我們可以如何使用Axure來(lái)進(jìn)行相關(guān)操作呢？本篇文章里，作者利用中繼器為我們展示了左側(cè)導(dǎo)航操作，讓我們一起來(lái)看一下。

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

所需原件：

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

相信經(jīng)過(guò)前面的 6 篇入門(mén)教程，大家已經(jīng)對(duì)中繼器有一定的入門(mén)了解，那么今天我們進(jìn)一步學(xué)習(xí)如何使用中繼器制作我們經(jīng)常用到的左側(cè)導(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)推來(lái)設(shè)置其余的 5 個(gè)二級(jí)菜單；

二、交互設(shè)置

如上圖所示，我們?cè)O(shè)置【點(diǎn)擊】一級(jí)菜單時(shí)，切換顯示和隱藏二級(jí)菜單，同時(shí)在更多選項(xiàng)中設(shè)置【推拉】下方組件，預(yù)覽即可看到點(diǎn)擊一級(jí)菜單時(shí)，會(huì)展開(kāi)二級(jí)菜單，并使下方的其余菜單往下移動(dòng)；

三、細(xì)節(jié)優(yōu)化

在完成步驟二的交互設(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é)議