Axure 9.0 原生组件:让柱图实现动态交互(文本标签)

如何画基础柱图,可以参考之前一篇文章:

​https://blog.csdn.net/xy345382605/article/details/159121644?fromshare=blogdetail&sharetype=blogdetail&sharerId=159121644&sharerefer=PC&sharesource=xy345382605&sharefrom=from_link

技巧:鼠标悬停显示详情

核心需求:鼠标移入在某柱体时,该柱体显示「类 别 + 数量 」详情卡片,增强数据传递效率。

设置这一交互效果,能让用户在浏览柱状图时,通过鼠标悬停获取更详细的数据信息,增强对数据的理解。首先,在画布上选中代表柱体的矩形元件,在右侧交互面板中,点击 "新建交互",选择 "鼠标悬停时" 事件 。在弹出的动作设置窗口中,添加 "显示 / 隐藏" 动作,目标是一个事先准备好的用于显示详细数据的元件,比如文本标签或动态面板。先介绍使用文本标签实现(下一篇文章介绍用动态面板),需提前设置好标签的样式和初始隐藏状态 。

实现步骤

第一步:柱图组合

这一步的作用,防止柱体错位(个人习惯)

第二步:标签准备

准备好文本标签,放到相应的位置,并右键设置为隐藏。

第三步:添加交互

(1)为每一个柱体添加热区,控制好热区的高度和宽度,同时命名好每一个热区的名字,便于后续的区分。

(2)热区置顶,不置顶预览的时候可能不起效果。

(3)热区添加动作(鼠标移入时,显示文本标签;鼠标移出时,隐藏文本标签)。

(绘制单个热区)

(复制热区,调整动作)

实战效果

美化柱状图

色彩搭配在柱状图的美化中起着至关重要的作用,它直接影响着图表的视觉吸引力和信息传达效果 。在选择柱状图的颜色时,要遵循一定的原则。首先是对比度原则,柱体颜色与背景颜色、数据标签颜色之间要有足够的对比度,以确保信息清晰可读 。例如,背景为白色时,柱体可选择深蓝色、深绿色等深色系,数据标签则选择白色,这样在视觉上形成鲜明对比,突出数据内容 。

其次是协调性原则,若图表中有多个数据系列,不同系列柱体颜色之间要相互协调,避免过于刺眼或杂乱的组合 。可以参考色彩理论中的邻近色搭配,如黄色与橙色、蓝色与绿色等,使图表看起来和谐统一 。还可以根据项目的主题和目标受众来选择颜色 。比如,在为儿童教育类产品设计原型中的柱状图时,可选用明亮、活泼的色彩,如粉色、黄色、浅蓝色等,符合儿童的审美喜好;而在商务数据分析项目中,通常采用简洁、专业的颜色,如蓝色、灰色等,体现数据的严谨性和专业性 。

除了颜色选择,柱状图的主题风格也不容忽视 。Axure 9.0 虽然没有像专业图表软件那样丰富的预设主题,但我们可以通过对各个元件样式的统一设置来打造独特的主题风格 。比如,将坐标轴线条设置为细实线,刻度标签采用简洁的无衬线字体,柱体添加一定的圆角效果,整体营造出简约现代的风格;或者将坐标轴线条设计为带有阴影的立体效果,柱体采用金属质感的填充颜色,打造出科技感十足的主题风格 。根据项目需求,从细节入手,精心设计主题风格,让柱状图与整个原型设计相得益彰 。

若本文对您有所帮助,欢迎点赞、收藏、关注,您的支持是我持续创作的最大动力,谢谢!

相关推荐
FII工业富联科技服务15 小时前
Intelligent UI重构工业软件交互:从固定界面到动态生成式交互
人工智能·ui·重构
FII工业富联科技服务18 小时前
从大模型到自主运营:Intelligent UI如何成为工业AI的新入口
人工智能·ui
jason.zeng@150220719 小时前
(九)多轮对话式新增维修记录实现方案
python·prompt·交互·llama
jason.zeng@15022071 天前
(五)多轮对话上下文,实现交互。
python·交互·llama
jason.zeng@15022071 天前
(十)分层架构的多文件工程
python·架构·prompt·交互·ai编程·llama
qq_252959971 天前
ChatGPT突然长出“可操作界面”:GPT-6 Intelligent UI让答案变成计算器、地图和小游戏
gpt·ui·chatgpt
墨天梦1 天前
B16_Material主题与可访问交互
android·kotlin·交互
兰亭妙微UI设计公司1 天前
兰亭妙微ui设计公司分享:从零搭建网站设计:3 个核心维度,少走设计弯路
ui
Cx330❀2 天前
Qt 多线程深度解析:从底层原理到 UI 线程与同步实战
开发语言·qt·ui·搜索引擎·性能优化·图形渲染
传奇开心果编程2 天前
【声明式UI实用开发技术学与练】第5课 表单处理:受控与非受控
ui·移动开发·开发范式·编程框架·声明式ui