辉灿新闻网 原型设计 Axure 教程:用中继器做排名图

Axure 教程:用中继器做排名图

本文将教大家如何在axure用中继器做一个排名图,达到填写中继器数据,自动生成图标的目的。

一、效果介绍

二、功能介绍

    简单填写中继器内容即可生成排名图,无需连外网。样式颜色等可以自由变换。鼠标移入时能显示具体数据。

三、制作方法

(1)中继器里有两列,x和no,x为中坐标,no为具体数值如下图所示:

(2)中继器内材料:文本框+矩形1,如下图所示放置即可:

(3)在中继器外建一个文本框(命名为最大值)并隐藏,只用于逻辑处理。文本框的值填写no里面最大的值,该案例为920。逻辑是找到最长的矩形的值,让比它短的矩形值调低宽度。具体公式[[LVAR2.width*(Item.no/LVAR1)]]。

LVAR2.width指矩形的宽,LVAR1指no的最大值,Item.no指no的当前值。

(4)具体交互

中继器每项加载时,是设置中继器内的文本框的文字=[[Item.x]]设置矩形的尺寸[[LVAR2.width*(Item.no/LVAR1)]],锚点在左部。

(5)用矩形和标签制作外框并标上刻度,如下图所示:

将中继器移动到对应位置上即可。

(6)做一个标签,如下图所示,默认隐藏,透明度75%。

思路,鼠标移入矩形的时候,显示标签,标签跟随鼠标移动,让Item.no的值=文本标签2,Item.x的值=文本标签1。

鼠标移出的时候,隐藏标签即可。

这样制作完成了排名图,以后使用方便,仅需简单填写中继器的内容,即可拥有完美的效果,所以强烈推荐给各位使用。

需要原型的小伙伴们可以在评论留言哦,谢谢大家!

在线演示地址:https://www.pmdaniu.com

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

题图来自Unsplash,基于CC0协议

本文来自网络,不代表辉灿新闻网立场,转载请注明出处:https://news.jbjy8888.com/yuanxing/1039.html

作者: 梓贤vigo

Axure教程:使用动态面板实现收藏→已收藏

Axure教程:简单开关按钮的实现

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注

联系我们

联系我们

暂无

在线咨询: QQ交谈

邮箱: meiliao888@163.com

工作时间:周一至周五,10:00-19:00,节假日休息。
关注微信
微信扫一扫关注我们

微信扫一扫关注我们

关注微博
返回顶部