本文要製作BMI身體質量指數計算器小案例，將涉及多種事件觸發的交互、動態面板的使用等功能，並對原型設計有更深一步的瞭解。
效果預覽
預覽鏈接：https://icv2qn.axshare.com
一、交互邏輯分析
（1）兩種度量制間的切換：公制（千克、釐米）；英制（磅、英寸）【注意後面的單位換算】
（2）根據用戶輸入的身高、體重計算BMI值並顯示；
（3）根據計算出的BMI值，返回身體狀態並顯示，並改變箭頭指向位置；
（4）邊界問題：
- 偏瘦【0
- 正常【18.5<=BMI<=23.9】；
- 過重【24.0<=BMI<=27.9】；
- 肥胖【BMI>=28.0】。
二、界面元件搭建
（1）拖入兩個單選框，注意將他們設為一組單選框，以實現單選框的特性；【右鍵單選框->指定單選按鈕組->設置成相同的Group Name】。
（2）拖入身高、體重文本框、查詢按鈕等相關組件。
（3）分別拖出身高、體重單位的文本框，並轉換為動態面板，state1為公制單位，state2為英制單位。
（4）同理拖出BMI值並轉換為動態面板，BMI的state1為無值，state2為有值，為什麼這裡設置兩個狀態後面作出解釋。
（5）再拖出身體狀態的文本框，轉換為動態面板，設置五個狀態：初始、偏瘦、正常、過重、肥胖。
（6）最後繪製BMI中國標準表及箭頭，界面元件就搭建完成啦！
三、交互界面的實現
（1）設置單選按鈕選中不同度量制時設置對應的身高體重單位。
（2）對查詢按鈕設置交互事件，不同度量制設置對應不同的計算公式：【BMI=kg/（m^2）】。
（3）此處我們期望點擊查詢按鈕後生成“BMI值”及“身體狀態”，但身體狀態是根據BMI值來判斷生成的，但BMI值是進入條件語句後才能算出，由於Axure中無法嵌套條件語句【PS：筆者暫時沒發現】，所以無法單純通過鼠標單擊事件生成“身體狀態”。
因此要在其他地方設置觸發事件，那麼應該設置在哪裡呢？
（4）筆者嘗試了幾次，最終選擇了將“BMI值”轉換成動態面板，當該動態面板“狀態改變時”觸發“身體狀態”相關事件。這也就是之前筆者為什麼將“BMI值”設置為兩個狀態，一開始為無值，最後變為有值，觸發“狀態改變時”交互事件。
（5）這裡筆者創建了一個變量用於放置BMI的值。
（6）為“BMI值”設置交互事件，根據邊界條件設置身體狀態。
（7）最後根據“身體狀態”的動態面板觸發“狀態改變時”事件，從而移動箭頭位置調整箭頭指向，注意此處為絕對位置，並用標尺測量好預定位置，這裡具體數值每個人都可能不一樣。
（8）源文件鏈接：https://pan.baidu.com/s/1_HAGM1FOxpIw3gsGML7L1A
提取碼：o2vf
題圖來自Unsplash，基於CC0協議
閱讀更多 人人都是產品經理 的文章
