【Axure 教程】中繼器中級教程-左側導航

Sam
4 評論 4759 瀏覽 1 收藏 4 分鐘

編輯導讀:當工作中需要進行左側導航操作時,我們可以如何使用Axure來進行相關操作呢?本篇文章里,作者利用中繼器為我們展示了左側導航操作,讓我們一起來看一下。

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

所需原件:

  1. 中繼器
  2. 文本標簽

相信經過前面的 6 篇入門教程,大家已經對中繼器有一定的入門了解,那么今天我們進一步學習如何使用中繼器制作我們經常用到的左側導航;

一、導航制作

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

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

二、交互設置

如上圖所示,我們設置【點擊】一級菜單時,切換顯示和隱藏二級菜單,同時在更多選項中設置【推拉】下方組件,預覽即可看到點擊一級菜單時,會展開二級菜單,并使下方的其余菜單往下移動;

三、細節優化

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

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

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

 

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

題圖來自Unsplash,基于CC0協議

給作者打賞,鼓勵TA抓緊創作!
1人打賞
更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 按這種思考,怎么給每個二級菜單加超鏈接呢?

    回復
    1. 需要加判定條件,基于當前文本內容做跳轉,這個如果要做,整體組件就不通用了,而且工作量不小

      回復
  2. 大神,怎么在左側導航名稱左邊加上不同的圖標呢?

    回復
    1. http://www.steinerspaconsulting.com/rp/4586902.html
      可以參考這篇教程,在中繼器里面插入圖片即可

      回復