Axure怎么设计点赞的百分比进度条?
在投票类的网页中，点击“支持”按键后，不仅增加“被支持”一方的“投票”数量，还显示“投票”比例，该怎么制作这类的网页呢？具体效果图如下，详细操作请看下文详细介绍。
“进度条”的基本制作原理，可先参考以下链接，是个基础，这里不再累述部分代码原理~
在axure中，按以下图示，设置组件布局：
先设置”按键1“的交互动作：
动作1：
设置”参数1“的数值，即点击“支持”后，数值加1
设置"参数1"的“元件文字”为局部变量LVAR1
所以”参数1“的数值为：[[LVAR1+1]]
动作2：
1.触发"颜色进度条1"的"载入时"动作
2.触发"颜色进度条2"的"载入时"动作
然后看下“颜色进度条1”的“载入时”的交互动作：
动作1：
设置”总量1“的内容，即“进度条1”的比率数值，这是一个临时的过渡数值
设置"参数1"的“元件文字”为局部变量LVAR1
设置"参数2"的“元件文字”为局部变量LVAR2
所以所需的”比率数值“的公式为：[[LVAR1/(LVAR1+LVAR2)*100]]
（*100是为了百分比格式化方便些）
动作2：
设置”颜色进度条2“的宽度
设置"总量1"的“元件”为局部变量LVAR1
所以”颜色进度条2“的宽度为：[[LVAR1.text*LVAR1.width/100]]
（/100是抵消百分比扩大的数额）
动作3：
设置”百分比1“的内容，这个数值需要格式化（保留2为小数）
设置"总量1"的“元件文字”为局部变量LVAR1
所以”百分比1“的格式化后的内容：（[[LVAR1.toFixed(2)]]%）
”按键2“及”颜色进度条2“的交互方式与”按键2“及”颜色进度条2“的交互相同，这里不再累述，可以通过复制代码的方式便捷操作，需要注意的时，参数的赋值需要修正~
”按键2“的交互代码：
”颜色进度条2“的交互代码：
到这里就设置结束了，设置还算简单……
一切设置正确，效果就如下：
以上就是Axure设计点赞的百分比进度条的教程，希望大家喜欢，请继续关注我们。
相关推荐
-
电脑Excel表格怎么制作百分比进度条
Excel是我们现在经常使用的办公软件,可以帮助我们处理很多的数据问题,今天小编跟大家分享下电脑Excel表格怎么制作百分比进度条.具体如下:1. 首先我们打开电脑,然后点击下方开始菜单,在打开的窗口 ...
-
Axure8怎么实现简易的百分比进度条?
Axure8简易进度条主要目的: 1.对交互用例的熟悉 2.元件样式.布局工具数据 3.对变量的基本操作 一.分析 进度条:单位时间内加载内容在总内容的百分比. 单位时间:例子中设定为固定时间 完成总 ...
-
excel表格百分比进度条怎么做
excel进度条制作步骤如下: 我们先来观察一下最终效果图,图中红色方框里单元格里有柱状进度条,百分比显示数值.而我们就是要做出这种效果. 为了方便说明,我把上图中的表格复制,只是黏贴的时候选择只黏贴 ...
-
如何给EXCEL单元格添加百分比进度条
制作表格是纯文字的话,看着多多少少有些累,如果能加些直观的显示效果是最好的,下面来演示一下单元格添加进度条: 操作方法 01 首先要准备好表格,这里演示做个一个很简单的收款表,主要对最后一列进行操作: ...
-
Axure怎么制作百分比的进度条动画?
进度条我们经常看到,想要使用axure制作一个百分比进度条动画效果,该怎么制作呢?下面我们就来看看详细的教程. 1.为了说明效果,特意放置了3条进度条,以示不同比例的效果,这里仅以一条进度条做范本,如 ...
-
axure怎么制作进度条的效果? axure进度条的制作方法
Auxre种族网页原型很方便,今天我们就来看看使用axure制作常见的进度条的教程. 1.首先打开Axure,新建一个空白页面,在工作区域内拖入本次要使用的各个元件,如下图所示. 2.然后对各个元件的 ...
-
111个酷帅狂拽屌的Loading进度条界面设计
[好东西当然是要大家一起分享哟~~~]第一次和大家分享,简直激动的~~内牛满面~~所以说话有点不太正常,还请大家勿怪~~ 今天和大家分享的是"111个酷帅狂拽屌的Loading进度条界面设计 ...
-
Excel表格怎么将百分比显示为进度条呢？
Excel通常用在统计数据中,那怎么把百分比用进度条显示出来呢? 方法: 01 新建Excel. 02 在Excel中输入需要整理的一些员工的姓名和员工所对应的绩效程度. 03 将完成的绩效的格式改为 ...
-
怎么在excel单元格中按百分比显示进度条/柱形图
直奔主题吧,对比下面两幅图中红色方框里的数据,哪一种更让你一目了然呢,很显然,是带有柱状进度条的那一幅可以一下子看出各行所占的比例等.那么怎么做出这种效果呢? 操作方法 01 我们先来观察一下最终效果 ...
