菜單是指引用戶瀏覽網(wǎng)頁(yè)或者使用APP的導(dǎo)向，吸附菜單在PC端和移動(dòng)端的設(shè)計(jì)都有存在，它突出了菜單的重要性，它讓菜單時(shí)時(shí)刻刻都在用戶“夠得著”的地方，以讓用戶沒那容易“迷路”。這一章就教大家如何使用axure原型工具制作APP中的吸附菜單，當(dāng)然，網(wǎng)頁(yè)中的吸附菜單原理一樣。
第一步：拖拉擺放好相關(guān)的控件
所有控件包括三部分：“手機(jī)殼”圖片、“屏幕”動(dòng)態(tài)面板和“菜單”組合
1、“手機(jī)殼”圖片：就一張圖片，這沒啥好說(shuō)的；
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)營(yíng)，下方放置一些白底矩形表示該頁(yè)面主題內(nèi)容。
3、“菜單”組合：于“內(nèi)容”動(dòng)態(tài)面板的state1面板狀態(tài)中的3個(gè)菜單按鈕一樣，直接復(fù)制出來(lái)放在“屏幕”頂部即可，初始狀態(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)楣ぷ鬟^(guò)程中有很多這些axure原型設(shè)計(jì)小技巧的例子，所以我會(huì)堅(jiān)持分享下去，希望對(duì)大家有幫助，你們對(duì)我的關(guān)注就是我的動(dòng)力。
附件下載：吸附菜單rp文件
作者：維度
轉(zhuǎn)載請(qǐng)注明出處：http://weidublog.com/index.php/2017/03/29/269/
