【Axure 教程】中繼器中級教程-頂部導航

Sam
0 評論 1860 瀏覽 1 收藏 4 分鐘

編輯導語:在日常工作中,經常會用到中繼器進行頂部導航的設計操作,那我們可以如何使用Axure來進行相關操作呢?本篇文章里,作者利用中繼器為我們展示了頂部導航操作,讓我們一起來看一下。

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

所需原件:

  1. 中繼器
  2. 文本標簽

通過上一次的左側導航教程,相信大家已經知道通過中繼器怎么制作左側導航了,今天我們來試試另外的方式,來實現頂部導航吧~

一、導航制作

如上圖所示,拖入 6 個文本標簽,其中一個作為一級導航默認顯示狀態,其余 5 個作為二級導航,且設置成組并默認隱藏狀態。

同時,在中繼器的數據表中進行賦值設置,在這里,我以“N 1”作為一級菜單,“N1_1”作為二級菜單的第一個選項,以此類推來設置其余的 5 個二級菜單。

二、交互設置

如上圖所示,我們設置【鼠標移入】一級菜單時,顯示二級菜單(不同于左側導航),同時在更多選項中設置【彈出效果】,預覽即可看到鼠標移入一級菜單時,會彈出二級菜單,鼠標移出后會自動收起二級菜單。

三、細節優化(同左側導航)

在完成步驟二的交互設置后,我們會發現如果二級菜單為空值,菜單也會展示,這樣就無法達到我們預期的理想狀態,所以需要為二級菜單增加【載入時】如果二級菜單為空值,那么隱藏該菜單,且拉起下方組件,如上圖的設置所示。

此外,我們需要為二級菜單設置一個選中狀態,并在點擊時將該二級菜單設置為選中。

設置完成后,我們選中所有二級菜單并將它們設置為【二級菜單】的選項組,這樣就可以讓我們在做二級菜單的選中時,達到“單選”的效果。

 

本文由@Sam 原創發布于人人都是產品經理,未經許可,禁止轉載。

題圖來自Unsplash, 基于CC0協議。

給作者打賞,鼓勵TA抓緊創作!
更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發揮!