五、数据展示

2024/3/28 vue

合适的数据展示方式可以帮助用户快速地定位和浏览数据,以及更高效得协同工作。在设计时有以下几点需要注意:

  • 依据信息的重要等级、操作频率和关联程度来编排展示的顺序。
  • 注意极端情况下的引导。如数据信息过长,内容为空的初始化状态等。

# 5.1 表格

表格被公认为是展现数据最为清晰、高效的形式之一。它常和排序、搜索、筛选、分页等其他界面元素一起协同,适用于信息的收集和展示、数据的分析和归纳整理、以及操作结构化数据。它结构简单,分隔归纳明确,使信息之间更易于对比,大大提升了用户对信息的接收效率和理解程度。

注:

  1. 表格中的时间、状态、操作栏需保持词语完整不过行。
  2. 当单元格数据为空时,使用 - 来表示暂无数据。
  3. 当操作栏按钮超过3个,后面多余部分使用更多下来归集在一起。

# 5.2 折叠面板

折叠面板通过对信息的分组和收纳,指引用户递进式的获取信息,使界面保持整洁的同时增加空间的有效利用率。

这类组件在导航中大量使用,同时也适合冗长的、无规则的内容管理。

注:若折叠内容彼此之间关联度较低时,可使用更为节省空间的『手风琴』模式——『手风琴』是一种特殊的折叠面板,只允许单项内容区域展开。

# 5.3卡片

卡片是一种承载信息的容器,对可承载的内容类型无过多限制,它让一类信息集中化,增强区块感的同时更易于操作;卡片通常以网格或矩阵的方式排列,传达相互之间的层级关系。适合较为轻量级和个性化较强的信息区块展示。

注:

  1. 卡片通常根据栅格进行排列,建议一行最多不超过四个
  2. 在有限的卡片空间内需注意信息之间的间距,若信息过长可做截断处理。例如『适用于中台(控制台)』

如页面内容加载过慢时,可采用『预加载』或『分步获取』的方式来缓解用户在等待时间中的焦虑感。