天天看點

Axure8.0:标簽導航欄

本次分享的的案例是Axure8.0制作的标簽導航欄。

Axure8.0:标簽導航欄

預覽及下載下傳位址:​​https://40074m.axshare.com/​​

一、制作原型

1)用兩個矩形制作一個LOGO和導航菜單,如圖:

Axure8.0:标簽導航欄

2)用兩個矩形制作兩個菜單,如圖:

Axure8.0:标簽導航欄

3)用中繼器制作菜單,如圖:

Axure8.0:标簽導航欄

點選中繼器進入,用一個矩形制作左側菜單,如圖:

Axure8.0:标簽導航欄

4)用一個矩形制作首頁标簽,如圖:

Axure8.0:标簽導航欄

5)用中繼器制作一個标簽菜單,如圖:

Axure8.0:标簽導航欄

點選中繼器進入,制作左側菜單以及關閉按鈕,如圖:

Axure8.0:标簽導航欄

6)制作一個動态面闆用來切換頁面,如圖:

Axure8.0:标簽導航欄

7)制作一個架構,選擇架構目标為首頁。

Axure8.0:标簽導航欄

二、互動設定

1)對菜單中繼器進行“每項加載時”事件設定,如圖:

Axure8.0:标簽導航欄

點選中繼器進入,對資料菜單進行“滑鼠點選時”、“選中時”以及“取消選中時”事件進行設定。

Axure8.0:标簽導航欄

2)點選“首頁”标簽,對其進行”滑鼠點選時”事件設定。

Axure8.0:标簽導航欄

3)對标簽中繼器進行“每項加載時”事件進行設定。

Axure8.0:标簽導航欄

點選中繼器進入,對“菜單标簽”進行“滑鼠點選時”和“選中時“事件設定。

繼續閱讀