Speak like a Metro Expert

Windows 8 app bar

App Bar

The Windows 8 App bar is located at the bottom of the screen. It is used for commands, such as pin to start or create new element. It can also be used to switch between views, such as "suggested by staff" or "popular" for a music app. The toolbar that is hidden until the user swipes up from the top or bottom of the screen. It may also automatically pop up during specific tasks in applications. The app bar is not used to navigate between separate pages.

Windows Phone App bar

Application Bar

The Application Bar for Windows Phone 7 displays up to four common application tasks as icon buttons. The Application Bar can also expand into the application bar menu, which is accessed by tapping on the ellipsis on the right side of the App Bar, or by flicking the app bar up. The App Bar Menu contains some of the less common functionality, and is generally limited to five functions.

Windows Phone back button

Back

Windows Phone apps use the hardware back button to backtrack within applications.

Xbox beacons

Beacons

Xbox Beacons allow alerts to be posted onto Facebook, the Xbox 360 dashboard, or other social media outlets. These alerts let your friends know that you would like to play a game or watch a movie. For example, the alerts can also inform friends that they should log-into Xbox Live and to play a round of Halo Reach.

Bing search on Xbox

Bing search

Bing search allows users to search their Xbox 360 console for games, television shows, music, and apps. This can be done using the controller, hand gestures, or voice commands. Simply navigate to the Bing hub with the controller and type what you're looking for in the search box. Alternatively, users can say "Xbox. Bing. Madden" and a list of game items will appear.

Windows 8 charms

Charms

Charms are a set of five functions that are available for all applications in the Windows 8 OS. They are represented as icons and shown only when the user swipes left from the right edge of the screen. The five functions are Search, Share, Start, Devices, and Settings.

Windows 8 contracts

Contracts

Contracts are a new aspect of Windows 8 that provides communication capabilities between separately and independently developed Windows 8 applications. Contracts serve as a useful service to connect applications to one another including Search and Share.

Windows 8 detail pages

Detail page

Detail pages are the third level in the navigational hierarchy of a Windows 8 app. They provide detailed information of a specific item or section. The format in which the information is displayed varies depending on the particular type of content. Detail pages may contain a lot of information or may contain a single object, such as a picture or video.

Flip in Windows 8

Flip

In Windows 8, Flip allows users to toggle between currently open apps and the Start Screen. It is activated by flicking right from the left edge of the screen. Flicking and holding will result in a Snap.

The grid

Grid

Metro applications are based on a strict grid layout. The grid is made up of units, which are 20x20px in size. The grid is used to create a uniform layout between multiple applications, reinforcing the focus on content rather than chrome. For instance, Microsoft recommends having two unit between top level headers and the content, and one unit between tiles. For more information on the website, visit the MSDN page to learn more about the grid.

WP7 Home Panel

Home Panel

The home panel is the first panel in a Windows Phone 7 panorama. It is used as a starting point to navigate into subareas of the application. The links can be displayed either in a list or with tiles. The home panel does not have to be the landing screen of your application. An application could also have multiple home panels.

Win8 Hub Page

Hub Page

For Windows 8, the Hub Page is similar to an overview page or a home page to show what is new and available within an app. From there, there are tiles and links that allow the user to dive deeper into the app. Hubs consist of different categories of content, each of which maps to the app's Section pages.

Xbox hub

Hubs

Hubs are categories for users to easily navigate to specific content. They are displayed horizontally (left to right) across the top of the dashboard. These hubs include Home, Bing, Social, Video, Games, Music, Apps and Settings.

Internet Explorer 10

Internet Explorer 10

Internet Explorer 10 is the new version of Microsoft's web browser, which will have a Metro Style for Windows 8 as well as a traditional desktop version.

Kinect gestures

Kinect Gestures

Kinect Gestures can be used instead of the controller to interact with the Xbox Dashboard and applications. When the Kinect sensor is active, a window appears in the lower-right corner of the Dashboard. This window means that you can use gestures. For more information or to watch videos of each gesture, go to the Xbox support page for Kinect Gestures.

WP7 Launch Screen

Launch Screen

The Launch Screen displayed on Windows Phone 7 applications that require users to log in or enter a passcode.

WP7 List with Details Drilldown

List with Details Drilldown

This type of screen displays a list of items that the user can tap on to access a detail view on the Windows Phone 7. The list view is used instead of a pivot or panorama for very simple applications, such as the standard messaging application.

Win8 lock screen

Lock Screen

The Windows 8 Lock Screen appears when the computer first boots up. It features the time, date, and a series of notification icons.

Win8 Navigation bar

Navigation Bar

This bar provides the main navigation within a Windows 8 app including links to Home, Features, etc. To enable this feature, a user swipes down about an inch from the top of the screen. Not all apps have this, however, it does provide a convenient way for users to access the main hub or section pages from anywhere in the app.

Windows Phone 7 Panorama

Panoramas

The Panorama is used as a Windows Phone 7 application hub. It allows the user to navigate between the different subsections of the app and surfaces the newest or most popular content from those sections. The panorama surface is made up of panels that extend beyond the screen area. The user moves between them using a flick gesture. The panorama usually has a picture in the background; this is also used as a visual indication that the screen continues beyond the visible area. Panoramas usually have a maximum of four or five panels. The first panel on a panorama is called the home panel.

WP7 Pivots

Pivots

The Windows Phone 7 pivot control is similar to tabs as it is generally used to categorize related information (unlike in panoramas where the information contained in the various panels can be totally different). The headers of the categories are displayed at the top of the screen; to navigate between them, the user either swipes or taps on the header. It is advisable to limit the number of pivot pages to six or fewer. Oftentimes, pivots are used as second level pages.

Xbox Quick play

Quick Play

Quick play allows users to access and launch one of 7 of their most recently played games and applications on their Xbox. This option is found in the Home Hub under the ‘quick play' tile.

Windows 8 search contract

Search for Windows 8

Search is a Windows 8 Contract that provides search capabilities within the operating system for files and settings, as well as within third-party apps. The Search charm is accessible with a swipe, from the Search charm in the right edge of the screen.

WP& search

Search for Windows Phone 7

Search is usually accessed from the application bar or the application screen on the Windows Phone 7. Note that the hardware search button on the phone is only used to access Bing search and cannot be reprogrammed to search within your application.

Win8 Section Page

Section Page

The Section Page is the second level page within the navigational hierarchy of a Windows 8 app. The user reaches this page by clicking on a group of tiles on the hub page. Here content can be displayed in any form that best fits the situation. The Section page consists of individual items, each having a separate Detail page. Section pages may also take advantage of grouping and a panorama style layout.

Win8 Semantic Zoom

Semantic Zoom

Semantic Zoom allows the user to zoom out and view a summarized version of the current page in the Windows 8 OS. It is called semantic zoom because even though fewer details are displayed, the main iconography and meaning behind each tile or group is maintained. To activate this, the user uses two fingers to pinch and stretch. On the Windows 8 Start screen, users can use Semantic Zoom to view the entire (multiscreen) display on a single screen, and arrange and rename onscreen elements like groups.

Segoe font

Segoe UI and Segoe WP

Segoe UI is the font provided by Microsoft for Windows 8 and the Xbox Dashboard. Segoe WP is the suggested fonts for Windows Phone applications. They are both sans-serif fonts that comes in multiple weights: light, semilight, regular, semibold, and bold. Other supported fonts are Calibri, for text that is inputted and read by the user, and Cambria for large blocks of text.

Windows 8 share contract

Share

Share is a Windows 8 Contract that allows one app to share information with another. For example, a photo app might use Share to display a user's photo online. The Share charm is accessible with a swipe from the Search charm in the right edge of the screen.

Win8 Snap View

Snap

Snap is the process allowing two apps to be displayed, or docked, side-by-side on the Windows 8 platform. These apps can consist of two Metro Stype app or one Metro Style apps and a Windows legacy app. In this mode, one application takes up 30% of the onscreen real estate (Snap View), while the other application takes the remaining 70% (Fill View). Snap view is enabled by dragging an app from the left side of the screen until it "snaps" into the Snap View. Users can also change the space each app occupies by dragging on the dividing line between them and flip their positions so the Snap View appears on the right.

WP7 Splash Screen

Splash Screen

The splash screen is shown when a Windows Phone 7 application is loading. This is a great place to showcase a background image that reflects the company's brand, as well as the logo.

Win8 Start Screen

Start Screen

The Start Screen replaced the traditional Windows Start Menu for the Windows 8 OS. It contains a series of tiles of the user's favorite applications.

WP7 Status Bar

Status Bar

The status bar displays system-level status information such as: signal strength, data connection, roaming, wireless network signal, battery power, and the clock on the Windows Phone 7. The status bar can be hidden when an application is open, however, given that it contains important data, it is inadvisable to do so.

Windows 8 Tiles

Tiles for Windows 8

Tiles are a user interface element found in the Start Screen that replaces icons and presents "live" updates from applications within Windows 8. These can be small (square) or large (rectangular), depending on the user's preference. Users pin their favorite apps to the Start Screen to make them more easily accessible, this is similar to shortcuts in previous versions of Windows.

WP7 Tiles

Tiles for Windows Phone 7

Tiles on Start Screen are used to access an application. They should be 173 pixels x 173 pixels at 256 dpi and in PNG format. Currently the larger rectangular tiles can only be used by Microsoft applications. In addition to the large tile, designers also need to create a separate 62 pixels x 62 pixels image to include in the application list. Tiles are also used within applications to showcase and link to content.

Windows Store

Windows Store

Microsoft's online store for Windows 8 apps, which will consist of both Metro Style apps and a Windows legacy apps.