java中bmi的制作_Axure教程:在线BMI计算器制作
原标题:Axure教程:在线BMI计算器制作
本文要制作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协议返回搜狐,查看更多
责任编辑:
java中bmi的制作_Axure教程:在线BMI计算器制作相关推荐
- java 线性回归算法_线性搜索或顺序搜索算法在Java中如何工作? 示例教程
java 线性回归算法 大家好,之前,我讨论了二进制搜索算法的工作原理,并分享了在Java中实现二进制搜索的代码. 在那篇文章中,有人问我是否还有其他搜索算法? 如果数组中的元素未排序,又该如何使用它 ...
- 线性搜索或顺序搜索算法在Java中如何工作? 示例教程
大家好,我之前谈到了二进制搜索算法的工作原理,并分享了在Java中实现二进制搜索的代码. 在那篇文章中,有人问我是否还存在其他搜索算法? 如果数组中的元素未排序,又如何使用二进制搜索算法,该如何搜索呢 ...
- Java中的状态设计模式–示例教程
状态模式是行为设计模式之一 . 当对象根据其内部状态更改其行为时,将使用状态设计模式. 如果必须根据对象的状态更改其行为,则可以在对象中使用状态变量,并使用if-else条件块根据状态执行不同的操作. ...
- Java中的Memento设计模式-示例教程
记忆模式是行为设计模式之一 . 当我们要保存对象的状态以便以后可以恢复时,可以使用Memento设计模式. 记忆模式用于以这种方式实现该目的,即在对象外部无法访问该对象的已保存状态数据,从而保护了已保 ...
- Java中的访问者设计模式–示例教程
访客模式是行为设计模式之一 . 当我们必须对一组相似类型的对象执行操作时,将使用访问者模式. 借助访问者模式,我们可以将操作逻辑从对象移动到另一个类. 例如,假设有一个购物车,我们可以在其中添加不同类 ...
- Java中的观察者设计模式-示例教程
观察者模式是行为设计模式之一 . 当您对对象的状态感兴趣并希望在发生任何更改时得到通知时,观察者设计模式很有用. 在观察者模式中,监视另一个对象状态的对象称为Observer ,而正在监视的对象称为S ...
- Java中的策略设计模式-示例教程
策略模式是行为设计模式之一 . 当我们对一个特定任务有多种算法,并且客户端决定在运行时使用的实际实现时,将使用策略模式. 策略模式也称为策略模式 . 我们定义了多种算法,并让客户端应用程序将算法用作参 ...
- Java中的迭代器设计模式–示例教程
迭代器模式是一种行为模式,用于提供遍历一组对象的标准方式. Iterator模式在Java Collection Framework中得到了广泛使用,其中Iterator接口提供了遍历集合的方法. 根 ...
- Java中的策略模式实例教程
策略模式是一种行为模式.用于某一个具体的项目有多个可供选择的算法策略,客户端在其运行时根据不同需求决定使用某一具体算法策略. 策略模式也被称作政策模式.实现过程为,首先定义不同的算法策略,然后客户端把 ...
最新文章
- 苹果7plus元件分布图_苹果iphone7 plus手机拆解全过程评测 iphone7 plus拆机图解教程...
- 兼容浏览器将NodeList对象转换为数组
- CCF201409-2 画图 java(100分)
- python基础(part8)--容器类型之元组和字典
- 水电图wp表示什么_装修水电工入门基础知识,刚入行不懂不用急?老师傅告诉你怎么做...
- 基于javaweb jsp+servlet学生宿舍管理系统
- 网页连接数据库 服务器,关于asp网页连接远程服务器上数据库问题
- 最强NLP模型BERT喜迎PyTorch版!谷歌官方推荐,也会支持中文
- [转载] Java之可变参数
- 推荐几个rpm包下载网站
- 记录一次使用python来实现雷神加速器自动恢复时间和暂停时间的脚本
- python从excel中读取数据 写入word_Java调用python脚本,读取excel表格数据并写入word文档-Go语言中文社区...
- Android渲染时间 太长,Android性能优化之渲染篇
- ardupilot代码拉取
- Oracle数据仓库参考架构
- 【odoo15】odoo中的fa-xxx小图标
- 又一个美食账号火了,3个月涨粉200万,快手乡土账号有何魔力?
- 使用OpenCV检测摄像头视频中的人脸
- 商务签证之结局:面试
- 均匀分布的均值及方差