【Axure教程】:導航欄展開與收縮

4 評論 10775 瀏覽 38 收藏 5 分鐘

編輯導語:無論在什么頁面,導航欄都起著一個提示的作用,能夠讓用戶第一時間找到自己所需要的欄目。本文以Axure為例,從三點講解如何制作與使用導航欄的展開與伸縮,希望對你有幫助,一起來看看。

本文主要給大家講解一下如何在Axure中制作導航欄的展開與收縮。

本文主要從三點帶大家分析如何使用與制作:

  1. 使用場景
  2. 思路分析
  3. Axure制作

演示效果:https://slegsq.axshare.com

一、使用場景

我們在做一些B端產品項目時,大多的后臺管理系統頁面多為左側或頂部放置導航欄,如果導航欄在一側同時展示會顯得比較繁瑣,所以,使用導航欄的展開與收縮即可合理的將相關的分類放置同一級導航下,這樣既節省了時間又可快速尋找到相應的頁面。

二、思路分析

我們需要先思考Axure如何展示導航欄展開與收縮呢?需要滿足什么條件呢?是否需要顯示隱藏呢?如何劃分多級元件進行分開展示呢?

看到這相比大家會想到一個元件:動態面板。

在Axure中動態面板的使用性是非常高的,接下來我將為大家詳細介紹如何利用動態面板做出我們想要的導航欄~

三、Axure制作

首先咱們先創建一個矩形,參數設置為 長度:256,高度:54,填充顏色:#001529,并去掉該線寬設置為:0,左側邊距:40,點擊右鍵設置選項組并命名:導航欄(參數可根據自身需要設置)。

點擊右鍵設置交互樣式,選擇【選中】設置了填充和字色的樣式,設置后保存,點擊右鍵選擇【轉換為動態面板】(樣式可根據自身需要設置)。

雙擊動態面板復制內部面板分別命名為:導航欄一 合并、導航欄一 展開。選擇【導航欄一 展開】,再復制三個矩形框內部文字描述為(二級導航欄)(樣式可根據自身需要設置)。

以上基礎步驟設置完畢后,接下來我們進行交互設置。

選擇動態面板內【導航欄一 合并】點擊矩形框,交互內容為:單擊時-設置面板狀態-目標:已有的動態面板、STATE:導航欄一 展開、推動和拉動元件。

選擇動態面板內【導航欄一 展開】點擊第一個矩形框,交互內容為:單擊時-設置面板狀態-目標:已有的動態面板、STATE:導航欄一 合并、推動和拉動元件。

選擇動態面板內【導航欄一 展開】點擊第二個矩形框,交互內容為:單擊時-設置選中-當前元件。并分別對下方兩個元件設置同樣交互。

最后一步:選擇已創建的第一個動態面板進行復制兩次依次放置下方,查看預覽演示就完成啦~

希望內容可以幫助到您,會不斷更新內容,大家一起學習~

 

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

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

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 二級導航欄,新增交互,單擊時打開鏈接到別的頁面,就會顯示不正常,跳轉到新的頁面后,左邊的導航欄全部都是折疊的,并且沒有選中的效果。這個怎么處理呢

    來自廣東 回復
    1. 交互時–設置面板狀態–更多選項–推動和拉動原件 下方 然后保存即可

      來自江蘇 回復
  2. 如果是2個一級導航怎么辦

    來自四川 回復
    1. 創建兩個動態面板分開配置

      來自江蘇 回復