Axure |導航條的實現

使用Axure RP 9 製作導航條功能

疫情期間,學學Axure,爲以後能將常規數據功能實現產品化準備。

參照物

右側導航條在拖動鼠標上下滑動時,右側的導航欄目是沒有變化的,此外點擊導航欄中的按鈕,也是不會改變導航欄的位置。現在來模仿下吧

Axure中的操作

新建page頁面

新建page 頁面

製作頁面和導航頁

簡單拖拽矩形框,製作出基本模型。
demo樣式圖

設置交互名稱

點擊主題1,主題2,主題3,主題4,分別設置交互名稱

點擊主題1的方框,在交互中填寫名稱“主題1”,其它類似操作

左側導航條與內容綁定


點擊問題一,在交互中選擇“單擊時”,在空白位置點擊,會跳出“交互編輯器”,選擇“滾動到元件”,

選擇要跳轉的位置,在設置動作中,動畫爲線性。
在這裏插入圖片描述

依次操作問題二,問題三,問題四,就將導航條與內容綁定了。

將導航條轉爲動態面板

框選住導航欄,鼠標右鍵,選擇“轉換爲動態面板”
在這裏插入圖片描述

發佈,看效果

點擊 “發佈”—>“預覽”
在這裏插入圖片描述

就簡單的實現了導航條元件與組件的綁定。待以後有更爲詳細的,再來分享。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章