代码之家 › 专栏 › 技术社区 › Matt Ball

随着命令列表的增加,如何简化工具栏界面?[关闭]

usability user-interface

Matt Ball · 技术社区 · 14 年前

我正在编写一个内部工具webapp;该工具的一个中心页面有一大堆相关命令,用户可以通过单击页面上的多个按钮之一来执行这些命令,如下所示:

toolbar http://img709.imageshack.us/img709/1928/commands.png

理想情况下,所有按钮都适合一行。通常我会通过将每个小部件从一个带有(有时是长的)文本标签的按钮更改为一个简单、紧凑的图标来实现这一点——例如。

button labelled "Save" http://img337.imageshack.us/img337/773/saver.png

可以用熟悉的磁盘图标替换:

disk icon http://p.yusukekamiyamane.com/icons/search/fugue/icons-24/disk-black.png

不幸的是,我认为我不能为这个特定页面上的每个按钮都这样做。有些命令按钮只是没有良好的视觉模拟-“vds list”。或者,如果我以后需要为其他类型的列表添加另一个按钮,我需要两个图标来传达“列表性”和 哪一个 名单。所以,我还在考虑这个选择,但我不喜欢。

所以现在是时候给这个部分添加另一个按钮了(你不喜欢内部工具吗?).这条线上没有足够的空间安装新按钮。除了我已经提到的图标解决方案,还有什么好的方法可以简化/解密/减少或改进这个用户界面?

*根据雅各布·尼尔森的文章,我想 a dropdown menu is not the solution .

编辑: 我不是在寻找图标创意的输入。我在寻找其他解决。抱歉,我的示例磁盘图标是一个小图标;它只是一个示例。我现在要展示一个更大的,希望能更清楚。

12 回复 | 直到 14 年前

Community CDub 8 年前

我会像谷歌一样添加更多链接。请参阅Google的顶部栏,其中包含网页图像地图更多信息>。

在“更多”下拉列表中,您可以添加逻辑来添加用户不常用的按钮或类似按钮。

我会像谷歌一样添加更多链接。查看Google顶部的网页图像地图栏更多信息>>

在“更多”下拉列表中,您可以添加逻辑来添加用户不常用的按钮或类似按钮。

Joey Gumbo 14 年前

如果你读了jef(和aza)raskin,你可能会意识到图标也不是一个很好的解决方案两者都非常明显地表达了对它们的厌恶(很少有显著的例外)。首先,它们比小按钮更难点击,然后它们的符号可能会令人困惑、文化依赖和误导。我们已经擅长阅读文本,解析和解释图标的速度通常较慢。

在任何情况下,这个按钮栏看起来都能容纳几乎所有可能使用该产品的人和他们的狗。在创建时,您可能已经考虑了一些特定的场景,这些场景应该很容易做到,而且很重要。很可能不是所有的按钮都需要一次完成这样的任务。

另一件事是,在应用程序的任何一个状态下,可能并不是所有的按钮都有用。你能根据不同的状态,分为不同的按钮组吗?但是,只有在每个州都明确规定了可以采取什么行动的情况下,这才是可能的。如果所有按钮都同样可以按,不管状态如何,这不会起任何作用。

根据相关功能对命令进行分组也可能是一个选项。这不需要像菜单这样的习语,你也可以把它们放在不同背景色的容器里,甚至按钮本身也可以加颜色(不过记住色盲)。这可能是一种加速交互的好方法,具体取决于这些单独的函数之间的关系。可能需要对用户进行一些培训,让他们知道颜色指的是什么,但是对于一个只供你认识的人使用的内部工具(而不是任意的随机工具[这是微软面临的一个非常突出的问题]),这不应该造成太大的问题。

Prescott 14 年前

如果你用图标和文字怎么办?

对于通常理解的命令-只使用一个图标(如save) 对于不常见的命令,使用图标+文本。

如果你把一个边框放在按钮周围作为一个整体,它应该把图标/文本很好地连接在一起,并显示它仍然是一个按钮。你也可以做一些悬停效果。

Kyra 14 年前

因为你不能做下拉菜单(或者类似的技术,比如点击一个按钮生成一个二级菜单)。我能想到的最好的是Prescott做了什么,或者显示了一个按这样的方式分组的按钮区域,以便用户知道他们的按钮应该在哪个部分。

Patrick McElhaney 14 年前

我先换一些较长的标签。至少,“应用程序加载”可以缩写为“应用程序加载”。“快速文件传输”的另一种(较短)方式是什么?

您也可以将按钮分组为选项卡(即 ribbon )如果不同类别的用户倾向于使用不同的、不重叠的按钮集,这可能会特别有效。

Michael Zuschlag 14 年前

多种选择:

分组和标记 . 当您有八个以上的命令时,您应该将菜单项划分为大约四个语义组,以帮助用户扫描他们想要的命令。标记这些组也有助于扫描,可以使菜单更紧凑。例如,不使用vds ping和vds list,而是将一个组标记为__vds_157;和__list_157;菜单项。您只需要少放一个单词(如果使用水平方向时将标签放在与之相关联的菜单项上方,则为两个)。
下拉菜单 . 尼尔森关于避免使用下拉菜单生成命令是正确的。然而,他显然赞成 下拉菜单 其外观和行为类似于厚客户端应用程序中的菜单栏(Nielsen称其为__command_157;和__navigation_157;menus)。我想你会发现现在有几个javascript下拉菜单,不像2000年尼尔森写文章的时候那样。在菜单栏中可以容纳100个命令。
侧栏菜单 . 垂直排列菜单项,您应该能够容纳20个或更多的命令,并且不必将任何命令名缩短到用户可能无法理解的程度。如果这还不够,考虑一下 menu bank _than结合了侧边栏菜单的优点和下拉菜单的功能。
色带 . 如果您的命令适合于分散的任务,在这些任务中,用户倾向于坚持一个任务一段时间,那么您可以在选项卡控件上排列按钮,每个任务一张工作表。
命令过载 . 在窗口中将数据对象表示为可选择的实体,并将命令更改为更常规的操作,如向下钻取、创建、复制、移动、删除和链接,这些操作可应用于各种不同类型的对象,从而减少命令总数。用户可以选择一个或多个数据对象,然后选择要对其执行的命令。
工作区属性 . 某些命令可能不是按设置或属性排序的命令。从菜单中删除它们,并使用单选按钮、下拉列表和复选框等控件将它们表示为页面工作区域(如果很少使用其他页面,则表示为其他页面)中的数据对象。这有一个额外的好处,可以清楚地向用户显示当前设置,并提供一种更改设置的方法。
变体 . 对于内部应用程序,您可能拥有正式的角色和职责,这些角色和职责因工作岗位而异。在模型中包括用户的位置,并动态隐藏与该位置无关的命令(以及其他控件和页面)。

Wildhorn 14 年前

组合框和确认按钮怎么样? 还是一个简单的下拉菜单?

Khan 14 年前

添加“工具”或“操作”菜单栏,并将最右侧的4个命令(或更多)粘贴到菜单中。

Tom H zenazn 14 年前

如果您需要一个“最常用”或“首选”按钮集(最好是针对用户,但如果需要的话,可以全局使用)和按钮,可以将您带到项目的其余部分吗?

µBio 14 年前

您可以将它们(如两个“vds”按钮)分组到单个按钮之后,单击该按钮时会弹出带有各个图标的上下文菜单。

Tetsujin no Oni 14 年前

实际上,您正在开发的似乎是一个管理控制台,它通过一个网页呈现其用户界面,而不是我将其量化为一个Web应用程序。因此,特别是考虑到您的声明,这是一个内部使用应用程序,Jakob Nielson关于<Select>标签设计不佳的建议不需要应用。

对于这组特定的假设,我认为更好的选择是是使用许多基于CSS的菜单设计之一来模拟系统菜单设置。

user177800 14 年前

从用户体验的角度来看,图标很糟糕。软盘的图片并不意味着保存。这意味着与软盘有关。软盘 真的? 它的2010年,在网络应用上保存意味着保存到服务器,软盘如何计算?

这里是一个 application 10年来,它拥有相同的非常可用的界面!几乎没有任何按钮的图像,而且它是同类产品中最高效的应用之一。

你知道吗图标主张我可理解的 C 隐秘的 o 脂肪酸 n 奥尼森 S YMBOL!

另外,如何将图标国际化?