it-swarm.cn

在网格中,如何显示长列标题

在网格中显示数据时(每行包含一个记录,每列包含一个不同的记录字段),通过滚动或分页可以轻松解决垂直空间需求。

通常,随着列或列数据的数量变大,我们很快就会缺少水平空间。这个主题已经在这里讨论: 如何显示太多数据 ,这不是我要问的重点。

某些列的数据占用的空间很小(复选框,日期或图标),但其标题标签很长。结果是由于标题(而不是数据)导致列变宽,从而明显损失了水平空间。

有一些简单的解决方案:

  • 查找较短的标题文本
  • 将标题文本包装成多行
  • 垂直显示标题文本
  • 用鼠标悬停在包含完整标签的工具提示上显示缩写
  • 使用图标作为标题

在某些情况下,这些解决方案均无法应用,同时保持清晰易懂的UI。您有什么解决方案?

13
Mart

我见过的使用最广泛的方法是使用省略号来表示还有更多文本,例如:

alt text

然后,您可以在悬停时提供工具提示,以向用户显示完整名称。在Mac OS上,第一步Apple试图压缩文本。它们通过减少字母和单词之间的间距来做到这一点。想法是在添加省略号是不得已的方法。

我在应用程序中看到了另一种更为优雅的方法,该方法会使最后显示的字母消失。我不记得该应用程序的名称,但它看起来像这样:

alt text

这显然是更多的工作,但它确实看起来更现代,更经典。我很惊讶它还没有成为Mac OS的标准功能。说起来,Apple does在Spotlight中使用淡入淡出可以显示较长的文件路径:

alt text

除了淡入淡出的文件路径外,请参见文件“ YLListenerBase.cpp”:如果将其与其.h文件进行比较,则可以看到它已压缩。具有淡入淡出效果的文件路径位于窗口底部。

7
Hisham

我想我在另一个问题的评论中建议了此内容,但要回顾一下...当图标可以准确描述列含义时,我建议使用图标。

alt text

引用 comment 引用另一个问题:

例如。如果您有一列仅包含单个字符(例如Y/N /?或0/1/2/3 /?或T/F),并且可以在标题中使用图标或缩写文本,则可能能够大大减少列宽。例如如果您有“数字”列,则使用“#”会节省一些空间。

3
scunliffe

您的清单非常详尽。您无能为力,只能选择最适合自己的情况。

  • 如果标题是多个单词,则换行可能是最佳选择。如果使用适当的连字符,还可以分解偶尔的长单词。请勿在任意点分词。

  • 除非图标已经在应用程序中的其他位置建立,否则您通常会比图标幸运地获得缩写。如果您没有使用已建立的缩写,请在上下文中对其进行测试,以确保用户可以猜到它们。是的,无论您使用的是图标还是缩写,都应使用工具提示,但不要依靠它们正常使用。缩写通常不需要句号,这样可以节省空间。

  • 如果垂直显示标题,则通过横向书写文本而不是将字母堆叠在一起,可以提高可读性。

  • 与其垂直显示标题,不如将列顶部弯曲,以30至45度角显示标题文本。现在只需要轻轻的一头就可以阅读它们。但是,只有当您有一堆带有长标题的相邻列时,这才起作用。

  • 对于某些网格(例如,字段值在不同字段之间的宽度趋于相同)(例如,用于显示火车时刻表),将列与行交换是有意义的。现在您的列标题是行标题,可以很长而又不会浪费空间。

请记住,没有任何法律禁止在网格中水平滚动。多年来,用户使用电子表格已经做到了这一点。

2
Michael Zuschlag

为什么不使用专栏听到的上方堆积的“云”呢?如果长久的保养真的很重要,那就疯了:

       ________________   _____________
      |Super Long Title| |I'm also long|
               ^            ^
| Foo | Bar |  |   | Baz |  |  | FooBar |
|  x  |  y  |   z  |  xy |  yx |  xyz   |
|  x  |  y  |   z  |  xy |  yx |  xyz   |
|  x  |  y  |   z  |  xy |  yx |  xyz   |
|  x  |  y  |   z  |  xy |  yx |  xyz   |
|  x  |  y  |   z  |  xy |  yx |  xyz   |
|  x  |  y  |   z  |  xy |  yx |  xyz   |
|  x  |  y  |   z  |  xy |  yx |  xyz   |
|  x  |  y  |   z  |  xy |  yx |  xyz   |
2
Dominic Hopton

已经提到了一些好的解决方案。这里还有一个需要考虑的地方:为列和图例使用颜色,数字或字母标识符。

Color and Letter Identifyers

1
Ray Perfetti