4

手头的问题:如何在 Web UI 中为那些填写某种无聊的申请表的计算机盲用户呈现两个大的层次结构。

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

两个层次结构的深度都小于 10 个级别(通常为 5 个),但每个级别都可能非常宽(20,40,50,100 个项目)。

因此,绘制整个“树”并允许用户“单击它”是毫无疑问的。通过树逐渐下降是可能的,但是:1)可能存在用户迷路/不确定导航到哪里的情况 -> 他将被迫通过不同的分支回溯,直到他找到他正在寻找的东西 2)有一个“宽子树”的问题 - 它们可能太宽而无法在屏幕上的一行或一列中显示它们。

可以通过动态修剪树的增量搜索来保存懂计算机的用户(前提是在此过程中 UI 足够快)。

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

对我有什么想法吗?

4

2 回答 2

1

想想 windows vista 或 windows 7 菜单是如何工作的。你打开它,然后点击你的“所有程序”菜单声音。整个项目列表随新内容而变化。

现在让我们考虑多层次。我向您展示了一个 Level-1 项目的列表。您单击一个,整个列表将随其子级别 2 项一起更改。然后您单击一个项目,整个列表再次随其子级 3 项目更改,依此类推。

用面包屑导航来补充它:你在这里 -> Level-1-Item -> Level-2-Item - Level-3-Item -> 等等

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

按关键字添加快速搜索。

我可以告诉你,它非常实用。我基于 Jquery 和 Ajax json 调用开发了这个组件,并在我正在处理的一些 Web 应用程序中使用它。

如果您有兴趣,我可以将带有一些示例的组件发送给您。无论如何,我打算在我即将发布的博客上将其开源。

于 2010-06-29T15:02:36.780 回答
1

一种选择是尝试使用 iPhone/iPod 菜单样式的滚动列表。尽管它们以菜单的形式呈现,但这个 Filament Group 示例显示了一个带有面包屑路径,一个带有后退导航。您可能希望以某种垂直滚动的方式实现这一点div。左/右滑动动画和面包屑轨迹为用户提供了一些情境提示。很清楚哪些选择是分支,哪些是叶子。没有深度限制。此外,任何使用过 iPhone/iPod/iPad 的人都会熟悉这种导航方案。

我敢打赌这已经在某个地方实施了。如果我挖一个,我会相应地编辑。

于 2010-06-29T15:07:34.893 回答