design-patterns - 是否有用于设计具有多个字段的搜索表单的良好 UI 模式？

Question

我很难找到任何描述大型搜索表单的良好 UI 模式的资源。我有一个需要 20 多个可能输入的表单，并且无法提出我感觉良好的设计（尽管在我的辩护中我不是设计专家）。就我而言，我正在寻找一个 Web 解决方案，但我想这种场景的 UI 模式可能与平台无关。

我查看了一些网站，如谷歌和亚马逊（高级搜索），想知道是否有更好的想法。有什么建议么？

Answer 1

我认为谷歌高级搜索是一个很好的起点。

您可能需要记住以下几点：

1. 确保您清楚表格中每个字段的需求。它们可能都是完全必要的，但如果有些不是，那么它们可能会使表单变得不必要地复杂。

2. 尝试使用字段集将您的问题分组到逻辑区域中，并在页面上将它们直观地分开。这应该更容易处理表单。

3. 您可以尝试使用 javascript 隐藏表单区域，以减少初始视图的混乱。尽管如果显示这些部分的控件标记不当，这可能会使用户感到困惑。

4. 确保您在尽可能多的人身上试用您的设计——最好是来自将使用它的社区。

需要考虑的一些资源：

我意识到搜索表单设计存在一些特定的挑战，但以下资源应该会有所帮助。

• UI 模式的表单

• Wufoo - 用于许多不同目的的表单设计，但那里可能对您有用。

• 如果您正在尝试发展有关如何设计和布局表单的知识， Luke Wroblewski 的书Web Form Design是一个很好的起点。如果您没有时间掌握这本书，他的网站也有一些有用的指示。

• 如果您想更深入，您还可以考虑Louis Rosenfeld 和 Peter Morville的万维网信息架构。现在有点老了，但有一些关于为网站设计搜索系统的优秀章节。

Answer 2

看看渐进式披露（参见此处、此处和此处）和响应式启用。如果您有良好的默认值，它也会有所帮助。看看“从用户那里获取输入”的其他模式

Answer 3

通常您可以将搜索字段分成两组：

• 一个包含大部分时间都会使用的输入字段，通常是较小的部分（根据我的经验，最多占所有字段的 30%）
• 第二个，包含其他（不常用的）字段

如果您可以将此拆分应用于您的问题，那么创建一个包含第一组输入字段的前端应该很容易，然后是第二个可以按需打开/扩展的前端。我不是 Web 开发人员，所以我无法告诉您获得这种 UI 行为有多么困难。

Answer 4

任何购物（nexttag.com、become.com、froogle.com、shopzilla、ebay 等）网站都可以开展这项业务。但是，我的想法是创建一个工具提示并接受输入，提交后（工具提示上的按钮），工具提示将消失，结果将出现在父页面上。