Axure:APP頂端菜單固定效果
APP頂端菜單固定為制作APP原型時最常碰到的交互效果,本文就一起來制作一下APP頂端菜單固定效果,來看看~
先看效果:
APP頂端菜單固定為制作APP原型時最常碰到的交互效果,常見axure實現方法有以下幾種:
- 動態面板固定:頂部菜單作為一個動態面板,固定在瀏覽器的頂部;
- 內聯框架嵌套:頂部菜單頁面放置內聯框架,內聯框架引用主體內容頁;
- 逆滾動/拖動:滾動或拖動頁面時,頂部菜單向相返的方向移動相應的位置;
- 分塊交互:將頁面拆分為不同的模塊,模塊內的交互不影響其他模塊。
該案例采用的是第4類方法,下面一起來看下實際應該怎么操作。
主要素材
- 頂部菜單 —— 矩形元件,命名為“頂部菜單”——放置在主界面;
- 內容展位:內容在這個區域內顯示 —— 動態面板,命名為“1” —— 放置于主界面;
- 內容整體:由N個內容實體組成 —— 動態面板,命名為“2” —— 放置于動態面板“1”下;
- 內容實體:最小內容單位。在此實例中暫不是重點,固可隨便添加一些元件即可 —— 旋轉到動態面板“2”下面。
按以上要求準備好相應素材,示例中準備好后的靜態效果如下:
層次情況(視頻-工具欄-概要):
由于“頂部菜單”在“2”(內容整體)的外層,所以拖動“2”時“頂部菜單”不會一起拖動,從而達到頂部固定的效果。
交互設計
我們要拖動的是“內容整體”,即動態面板“2”,所以將用戶寫在“2”上面。
第1步:實現拖動效果
- 點擊動態面板“2”;
- 右側屬性中找到并點擊用例“拖動時”,進入用例編輯;
- 添加動作“移動”,選擇元件為“當前元件”(移動自己),設置移動類型為“垂直拖動”(只上下移動,不左右移動)。
第2步:實現彈回效果 —— 拖動結束后,保證面板在合適的位置
合適的位置應該保證兩個條件:
- 上面不能留空 ;
- 下面不能留空。
所以要在拖動結束根據實際情況,判斷是否需要進行相應的復位操作-移動到合適的位置。
(1)頂部彈回,頂部有空白時,彈回到頂部無空白的位置
即:如果“2”的y軸位置 > 0(頂部出現空白)時,則將“2”的y軸位置移動到0.
判斷條件公式:this.y > 0
—— 為了好看,再增加一個動作,具體設置如下圖:
注意:
- 判斷條件 this.y的意思是當前元件(這個用例中即為“2”)的y軸坐標;
- 設置了一個動畫:彈性(移動到目標位置),100毫秒完成;
- 移動的類型選擇“到達”,即絕對位置;
- 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 協議
弱弱的問一句 為什么我底部反彈效果做不出來 是和函數公式有關聯嗎
4.分塊交互:將頁面拆分為不同的模塊,模塊內的交互不影響其他模塊。
請問這個怎么做??
這個案例就是基于這個方式完成的,頭部菜單是一塊,內容區域是一塊。如果不做特別處理,普通的交互不會影響到彼此
原型文件地址:https://quqi.com/s/787633/w5Sr2tJvawrER8Ry