怎样才是一个好的选项/设置对话框？
我正在浏览你用过的最糟糕的用户界面问题，当时我意识到很多其中涉及某些应用程序的选项对话框。这显然是开发人员很容易“迷失”的一个领域，因为通常有大量可用的选项，而这些选项很难组织。 （特别是对于刻板的程序员）
因此，由于我准备为自己的应用程序设计一个选项对话框，我想知道：什么才是一个好的选项对话框？
选项卡？像 Visual Studio 这样的分层树视图，其行为类似于选项卡？ （我目前倾向于这个）
你觉得怎么样？
I was browsing the Worst UI You’ve Ever Used question, when I realized that many of them involved the options dialog of some application. This is obviously an area where a developer could get "lost" easily, since there are often a large number of options available which can be hard to organize. (Especially to the stereotypical programmer)
So since I'm getting ready to design an options dialog for my own application, I was wondering: what makes a good options dialog?
Tabs? A hierarchical treeview like Visual Studio that sort of acts like tabs? (I'm currently leaning toward this)
What do you think?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（4）
选项窗口往往拥挤、混乱且令人困惑，使用户很难找到她或他想要的选项。它们通常在设计的最后一刻被拼凑在一起，而没有经过大量思考或与设计的其余部分协调。这就是使他们成为嘲笑的共同目标的原因。以下是如何避免这种命运的方法。
限制选项的数量。选项越少，模糊用户真正想要的东西就越少。
将选项限制为适应用户已知的个体差异。例如，如果您的用户来自不同的旧系统，您可能可以选择模拟每个系统的键盘快捷键。
即便如此，请考虑一下，强迫少数用户在习惯上做出小小的改变可能值得在与添加另一个选项相关的混乱中节省可用性。请记住，为所有用户提供单一标准 UI 有助于用户相互支持。
除非您的应用有“好玩”的一面（例如 Facebook），否则请避免选择琐碎的审美偏好。重点关注可提高特定用户的任务绩效的选项（例如，支持辅助功能的选项）。
不要使用选项来强迫用户做出您自己应该做出的设计决策。例如，没有选择控制位置或按颜色进行颜色编码的选项。您的用户不是 UI 设计师，并且在几乎所有情况下，您都可以比普通用户提出更好的设计折衷方案。
不要使用选项来设置数据属性（例如，特定文档的边距）。选项是应用程序的属性，默认情况下应应用于显示的任何数据。
按照用户的看法按功能组织选项。考虑使用卡片排序方法对您的选项进行分类。不要在“高级”选项卡或对话框中隐藏不常用的选项。您可能有每个选项的使用情况统计信息，但您的用户没有。他们无法知道他们寻找的选项是否是“高级”，这迫使他们除了其他选项卡之外还搜索“高级垃圾抽屉”选项卡。
将功能从“选项”窗口移出，并使其靠近用户决定设置选项的位置。不要使用设置默认值的选项，而是使用相同的界面来覆盖默认值。您可以在“打印”对话框中设置“将此打印机设置为默认打印机”按钮。在“视图”菜单中包含“保留视图”菜单项，可跨会话保留用户为窗口设置的排序顺序、过滤和列选择。或者，考虑在会话之间自动保留视图（甚至窗口大小和位置），并提供“默认视图”菜单项来恢复它。
如果您有大量选项，请考虑在菜单栏上为它们提供专用的下拉菜单，每个菜单项为每个主要选项类别打开一个不同的对话框。对话框中的多层选项卡或树本质上表明您的“选项”窗口过于复杂。
专用的选项/首选项下拉菜单也是放置三个或四个适应/变量菜单项的好地方，这些菜单项预测用户想要在给定上下文中设置的选项。例如，当电子邮件到达时，可以出现设置新电子邮件的警报参数的菜单项（例如，发出声音、显示通知）。当用户将默认打印机更改为其他打印机时，会出现一个菜单项以使新打印机成为默认打印机。
使用网页风格的图形设计、小插图和视觉层次结构，使选项在给定面板上更容易查找和理解。使用字体大小、颜色和/或粗细来突出常用选项，同时仍然按功能组织所有选项。类似于：
（来源：zuschlogin.com）
鼓励轻松探索和试验选项：
“选项”窗口中选项的复选框和其他控件应在选择后立即应用，以便用户可以立即看到每个选项被选择后的影响。不应有“确定”和“取消”按钮，而应只有“关闭”按钮（也可能有“重置”或“撤消”按钮）。打开典型的“选项”对话框，选择一个选项并单击“确定”，却发现设置了错误的选项并且必须重新开始，这是令人沮丧的。此外，如果用户选择多个选项，点击“确定”（或“应用”），最终得到一个完全奇怪的 UI，用户不一定知道哪个选项需要撤消；用户甚至可能不记得所有选择的选项。
包括“这是什么？”每个选项的帮助信息，以便用户可以详细了解某个选项的用途以及何时使用该选项。
考虑使选项窗口成为无模式，以便用户可以在主窗口周围平移以更好地查看选项的功能。
考虑使选项窗口成为无模式
确保所有选项名称及其同义词都在您的帮助文档中，并确保帮助文档向用户准确显示在哪里可以找到该选项。通常，用户可能不知道选项是否存在，或者它是否是“选项”或其他类型的命令。
Options windows tend to be crowded, cluttered, and confusing, making it hard for the user to find the option she or he wants. They are often thrown together at the last minute of design without a whole lot of thought or coordination with the rest of the design. That’s what makes them a common target of ridicule. Here’s how to avoid that fate.
Restrict the number of options. The fewer the options, the fewer things to obscure what the user really wants.
Limit options to those that accommodate known individual differences in your users. For example, if your users come from different legacy systems, you may have an option to emulate the keyboard shortcuts of each system.
Even then, consider that forcing a small number users to make a small change in habit may be worth the usability savings in confusion associated with adding another option. Remember that having a single standard UI for all users helps users support each other.
Unless your app has a “playful” side (like Facebook), avoid options for trivial aesthetic preferences. Focus on options that improve the task performance for select users (e.g., options that support accessibility).
Don’t use an option to force the user to make design decision you yourself should make. For example, don’t have options for choosing control locations or color coding color-by-color. Your users are not UI designers and in nearly all cases, you can come up with a better design compromise than your average user.
Don’t use options to set attributes of the data (e.g., the margins of a specific document). Options are attributes of the application and should apply by default to whatever data is shown.
Organize options by function as your users see it. Consider using a card-sort method to categorize your options. Do not hide less commonly used options on an “advanced” tab or dialog. You may have statistics on the use of each option but your users won’t. They’ve no way of knowing if the option they seek is “advanced” or not, forcing them to search the Advanced junk-drawer tab in addition to other tabs.
Move functionality off of the Options window, and make it proximal to the place where the user decides to set an option. Rather than having an option to set a default, use the same interface for overriding the defaults. You can have a “Make This Printer the Default” button in the Print dialog. Include a “Keep View” menu item in the View menu that preserves across sessions the sort order, filtering, and column selections the user set for the window. Alternatively, consider automatically preserving the view –even window sizes and positions -across sessions, and providing a Default View menu item to revert it.
If you have a very large number of options, consider having a dedicated pulldown menu for them on the menu bar, with each menu item opening a different dialog box for each major category of options. Multi-tiered tabs or trees in dialog boxes are nature’s way of saying your Options window is too complex.
A dedicated Options/Preferences pulldown menu is also a good place to put three or four adapting/variable menu items that anticipate the options a user would like to set in a given context. For example, when an email arrives, a menu item can appear that sets the alerting parameters for new email (e.g., sound given, notification shown). When the user changes the default printer to something else, a menu item can appear to make that the new printer the default printer.
Use web-style graphic design, small illustrations, and visual hierarchy to make options easier to find and understand on a given panel. Use font size, color, and/or weight to make commonly used options salient, while still organizing all options by function. Something like:
(source: zuschlogin.com)
Encourage easy exploration and experimentation of options:
The checkboxes and other controls for options in the Options windows should apply instantly on selection so user can immediately see the impact of each option as it is selected. There should be no OK and no Cancel buttons, but only a Close button (there may also be a Reset or Undo button). It’s frustrating to open the typical Options dialog, select an option and hit OK, only to find one has set the wrong option and has to start over. Also, if the user selects multiple options, hits OK (or Apply), and ends up with a totally wacked-out UI, the user won’t necessarily know which option needs to be undone; the user may not even remember all options selected.
Include “What is this?” Help for each option so users can find out more about what an option does and when it should be used.
Consider making the Option window modeless, so the user can pan around the primary window to better see what an option does.
Be sure all option names and their synonyms are in your Help documentation, and be sure the Help documentation shows the user exactly where to find the option. Often users may not know if an option exists, or if it’s an “option” or other kind of command.
让最常见的选项易于查找，高级选项“可选”甚至可以查看...隐藏 99% 的用户不关心的选项非常有效。
主要问题不是压倒观众。选项对话框往往很疯狂，只是因为人们把所有可用的选项都放在那里。
拥有一个良好、清晰的选项逻辑分组、简单的常用选项以及使晦涩选项不那么引人注目的“高级”部分通常比特定布局更重要。
Make the most common options easy to find, and the advanced options "optional" to even look at... Hiding the options 99% of your users won't care about is very effective.
The main issue is not overwhelming the audience. Options dialogs tend to be crazy, just because people put every option available in there.
Having a good, clean logical grouping of options, with common options easy, and "advanced" sections making the obscure options less noticable is usually more important than a specific layout.
我认为这实际上取决于您将拥有多少个选项、它们的逻辑分组是什么以及它们来自哪里（应用程序、外部插件等）。Visual Studio 使用的树形对话框是一个不错的选择，因为大量选项和许多插件/包提供了在此对话框中操作的选项。
我见过的常见模式有：
I think this really depends on how many options you will have, what their logical groupings can be, and where they can come from (the application, external plugins, etc.) The tree-style dialog used by Visual Studio is a good choice because of the large number of options and the many plugins/packages which provide options that are manipulated in this dialog.
The common patterns that I've seen are:
没有选项对话框是最好的。
但是，如果您确实有很多选择，那么使其可搜索确实很有帮助。
Not having an options dialog is best.
If you do however have a lot of options, making it searchable is really helpful.