Axure8.0教程:身高标尺

本次分享的的案例是Axure8.0制作的身高标尺,感兴趣的小伙伴们一起来学习一下吧

本次分享的的案例Axure8.0制作的身高标尺。

Axure8.0教程:身高标尺

预览及下载地址:https://sw62vp.axshare.com

一、制作原型

1、拖入一个矩形元件,设置宽度:203px,高度:20px,输入内容:“请滑动标尺选择您的身高(cm)”在其下方拖入一个矩形元件,设置宽度:80px,高度:30px,隐藏其边框,命名为“身高”,设置文本颜色:#EB615F,在“身高”元件下方拖入一个垂直线,设置高度:22px,设置颜色:#EB615F,如图:

Axure8.0教程:身高标尺

2、拖入一个动态面板,设置宽度:292px,高度:45px,双击进入动态面板,设置宽度:1114px,高度:45px,再双击点击动态面板,设置身高刻度(0-200),如图:

Axure8.0教程:身高标尺

动态面板最终设计如图:

Axure8.0教程:身高标尺

3、拖入一个矩形元件,输入内容:“您当前身高为:”设置文本颜色:#EB615F,在其右方拖入一个矩形元件,命名为“当前身高”,设置文本颜色:#EB615F,在“当前身高”元件右方拖入一个矩形元件,输入内容为:“cm”,设置文本颜色:#EB615F,如图:

Axure8.0教程:身高标尺

所有元件设计完毕,如图:

Axure8.0教程:身高标尺

二、交互设置

点击动态面板进入,对动态面板进行“拖动时”和“载入时”事件进行设置。

1. 拖动时

1)对矩形元件“当前身高” 进行文本设置,如图:

Axure8.0教程:身高标尺

2)对矩形元件“身高” 进行文本设置,如图:

Axure8.0教程:身高标尺

3)对当前动态面板进行“移动”设置,如图:

Axure8.0教程:身高标尺

2. 载入时

1)对矩形元件“当前身高” 进行文本设置,如图:

Axure8.0教程:身高标尺

对矩形元件“身高” 进行文本设置,如图:

Axure8.0教程:身高标尺

去年今日运营文章

  1. 2021:  运营人知识体系思维导图(beta版)(0)
  2. 2021:  裂变活动策划推广方案!(0)
  3. 2021:  新项目:携程联盟机票酒店CPS分佣推广实战指南(0)
  4. 2021:  站长抑郁症 全网最大的薅羊毛网站赚客吧突然关闭(0)
  5. 2020:  图解麦肯锡工作术!全了!(附40页经典完整版PPT!)(0)

本文由纤纤露投稿,不代表爱运营立场,如若转载,请注明出处:https://www.iyunying.org/pm/axure/289963.html

(0)
打赏 微信扫一扫 微信扫一扫
上一篇 2022年8月27日 下午3:44
下一篇 2022年8月27日 下午3:46

发表评论

登录后才能评论