起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識Axure原型設計之吸附菜單
本文作者將與大家分享：如何使用axure原型工具制作APP中的吸附菜單？
菜單是指引用戶瀏覽網頁或者使用APP的導向，吸附菜單在PC端和移動端的設計都有存在，它突出了菜單的重要性，它讓菜單時時刻刻都在用戶“夠得著”的地方，以讓用戶沒那容易“迷路”。這一章就教大家如何使用axure原型工具制作APP中的吸附菜單。當然，網頁中的吸附菜單原理一樣。
第一步：拖拉擺放好相關的控件
所有控件包括三部分：“手機殼”圖片、“屏幕”動態面板和“菜單”組合
1、“手機殼”圖片：就一張圖片，這沒啥好說的；
2、“屏幕”動態面板：271X483，放在“手機殼”的中間，在state1面板狀態中放置3條水平線以及一個動態面板，分別命名為“界限”，“下限”，“上限”和“內容”。
（1）“界限”水平線：寬度為271，放在（0，-150）的位置上；
（2）“下限”水平線：寬度為271，放在（0，482）的位置上；
（3）“上限”水平線：寬度為271，放在（0，0）的位置上；
（4）“內容”動態面板：271X796，放在（0,0）的位置上，在該動態面板的state1面板狀態中，頂部放置一張圖片表示banner圖，中間放置三個矩形表示菜單按鈕，分別為產品，技術和運營，下方放置一些白底矩形表示該頁面主題內容。
3、“菜單”組合：于“內容”動態面板的state1面板狀態中的3個菜單按鈕一樣，直接復制出來放在“屏幕”頂部即可，初始狀態記得設置為隱藏。
第二步：為“內容”添加一個拖動時用例
該用例的條件是：“內容”接觸到“界限”的時候。
該用例的動作是：一是顯示“菜單”組合，二是垂直拖動“內容”動態面板，其中頂部邊界小于等于“上限”的y軸位置，底部邊界大于等于“下限”的y軸位置。
第三步：為“內容”添加另一個拖動時用例
該用例的條件是：“內容”未接觸到“界限”的時候。
該用例的動作是：一是隱藏“菜單”組合，二是垂直拖動“內容”動態面板，其中頂部邊界小于等于“上限”的y軸位置，底部邊界大于等于“下限”的y軸位置。
可以了，點擊預覽并上下拖動屏幕即可以看到效果。同時也可以隨時關注我的個人博客：http://weidublog.com，因為工作過程中有很多這些axure原型設計小技巧的例子，所以我會堅持分享下去，希望對大家有幫助，你們對我的關注就是我的動力。
效果圖：axure原型設計之吸附菜單
附件下載：吸附菜單rp文件
作者：維度。個人博客：http://weidublog.com/
本文由 @維度 原創發布于人人都是產品經理。未經許可，禁止轉載
題圖來自 Pexels，基于 CC0 協議
唉，又下載不了