WP7: UI Concepts of Windows Phone 7

This is part 4 of the Windows Phone 7 series:

Metro Style

A Windows Phone design system, codenamed Metro is used as a basis for the Windows Phone 7 User Interface. It aims at easily directing end users to the content needed. In order to reach this, its principles focus on a look that uses type to echo the visual language of airport and metro system signage. Harmonious, functional and attractive visual elements are supposed to be realized in Metro interfaces. A good User Interface design should provoke playful exploration when using the application and give users a sense of wonder and excitement. It is highly recommended that developers incorporate Metro design style whenever this is possible. Its clear and straightforward design makes an application legible, while at the same time ecnourages the usage. Based on the application, the requirements may vary, but it still provides a more consistent, fluid User Interface experience from the custom and built-in view.

User Interface elements should be authentically digital and embody harmonious, functional and attractive visual elements. Applications should grab the attention of users by promoting navigation, exploration, and exciting visuals in their design.This concept is the basis for the five principles of the Metro design:

• Clean, light, open, and fast: It is visually distinctive, contains ample white space, reduces clutter and elevates typography as a key design element.
• Content, not chrome: It accentuates focus on the content that the user cares most about, making the product simple and approachable for everyone.
• Integrated hardware and software: Hardware and software blend into each other and create a seamless user experience from single-button access to Search, Start, Back and the camera to on-board sensor integration.
• World-class motion: The Windows Phone 7 touch and gesture experiences on capacitive screens are consistent with Windows 7 on the desktop and include hardware-accelerated animations and transitions to enhance the user’s experience at every turn.
• Soulful and alive: A personalized, automatically updated view into the information that matters most to the user is enabled and brings to life a cinematic photo and video experience by having a fully integrated Zune media player experience.

Metro Style Controls

All controls, that come with Windows Phone 7 Development Tools are metro styled. The Panoramic View Control and the Pivot Control are exclusively developed for Windows Phone 7 but they are yet to be available. Nevertheless, while waiting for the official controls, a “temporary solution” has been elaborated. Here is the link to the codeplex project.

Panoramic View Control

The Panoramic View Control itself is pretty basic.

A Title and Background Image dependent properties are implemented within the Panoramic View Control. Just like a tab control, it also derives from ItemsControll. Each individual Item is of type PanoramaItem. You can think of these as visual sections. There is a default Width, provided by the control, which can be used by every section. Shall more space be needed, a custom Width can be specified. For each PanoramaItem should be assigned header and content properties.

Pivot Control

The Pivot Control is very close to the Tab Control. It can be compared to the dividers of a notebook. It allows multiple pages to be defined for the same window. Each page consists of a certain type of information or a group of controls that the application displays when the user selects the corresponding tab (Pivot Item). To navigate from one page to another you can either click the page’s Header or simply flick through pages.

Other Controls

1. Progress Indicator
2. Border
3. Check box
4. Content control
5. Content presenter
6. Grid
7. Hyperlink
8. Image
9. InkPresenter
10. ListBox
11. MediaElement
12. Multi scale image
13. Password box
14. Progress bar
15. Radio button
16. Scroll viewer
17. Slider
18. Stack panel
19. Text block
20. Text box
21. Canvas
22. Push button

Most of the controls have the same functionality as their corresponding controls in Silverlight.

For more info about these controls read the UI Design and Interaction Guide for Windows Phone 7 v2.0.