Axure:利用動態面板制作滑動條

0 評論 1769 瀏覽 2 收藏 8 分鐘

本文將利用一些小技巧,實現從1到100,以及可以在文字上方正常滑動,不再當心滑塊在文本上方時,受文本框影響導致不好滑動。

預覽地址:https://ws8zsg.axshare.com

一、準備階段

先制作一個335*36的矩形(命名為:分母),將矩形的4個角的圓角設置為18;

在矩形分母上方,制作一個100*36的矩形(命名為:分子),矩形分子左側的兩個圓角設置為18,將其顏色改為藍色,并增加1像素的邊框效果(如圖);

注意:這里的邊框效果選色時最好是純色,不設置透明度的。不然之后會出現一些無法解釋的后果(壞笑一下)。

因為需要拖動,那我們這邊增加一個拖動的載體:制作一個36*36的圓,去掉邊框;為了后續看到的圓會更立體些,可以增加移量為0*0、范圍為5的投影效果;

差點忘記了,還需要在最上方增加一個表單元件中的文本框,將該元件禁用后,把其元件樣式改為文本段落(如圖),刪除系統默認的交互樣式,并將字體的對齊方式改為居中(為啥要將元件的樣式改為文本段落,這個在之后講解交互的時候再透露);

準備工作已經完成了,接下來就該開始設計交互效果了。

二、交互設計

在預覽的地址中,可以看到滑塊需要跟隨移動。所以我們需要選中圓,然后鼠標右擊,將其轉換為動態面板,并在交互中選擇【拖動時】的交互:

  • 拖動時,我們需要水平移動圓的位置,設置動態面板跟隨水平移動;
  • 因為我們需要圓在分母的范圍內進行移動,那再給圓設置一個左右的限制。左側:需大于等于分母的左邊位置;右側:需要小于等于分母的右邊位置(如圖);

左側函數:[[LVAR1.left]] ;右側函數:[[LVAR1.right]]。其中“LVAR1”為局部變量,指代分母(如圖);

移動的效果已經設置完成了,接下來需要讓分子跟隨圓移動的距離,改變長度。給動態面板增加設置分子尺寸的動作;

  • 先要知道圓具體移動的多少距離要怎么算,需要有個靜態的參照物,而滑動條中唯一是靜態的就只有分母了,所以我們需要使用圓移動后的 X 坐標減去分母的 X 坐標,這就獲得了偏移量(如圖),x軸的函數為:[[This.x-LVAR1.x+18]] ;
  • Y軸由于沒有變化,這里就直接使用了分子原來的高度36,錨點可以是左上或者左側都可以;

前面有提到,不要給分子的描邊顏色增加透明度,是因為增加透明度后,在你移動后,分子的樣式會發生變形,至于原因,我也不知道,這只是我踩到的坑。

接下來,我們需要對文本的內容進行設置了,給動態面板再增加一個設置文本的動作:

  • 數值占比,具體計算:用分子的寬度 除以 分母的寬度,再乘以100,然后取整;所以我們這里需要用到取整的函數 toFixed(decimalPoints) (如圖);

  • 設置局部變量“LVAR1” 為分子,“LAVR2”為分母;整體的函數為:[[((LVAR1.width-18)/(LVAR2.width-36)*100).toFixed(decimalPoints)]](如圖);

再注意一個細節:我的分子位置就到圓形的一半,如果要是和圓形右對齊的話,在縮到最右側的時候,分子也是會出現變形,所以我這邊在計算時,需要將分子的長度減去18,分母的寬度減去36;

到這一步就可以算是完成了滑動條的設計了,可以先預覽下效果,但你可能會發現停留在文字上方的時候,就會變得特別難拖動了,別急,還有兩個步驟;

三、優化升級

前面之所以使用表單元件文本框,是因為文本框可以設置一個文本改變時的交互動作,你預覽現在的效果,能看到數值是從0到100;

所以這里需要給文本框增加一個交互效果:文本改變時,將內容設置為數值:1(如圖);

這里需要增加一個判斷條件,就是當數值等于0的時候,我們需要將數值強行設置為1;

最后,將素材全選后,鼠標右鍵將其轉換為動態面板,再為動態面板增加拖動時的交互,動作設置為觸發動態面板1的拖動效果,就有了原型預覽里體驗到的效果了(如圖)。

本文由 @阿幸 原創發布于人人都是產品經理,未經許可,禁止轉載

題圖來自 Unsplash,基于 CC0 協議

該文觀點僅代表作者本人,人人都是產品經理平臺僅提供信息存儲空間服務。

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發揮!