Skip to main content
ExodeUI

EXODEUI DESKTOP

A little space for good ideas.

Choose your platform to get the official ExodeUI installer.

Looking for Intel Mac or other builds? Explore the web studio or check all download options.

Prefer the browser? Try for free in your browser →
用户体验策略8 分钟阅读·Updated 2026 年 10 月·ExodeUI 团队

B2B SaaS 中的信息密度:为高级用户和新手设计仪表板

如何设计密集的 B2B 仪表板和表格,让专家可以快速浏览而不会让新用户感到不知所措:密度模式、层次结构、渐进式披露。

直接总结和定义

核心要点

密集的接口不是问题;杂乱无章的是。专家希望每个屏幕提供更多信息,因此为他们提供强大的层次结构、一致的对齐方式以及使用位置和长度的图表。通过合理的默认设置和渐进式披露来保护新手,并让人们选择密度级别,就像 Carbon 等设计系统对表格所做的那样。

密度是专家的一个特征

整天使用 B2B 工具的人(例如分析师、支持代理和操作员)通常更喜欢一次查看更多内容,因为滚动和切换选项卡会浪费他们的时间。为了获得清晰的屏幕截图而将所有内容变得宽敞可能会使他们的工作速度变慢。目标是密集但易于浏览的信息。

让人们选择密度

设计系统现在将密度构建到组件中。例如,IBM 的 Carbon 数据表提供五种行高,从用于高密度布局的超小(24 像素)到用于更轻松扫描的超大(64 像素),默认为中(40 像素)。

  • 提供两个或三个密度设置,每个用户都会记住。
  • 更改间距和行高,而不是字体大小或对比度。
  • 无论密度如何,在触摸设备上保持触摸目标足够大。
以紧凑、默认和舒适的行高显示相同的数据表
一张桌子具有三种密度。让人们挑选;保持所有内容中的文本大小和对比度可读。

层次结构使密度可读

Nielsen Norman Group 将仪表板定义为可视化,提供人们可以快速采取行动的一目了然的信息,并建议人们阅读速度最快的长度和 2D 位置的编码量。在实践中:将推动决策的少数数字放在顶部,将所有内容与网格对齐,仅使用颜色表示含义(状态、警报),并将数字右对齐以便可以进行比较。

保护新手而不减慢专家的速度

渐进式披露使高级选项可用但不妨碍。使用集中的默认视图启动新用户,让他们根据需要添加列、过滤器和小部件,并保存视图,以便专家可以立即返回到他们的密集设置。

密集界面中的运动

在数据密集的屏幕中,动作应该解释变化,而不是装饰:突出显示刚刚更新的值,将行动画移动到新的排序位置,或者显示图表转换,以便人们可以跟踪移动的内容。保持简短,并避免与数据竞争的连续动画。

要记住的关键 Principle

  • 专家受益于密集的屏幕;混乱才是真正的问题
  • 通过更改间距而不是字体大小或对比度来提供密度设置
  • 使用数字的长度和位置;颜色仅代表意义
  • 渐进式披露保护新手
  • 使用动作来解释数据的变化,而不是装饰

常见问题解答

来源

  1. Data table usage — 碳设计系统(IBM)
  2. Dashboards: Making Charts and Graphs Easier to Understand — Nielsen Norman Group
  3. Progressive Disclosure — Nielsen Norman Group

相关指南和示例

解释数据变化的动作

打开交互式 ExodeUI 示例,包括动画图表和状态变化,并查看运动是如何构建的。

打开示例
免费试用