本文要制作BMI身体质量指数计算器小案例,将涉及多种事件触发的交互、动态面板的使用等功能,并对原型设计有更深一步的了解。
(1)拖入两个单选框,注意将他们设为一组单选框,以实现单选框的特性;【右键单选框-指定单选按钮组-设置成相同的Group Name】。
(3)分别拖出身高、体重单位的文本框,并转换为动态面板,state1为公制单位,state2为英制单位。
(4)同理拖出BMI值并转换为动态面板,BMI的state1为无值,state2为有值,为什么这里设置两个状态后面作出解释。
(2)对查询按钮设置交互事件,不同度量制设置对应不同的计算公式:【BMI=kg/(m^2)】。
(3)此处我们期望点击查询按钮后生成“BMI值”及“身体状态”,但身体状态是根据BMI值来判断生成的,但BMI值是进入条件语句后才能算出,由于Axure中无法嵌套条件语句【PS:笔者暂时没发现】,所以无法单纯通过鼠标单击事件生成“身体状态”。
(4)笔者尝试了几次,最终选择了将“BMI值”转换成动态面板,当该动态面板“状态改变时”触发“身体状态”相关事件。这也就是之前笔者为什么将“BMI值”设置为两个状态,一开始为无值,最后变为有值,触发“状态改变时”交互事件。
(7)最后根据“身体状态”的动态面板触发“状态改变时”事件,从而移动箭头调整箭头指向,注意此处为绝对,并用标尺测量好预定,这里具体数值每个人都可给姨妹开苞能不一样。
这里推荐你加Axure实战班的助教小可爱@CC-起点学院(微信:qidiancc520),回复关键词:原型礼包
人人都是产品经理(是以产品经理、运营为核心的学习、交流、分享平台,集、培训、社群为一体,全方位服务产品人和运营人,成立9年举办在线+期,线+场,产品经理大会、运营大会20+场,覆盖北上广深杭成都等15个城市,在行业有较高的影响力和知名度。平台聚集了众多BAT美团京东滴滴360小米网易等知名互联网公司产品总监和运营总监,他们在这里与你一起成长。