大型层级结构下的Web UI设计指南选择

Question

手头的问题：如何在Web UI中为电脑小白用户呈现两个大层级，以填写某种无聊的应用程序表格？

使用案例：用户从层次结构“A”中选择项目“a”，然后从（完全不相关的）层次结构“B”中选择项目“b”，并填写一个简短的自由格式文本来补充他的选择。

这两个层次结构的深度都不到10级（通常为5级），但每个级别可能非常宽（20、40、50、100个项目）。

因此，绘制整个“树形结构”并允许用户“单击它”是不可能的。逐步下降树形结构是可能的，但是： 1）有时用户可能会迷失/不确定要导航到哪里->他将被迫通过不同的分支回溯，直到找到他要找的内容。 2）存在“宽子树”的问题-它们可能太宽，无法在屏幕上的一行或一列中呈现。

电脑高手可以通过增量搜索来拯救，该搜索将动态修剪树形结构（前提是UI在过程中足够快速）。

目前，我正在与不愿放弃鼠标并按下某些键的用户作斗争。

你有什么建议吗？

- ADEpt

Answer 1

想一想Windows Vista或Windows 7菜单是如何工作的。你打开它，然后点击“所有程序”菜单选项。整个项目列表随着新内容而改变。

现在让我们考虑多级别。我向您介绍一个Level-1项目列表。您点击其中一个，整个列表将改变为其子Level-2项目。然后再次单击该项目，整个列表将改变为其子级别Level-3项目等等。

结合面包屑导航：你在这里-> Level-1-Item-> Level-2-Item-Level-3-Item->等等

其中面包屑中的任何项目都可点击并将您传送回该级别。

添加关键字快速搜索。

我可以告诉你，它非常实用。我基于Jquery和Ajax JSON调用开发了这个组件，并将其用于我正在开发的一些Web应用程序上。

如果您有兴趣，我可以向您发送带有示例的组件。不管怎样，我计划在即将推出的博客上开源它。

- Matteo Mosca

---

是的，如果可能的话，我很想亲眼看到它。 - ADEpt

好的，我会在接下来的几天里准备一个演示页面，并向您展示。 - Matteo Mosca

Answer 2

一个选择是尝试使用iPhone/iPod菜单风格的滚动列表。虽然它们被呈现为菜单，但 这个Filament Group例子 展示了其中一个有面包屑导航，另一个有返回导航。你可能想要在某种可垂直滚动的 div 中实现这个功能。左/右滑动动画和面包屑导航为用户提供了一些情境提示。很清楚哪些选项是分支，哪些是叶子节点。没有深度限制。此外，对于任何使用过iPhone/iPod/iPad的人来说，这种导航方案都很熟悉。

我敢打赌这已经被某个地方实现了。如果我找到了，我会相应地进行编辑。

- Ken Redler