本文作者分享了用Axure8.0制作身高標(biāo)尺的方法，感興趣的小伙伴們一起來學(xué)習(xí)一下吧。

本次分享的的案例是Axure8.0制作的身高標(biāo)尺。

預(yù)覽及下載地址：https://sw62vp.axshare.com

一、制作原型

1、拖入一個矩形元件，設(shè)置寬度：203px，高度：20px，輸入內(nèi)容：“請滑動標(biāo)尺選擇您的身高（cm）”在其下方拖入一個矩形元件，設(shè)置寬度：80px，高度：30px，隱藏其邊框，命名為“身高”，設(shè)置文本顏色：#EB615F，在“身高”元件下方拖入一個垂直線，設(shè)置高度：22px，設(shè)置顏色：#EB615F，如圖：

2、拖入一個動態(tài)面板，設(shè)置寬度：292px，高度：45px，雙擊進入動態(tài)面板，設(shè)置寬度：1114px，高度：45px，再雙擊點擊動態(tài)面板，設(shè)置身高刻度（0-200），如圖：

動態(tài)面板最終設(shè)計如圖：

3、拖入一個矩形元件，輸入內(nèi)容：“您當(dāng)前身高為：”設(shè)置文本顏色：#EB615F，在其右方拖入一個矩形元件，命名為“當(dāng)前身高”，設(shè)置文本顏色：#EB615F，在“當(dāng)前身高”元件右方拖入一個矩形元件，輸入內(nèi)容為：“cm”,設(shè)置文本顏色：#EB615F，如圖：

所有元件設(shè)計完畢，如圖：

二、交互設(shè)置

點擊動態(tài)面板進入，對動態(tài)面板進行“拖動時”和“載入時”事件進行設(shè)置。

1. 拖動時

1）對矩形元件“當(dāng)前身高” 進行文本設(shè)置，如圖：

2）對矩形元件“身高” 進行文本設(shè)置，如圖：

3）對當(dāng)前動態(tài)面板進行“移動”設(shè)置，如圖：

2. 載入時

1）對矩形元件“當(dāng)前身高” 進行文本設(shè)置，如圖：

對矩形元件“身高” 進行文本設(shè)置，如圖：