WINDOWS 8 DESIGN HANDBOOK

Mastering the App Bar

App bars are used to perform actions on your content, such as deleting a photo or filtering results, or as navigation within your app. They are invoked by swiping from the top or bottom of the screen or by right-clicking and allow you to keep your app content-focused.

splash screen tablet

1. LAYOUT AND PLACEMENT

background image dont

Don't design app bars on the left and right sides of the screen.

background image do

Do place the app bars on the top and bottom of the screen.

2. INVOKING THE APP BAR

background texture dont

Don’t design the top and bottom app bars to be invoked using separate gestures.

background texture do

Do design the top and bottom app bars to appear simultaneously with a single swipe or right-click.

3. CLOSING THE APP BAR

logo position dont

Don't put a close button in the app bar

logo position do

Do close the app bar by tapping or clicking outside of it.

4. CONTENT AND ADVERTISEMENTS

background image dont

Don't place any content in the app bars.

background image dont

Do reserve the top app bar for navigation and the lower app bar for actions.

5. NAVIGATION

login screen dont

Don't use the bottom app bar for navigating to content sections.

login screen do

Do use the top app bar for navigating to sections.

6. ACTIONS

login screen dont

Don't place actions in the top app bar.

login screen do

Do place actions in the bottom app bar.

7. OMITTING CHARM FUNCTIONS

website url dont

Don't place charm functionality such as search in the app bar.

website url do

Do reserve the top app bar for navigation and the lower app bar for actions.

8. GLOBAL AND LOCAL ACTIONS

advertisements dont

Don't mix global and local actions together

advertisements do

Do keep local actions to the left and global actions to the right.

9. NESTING APP BARS

loader dont

Don't allow for app bars to expand or collapse for nesting actions.

loader do

Do use fly-outs to support nested actions.

10. LOGOS

branding dont

Don't show your logo on the app bar.

branding dont

Do keep the app bar free of the logo.

12. CREATIVE SHAPES AND SIZES

branding dont

Don't be restrained to using standard app bar dimensions.

branding dont

Do explore creative ways of using the app bars.