本文作者分享了用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）對矩形元件“當前身高” 進行文本設置，如圖：

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