it-swarm.cn

明确选择长列表中的哪些项目

我正在尝试设计Web界面的一部分,允许用户标记项目并查看带有标记或标记集的所有项目-想想gmail,如果gmail允许您轻松选择多个标记以查看所有消息这些标签中。向用户显示他们当前正在查看哪些标签的最佳方法是什么?

简单突出显示仅适用于一个标签,但是如果标签列表的长度大于屏幕的长度,则它们将无法一次看到所有标签,从而导致不清楚用户选择了哪个标签。再加上这个问题,我需要处理的空间很小-整个标签和项目界面大约为300x500像素,因此,在较长的水平列表中显示选定的标签不是一种选择。

我当时正在考虑使用所选标​​签在标签列表顶部创建一个二级列表(类似于 强调美国和其他国家/地区的下拉列表 ),但是我想知道是否有更好的选择。

13
sslepian

使用 Faceted导航模式 。 Amazon.com在此方面做得很好:

Amazon faceted navigation

(这些屏幕截图 Nintendo DS的搜索结果 -请注意,如果您有垂直限制,则可以将其保留得更短)

注意事项:

  • 关于每个方面当前选择的项目是什么的非常清晰的沟通(在这种情况下,链接为黑色粗体与蓝色)
  • 通过使每个项目都不是超链接来提高可读性,即使它们都是超链接-在这种情况下,将可读性设置为优先于超链接下划线模式更为有用
  • 如果您要单击,每个方面都会显示多少个可用结果。有时实施起来有点复杂,具体取决于您的搜索后端。
  • 正确的控件取决于您要处理的是哪种构面,以及出色的文案撰写和正确的措辞(日期的“最近30天”,因为在这种情况下您无需考虑特定的日期,等等)
  • 能够在每个方面上一步,实质上是“撤消”您对该方面的选择。请注意,与许多其他站点一样,使用<而不是使用红叉(x)
  • 像亚马逊那样,将其与面包屑导航模式结合使用,以提供更多的有用性,以防人们自上而下扫描而不看左/右列

如果选择了很多东西,不必担心看不到每个选择的东西,这是一个常见的多面导航陷阱。如果用户做出了许多选择(假设在Amazon示例中选择每个构面之一),则用户会在页面下方找到更多选择的选项。为了稍微抵消一些东西,您可以按照@onnodb的建议在顶部将选定的构面分组,尽管我不会将它们隐藏在单击后面(例如select控件中)。

7
Rahul

我想说的是,在列表的顶部创建选定标签的“第二列表”是很有意义的,就像这样:(好主意,顺便说一句)

Selected tag 1   (X)
Selected tag 2   (X)
Selected tag 3   (X)
-------------------
Tag 4
Tag 5
Tag 6

为选定的标签提供不同的背景色,添加“(X)”按钮将其删除,我想您对此有一个非常有用的UI。

5
onnodb

由于您的工作空间有限,因此可以实施以下方法。将标签列表放在一个下拉列表中,并带有一个加号按钮,该按钮将添加另一行带有标签下拉列表的行。这样,仅显示的标签就是用户选择的标签。

enter image description here

3
Denzo

我知道这是一个非常老的问题,但我认为对于当今的应用程序仍然有效。

对于答案,我从Visual Studio垂直滚动条中得到了启发:

MS Visual Studio scroll bar

  • 滑块的高度对应于屏幕区域的大小,而不是内容的总长度
  • 水平的蓝色细线显示了光标当前所在的位置
  • 深黄色条形标记找到搜索词的行

对于OP问题-如果您有超过屏幕容量的项目列表,则必须使用滑块。您可以使用滑块显示所选项目在列表中的位置。

0
Mike

就在我头顶上...

选项1:修改“标题”属性以在悬停时显示所选项目。选项2:使用jquery为列表中的一个悬停事件添加一个遍历元素并列出选定项的事件。

0
Babak Naffas

好吧,有几种方法可以做到这一点:

1)如前所述,您可以突出显示所选标签,同时仍保持其在列表中的顺序。要解决用户不知道所选标签未显示在页面上的问题,您可以采取一些措施引起他们的注意-诸如页面标签部分底部的闪烁箭头以告知他们有东西重要的是如果他们向下滚动

=Tag1=
Tag2
Tag3
vvvv
-----------------------Screen End
Tag4
=Tag5=

==标记突出显示的标记,而vv是闪烁的箭头

2)您也可以在顶部添加该列表,但要从原始标签中删除标签,以便始终在标签部分保持一致的高度

3)您可以将所选标签显示为搜索结果标题下的垂直列表。

Tag Section | Search Results:
            | xTags1 xTag2 xTag3
            |
            | [Search Results Go Here]

注意每个标签名称旁边的小xs;这些将允许用户快速删除标签,并且结果应相应更改。

我希望选择选项2或3。3可能会更好,因为用户不断选择标签时,标签列表会更改顺序,因此用户可能会有些惊讶。

0
Waleed Al-Balooshi