起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識Axure 8.0：移動端菜單吸附
文章分享了制作移動端廣泛應用的菜單吸附設計的一個操作過程，希望對大家有所幫助。
如今移動互聯網時代愈演愈烈，微信、QQ等社交軟件的大幅度應用，加之共享經濟的推動，用戶使用移動端（手機+pad）的頻度越來越大，這就要求產品在滿足用戶需求的前提下，增強用戶體驗，讓用戶發自內心的覺得這個產品好用、實用、方便操作…這樣才能更大程度的留住用戶。
下面是移動端廣泛應用的菜單吸附設計，希望對大家有所幫助，PC端與移動端類似。
效果圖預覽：Axure 8.0：移動端菜單吸附
第一步：Axure內放置基本的控件
- 手機外殼：一張圖片，可根據個人喜好選擇一款手機的外殼，效果無影響，樓主比較喜歡iPhone6(因為很大)，以下全部尺寸按照iphone6的尺寸進行設置，不再說明
- 屏幕動態面板：跟手機屏幕一樣大小的動態面板，放在手機屏幕正中間，命名為“屏幕”，尺寸：376X667
第二步：設置“屏幕”中“內容”面板中的元素
在“屏幕”動態面板中的state1中放置一個內容動態面板和3條水平線作為界限，命名為“內容”“界限”“上限”“下限”
- 內容：動態面板，置于（0，0）位置，尺寸376X1050，高度必須超過屏幕高度，具體根據實際情況進行設置，可以盡可能高一些，效果明顯；在該動態面板的state1中，頂端放置一張圖片表示banner，中間放置5個矩形框表示菜單，文字隨意設置，下方用占位符表示主要內容
- 界限：水平線，置于（0，-215）位置，尺寸376X1，表示向上拖動的最大邊界
- 上限：水平線，置于（0，0）位置，尺寸376X1，表示原始位置
- 下限：水平線，置于（0，667）位置，尺寸376X1，表示向下拖動的最大邊界
- 頂端菜單：將之前做好的菜單復制粘貼，置于（0，0）位置，初始狀態設置為“隱藏”
第三步：為“內容”添加第一個交互用例
移動端操作基本為拖動、滑動
用例條件：“內容”接觸到“界限”
操作：垂直拖動“內容”動態面板，使頂部邊界小于等于“上限”的y軸位置，底部邊界大于等于“下限”的y軸位置
執行動作：顯示“頂端菜單”
條件設置：如果“內容”接觸到“界限”
由于“上限”和“下限”的位置都已經固定，因此直接輸入相應數值即可，如果存在參數或者變量，需點擊“fx”設置相應條件
第四步：為“內容”添加第二個交互用例
用例條件：“內容”未接觸到“界限”
操作：垂直拖動“內容”動態面板，使頂部邊界小于等于“上限”的y軸位置，底部邊界大于等于“下限”的y軸位置
執行動作：隱藏“頂端菜單”
至此，我們已經做完了菜單吸附交互，可以點擊預覽效果啦。
本文由 @我可白了呢 原創發布于人人都是產品經理。未經許可，禁止轉載。
題圖來自PEXELS，基于CC0協議
愿你善其身 愿你遇良人
評論
并沒有達到移動的效果
可以提供下原型文件么？？謝謝~~~ ??
?( ′???` )比心