VISUAL LANGUAGE / DESIGN GUIDE

热力矩阵

Heat Map & Heatmap Style

通过色阶表达二维格点中的数量或强弱,使集群和异常易于辨认。它是数据编码方法,颜色必须对应明确的量纲与范围。

热力矩阵设计指南

本站编写的设计取舍与实现建议;实例是说明用的界面方案,不是客户案例、官方截图或效果承诺。目录中的部分条目是交互策略、业务布局或平台设计系统,并非同一层级的视觉流派。

设计原理

通过色阶表达二维格点中的数量或强弱,使集群和异常易于辨认。它是数据编码方法,颜色必须对应明确的量纲与范围。

适用场景

时间与类别矩阵、相关性表、重复事件分布。

不适用与取舍

需要读取精确数值的财务核对,或网格过多导致单元不可选择的手机页面。

实现方法

连续值用顺序色阶,有正负含义才用发散色阶;提供图例、单元数值和可访问表格。缺失值使用单独样式,缩放或筛选不悄悄改变色阶。

具体界面示例

活动按星期与小时排列,图例写明次数,点击单元可读具体数值;没有记录的时段与零次分开。

常见误区

彩虹色容易制造不存在的边界;每次筛选自动重设最大值会让同一种颜色代表不同数量。

继续比较

结合材料、布局或父子变体比较选择。

启用 JavaScript 可切换浅深色、收藏、使用组件演示并复制提示词。实例用于解释设计,不代表真实业务业绩。