本次分享的的案例是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）、對矩形元件“當前身高” 進行文本設置，如圖：
2）、對矩形元件“身高” 進行文本設置，如圖：
