国外亚洲成av人片在线观看,热99re久久精品这里都是精品,天堂网在线最新版www,国产成人av区一区二区三,51久久成人国产精品麻豆

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

先看效果：

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

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

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

主要素材

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

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

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

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

交互設(shè)計

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

第1步：實現(xiàn)拖動效果

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

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

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

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

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

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

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

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

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

注意：

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

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

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

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

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

說明：

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

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

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

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

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

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