从技术架构视角解析衡石可视化产品的灵活性与用户体验优化

标准产品的取舍

做标准产品易用性和灵活度是一个值得讨论的话题,易用性往往是更明确入口、更简单的交互,但场景也会比较固定;灵活度是能够满足更多更个性化的需求,但易用性上往往会受到影响。

衡石产品易用性

举个例子,我们想看公司按地区和订单日期的销售额,在衡石中只需要选择分组堆叠柱状图,然后分别拖入三个字段就可以看到了,如图:

通过三次拖拽就能出图,这是易用性的体现。这个时候如果我们想更改图元的颜色,就可以到样式中去修改,如图:

这里我们看到,样式中存在很多配置,满足了我们针对于这一类型图的常规配置,但这里我们需要警惕,如果为了满足各种场景这里无限制的增加配置,易用性是会被大大影响的,从产品的角度我们需要限定范围,哪些是高频的、通用的配置,才能够放到这里。

衡石产品灵活度

针对上图,我们从产品上限制了颜色由次维度主导,那我们如果想要用颜色的深浅来衡量销售额的多少怎么办呢?答案是在这个图上是做不到的,不过我们有一个灵活度更高的图,那就是组合图表。组合图表是基于一套使用数据来描述图元信息的可视化逻辑,致敬Tableau。如图:

地区是主维度,控制了 x 轴的显示内容,销售额控制了 y 轴的显示和值的范围,并且销售额控制了颜色,这个时候图元就是按照销售额的大小来显示对应的颜色,订单日期在次维度中切分数据。这里通过变化数据控制图元属性能够都不同的展现形式,灵活度很高,但是易用性上就有一些门槛了,具体的细节可以参考

将灵活做到极致

如果还想做一些更灵活的图怎么办?想做一个 3D 的地球?想做一个动态排行榜?答案是可以通过自定义图表来实现,自定义图表提供了可以使用 JS 的能力,编写的JS 将会在沙盒中运行,目前内置了D3、Echarts、EchartsGL、Three.js,如果不满足于这些,还可以通过全局JS的方式加载其他的插件,可以按照需求实现各种可视化效果。简单截几个图:

敬请期待新模版

这里可以做的东西更多,但门槛也更高,为了降低这个使用门槛,我们正计划开发模板平台,让大家可以寻找和分享创建的自定义图表,详细的使用可以参考 https://docs.hengshi.com/v5.3/custom-charts.htm

易用性 or 灵活度? 我们都要!

总的来说,做标准产品平衡易用性和灵活度是一个挑战,衡石在针对数据可视化上,通过预置图表来提高高频图表的易用性,通过组合图表来完成一些个性化的数据展示,通过自定义图表来让完成一些更复杂的需求。

相关推荐
学嵌入式的小杨同学14 小时前
【Linux 封神之路】信号编程全解析:从信号基础到 MP3 播放器实战(含核心 API 与避坑指南)
java·linux·c语言·开发语言·vscode·vim·ux
学嵌入式的小杨同学1 天前
【嵌入式 GUI 实战】LVGL+MP3 播放器:从环境搭建到图形界面开发全指南
linux·c语言·开发语言·vscode·vim·音频·ux
光影少年2 天前
智能体UI ux pro max
前端·ui·ux
学嵌入式的小杨同学2 天前
【Linux 封神之路】进程进阶实战:fork/vfork/exec 函数族 + 作业实现(含僵尸进程解决方案)
linux·开发语言·vscode·嵌入式硬件·vim·软件工程·ux
上海云盾-小余2 天前
高防 CDN 核心价值:抵御 DDoS 攻击与提升用户体验双赢
ddos·ux
檐下翻书1732 天前
AI原生应用:重新定义软件与用户体验
ux·ai-native
木子啊2 天前
优雅接管异常:打造安全的用户体验
安全·ux
冬奇Lab6 天前
一天一个开源项目(第8篇):UI/UX Pro Max Skill - AI设计智能助手,让AI帮你构建专业UI/UX
ui·开源·ux
学嵌入式的小杨同学6 天前
【Linux 封神之路】文件操作 + 时间编程实战:从缓冲区到时间格式化全解析
linux·c语言·开发语言·前端·数据库·算法·ux
学嵌入式的小杨同学8 天前
【Linux 实战】Makefile 自动化构建进阶:静态库 / 动态库通用模板(一键编译 + 系统安装)
linux·开发语言·git·vscode·spring·vim·ux