Axure8教程——动态仪表盘

0 评论 4914 浏览 6 收藏 6 分钟
渴望踏入产品经理行业但无从下手?我们的1V1私教陪跑实战营,由大厂导师手把手带你入门,从理论到实践,助你快速掌握核心技能,轻松上手!

本文分享了用Axure8制作动态仪表盘的方法,根据设置的数值,仪表盘指针可以旋转到相应的值位置,一起来学习一下吧。

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

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

一、制作原型

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

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

2、在工作区域拖入第二个矩形元件,并将其形状修改为扇形的样子,这里在属性中找到形状设置即可,其大小设置312*312,颜色为:#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”,对其”文本改变时“进行交互设置:

所有设计完毕。

本文由@产品纤纤 原创发布于人人都是产品经理,未经许可,禁止转载。

题图来自 unsplash,基于 CC0 协议。

该文观点仅代表作者本人,人人都是产品经理平台仅提供信息存储空间服务。

更多精彩内容,请关注人人都是产品经理微信公众号或下载App
评论
评论请登录
  1. 目前还没评论,等你发挥!
专题
13372人已学习14篇文章
现在,不少企业和行业都走上了数字化转型的征程。本专题的文章分享了数字化营销策略。
专题
18857人已学习12篇文章
本专题的文章分享了竞品分析的案例。
专题
13949人已学习11篇文章
生活中,难免会接到企业的一些外呼电话,无论是人工外呼还是AI外呼,其背后的外呼业务场景是什么?外呼系统包含哪些内容?本专题的文章分享了外呼系统的设计指南。
专题
16157人已学习12篇文章
用户增长是一个复杂体系,涉及产品、运营、市场、技术等多个环节的相互配合,本专题的文章分享了用户增长方法论。
专题
53831人已学习15篇文章
无论是个人运营体系还是公司运营体系的构建,你都能在这里找到。
专题
12435人已学习12篇文章
如今随着商业的发展,消费者与品牌建立起了更深的联系,商务活动也开始以消费者为中心,所以消费者的体验以及建议就非常重要。本专题的文章分享了消费者行为学。