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

先看效果：

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

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

該案例采用的是第4類方法，下面一起來看下實際應該怎么操作。

主要素材

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

按以上要求準備好相應素材，示例中準備好后的靜態效果如下：

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

由于“頂部菜單”在“2”（內容整體）的外層，所以拖動“2”時“頂部菜單”不會一起拖動，從而達到頂部固定的效果。

交互設計

我們要拖動的是“內容整體”，即動態面板“2”，所以將用戶寫在“2”上面。

第1步：實現拖動效果

1. 點擊動態面板“2”；
2. 右側屬性中找到并點擊用例“拖動時”，進入用例編輯；
3. 添加動作“移動”，選擇元件為“當前元件”（移動自己），設置移動類型為“垂直拖動”（只上下移動，不左右移動）。

第2步：實現彈回效果 —— 拖動結束后，保證面板在合適的位置

合適的位置應該保證兩個條件：

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

所以要在拖動結束根據實際情況，判斷是否需要進行相應的復位操作-移動到合適的位置。

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

即：如果“2”的y軸位置 > 0（頂部出現空白）時，則將“2”的y軸位置移動到0.

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

—— 為了好看，再增加一個動作，具體設置如下圖：

注意：

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

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

即：如果“2”的y軸位置 < （“1”的高度 – “2”的高度）時（底部出現空白），則將“2”的y軸位置移動到（“1”的高度 – “2”的高度）.

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

y軸復位位置公式：LVAR1.height – this.height

說明：

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

具體設置情況如下圖 ：

所有設置好之后所有的動作情況如下：

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

本文由 @?牧逸 原創發布于人人都是產品經理。未經許可，禁止轉載

題圖來自 Pexels，基于 CC0 協議