文章分享了制作移動端廣泛應(yīng)用的菜單吸附設(shè)計的一個操作過程，希望對大家有所幫助。

如今移動互聯(lián)網(wǎng)時代愈演愈烈，微信、QQ等社交軟件的大幅度應(yīng)用，加之共享經(jīng)濟的推動，用戶使用移動端（手機+pad）的頻度越來越大，這就要求產(chǎn)品在滿足用戶需求的前提下，增強用戶體驗，讓用戶發(fā)自內(nèi)心的覺得這個產(chǎn)品好用、實用、方便操作…這樣才能更大程度的留住用戶。

下面是移動端廣泛應(yīng)用的菜單吸附設(shè)計，希望對大家有所幫助，PC端與移動端類似。

效果圖預(yù)覽：Axure 8.0：移動端菜單吸附

第一步：Axure內(nèi)放置基本的控件

1. 手機外殼：一張圖片，可根據(jù)個人喜好選擇一款手機的外殼，效果無影響，樓主比較喜歡iPhone6(因為很大)，以下全部尺寸按照iphone6的尺寸進行設(shè)置，不再說明
2. 屏幕動態(tài)面板：跟手機屏幕一樣大小的動態(tài)面板，放在手機屏幕正中間，命名為“屏幕”，尺寸：376X667

第二步：設(shè)置“屏幕”中“內(nèi)容”面板中的元素

在“屏幕”動態(tài)面板中的state1中放置一個內(nèi)容動態(tài)面板和3條水平線作為界限，命名為“內(nèi)容”“界限”“上限”“下限”

1. 內(nèi)容：動態(tài)面板，置于（0，0）位置，尺寸376X1050，高度必須超過屏幕高度，具體根據(jù)實際情況進行設(shè)置，可以盡可能高一些，效果明顯；在該動態(tài)面板的state1中，頂端放置一張圖片表示banner，中間放置5個矩形框表示菜單，文字隨意設(shè)置，下方用占位符表示主要內(nèi)容
2. 界限：水平線，置于（0，-215）位置，尺寸376X1，表示向上拖動的最大邊界
3. 上限：水平線，置于（0，0）位置，尺寸376X1，表示原始位置
4. 下限：水平線，置于（0，667）位置，尺寸376X1，表示向下拖動的最大邊界
5. 頂端菜單：將之前做好的菜單復(fù)制粘貼，置于（0，0）位置，初始狀態(tài)設(shè)置為“隱藏”

第三步：為“內(nèi)容”添加第一個交互用例

移動端操作基本為拖動、滑動

用例條件：“內(nèi)容”接觸到“界限”

操作：垂直拖動“內(nèi)容”動態(tài)面板，使頂部邊界小于等于“上限”的y軸位置，底部邊界大于等于“下限”的y軸位置

執(zhí)行動作：顯示“頂端菜單”

條件設(shè)置：如果“內(nèi)容”接觸到“界限”

由于“上限”和“下限”的位置都已經(jīng)固定，因此直接輸入相應(yīng)數(shù)值即可，如果存在參數(shù)或者變量，需點擊“fx”設(shè)置相應(yīng)條件

第四步：為“內(nèi)容”添加第二個交互用例

用例條件：“內(nèi)容”未接觸到“界限”

操作：垂直拖動“內(nèi)容”動態(tài)面板，使頂部邊界小于等于“上限”的y軸位置，底部邊界大于等于“下限”的y軸位置

執(zhí)行動作：隱藏“頂端菜單”

至此，我們已經(jīng)做完了菜單吸附交互，可以點擊預(yù)覽效果啦。

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

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