Axure8.0教程:身高標尺
本文作者分享了用Axure8.0制作身高標尺的方法,感興趣的小伙伴們一起來學習一下吧。
本次分享的的案例是Axure8.0制作的身高標尺。
預覽及下載地址:https://sw62vp.axshare.com
一、制作原型
1、拖入一個矩形元件,設置寬度:203px,高度:20px,輸入內容:“請滑動標尺選擇您的身高(cm)”在其下方拖入一個矩形元件,設置寬度:80px,高度:30px,隱藏其邊框,命名為“身高”,設置文本顏色:#EB615F,在“身高”元件下方拖入一個垂直線,設置高度:22px,設置顏色:#EB615F,如圖:
2、拖入一個動態面板,設置寬度:292px,高度:45px,雙擊進入動態面板,設置寬度:1114px,高度:45px,再雙擊點擊動態面板,設置身高刻度(0-200),如圖:
動態面板最終設計如圖:
3、拖入一個矩形元件,輸入內容:“您當前身高為:”設置文本顏色:#EB615F,在其右方拖入一個矩形元件,命名為“當前身高”,設置文本顏色:#EB615F,在“當前身高”元件右方拖入一個矩形元件,輸入內容為:“cm”,設置文本顏色:#EB615F,如圖:
所有元件設計完畢,如圖:
二、交互設置
點擊動態面板進入,對動態面板進行“拖動時”和“載入時”事件進行設置。
1. 拖動時
1)對矩形元件“當前身高” 進行文本設置,如圖:
2)對矩形元件“身高” 進行文本設置,如圖:
3)對當前動態面板進行“移動”設置,如圖:
2. 載入時
1)對矩形元件“當前身高” 進行文本設置,如圖:
對矩形元件“身高” 進行文本設置,如圖:
本文由@qianqianlu 原創發布于人人都是產品經理,未經許可,禁止轉載。
題圖來自 unsplash,基于 CC0 協議。
該文觀點僅代表作者本人,人人都是產品經理平臺僅提供信息存儲空間服務。
評論
- 目前還沒評論,等你發揮!