Axure8.0:標(biāo)簽導(dǎo)航欄

0 評(píng)論 6684 瀏覽 14 收藏 5 分鐘

編輯導(dǎo)語:標(biāo)簽導(dǎo)航欄是常見的產(chǎn)品動(dòng)效,如何用Axure8進(jìn)行制作呢?本文作者對(duì)此做了展示,一起來看看吧。

本次分享的的案例是Axure8.0制作的標(biāo)簽導(dǎo)航欄。

預(yù)覽及下載地址:https://40074m.axshare.com

一、制作原型

1)用兩個(gè)矩形制作一個(gè)LOGO和導(dǎo)航菜單,如圖:

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

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

點(diǎn)擊中繼器進(jìn)入,用一個(gè)矩形制作左側(cè)菜單,如圖:

4)用一個(gè)矩形制作首頁標(biāo)簽,如圖:

5)用中繼器制作一個(gè)標(biāo)簽菜單,如圖:

點(diǎn)擊中繼器進(jìn)入,制作左側(cè)菜單以及關(guān)閉按鈕,如圖:

6)制作一個(gè)動(dòng)態(tài)面板用來切換頁面,如圖:

7)制作一個(gè)框架,選擇框架目標(biāo)為首頁。

二、交互設(shè)置

1)對(duì)菜單中繼器進(jìn)行“每項(xiàng)加載時(shí)”事件設(shè)置,如圖:

點(diǎn)擊中繼器進(jìn)入,對(duì)數(shù)據(jù)菜單進(jìn)行“鼠標(biāo)點(diǎn)擊時(shí)”、“選中時(shí)”以及“取消選中時(shí)”事件進(jìn)行設(shè)置。

2)點(diǎn)擊“首頁”標(biāo)簽,對(duì)其進(jìn)行”鼠標(biāo)點(diǎn)擊時(shí)”事件設(shè)置。

3)對(duì)標(biāo)簽中繼器進(jìn)行“每項(xiàng)加載時(shí)”事件進(jìn)行設(shè)置。

點(diǎn)擊中繼器進(jìn)入,對(duì)“菜單標(biāo)簽”進(jìn)行“鼠標(biāo)點(diǎn)擊時(shí)”和“選中時(shí)“事件設(shè)置。

對(duì)關(guān)閉按鈕進(jìn)行”鼠標(biāo)點(diǎn)擊時(shí)“事件設(shè)置。

 

本文由@qianqianlu 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)許可,禁止轉(zhuǎn)載。

題圖來自 unsplash,基于 CC0 協(xié)議。

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 目前還沒評(píng)論,等你發(fā)揮!