当命令列表增长时，如何简化工具栏界面？

Question

我正在编写内部工具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-ness”和哪个列表。所以，我还在考虑这个选项，但我不喜欢它。

所以现在是时候为我添加另一个按钮了（你不喜欢内部工具吗？）。该单行上没有足够的空间来容纳新按钮。除了我已经提到的图标解决方案之外，什么是简化/整理/减少或改进此UI的好方法？

---

*根据Jakob Nielsen的文章，我想a dropdown menu is not the solution。

---

编辑：我不是在寻找关于图标理念的输入。我正在寻找其他解决方案。对不起，我的示例磁盘图标很小;这只是一个例子。我现在正在展示一个更大的一个，希望能更清楚。

Answer 1

我会像Google一样添加更多链接。 使用WeB图像查看Google顶部栏图更多＆gt;＆gt;

更多＆gt;＆gt;下拉菜单可以添加逻辑来添加用户不常使用的按钮或类似的东西。

Answer 2

如果你读过Jef（和Aza）Raskin，你可能会意识到图标也不是一个好的解决方案 - 他们都不喜欢他们（很少有明显的例外）。首先，它们比小按钮更难打，然后它们的符号可能会混淆，依赖于文化和误导。我们已经擅长阅读文本，解析和解释图标往往比较慢。

在任何情况下，该按钮栏看起来几乎适合任何人和他们可能正在使用该产品的狗。在创建它时，您可能已经考虑了一些特定的方案，这些方案应该很容易做并且很重要。很可能并非所有按钮都需要立即完成此任务。

另一件事是，可能并非所有按钮在应用程序的任何单个状态下都是有用的。根据状态，您可以分支到不同的按钮组。但是，如果每个州都明确规定了可以采取的行动，那是唯一可能的。如果所有按钮都可以同样按下，无论状态如何，这都不会做任何事情。

根据相关功能对命令进行分组也可能是一种选择。这不需要使用类似菜单的习语，您也可以将它们放入具有不同背景颜色的容器中，甚至可以将按钮本身染成颜色（但请记住色盲）。根据这些功能的相关性，这可以是加速交互的好方法。它可能需要一些培训，让用户知道颜色所指的是什么，但对于一个只有你认识的人使用的内部工具（而不是任意随机的[这是微软面临的一个问题非常突出]）这应该不是很大的问题。

Answer 3

如果您使用图标和文字怎么办？

对于通常理解的命令 - 只使用一个图标（如保存） 对于不常见的命令，请使用Icon +文本。

如果你在整个按钮周围放置一个边框，它应该很好地将图标/文本绑在一起并显示它仍然是一个按钮。你也可以做一些悬停效果。

Answer 4

由于您无法执行下拉菜单（或类似技巧，如单击按钮以生成二级菜单）。我能想到的最好的就是普雷斯科特所做的或者显示按钮区域，这些按钮按这样的方式分组，以便用户更容易知道他们的按钮应该在哪个部分。

Answer 5

我首先要改变一些较长的标签。 “应用程序加载”至少可以缩写为“App Loading”。说“快速文件传输”的另一种（较短）方式是什么？

您还可以将按钮分组到标签中（即将其设为ribbon）。如果不同类别的用户倾向于使用不同的，不重叠的按钮组，这可能会特别有效。

Answer 6

众多选择：

• 分组和标签。每当您有超过八个命令时，您应该将菜单项划分为大约四个语义组，以帮助用户扫描他们想要的命令。标记组还有助于扫描，并可以使菜单更紧凑。例如，使用“Ping”和“List”菜单项标记“VDS”，而不是VDS Ping和VDS List。你只需要一个单词（如果你在使用水平方向时将标签放在相关的菜单项上方，则为两个）。

• 下拉菜单。尼尔森对于避免使用下拉菜单制作命令是正确的。但是，他显然支持下拉菜单，它在胖客户端应用程序中的外观和行为类似于菜单栏（Nielsen称之为“命令”和“导航”菜单）。我想你会发现现在有几个Javascript下拉菜单，不像2000年尼尔森写过他的帖子时那样。您可以在菜单栏中放入100个命令。

• 补充工具栏菜单。垂直排列菜单项，您应该能够容纳20个或更多命令，并且您不必将任何命令名缩短为用户可能无法理解的内容。如果这还不够，请考虑“menu bank”，而不是将侧边栏菜单的优势与下拉菜单的容量相结合。

• 丝带。如果您的命令适合离散任务，用户倾向于坚持一个任务一段时间，您可以在选项卡控件上排列按钮，每个任务一张。

• 命令重载。将您的数据对象表示为窗口中的可选实体，并将命令更改为更常用的操作，如向下钻取，创建，复制，移动，删除和链接，这些操作可应用于各种不同类别的对象，从而减少总数命令数量。用户可以选择一个或多个数据对象，然后选择所需的命令来对其进行操作。

• 工作区属性。您的某些命令可能不是设置或属性的命令。从菜单中删除它们，并使用单选按钮，下拉列表和复选框等控件将它们表示为页面工作区（或其他页面，如果它们很少使用）中的数据对象。这具有额外的好处，清楚地向用户显示当前设置以及提供更改它的方法。

• 变体。对于内部应用程序，您可能具有因工作职位而异的正式角色和职责。包括用户在模型中的位置，并动态隐藏与该位置无关的命令（以及其他控件和页面）。

Answer 7

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

Answer 8

添加“工具”或“操作”菜单栏，并将最右边的4个命令（或更多）粘贴到菜单中。

Answer 9

是否可以实现“最常用”或“首选”按钮组（最好是针对用户，但必要时全局使用）和按钮，如果您需要其中一个按钮，可以将其带到其他项目？

Answer 10

您可以将它们（如两个“vds”按钮）分组到一个按钮后面，当单击该按钮时会弹出带有各个图标的上下文菜单。

Answer 11

从用户体验的角度来看，图标非常糟糕。软盘的图片并不意味着SAVE。这意味着与软盘有关。一个软盘真的，它的2010年，在Web应用程序上保存意味着保存到服务器，软盘如何计算？

这是一个application，它具有10年相同的极其可用的界面！几乎没有任何按钮图像，它是同类产品中最具生产力的应用程序之一。

你知道 ICONS 代表什么我难以理解 C ryptic O bfucsated N onsense S ymbol！

另外，您如何国际化图标？

Answer 12

您正在开发的是一个管理控制台，它恰好通过网页呈现其UI，而不是我作为Web应用程序量化的东西。因此，特别是鉴于您声明这是一个内部使用应用程序，Jakob Nielson关于＆lt; select＆gt;的建议。设计不佳的标签不需要应用。

对于这组特定的假设，我认为更好的选项 可以使用许多基于CSS的菜单设计之一来模仿系统菜单设置。