高信息密度 Dashboard,不等于把页面塞满
后台的高级感不来自大卡片和大字号,而来自稳定的层级、可扫描的状态和能在一屏完成判断的信息密度。
- 创建时间
- 更新时间
- 阅读时长
- 10 分钟

#密度是决策速度,不是元素数量
高密度界面的目标,是让熟练用户用更少视线移动完成比较和决策。真正该压缩的是重复容器、无意义留白和二级说明,而不是点击目标与错误提示。
先区分三类内容:必须持续监测的指标、需要主动处理的异常、可按需展开的背景信息。它们不应该使用同一种卡片重量。
#用对齐建立扫描路径
表格、列表和指标卡共享相同的边距、数字对齐和状态位置,用户才能形成肌肉记忆。数字使用 tabular numbers,状态固定在同一列,操作不要在每张卡片里换位置。
当信息区超过三列时,优先让每列承担明确职责,而不是让每个模块都试图独立讲完整故事。
#紧凑模式要保留恢复能力
紧凑并不意味着隐藏问题。异常项仍要有文本状态、原因和下一步动作;筛选条件要可见且可撤销。
如果用户必须频繁打开抽屉或详情页才能理解列表,所谓高密度只是在把认知成本转移到下一层。
#先做决策清单,再做指标清单
Dashboard 设计不应从“有哪些数据”开始,而应从用户每次打开页面要做哪些判断开始。判断通常只有几类:是否正常、哪里异常、影响多大、先处理什么、处理后是否恢复。不能支持这些动作的数据,即使重要,也不一定要进入首屏。
为每个模块写出动词:比较渠道、定位失败、批准预算、追踪回归。若一个模块只能被描述为“展示概览”,它大概率还没有明确职责。职责明确后再决定使用数字、趋势、分布、列表还是明细。
同一指标在不同角色眼里可能承担不同任务。管理者看趋势与风险,运营看异常队列,工程师看原因与日志。不要为了复用一张 Dashboard 让所有角色同时忍受不属于自己的信息。
#建立密度 Token,而不是到处改 padding
紧凑模式应该是系统能力。为 row height、cell padding、control height、font size、line height、icon size 和 section gap 建立成组的 Density Token,再由 comfortable、compact 等模式统一切换。
密度切换不能破坏点击目标、键盘焦点和错误文本。表格行可以变矮,但复选框和菜单仍需足够的交互区域;辅助信息可以折叠,但异常原因不能只剩一个红点。
数字使用 tabular numbers,单位和小数位保持一致,长文本定义截断与展开策略。很多所谓“页面太挤”并不是元素太多,而是数字、标签和操作没有共享对齐规则。
#用真实压力场景检查一屏判断能力
不要只拿正常数据验收 Dashboard。准备全零、极大值、负数、长组织名、多语言、几十个筛选条件和同时出现五类异常的样本,观察布局是否仍能保持扫描路径。
测试熟练用户能否在不打开详情的情况下完成第一轮判断,也测试新用户能否理解缩写、单位和状态。高密度不是只服务专家,而是把常用信息组织得足够稳定,让新手也能逐步形成肌肉记忆。
最后记录三类时间:发现异常需要多久、定位原因需要多久、执行动作需要多久。优化目标是缩短决策链路,而不是把更多模块塞进同一张截图。
把判断变成项目里的检查节点
先用本文的第一个判断定义目标,再用第二个判断检查过程,最后把第三个判断写成验收条件。这样文章不会停在审美结论,而会进入需求、设计评审和上线复盘。
- 01按监测、处理、背景三类信息分层
- 02把数字、状态、操作位置固定下来
- 03压缩容器,不压缩可恢复性