windows:Commands/ribbons/guidelines
出自UXGuide.net
功能区:设计规范
Ribbons: Guidlines
目录 |
常规
- 不要将 Ribbon 与菜单栏和工具栏在同一个窗口内一起使用。Ribbon 应当用于代替菜单栏和工具栏。不过,Ribbon 可以与调色板窗口和后退、前进按钮及地址栏等导航元素一起使用。
- 始终将应用程序按钮与快速访问工具栏与 Ribbon 一起使用。
- 当程序启动时,选中最左边的选项卡(通常为 Home[1])。不要在程序每次运行结束后记住上次选中的选项卡。
- 当程序首次启动时,将 Ribbon 以正常方式显示(而非最小化)用户通常不会去更改默认值,因此在程序启动时将 Ribbon 最小化可能会使所有的命令都无法发挥作用。并且,一开始就最小化 Ribbon 也会让用户感到困惑。
- 在程序的不同实例进程间保持 Ribbon 状态的统一。例如,如果用户将 Ribbon 最小化,那么在下一次打开程序时,它应当仍然保持最小化状态。不过再次提醒,不要用这种方式来记住上次选中的选项卡。
选项卡
- 尽可能使用标准选项卡。使用标准选项卡能够显著提升可发现性,尤其是在不同的程序之间。参见下文标准 Ribbon 选项卡部分。
- 如果可能的话,将第一个选项卡标为 Home[1]。Home 选项卡应当包含最常使用的命令。如果有些很常用的命令放在其他选项卡中都不合适,则应当放在 Home 选项卡中。
- 需要增加新选项卡的情况:
- 其命令与特定的任务有紧密联系,可以通过选项卡的标签来准确地进行描述。增加选项卡应当使其命令查找起来更加容易,而不是更加困难。
- 其命令基本上与其他选项卡上的命令没有联系。增加选项卡不应当使进行普通任务时需要切换选项卡。
- 选项卡上的命令多到值得再额外使用一块区域。不要使用只包含少许命令的选项卡。例外:
- 如果这些命令与特定的任务有紧密联系,增加一个选项卡可以显著简化过于复杂的 Home 选项卡设计的话,可以考虑增加一个只包含少量命令的选项卡。
- 通常来说,选项卡少些为好,将那些背离此目标的选项卡去掉。
- 对于其他选项卡来说,在保持选项卡之间的逻辑顺序同时,尽可能将最常使用的放在前面。
- 优化选项卡的设计,使用户能够快速自信地找到所需的命令。其他的考虑因素都是次要的。
- 不超过 7 个核心选项卡。如果超过 7 个,确定命令位于哪个选项卡将变得困难。尽管 7 个核心选项卡对于那些包含大量命令的应用程序来说可以接受,但大多数程序的设计目标应当是 4 个甚至更少的选项卡。
对于选项卡标签设计规范,参见选项卡标签。
上下文选项卡
- Use a contextual tab to display a collection of commands that are relevant only when users select a particular object type. If there are only a few, frequently used commands, it may be more convenient and more stable to use a regular tab, and simply disable commands when they don't apply.
-
- It's better to disable common commands like Cut and Copy than to use a contextual tab.
- Include only the commands that are specific to a particular object type. Don't put commands only on a contextual tab if users might need them without first selecting an object.
- Include the commands frequently used when working with a particular object type. Put frequently used general contextual commands on context menus and mini-toolbars to avoid tab switching during commonly performed tasks. Alternatively, consider putting general commands redundantly on a contextual tab if doing so avoids frequent tab switching. But don't overdo this—don't try to include every command that a user might need while working with the object.
-
- In this example, the Borders command is included on the Design tab to avoid frequent tab switching during commonly performed tasks.
- Choose a contextual tab color that is different from the currently displayed contextual tabs. The same tab set can appear at a later time using a different color in order to achieve this, but try to use consistent color assignments across invocations whenever possible.
- Select a contextual tab automatically when:
- The user inserts an object. In this case, select the first contextual tab in the set.
- The user double-clicks an object. In this case, select the first contextual tab in the set.
- The user selected a contextual tab, clicked off the object, then immediately clicked an object of the same type. In this case, return to the previously selected contextual tab.
- Doing so aids discoverability, improves the perception of stability, and reduces the need to switch tabs. However, leave users in control by not automatically selecting contextual tabs in other circumstances.
- When removing a contextual tab that is the active tab, make the Home tab or first tab the active tab. Doing so appears the most stable.
模式选项卡
- Use a modal tab to display a collection of commands that apply with a particular temporary mode, and none of the core tabs apply. If some of the core tabs apply, use a contextual tab instead, and disable the commands that don't apply. Because modal tabs are very limiting, they should be used only when there isn't a better alternative.
-
- Print preview is a commonly used modal tab.
- To close a modal tab, put the Close <mode> command as the last command on the tab. Use the Close icon to make the command easy to find. Give the mode in the command to prevent confusion about what is being closed.
-
- In this example, explicitly labeling the Close command with the mode removes any doubt about what is being closed.
- To close a modal tab, also redefine the Close button on the window's title bar to close the mode instead of the program. User testing has shown that many users expect this behavior.
标准 Ribbon 选项卡
Whenever practical, map your program's commands to these standard tabs, given in their standard order of appearance.
常规选项卡
- Home. Contains the most frequently used commands. If used, it is always the first tab.
- Insert. Contains commands to insert content and objects into a document. If used, it is always the second tab.
- Page layout. Contains commands that affect the page layout, including themes, page setup, page backgrounds, indenting, spacing, and positioning. (Note that the indenting and spacing groups can be on the Home tab instead, if there is enough room there.) If used, it is always the third tab.
- Review. Contains commands to add comments, track changes, and compare versions.
- View. Contains commands that affect the document view, including view mode, show/hide options, zooming, window management, and macros—the commands traditionally found in the Windows menu category. If used, it is the last regular tab unless the Developer tab is showing.
- Developer. Contains commands used only by developers. If used, it is hidden by default and the last regular tab when displayed.
Most programs don't need the Review and Developer tabs.
上下文选项卡
- Format. Contains commands related to changing the format of the selected object type. Usually applies to part of an object.
- Design. Contains commands, often in galleries, to apply styles to the selected object type. Usually applies to the entire object.
- Layout. Contains commands to change the structure of a complicated object, such as a table or chart.
If you have contextual commands related to format, design, and layout, but not enough for multiple tabs, just provide a Format tab.
分组
- Whenever practical, use standard groups. Having common commands appear with the same names and similar locations greatly improves discoverability. See the standard Ribbon groups later in this article.
- Add a new group if:
- Its commands are strongly related and can be accurately described by the group label. Adding the group should help make its commands easy to find, not harder.
- Its commands have a weaker relationship to the commands in other groups. While all the commands on a tab should be strongly related, some command relationships are stronger than others.
- The group has enough commands to justify having an extra place to look. Aim for 3-5 commands for most groups. Avoid having groups with only 1-2 commands, although having an in-Ribbon gallery[2] without any other commands within a group is acceptable. Having many groups with a single command suggests too much structure or lack of command cohesion.
- Consider splitting a group if:
- The group has commands that greatly benefit from having extra labels. For example, the commands might need clarification or their labels might have repetitive text.
Correct:
Better:
In the better example, the group commands benefit from having extra labels, and a single, short group name works better than separate, longer ones. - The group has many commands of different sizes and needs organization.
In this example, there are many commands of different sizes. - The group can be split into 2-3 roughly equal groups.
- Using a split group is more self-explanatory or less awkward than using separate groups.
- The group has commands that greatly benefit from having extra labels. For example, the commands might need clarification or their labels might have repetitive text.
- Place the most commonly used groups in the most prominent locations, and make sure there is a logical order for the groups across the tab.
- Optimize the group design so that users find commands quickly and confidently. All other considerations are secondary.
- Don't scale groups containing a single button to a pop-up group icon. When scaling down, leave them as a single button.
- Use a maximum of seven groups. If there are more than seven groups, it becomes more difficult to determine which group has a command.
For group labeling guidelines, see Group labels.
标准 Ribbon 分组
Whenever practical, map your program's commands to these standard groups, which are given within their associated tabs in their standard order of appearance.
Main tab
- Clipboard
- Font
- Paragraph
- Editing
Insert tab
- Tables
- Illustrations
Page layout tab
- Themes
- Page setup
- Arrange
Review tab
- Proofing
- Comments
View tab
- Document views
- Show/hide
- Zoom
- Window
命令
常规
- Take advantage of the discoverability and scalability of Ribbons by exposing all the commonly used commands. When appropriate, move frequently used commands from dialog boxes to the Ribbon, especially those that are known to be hard to find. Ideally, users should be able to perform common tasks without using any dialog boxes.
-
- In this example, the Line numbers setting was previously buried in a property sheet. Putting the setting in the Ribbon makes it much more discoverable.
- Don't use the scalability of Ribbons to justify adding unnecessary complexity. Continue to exercise restraint—don't add commands to a Ribbon just because you can. Keep the overall command experience simple. The following are ways to simplify the presentation:
- Use context menus and mini-toolbars for in-place, contextual commands.
-
- In this example, a context menu and mini-toolbar show contextual commands in place.
- Move (or keep) rarely used commands in dialog boxes. Use dialog box launchers to access these commands. You can still use dialog boxes with Ribbons! Just try to reduce the need for using them during common tasks.
- Eliminate redundant, seldom used features.
呈现方式
- Present each command on only one tab. Avoid multiple paths to the same command—especially if the command requires many clicks to invoke. It may seem like a convenience to find a command through multiple paths. But keep in mind that when users find what they are looking for, they stop looking. It is all too easy for users to assume that the first path they find is the only path—which is a serious problem if that path is inefficient.
- Exception: Contextual tabs may duplicate a few commands from the Home and Insert tabs if doing so prevents changing tabs for common contextual tasks.
- Within a group, put the commands in their logical order, while giving preference to the most frequently used commands. Overall, the commands should have a logical flow to make them easy to find, while still having the most frequently used commands appear first. Generally, commands with 32x32 pixel icons appear before commands with 16x16 pixel icons to aid scanning across groups.
- Avoid placing destructive commands next to frequently used commands. A command is considered destructive if it's effect is widespread and either it cannot be easily undone or the effect isn't immediately noticeable.
- Use separators to indicate strongly related commands, such as a set of mutually exclusive options.
- Consider using toolbar-style groups for sets of strongly related, well-known commands that don't need labels. Doing so allows you to present many commands in a compact space without affecting discoverability and ease of learning. To be so well known, such commands are frequently used, instantly recognized, and therefore tend to be on the Home tab.
-
- In this example, toolbar-style groups are used for strongly related, well-known commands.
- Use 32x32 pixel icons for the most frequently used and important labeled commands. When scaling a group down, make these commands the last to convert to 16x16 pixel icons.
- Avoid arbitrary command placement. Think carefully about your tab and group design to ensure that users aren't wasting time inspecting every tab to find the command they want.
- Avoid marketing-based placement. Marketing objectives around the promotion of new features tend to change over time. Consider future versions of your product and how much frustration a constantly changing organization will cause.
交互
- Disable commands that don't apply to the current context, or that would directly result in an error. If helpful, use the enhanced tooltip to explain why the command is disabled. Don't hide such commands because doing so can cause the Ribbon layout to change, making the Ribbon presentation unstable.
- Don't update command labels dynamically. Again, doing so might cause the tab layout to change, resulting in an unstable appearance. Instead, design commands so that they work with constant labels.
Even though Insert note and Delete note are never enabled at the same time, displaying both commands is required for a stable Ribbon.Correct: Incorrect:
- Prefer direct controls. A command is direct if invoked with a single click (that is, without navigating through menus). However, with the exception of in-Ribbon galleries, direct controls don't support Live preview, so the need for Live preview is also a factor.
- If a command is among a related set of formatting options, and Live preview is important and practical, use Live preview to indicate the effect of the options—especially if users are likely to choose the wrong option otherwise.
- If the command is used frequently, use an in-Ribbon gallery for directness.
- If the command is used infrequently, use a drop-down gallery.
While the correct example is direct, the better example supports Live preview.Correct: Incorrect:
- Otherwise, to obtain directness use Ribbon controls in the following order of preference (all other considerations being equal):
- Command buttons, check boxes, radio buttons, and in-place galleries. These are always direct.
- Split buttons. Direct for the most common command, but indirect for the command variations.
- Menu buttons. These are indirect, but present many commands that are easy to find.
- Text boxes (with spin controls). Text input generally requires more effort than the other control types.
- If a command is among a related set of formatting options, and Live preview is important and practical, use Live preview to indicate the effect of the options—especially if users are likely to choose the wrong option otherwise.
- Otherwise, to obtain directness use Ribbon controls in the following order of preference (all other considerations being equal):
- Command buttons, check boxes, radio buttons, and in-place galleries. These are always direct.
- Split buttons. Direct for the most common command, but indirect for the command variations.
- Menu buttons. These are indirect, but present many commands that are easy to find.
- Text boxes (with spin controls). Text input generally requires more effort than the other control types.
- If your Ribbon consists mostly of menu buttons when displayed at full size, you might as well use a menu bar.
Incorrect:
This Ribbon has so many menu buttons that using a menu bar is a better choice.
In this example, the button immediately prints a single copy to the default printer, whereas the submenu version displays the Print Options dialog box.
For command labeling guidelines, see Command labels. For guidelines on specific common controls, see the respective control guidelines.
Gallery[2]
- Use a gallery if:
- There is a well-defined, related set of choices from which users typically choose. There may be an unbounded number of variations, but the likely selections should be well contained. If the choices aren't strongly related, consider using separate galleries.
- The choices are best expressed visually, such as formatting features. Using thumbnails makes it easier to browse, understand, and make choices. While the choices can be labeled, the selection is made visually and text labels shouldn't be required to understand the choices.
- The choices show the result that is achieved immediately with a single click. There shouldn't be any follow-up dialog box to further clarify the user's intention, or a set of steps to achieve the indicated result. If users might want to adjust the choice, let them do so afterwards.
- Don't use a gallery to display many regular commands within a group.
- Use an in-Ribbon gallery if:
- The choices are used frequently. The choices need the space and are worth the space potentially being taken from other commands.
- For typical usage, there is no need to group or filter the presented choices.
- The choices can be displayed effectively within the height of a ribbon (which is 48 pixels).
- Choose the smallest standard gallery thumbnail size that does the job well.
- For in-Ribbon galleries, use thumbnails of 16x16, 48x48, or 64x48 pixels.
- For drop-down galleries, use thumbnails of 16x16, 32x32, 48x48, 64x48, 72x96, 96x72, 96x96, or 128x128 pixels.
- All gallery items should have the same thumbnail size.
- For in-Ribbon galleries:
- Display a minimum of three choices; more if there is room. If there isn't sufficient space to display at least three choices in the typical window size, use a drop-down gallery instead.
- Expand in-Ribbon galleries to take advantage of available space. Use the additional space to show more items and make them easier to choose with a single click.
- For drop-down galleries:
- Display the gallery from either a combo box, drop-down list, split button, or menu button.
- If the user clicks the main window to dismiss the drop-down gallery, just dismiss the gallery without selecting or modifying the contents of the main window.
- If a gallery has many choices and some choices are rarely used, simplify the default gallery by focusing on the commonly used choices. For the remaining commands, provide an appropriate command at the bottom of the gallery drop-down.
- If the command shows a list of more variations, name it "More options?"
- If the command presents a dialog box that allows users to create their own custom options, name it "Custom ?"
- Organize the choices into groups, if doing so makes browsing more efficient.
- If a gallery has many items, consider adding a filter to help users find choices more efficiently. To avoid confusion, initially display the gallery unfiltered. However, most galleries shouldn't require a filter because they shouldn't have so many choices, and using groups should be sufficient.
-
- In this example, the gallery benefits from both groups and a filter.
预览
- Use previews to show the effect of a command without users having to perform it first. By using helpful previews, you can improve the efficiency and ease of learning of your program, and reduce the need for trial-and-error. For the different types of command previews, see Previews in the Design Concepts section of this article.
- For live previews, make sure that the preview can be applied and the current state restored within 500 milliseconds. Doing so requires the ability to apply formatting changes quickly and in a way that is interruptible. Users must be able to evaluate different options rapidly for live previews to have their full benefit.
- Avoid using text in previews. Otherwise, the preview images will have to be localized.
图标
- Provide icons for all Ribbon controls except drop-down lists, check boxes, and radio buttons. Most commands will require both 32x32 and 16x16 pixel icons (only 16x16 pixel icons are used by the Quick Access Toolbar). Galleries typically use 16x16, 48x48, or 64x48 pixel icons.
Drop-down lists, check boxes, and radio buttons don't need icons, but all other Ribbon controls do. - 确保图标在功能区背景上清晰可见。应当始终在实际环境以及高对比度模式下评估功能区图标。
- Choose icon designs that clearly communicate their effect, especially for the most frequently used commands. Well-designed Ribbons have self-explanatory icons to help users find and understand commands efficiently.
- 选择易于识别和区分的图标,尤其是那些最常用的命令。确保图标具有独特的形状和色彩。这么做使用户能够更快地找到命令,即使他们不记得图标的符号。
In the incorrect example, the icons have similar coloring, making them hard to distinguish.Correct: Incorrect:
- Consider creating pop-up group icons by placing the 16x16 pixel icon of the most prominent command in the group inside a 32x32 pixel visual container. You don't have to create different icons for pop-up groups.
In this example, the pop-up group icon is created from the 16x16 pixel icon of the most prominent command. - If useful, change the icon to reflect the current state. Doing so is especially useful for split buttons whose default effect can change.
In this example, Microsoft Word changes the Text highlight color and Font color commands to indicate their current effect. - Make sure Ribbon icons conform to the Aero-style icon guidelines. However, Ribbon icons are shown straight on instead of being shown in perspective.
Correct: Incorrect:
In the incorrect example, the 32x32 pixel icon is shown in perspective. - 尽量使用标准菜单图标。这能确保这些图标易于识别且符合 Aero 风格图标设计规范。
更多信息和示例,参见图标。
增强型工具提示
- All Ribbon commands should have enhanced tooltips to give the command name, shortcut key, description, and optional supplemental information. Avoid tooltips that simply restate the label.
- Incorrect:
-
- In this example, the tooltip simply restates the command label.
- When practical, completely describe the command using a concise description. Link to Help only if further explanation is really necessary.
- Incorrect:
-
- In this example, the command doesn't need Help.
- When helpful, illustrate the effect of the command using a preview.
-
- In this example, the tooltip image illustrates the effect of the command.
For labeling guidelines, see Enhanced tooltip labels.
访问键与按键提示(keytips)
- Note: Keytips are the mechanism used to display access keys for commands displayed directly on a Ribbon. (Access keys for drop-down menu commands are indicated with an underlined character.) They differ from menu access keys in the following ways:
- Two character access keys can be used. For example, FP can be used to access the Format painter command.
- The access key assignments are shown using tips instead of underlines, so the character width and descenders aren't a factor in making assignments.
- Assign access keys to all Ribbon tabs and commands. The only possible exception is for commands coming from legacy add-ins.
- For the Application button and Quick Access Toolbar:
- Assign F to the Application button. This assignment is used because of the Application button's similarity to the traditional File menu.
- For the Quick Access Toolbar and recently used file lists, assign access keys numerically.
- Keytips for Application button and Quick Access Toolbar.
- For tabs:
- Assign H to Home.
- Starting with the most frequently used tabs, assign the first letter of the label.
- For any tabs that cannot be assigned to the first letter, choose a distinctive consonant or a vowel in the label.
- For programs that used to support menu bars, strive to maintain access key compatibility to the best extent practical. Avoid assigning different meanings to access keys from legacy menu categories. For example, if the legacy menu bar version of a program had an Edit menu, strive to use an E access key to the equivalent tab. If there is no equivalent tab, don't assign an E access key to any tab to prevent confusion.
- Keytips for tabs.
- For Ribbon commands, menus, and submenus:
- Assign unique access key combinations within a tab. You can reuse access key combinations within different tabs.
- Whenever possible, assign the standard access keys for commonly used commands. See the standard access key table.
- For other commands:
- For the most frequently used commands, choose letters at the beginning of the first or second word of the label, preferably the first letter.
- For less frequently used commands, choose letters that are a distinctive consonant or a vowel in the label, such as "x" in "Exit."
- For the least frequently used commands and dialog box launchers, use two letters as necessary.
- For menus and submenus, use a single letter to reduce the number of keystrokes required for the complete command.
- Don't use access keys starting with J, Y, or Z because they are used for contextual tabs, unassigned keytips, and popup groups.
- Keytips for Ribbons and menus.
- For pop-up groups:
- Use a two-letter access key that starts with Z.
- Starting with the most frequently used groups, assign the second access key letter to the first letter of the label.
- For any remaining groups, choose a distinctive consonant or a vowel in the label.
- Keytips for pop-up groups.
For shortcut key guidelines, see Keyboard.
应用程序按钮
- Use an Application button to present a menu of commands that involve doing something to or with a file. Examples include commands that traditionally go in the File menu to create, open, and save files, print, and send and publish documents.
- If the program doesn't use files, use the Application button to access the program options and exit the program. Application buttons always display a command menu—they are never just decorative.
- Always provide an Application button when using a Ribbon. At the very least the Application button should have an Exit command. Because the Exit command should always be available, don't disable the Application button.
- Application buttons may be used without Ribbons. While Ribbons always have Application buttons, you may use an Application button without a Ribbon for programs such as document viewers or browsers. These are programs that use files but have few commands that modify their content.
- Don't combine an Application button with a menu bar or toolbar. Doing so is an unnecessary inconsistency in command models.
- Use the following standard Application button commands when appropriate:
- New
- Open
- Save
- Save as?
- <list of file formats>
- <separator>
- Print?
- Print?
- Quick print
- Print preview
- Close
- <footer>
- Options
- Exit
- Display the program icon in the Application button. Don't use a generic program or suite icon. Never use an empty Application button.
- Use tooltips to document the shortcut keys. Unlike normal menus, don't document the shortcut keys using labels.
-
- In this example, tooltips are used to document the shortcut keys.
快速访问工具栏
- Use the Quick Access Toolbar to provide access to frequently used commands. The commands can be from the Application button or the Ribbon.
- Always provide a Quick Access Toolbar when using a Ribbon. Do so even if the Ribbon has a single tab; this provides consistency across programs.
- Prepopulate the Quick Access Toolbar with the frequently used commands in the Application button menu. Provide Save and Undo if your program supports them, and Open and Print if supported and frequently used.
- For the Customize Quick Access Toolbar menu, provide up to 12 of the most frequently used immediate commands. Immediate commands don't require additional input before they take effect, and are therefore well-suited for the Quick Access Toolbar. While these can be any immediate commands, prefer those commands that aren't on the Home tab, because users are more likely to choose those.
- For the Customize Quick Access Toolbar menu, if there is a pair of related commands, provide both, regardless of frequency. Common pairs are Open/Close, Back/Forward, and Undo/Redo.
- For the Customize Quick Access Toolbar dialog, provide a way to add any command. Provide a Popular commands filter that displays the most frequently used commands, and select this filter by default.
对话框触发器
- Provide a group with a dialog box launcher if there is a related dialog box with infrequently used commands and settings. The dialog box should contain all the commands in the group, plus others—not a completely different set of commands or the same commands as the group.
-
- In this example, the Font dialog box displays a superset of the commands in the Font group.
- Don't use a dialog box launcher to perform commands directly. A dialog box launcher must display a dialog box.
- Don't use a dialog box launcher to access frequently used commands and settings. Compared to commands directly on the Ribbon, the dialog box commands and settings are relatively undiscoverable.
- Match the name of the dialog box with the name of the group. It doesn't have to be an exact match, but the names should be similar enough so that users aren't surprised by the results.
- Incorrect:
-
- While a reminder sound is a reminder option, using the dialog box launcher to set the reminder sound is unexpected.
- Display only the commands and settings that relate to the group. If the dialog box displays other things, users may conclude that this path to these other commands and settings is the only path.
- Incorrect:
-
- In this example, the Font dialog box displays Character Spacing settings, which are unrelated to the associated tab.