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:
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.
1. Windows Phone Chrome
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.
Wireless network signal strength
NOTE
The screen shown in Figure 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.
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.
2. Screen Orientations
Windows Phone 7 supports three screen orientations: portrait, landscape left, and landscape right.
In portrait orientation, the page is vertically oriented with hardware
buttons appearing at the bottom of the device. Portrait orientation is
the default orientation of the device, and the Start screen is always
shown in portrait orientation. In Landscape left, the System Tray
appears on the left of the device, and in Landscape right, the System
Tray appears on the right.
Your application cannot switch the orientation of its screen by itself, since the Orientation
property is read-only. You can, however, set a fixed orientation, where
you disallow application support for certain screen orientations. Some
system components can adjust to changes in orientation. For example,
application bar icons automatically rotate when the device changes from
portrait to landscape mode. Other components with similar
orientation-aware behaviors include the System Tray, Application Bar
Menu, Volume/Ring/Vibrate Display, Push Notifications, and Dialogs.
Having discussed major
principles and some of the components of Metro UI, it is time to turn
our attention to the support for themes on Windows Phone 7 devices.
Themes make the phone more personal, which goes hand in hand with the
Metro guideline that the experience of using the phone should be an
engaging one.
