本文作者將與大家分享：如何使用axure原型工具制作APP中的吸附菜單？

菜單是指引用戶瀏覽網(wǎng)頁或者使用APP的導(dǎo)向，吸附菜單在PC端和移動(dòng)端的設(shè)計(jì)都有存在，它突出了菜單的重要性，它讓菜單時(shí)時(shí)刻刻都在用戶“夠得著”的地方，以讓用戶沒那容易“迷路”。這一章就教大家如何使用axure原型工具制作APP中的吸附菜單。當(dāng)然，網(wǎng)頁中的吸附菜單原理一樣。

第一步：拖拉擺放好相關(guān)的控件

所有控件包括三部分：“手機(jī)殼”圖片、“屏幕”動(dòng)態(tài)面板和“菜單”組合

1、“手機(jī)殼”圖片：就一張圖片，這沒啥好說的；

2、“屏幕”動(dòng)態(tài)面板：271X483，放在“手機(jī)殼”的中間，在state1面板狀態(tài)中放置3條水平線以及一個(gè)動(dòng)態(tài)面板，分別命名為“界限”，“下限”，“上限”和“內(nèi)容”。

（1）“界限”水平線：寬度為271，放在（0，-150）的位置上；

（2）“下限”水平線：寬度為271，放在（0，482）的位置上；

（3）“上限”水平線：寬度為271，放在（0，0）的位置上；

（4）“內(nèi)容”動(dòng)態(tài)面板：271X796，放在（0,0）的位置上，在該動(dòng)態(tài)面板的state1面板狀態(tài)中，頂部放置一張圖片表示banner圖，中間放置三個(gè)矩形表示菜單按鈕，分別為產(chǎn)品，技術(shù)和運(yùn)營，下方放置一些白底矩形表示該頁面主題內(nèi)容。

3、“菜單”組合：于“內(nèi)容”動(dòng)態(tài)面板的state1面板狀態(tài)中的3個(gè)菜單按鈕一樣，直接復(fù)制出來放在“屏幕”頂部即可，初始狀態(tài)記得設(shè)置為隱藏。

第二步：為“內(nèi)容”添加一個(gè)拖動(dòng)時(shí)用例

該用例的條件是：“內(nèi)容”接觸到“界限”的時(shí)候。

該用例的動(dòng)作是：一是顯示“菜單”組合，二是垂直拖動(dòng)“內(nèi)容”動(dòng)態(tài)面板，其中頂部邊界小于等于“上限”的y軸位置，底部邊界大于等于“下限”的y軸位置。

第三步：為“內(nèi)容”添加另一個(gè)拖動(dòng)時(shí)用例

該用例的條件是：“內(nèi)容”未接觸到“界限”的時(shí)候。

該用例的動(dòng)作是：一是隱藏“菜單”組合，二是垂直拖動(dòng)“內(nèi)容”動(dòng)態(tài)面板，其中頂部邊界小于等于“上限”的y軸位置，底部邊界大于等于“下限”的y軸位置。

可以了，點(diǎn)擊預(yù)覽并上下拖動(dòng)屏幕即可以看到效果。同時(shí)也可以隨時(shí)關(guān)注我的個(gè)人博客：http://weidublog.com，因?yàn)楣ぷ鬟^程中有很多這些axure原型設(shè)計(jì)小技巧的例子，所以我會(huì)堅(jiān)持分享下去，希望對(duì)大家有幫助，你們對(duì)我的關(guān)注就是我的動(dòng)力。

效果圖：axure原型設(shè)計(jì)之吸附菜單

附件下載：吸附菜單rp文件

作者：維度。個(gè)人博客：http://weidublog.com/

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

題圖來自 Pexels，基于 CC0 協(xié)議