代码之家 › 专栏 › 技术社区 › ADEpt

从大层次结构中选择的Web UI设计准则

ui-design user-interface

3

ADEpt · 技术社区 · 14 年前

目前的问题是:如何在Web用户界面中为那些填写了一些无聊的申请表的计算机文盲用户呈现两个大的层次结构。

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

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

因此,绘制整个“树”并允许用户“单击它”是不可能的。从树上逐渐下降是可能的,但是: 1) 可能会出现这样的情况:用户丢失/不确定在何处导航->他将被迫在不同的分支中回溯,直到找到他要查找的内容 2) “宽子树”有一个问题——它们可能太宽,无法在屏幕上的一行或一列中显示它们。

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

现在,我正在与那些不愿意放弃鼠标并按下一些键的用户进行斗争。

我有什么想法吗?

2 回复 | 直到 14 年前

1

Matteo Mosca 14 年前

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

现在让我们多层次地考虑一下。我给你一份一级物品清单。如果单击其中一个,则整个列表将与其子级别2的项一起更改。然后单击某个项,整个列表将再次与其子级别3项一起更改,依此类推。

用面包屑导航来补充它,例如:you're here->Level-1-Item->Level-2-Item-Level-3-Item->等等

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

按关键字添加quicksearch。

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

如果你感兴趣的话,我可以给你一些例子。不管怎样,我还是打算在我即将发布的博客上使用开源。

2

1

Ken Redler 14 年前

一种选择是尝试iPhone/iPod菜单样式的滚动列表。尽管它们以菜单的形式出现, this Filament Group example 显示一个带有面包屑轨迹,另一个带有后导航。你可能想用某种垂直滚动的方式实现它 div . 左/右滑动动画和面包屑轨迹为用户提供了一些情景提示。很清楚哪些选择是树枝,哪些是树叶。没有深度限制。此外,任何使用过iPhone/iPod/iPad的人都会熟悉这个导航方案。

我敢打赌这是在某个地方实现的。如果我挖一个,我会相应地编辑。