在搜索结果中组织大量数据

时间:2010-06-04 16:52:14

标签: search user-interface

我正在开发一个非常基本的网络应用程序(不仅仅是CRUD的东西)。但是,这些要求要求在搜索结果中显示每个项目的一堆数据 - ID,日期,电子邮件地址,长描述......太多而无法整齐地插入到简单的网格中,而且太过不同以使它们流动在一起(就像this article中的自然语言示例。)

是否有一种设计模式可以在每个搜索结果中巧妙地显示许多描述性字段?

(请不要告诉我只是从结果中删除一些字段;这不是此项目的选项。)

3 个答案:

答案 0 :(得分:1)

这可能取决于您显示的内容。查看此问题的StackOverflow布局。它有投票标题描述标签作者等。内容在网格中无法正常工作,也不能很好地自行流动。

我认为是时候发挥创意了;)

答案 1 :(得分:1)

显然,有很多方法可以解决这个问题,在某种程度上,它是您信息设计能力和偏好的一个因素。

自然数据分组

我要做的是尝试将您的数据整理成少量的“存储桶”。您声明数据太不相似而无法排列成句子,但您可能可以创建一些逻辑组。既然我们看不到你的所有数据,我猜你有关于一个人的信息(电子邮件,姓名,身份证?),关于某种事件(日期?类型?),或者某些与某种对象有关的信息对人(订单?类?)。无论它们是什么,一些数据将彼此更密切相关。

以大块设计

取出每个松散的“桶”并设计一种“盘子” - 仅用于该桶中的信息的分组。这个受约束的块中的设计问题更容易解决:也许它是一个类似于表的布局,也许它是非表格式的,如stackoverflow用户“铭牌”。也许长文本数据有自己的版块,或者它们可能被分组到一个单独的板块中,但是具有预览/细节点击更多的安排。

使用网格

现在您拥有少量“牌照”,然后回到类似网格的方法进行整体搜索结果行设计。将板作为单元排列在行内,并确保它们保持对齐。在板的整体网格(HTML表格或其他)之后将避免“信息汤”问题。您将拥有可以很好地扫描的干净列,以及可读,自然的信息层次结构。如果它是搜索结果网格中显示的众多行之一,那么您引用的自然语言示例确实难以解析。

<强>一致性

当你处理块时,一定要使用一个常见的“设计词汇表” - 标签的一致造型,一致的间距......所以尽管有大量信息显示所有内容,但它们都感觉像是它的一部分同一个家庭。

这是一项有趣的设计练习。许多组合,大量的迭代和一些头脑风暴应该可以让你到达你需要的地方。

答案 2 :(得分:0)

没有人会想到它们在屏幕上的样子,是吗?

您可以做的一件事是截断显示的文本,然后在悬停时或在用户点击它之后在工具提示中显示扩展版本。

例如,仅显示两个字母的州名缩写,但在悬停时显示完整的州名称。

或者,为了节省更多空间,只显示状态缩写,并将整个地址放在工具提示中。

对于长描述,您只能显示前几个字符,后跟省略号或“更多”字样。然后,在悬停或单击时显示全文。

悬停方法的一个缺点是您无法对该文本上的列进行排序。用户无需单击即可请求排序。