Quick Build Windows 8 style app 23-app Bar Overview and usage specifications

Original: Quick build Windows 8 style app 23-app Bar Overview and usage specifications

This post focuses on app Bar overview, App Bar command organization steps, app bar best practices.

App Bar Overview

The App Bar (Application toolbar) in the Windows 8 Store app works the same as AppBar in Windows Phone. We can provide users with various operating interfaces, navigation or trigger commands.

AppBar are generally hidden by default, or can be set to always be visible. We can show that Appbar,appbar is hidden after being clicked or losing focus by sweeping the top or bottom edges of the screen, but we can also programmatically control AppBar display or hide.

The Windows 8 store app typically contains two types of AppBar:

1) Bottom AppBar

The bottom appbar is usually used to trigger the command, and the Global command is on the right, and the context command is on the left. Can be called programmatically when a project for a context command is selected. If you have a single common command, you can place it on the canvas. The menu popup can be used to display related command groups.

2) Top AppBar

The top appbar is used for navigation in an immersive view, such as adding a return button or title, or for switching between pages or views.

APP Bar Command organization steps

Step 1: Organizing orders

Identify all app commands, and then organize them by scenario or location.

Some of the issues we need to consider include:

1) What commands should be displayed throughout the application;

2) What commands should be displayed only on certain pages;

3) What commands should use the charms or go to settings;

Here's a list of commands we might use when we browse a restaurant app:

Step 2: Create a command set

We need to group similar commands into the command set. AppBar Displays the command set as a unit with a delimiter between each command set.

Some of the issues we need to consider include:

1) which commands are functionally related;

2) which commands are functionally related;

3) Which commands should be displayed when making a selection;

Group the commands in the restaurant app above to the command set:

Step 3: Create a menu

We need to consider whether the command set is more appropriate in a command menu.

Some of the issues we need to consider include:

1) AppBar is too crowded or has too many commands to accommodate

2) Whether there is a set that can benefit from longer labels or interactive controls

The advantage of the command menu is that it allows for more options and includes interactive controls with less space.

The Sort menu pops up a simple list to make it easy to select options, and the Filter menu pops up a set of controls that allow users to filter items by more complex criteria.

Step 4: Add a command to the AppBar

We can place commands in AppBar in a variety of ways. However, you need to follow some command placement rules as much as possible:

1) Predictability: Use consistent interaction and command placement on all views of the application whenever possible;

2) Ergonomics: Consider how the placement of specific commands can improve the speed of operation commands or improve ease of use;

3) Aesthetics: Limit the number of commands and avoid appbar looking too complex. Select icons that are easy to understand or predict. Keep text labels short;

There's also a common technique for placing commands:

1) put a permanent command on the right

First put the default command on the right side of AppBar. If there are only a few commands, AppBar may have commands only on the right.

2) Use Edge

If you have a large number of commands, you can separate the different command sets on the left or right to balance the AppBar and make the commands easier to access.

3) Show/Hide disabled commands

Commands that are not related to certain environments should be hidden. When they are displayed, the ordering of persistent commands should not be broken.

4) Insert Selection command

The commands that appear after the user executes the selection appear on the far left, and any commands here will swipe to the right.

Step 5: Use standard locations for common commands

Some of the commands are common and will appear in many applications, so we need to build consistency.

We should follow these guidelines when deciding where to place common commands in AppBar:

1) Select command

The commands associated with our selection are always displayed on the leftmost side, whether they are contextual commands that are displayed at the time of selection or that affect the selected command.

2) New command

If the app calls the new command to create (add, create, compose) any new type of entity, place the command on the right side of AppBar. This provides a consistent location for each new command, regardless of the specific app or context, and uses thumbnails for easy access.

3) Delete command

If the individual entities that our app will manage may be outside of a particular application, such as a mail or camera app, you can use delete/new. Delete/new should always appear in this order.

4) Remove command

If your app will manage a list, such as a list of things to do, a list of cities in a weather app, or a list of restaurants added to a bookmark, you can use remove/Add. Remove should always appear to the left of Add.

5) Clear Command

If you are performing destructive actions on all possible items, you can use clear. Use the command label to explicitly indicate the action object of the command, such as "clear selection".

App Bar Best Practices

1) Be sure to place the commands in the same way and organize them according to the command set;

2) Be sure to place the context command on AppBar and display the AppBar programmatically when you select an item without changing the view;

3) When the command is too many times, be sure to use the menu;

4) Be sure to consider the rendering of appbar in snapped view and vertical screen view;

5) AppBar must be designed for horizontal scrolling;

6) Be sure to use the default styles for commands, menus, and popup windows;

7) Do not place key commands (commands necessary for the user to complete the task) on the AppBar;

8) do not place login, logoff or other account management commands in AppBar;

9) Do not place clipboard commands for text on AppBar;

For more details on app Bar, refer to MSDN: Add App Bar.

Quick Build Windows 8 style app 23-app Bar Overview and usage specifications