中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

本文要制作BMI身體質(zhì)量指數(shù)計(jì)算器小案例，將涉及多種事件觸發(fā)的交互、動態(tài)面板的使用等功能，并對原型設(shè)計(jì)有更深一步的了解。

效果預(yù)覽

預(yù)覽鏈接：https://icv2qn.axshare.com

一、交互邏輯分析

（1）兩種度量制間的切換：公制（千克、厘米）；英制（磅、英寸）【注意后面的單位換算】

（2）根據(jù)用戶輸入的身高、體重計(jì)算BMI值并顯示；

（3）根據(jù)計(jì)算出的BMI值，返回身體狀態(tài)并顯示，并改變箭頭指向位置；

（4）邊界問題：

• 偏瘦【0<BMI<=18.4】；
• 正?！?8.5<=BMI<=23.9】；
• 過重【24.0<=BMI<=27.9】；
• 肥胖【BMI>=28.0】。

二、界面元件搭建

（1）拖入兩個單選框，注意將他們設(shè)為一組單選框，以實(shí)現(xiàn)單選框的特性；【右鍵單選框->指定單選按鈕組->設(shè)置成相同的Group Name】。

（2）拖入身高、體重文本框、查詢按鈕等相關(guān)組件。

（3）分別拖出身高、體重單位的文本框，并轉(zhuǎn)換為動態(tài)面板，state1為公制單位，state2為英制單位。

（4）同理拖出BMI值并轉(zhuǎn)換為動態(tài)面板，BMI的state1為無值，state2為有值，為什么這里設(shè)置兩個狀態(tài)后面作出解釋。

（5）再拖出身體狀態(tài)的文本框，轉(zhuǎn)換為動態(tài)面板，設(shè)置五個狀態(tài)：初始、偏瘦、正常、過重、肥胖。

（6）最后繪制BMI中國標(biāo)準(zhǔn)表及箭頭，界面元件就搭建完成啦！

三、交互界面的實(shí)現(xiàn)

（1）設(shè)置單選按鈕選中不同度量制時設(shè)置對應(yīng)的身高體重單位。

? ? ? ? ? ??

（2）對查詢按鈕設(shè)置交互事件，不同度量制設(shè)置對應(yīng)不同的計(jì)算公式：【BMI=kg/（m^2）】。

（3）此處我們期望點(diǎn)擊查詢按鈕后生成“BMI值”及“身體狀態(tài)”，但身體狀態(tài)是根據(jù)BMI值來判斷生成的，但BMI值是進(jìn)入條件語句后才能算出，由于Axure中無法嵌套條件語句【PS：筆者暫時沒發(fā)現(xiàn)】，所以無法單純通過鼠標(biāo)單擊事件生成“身體狀態(tài)”。

因此要在其他地方設(shè)置觸發(fā)事件，那么應(yīng)該設(shè)置在哪里呢？

（4）筆者嘗試了幾次，最終選擇了將“BMI值”轉(zhuǎn)換成動態(tài)面板，當(dāng)該動態(tài)面板“狀態(tài)改變時”觸發(fā)“身體狀態(tài)”相關(guān)事件。這也就是之前筆者為什么將“BMI值”設(shè)置為兩個狀態(tài)，一開始為無值，最后變?yōu)橛兄?，觸發(fā)“狀態(tài)改變時”交互事件。

（5）這里筆者創(chuàng)建了一個變量用于放置BMI的值。

（6）為“BMI值”設(shè)置交互事件，根據(jù)邊界條件設(shè)置身體狀態(tài)。

（7）最后根據(jù)“身體狀態(tài)”的動態(tài)面板觸發(fā)“狀態(tài)改變時”事件，從而移動箭頭位置調(diào)整箭頭指向，注意此處為絕對位置，并用標(biāo)尺測量好預(yù)定位置，這里具體數(shù)值每個人都可能不一樣。

（8）源文件鏈接：https://pan.baidu.com/s/1_HAGM1FOxpIw3gsGML7L1A

提取碼：o2vf

本文由 @許仙人 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自Unsplash，基于CC0協(xié)議