Introducing the Metro Design System in Word

Generating QR-Code in Word Introducing the Metro Design System

The big idea behind the Windows Phone 7 design system (Metro) is to direct users to the content they want using design elements that are both effective in conveying their message and attractive. The UI Design and Interaction Guide for Windows Phone 7 (available as a PDF download from http://go.microsoft.com/fwlink/ LinkID=183218) specifically states that visual elements within applications should encourage playful exploration so that the user feels a sense of wonder and excitement when using your application. Microsoft strongly encourages all application developers to adopt Metro design principles in their applications. Fortunately, to help those of us who may not be particularly strong in graphic design, Microsoft ensured that all controls available for you to build applications (i.e., text box, button, etc.) are Metro-compliant by default. These controls that ship with Windows Phone 7 development tools already have the look and feel dictated by Metro UI guidelines it is our job as developers that we preserve that look and feel throughout our applications. When you first start working with standard controls within Windows Phone 7 applications, you may be surprised by their minimalistic, two-dimensional look. That appearance, however, emphasizes another one of the main principles of Metro UI design: Delight through content instead of decoration. Microsoft encourages developers to reduce the complexity of visual elements that are not part of content and to communicate with users of their applications as directly as possible. According to the Metro

designers, the content and the functionality of the application should be the most engaging factor of the Windows Phone 7 application. Another pillar of Metro UI is the use of a standard contemporary-looking font. Segoe WP is the standard system font on Windows Phone 7 devices and it is a Unicode font. It is available in five styles: 1. 2. 3. 4. 5. Regular Bold Semi-bold Semi-light Black

You can also embed your own fonts in any application you write, but they will be available for use only within your application and not outside of it. To conform with the Metro guidelines, however, it is probably wise to stick with the standard fonts that ship with the tools.

The term Windows Phone Chrome refers to two areas on the device screen, one at the top and the other at its bottom, as illustrated in Figure 9 1. The System Tray is one of two primary components of Windows Phone Chrome; the Application Bar is the other. The System Tray is the top portion of Windows Phone Chrome and contains several indicators that display system-level status information. The System Tray displays the following icons, left to right, in the order listed here. 1. 2. 3. 4. 5. 6. 7. 8. 9. Signal strength Data connection Call forwarding Roaming Wireless network signal strength Bluetooth status Ringer mode Input status Battery power level

Note The screen shown in Figure 9 1 is the emulator screen, and it does not include all of the items mentioned in the preceding list.

By default, only the system clock is visible at all times. To make other items visible, you need to double-tap (double-click in the emulator) in the System Tray area. These indicators slide into view for

approximately eight seconds before sliding out of view. Note that although you can programmatically hide the System Tray, it is not a recommended practice under Metro guidelines. In 7, you learned how to work with the Application Bar, the second part of Windows Phone 7 Chrome. To quickly recap, the Application Bar is limited to four icons if there are more navigational items to display, they should be put inside the menu items. There is a set of default Application Bar icons included with each distribution of Windows Phone 7 tools, and it can be used to build basic Application Bars quickly.