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

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

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

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

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

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

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

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

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

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

移動(dòng)端操作基本為拖動(dòng)、滑動(dòng)

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

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

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

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

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

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

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

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

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

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

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

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