it-swarm.cn

HTML表格的最佳UI。

我经常需要显示表格数据,我想要所有的魔术。 。 。对列,分页等进行排序。我更喜欢使用列,在其中单击列名,然后为用户完成排序(通常使用javascript,尽管分页也比较困难,因为您只对数据进行排序屏幕还是按该列排序,然后将其放回第一页?)但是如何指示它已被排序?有什么好的UI提示呢?列名应如何显示?另外,我喜欢用灰色为其他所有结果着色,但随后我看到某人的屏幕亮度过高,并且灰度不够使他们无法区分行,但是如果我增加了灰色量,则不会足够的对比度以舒适地阅读黑色文本。

正确完成表格的一些示例是什么?

6
tooshel

传统上,“排序依据”是通过表示升序或降序排序的上/下箭头指示的。列名的对比度应比值高,例如,粗体文本或阴影背景。

就个人而言,在为交替的行着色时,我通常会更浅而不是更暗,因为用户与表交互的时间越长,效果就会越明显。

以下是一些表格布局选项的好例子: http://patterntap.com/tap/collection/tables

14
David Perini
  • 对整个表中的数据进行排序,而不仅仅是对屏幕上的数据进行排序。是的,他们必须从新排序顺序的第一页开始,但是没关系-如果您要按ID进行排序,然后希望在第10页上决定按姓氏排序,您是否希望能够理解这些内容?
  • 通过突出显示正在排序的列中的表标题单元格的背景来表明它已被排序。您甚至可以更进一步,突出显示整个专栏。使用箭头使其更明显(并且更易于访问),例如,向右指向未排序的箭头,向右指向未排序的箭头。
  • 列名仅应区分为列名。我倾向于使它们比表格单元格的内容更大和更大胆。
  • 仅在需要时才用灰色为其他结果着色,以增加单个行的可扫描性。如果这是您要设计的,那么稍微降低总体可读性的权衡就很好了,因为用户正在扫描而不是阅读。最终,不可能针对每种屏幕亮度进行设计,因此只需确保选择一个满意的介质并坚持使用即可。

我目前没有任何直接的示例,但是这是我为我的Web应用程序设计的表的示例,该表遵循上述建议/偏好:

image of a table

5
Rahul

从纯粹的视觉角度来看,请检阅 http://www.datatables.net/ (jQuery插件)。主页上的样本表具有您提到的已实现的功能。

在技​​术方面,这取决于您的后端技术正在使用什么。如果您在.Net服务器上运行,则ASP 3.5和4)中包含的控件很容易按照您的描述工作,而无需jQuery和插件依赖性。

4
Rob Allen

查看ExtJS网格。 http://dev.sencha.com/deploy/dev/examples/#sample-

我见过的任何JS框架的最佳用户交互。我们在Marketo的应用中广泛依赖它。

4
Glen Lipka

如果您需要具有“所有魔力”的数据网格,请尝试dhtmlxGrid: http://www.dhtmlx.com/docs/products/dhtmlxGrid/index.shtml

这是我所见过的最强大的JavaScript网格之一。

2
Steve E.

好吧,如果您想以两种方式进行排序,则有经典的上/下箭头,例如在Windows资源管理器/ gnome nautilus中,它们的颜色通常比单元格深。

alt text

1
dierre