摘要：在PC端的產(chǎn)品中我們會常常見到滑動式菜單，當(dāng)鼠標(biāo)移入菜單上方，向下或向右自動滑動彈出子菜單，當(dāng)頁面信息層級較多或功能較多時，在產(chǎn)品設(shè)計時經(jīng)常會用到這種滑動式菜單。今天就和大家分享如下制作滑動式菜單的交互原型。如下圖1為滑動式菜單的示意圖。

圖1-滑動菜單示意圖

元件準(zhǔn)備

首先我們利用Axure系統(tǒng)元件完成線框圖的繪制。從元件庫拖動四個矩形至設(shè)計區(qū)域，編輯矩形文本，這四個矩形作為導(dǎo)航欄的一級菜單，分別命名為菜單一、菜單二、菜單三、菜單四。水平等距離分布四個矩形的距離。如圖2所示。

圖2-一級菜單

拖動四個垂直菜單至一級菜單下方，調(diào)整每個菜單項目的寬度與高度，使其與一級菜單的寬高一致。編輯每個子菜單項的文本，四個子菜單分別命名為子菜單1、子菜單2、子菜單3、子菜單4，如圖3所示。將每個子菜單項填充為灰色#D4D4D4，隱藏子菜單。

圖3-子菜單

制作交互

為了視覺上更美觀，我們默認(rèn)將所有菜單項邊框線進行隱藏。將四個一次菜單設(shè)置為為一個選項組，選項組命名為一級菜單。為四個一級菜單設(shè)置選中樣式，選中時填充顏色為#0099FF，文字顏色為白色。為子菜單的每個菜單項設(shè)置鼠標(biāo)懸停樣式，懸停時菜單項填充色為#0079FE，文字顏色為白色。將一級菜單及其對應(yīng)的子菜單分別設(shè)置為組合，四個組合分別命名為導(dǎo)航1、導(dǎo)航2、導(dǎo)航3和導(dǎo)航4。

下面我們開始進行交互設(shè)置，選中菜單一，添加鼠標(biāo)移入事件，將當(dāng)前元件設(shè)置為選中狀態(tài)，向下滑動顯示當(dāng)前菜單的子菜單即子菜單1，隱藏另外三個子菜單，交互設(shè)置如圖4所示。選中組合導(dǎo)航1，添加鼠標(biāo)移出事件，將一級菜單即菜單一設(shè)置為未選中狀態(tài)，隱藏該組導(dǎo)航下的二級子菜單即隱藏子菜單1。交互設(shè)置如圖5所示。

圖4-顯示子菜單

圖5-隱藏子菜單

按照同樣的方法為另外三個一級菜單和導(dǎo)航組合設(shè)置交互效果。交互設(shè)置如圖6所示。

圖6-其他菜單交互

到這里，滑動式菜單交互原型已經(jīng)制作完畢，點擊預(yù)覽在瀏覽器中查看原型。

根據(jù)本案例的設(shè)計思路，其實我們還可以制作向右滑動彈出的交互效果，原型制作原理是一樣的，如果大家有興趣，不妨嘗試制作。

關(guān)注頭條號免費學(xué)習(xí)更多Axure教程，私信可獲取源文件及Axure RP9安裝包。

總結(jié)

以上是生活随笔為你收集整理的axure原型案例_Axure RP9原型案例：制作一个可以滑动的菜单的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。