APP頂端菜單固定為制作APP原型時(shí)最常碰到的交互效果，本文就一起來制作一下APP頂端菜單固定效果，來看看~

先看效果：

APP頂端菜單固定為制作APP原型時(shí)最常碰到的交互效果，常見axure實(shí)現(xiàn)方法有以下幾種：

1. 動(dòng)態(tài)面板固定：頂部菜單作為一個(gè)動(dòng)態(tài)面板，固定在瀏覽器的頂部；
2. 內(nèi)聯(lián)框架嵌套：頂部菜單頁面放置內(nèi)聯(lián)框架，內(nèi)聯(lián)框架引用主體內(nèi)容頁；
3. 逆滾動(dòng)/拖動(dòng)：滾動(dòng)或拖動(dòng)頁面時(shí)，頂部菜單向相返的方向移動(dòng)相應(yīng)的位置；
4. 分塊交互：將頁面拆分為不同的模塊，模塊內(nèi)的交互不影響其他模塊。

該案例采用的是第4類方法，下面一起來看下實(shí)際應(yīng)該怎么操作。

主要素材

1. 頂部菜單 —— 矩形元件，命名為“頂部菜單”——放置在主界面；
2. 內(nèi)容展位：內(nèi)容在這個(gè)區(qū)域內(nèi)顯示 —— 動(dòng)態(tài)面板，命名為“1” —— 放置于主界面；
3. 內(nèi)容整體：由N個(gè)內(nèi)容實(shí)體組成 —— 動(dòng)態(tài)面板，命名為“2” —— 放置于動(dòng)態(tài)面板“1”下；
4. 內(nèi)容實(shí)體：最小內(nèi)容單位。在此實(shí)例中暫不是重點(diǎn)，固可隨便添加一些元件即可 —— 旋轉(zhuǎn)到動(dòng)態(tài)面板“2”下面。

按以上要求準(zhǔn)備好相應(yīng)素材，示例中準(zhǔn)備好后的靜態(tài)效果如下：

層次情況（視頻-工具欄-概要）：

由于“頂部菜單”在“2”（內(nèi)容整體）的外層，所以拖動(dòng)“2”時(shí)“頂部菜單”不會(huì)一起拖動(dòng)，從而達(dá)到頂部固定的效果。

交互設(shè)計(jì)

我們要拖動(dòng)的是“內(nèi)容整體”，即動(dòng)態(tài)面板“2”，所以將用戶寫在“2”上面。

第1步：實(shí)現(xiàn)拖動(dòng)效果

1. 點(diǎn)擊動(dòng)態(tài)面板“2”；
2. 右側(cè)屬性中找到并點(diǎn)擊用例“拖動(dòng)時(shí)”，進(jìn)入用例編輯；
3. 添加動(dòng)作“移動(dòng)”，選擇元件為“當(dāng)前元件”（移動(dòng)自己），設(shè)置移動(dòng)類型為“垂直拖動(dòng)”（只上下移動(dòng)，不左右移動(dòng)）。

第2步：實(shí)現(xiàn)彈回效果 —— 拖動(dòng)結(jié)束后，保證面板在合適的位置

合適的位置應(yīng)該保證兩個(gè)條件：

1. 上面不能留空 ；
2. 下面不能留空。

所以要在拖動(dòng)結(jié)束根據(jù)實(shí)際情況，判斷是否需要進(jìn)行相應(yīng)的復(fù)位操作-移動(dòng)到合適的位置。

（1）頂部彈回，頂部有空白時(shí)，彈回到頂部無空白的位置

即：如果“2”的y軸位置 > 0（頂部出現(xiàn)空白）時(shí)，則將“2”的y軸位置移動(dòng)到0.

判斷條件公式：this.y > 0

—— 為了好看，再增加一個(gè)動(dòng)作，具體設(shè)置如下圖：

注意：

1. 判斷條件 this.y的意思是當(dāng)前元件（這個(gè)用例中即為“2”）的y軸坐標(biāo)；
2. 設(shè)置了一個(gè)動(dòng)畫：彈性（移動(dòng)到目標(biāo)位置），100毫秒完成；
3. 移動(dòng)的類型選擇“到達(dá)”，即絕對(duì)位置；
4. this.x的意思是當(dāng)前元件的x軸位置，這里代表的意思就是，移動(dòng)的時(shí)候，x軸位置不變。

（2）底部彈回，底部有空白時(shí)，彈回到底部無空白的位置

即：如果“2”的y軸位置 < （“1”的高度 – “2”的高度）時(shí)（底部出現(xiàn)空白），則將“2”的y軸位置移動(dòng)到（“1”的高度 – “2”的高度）.

判斷條件公式：this.y < (LVAR1.height – this.height)

y軸復(fù)位位置公式：LVAR1.height – this.height

說明：

局部變量LVAR1是指元件“1”（注：是元件）；height是指元件的高度。

具體設(shè)置情況如下圖 ：

所有設(shè)置好之后所有的動(dòng)作情況如下：

至此，原型制作完成，預(yù)覽一下，看看效果是不是做出來？！

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

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