【A020】頁面模塊水平左右滑動

前言

在APP端中左右滑動的交互方式十分常見,在有限的區間內可以放置更多的內容。

準備

  • Axure 9(或Axure 8、10)軟件已安裝。

  • 掌握基本的軟件使用。

本教程知識點

  • 初級的動態面板使用。

  • 拖動觸發的移動的交互事件。

  • 移動邊界計算。

詳細教程

功能

  • 鼠標右擊可以將組件內容進行左右拖動。

  • 組件內容左右拖動有對應的邊界限制。

製作方式

1、基礎動態面板版本

  • 基礎樣式可以將展示內容嵌套在動態面板中,利用動態面板的水平滾動進行功能實現。
  • 製作時,需將動態面板的尺寸調整頁面寬度,超出內容將自動隱藏。同時在預覽和編輯時可以看到水平滾動條。

  • 動態面板需在高度上預留一些滾動條的顯示位置(注:此類效果只能通過拖動滾動條實現滑動效果)。

  • 優點:可以快速製作,適合低保真原型。

  • 缺點:頁面預覽展示存在一個滾動條,並且移動只能通過滾動條進行移動。

2、進階版本

針對動態面板自身的“缺陷”,可以藉助交互事件進行處理優化。此處主要使用拖動時的交互事件結合移動的交互動作中的跟隨水平拖動進行實現。

(1)設置移動跟隨。

  • 需要移動的內容需要進行組合處理。

  • 在拖動的交互上進行對應內容的綁定。

  • 實現效果如下:

  • 此時可以實現對應的拖動跟隨,但是沒有限制對應的左右邊界,在移動時會將內容移出或錯位。

(2)限制移動跟隨邊界。

  • 此處只需添加單側的位置邊界限制即可。
  • 邊界添加原則

  • 添加同側邊界,方便進行快速計算。

  • 左側邊界移動區間爲小於0的區間,所以需要添加爲負數區間。

  • 可移動最大距離爲滑動內容減去頁面可視區域,計算出的數值可進行賦予負數,使得左側大於此距離。

  • 左側小於一般爲0。若在動態面板中存在左右留白間距,需在小於數值增加間距,大於處減去間距。

3、其它可優化區間

  • 可以藉助局部變量,自動獲取滑動內容寬度,通過函數自動計算可移動範圍。

  • 一般常見的左右滑動都是同樣的模塊內容展示,可以使用中繼器進行快速複用,只需後續編輯調整中繼器內容。達到原型之間快速複用的效果。(可參考案例中的實戰版本內容)。

總結

  • 在基礎元件無法支持部分效果或效果不理想的時候可以通過交互事件進行整體交互的重置。

  • 在計算邊界可藉助局部變量、公共變量等自動計算,方便後續複用。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章