恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
Axure8设计—动态仪表盘
0.0°
2023-02-26 原创文章 教程 举报 160 0 0 0

本次分享的的案例是Axure8制作的动态仪表盘,根据设置的数值,仪表盘指针旋转到相应的值位置




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


一、制作原型

1、首先创建空白页面,在工作区域拖入一个矩形元件,并将其形状修改为扇形的样子,这里在属性中找到形状设置即可,如下图所示




设置其大小设置为312312,颜色为:#9F7344,如下图所示



2.在工作区域拖入第二个矩形元件,并将其形状修改为扇形的样子,这里在属性中找到形状设置即可,其大小设置312312,颜色为:#FBBB0C;如下图所示。





3.在工作区域拖入第三个矩形元件,并将其形状修改为扇形的样子,这里在属性中找到形状设置即可,其大小设置312*312,颜色为:#9CA837;如下图所示



4.为仪表盘设置数据刻度,如图




5.接下来制作指针,在工作区域拖入第四个矩形元件,并将其形状修改为三角形的样子,设置大小为:6156;拖入第五个矩形并将其形状修改为椭圆形的样子,设置大小为1616,设置颜色为#FF4848,并把组合在一起命名为“指针”,如下图所示




6.仪表盘区域拖入两个动态面板,命名为“1”和“2”,设置两个状态,两个动态面板设置为隐藏状态,其作用是控制指针的动态,拖入一个文本框命名为“3”,其初始值为0,用来显示仪表盘刻度,如下图所示




原型元件制作完毕,接下来对元件进行交互设置

二、交互设置

1.动态面板“1”设置

选择动态面板“1”,对其”状态改变时“进行交互设置:

判断文本框“3”的值,其值可以为任意值,根据需要进行设置,例如:如果值设置为小于75,其指针指向75后停止,在这设置为小于100,设置文本框“3”的值为[[LVAR1+1]],否则停止循环,并对其”载入时"事件进行设置,如下图所示




2.动态面板“2”设置

选择动态面板“2”,对其”状态改变时“进行交互设置:判断文本框“3”的值,其值如果大于0则设置文本框“3”的值为:[[LVAR1-1]],否则停止循环,如下图所示







3.文本框“3”设置

选择文本框“3”,对其”文本改变时“进行交互设置:




所有设计完毕

Powered by Froala Editor

更新:2023-02-26

收藏

0人已收藏

纤纤露

专注axure产品设计

  • 47

    作品

  • 24

    粉丝

  • 15

    关注

  •  Axure中继器案例分享
  • 智慧办公APP
  • 智慧办公数据可视化大屏设计
  • 患者随访模板移动端设计

    猜你喜欢

      2023-02-26 原创文章 教程 举报 160 0 0 0

      Axure8设计—动态仪表盘

      0.0°

      你确定要举报Axure8设计—动态仪表盘

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2022年12月13日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      0
      0
      0

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录