在理想的世界中，表格可以帮助用户分析数据、比较价值并获得无价的见解。实际上，通常情况下，它们塞满了信息，无法扫描。通过我们的最佳实践扭转局面并掌握这个棘手组件的设计。
以不同的方式设置表格标题
通过将表头与正文区分开来并给予更多强调，您可以在设计中建立信息层次结构。使用更突出的背景、字体粗细和颜色来强调对比度，让用户更容易浏览表格。
表示溢出内容
表格的内容并不总是适合固定大小的单元格，因此溢出是不可避免的。在这种情况下，您可以选择：
• 使用省略号指示文本已被截断。
• 当鼠标悬停在单元格上时，提供包含全文的工具提示。
• 为用户提供调整列和行大小的选项。
• 允许用户隐藏和重新排序列以仅显示与他们相关的信息。
将数字向右对齐
表格中使用的对齐类型取决于数据类型。对于数字，右对齐要好得多，因为用户可以比较数值而不管其大小。
将文本左对齐
在从左到右的语言中，文本总是从左到右阅读。如果表格未与左侧对齐，则尝试扫描表格的文本内容可能会让用户感到恼火。
对齐标题的方式与其各自列中的内容相同。
使用清晰的字体
在设计桌子时，必须使用独特且清晰易读的字体。无衬线字体满足此目的的所有标准，因为它们比衬线字体更少装饰性且更具可读性。此外，无衬线简单有助于减少认知负担并更好地理解内容。
在决定表格加载内容的字体时，请仔细查看 Roboto、Verdana 或 Helvetica。
提供可调整大小的列
当内容不适合单元格时，可调整大小的列会很有帮助。它们允许用户查看与他们相关的整条信息，而无需来回查看。
要让您的用户知道表格上的列可以调整大小，请使用指示列可以调整大小的光标，并且您已准备就绪。
允许排序
允许用户按升序或降序对不同类别的内容进行排序——例如，按字母顺序或时间顺序。重载的表很难扫描，使得比较数据变得困难——而排序可以使它更容易。
您可以使用向上或向下箭头图标指示对列进行排序。如果将图标添加到所有列会给您的设计增加过多的视觉噪音，请考虑仅在悬停时显示它。此外，当它对列处于活动状态时，保持排序图标可见。
粘性表格标题
当用户开始滚动时隐藏标签会使长表无法阅读和分析。在表格顶部添加一个粘性表格标题以始终保持列标签可见，因为它使用户正在寻找的信息更容易找到。
粘性列
列可能包括用户一直引用的重要数据。添加一个选项以使用粘性列固定列位置，以便用户无论水平滚动多远都可以始终看到它。它还将有助于更有效地比较来自不同列的数据。
允许每页项目控制
有时，表格可能会运行很长时间并变得不堪重负。为用户提供选择每页要查看多少项目的选项——这将帮助他们更有效地理解和扫描表格。
避免较小的每页项目范围，并提供那些可以显着改变页面视图的项目 - 例如 20、50 和 100。
保持表格样式简单
保持表格样式简单，更加强调需要用户注意的内容——避免过度使用斜体或粗体，并保持颜色层次。
表格使用斑马纹
斑马纹表格具有交替的数据行背景，引导用户的视线并增强可扫描性。它们使大量数据看起来更加和谐和有条理。
但是，请记住，条纹颜色之间的太多对比会增加更多不必要的视觉噪音
保持熟悉的链接样式
不应该改变最熟悉的链接外观——带下划线的蓝色文本。这样做可以确保用户清楚地知道一个项目是一个可以点击的链接。
确保链接在被选中后将其颜色变为蓝色，以便用户知道他们已经点击了哪些链接。
允许重新排序
添加对列重新排序的选项使用户能够按照他们认为合适的方式排列内容。使用拖放功能将其钉牢——这是实现这些目的最直观的方法。
确保添加足够的视觉提示来说明拖放过程，例如光标状态转换、高度和阴影。
边框样式
通常，行和列之间的线条边界会造成视觉混乱并使设计看起来不整洁。
但是，例外情况是水平线在行之间的空间有限并且没有视觉分隔线的内容难以辨认的情况下很有用。
行动作
悬停动作就像救生艇——在你需要它们之前你不需要它们。在用户将鼠标悬停在行上之前，行操作应该是不可见的，提供必要的功能，同时节省空间并减少混乱。
需要考虑的一点是，如果用户不与表格交互，他们将不知道悬停动作的存在。
允许批量操作
批量操作是允许用户选择多个项目并一次对其应用一个操作。
确保多选复选框始终可见，让用户知道批量操作可用。一旦用户选择了一个复选框，允许批量操作图标明显弹出。
将批量操作图标保留在表格顶部——用户熟悉的显眼位置
谨慎使用颜色
谨慎使用颜色，牢记视觉层次。毫无目的地使用颜色来娱乐会造成视觉混乱，并将重点从有意义的内容上转移开。
使用一致的字符串格式
人脑喜欢一致性。选择一种字符串格式意味着您的用户知道会发生什么并立即识别字符串。相反，混合字符串格式会使用户感到沮丧并导致不必要的摩擦。
使用表格数字
表格数字是指所有数字都具有相同宽度的字体格式——例如，1 占用的空间与 9 一样多。它使具有相同位数的所有数字看起来始终成比例，从而更容易扫描和比较数据。
如果您想保持排版一致，请首先选择包含表格图形的字体。
本文内容为转载
网友评论