Go to: Windows Phone 7 design overview

Smashingmagazine

Introduction: Windows Phone 7 introduces a brand new content management and user interface namedMetroDesign Language and theory. Microsoft's current market and user base are also different from those of the old generation windows (which has finally changed): from commercial and technical users to common users, online, emerging users who are closely linked to offline life.

　　Dialog designer

We do not emphasize how important the design is to mobile apps. WP7 is a very different operating system from other mobile phone platforms. Although it is still in its infancy, the industry is still very optimistic about it. Designers should learn about the platform and user interface before development. Second, Microsoft will eventually introduce Metro to Windows 8 to build consistent mobile phone and computer interfaces. Windows 7.5 and AKA mango were released in September, followed by Nokia's first WP7 operating system mobile phone. We have reason to believe that WP7 will play an increasingly important role in this smartphone market.

　　An innovative design

The Windows team was inspired by the street design. In the design of these guiding signs, it is important that they remove all unnecessary elements and take the content as the design core; they introduce this to the design of WP7, let the content speak. The interface disappears and the content is a new interface. The current interface is not a way to get the content, but the content itself. Reduced visual design emphasisDirect interaction between users and content(Direct interaction with the content ).

Grid Systems in graphic design, By Joseph Müller-Brockman)

The image design of WP7 adheres to the style of printed fonts and draws on the design philosophy of image designer Joseph Müller-Brockman: Pure printed fonts on the canvas, concise colors and square grids. The icons are fully integrated into the background and even the content itself, and become part of the navigation.

 

　　Simple design and print fonts, cocktail flow and fuse.

All these designs bring people to think of professional plotting. The map-style layout provides the direction; the text is simple and clear, allowing users to easily navigate; in addition, there are no additional visual elements.

　　Brand new content Square

The Metro Design emphasizes rigid content organization and associates it with a map of Underground Iron. Its Information Architecture is highly logical. There are no redundant image elements. The content of this section only uses the information itself (subject: the circuit design diagram is based on this logic). When users browse the page, there is only a logical connection between information and content. For designers, the content here is less visual, and how to contact the content and navigate the entire application design is heavy ink.

 

　　Milan metro (image: Wikipedia)

According to the importance of the content, or based on how the application wants to present information to the user, they should be categorized in a hierarchical system, interlocking. just like many other mobile apps, identifying the user group of the conversation is crucial.

 

　　Flipboard: Content serves as the acceptance interface.

Just like Flipboard's design philosophy, Metro's UI design places important content directly in the Section. On the Windows Phone homepage, they used the home page navigation of an 8-sector website, covering mobile phone communications, contacts, text messages, emails, and Xbox, users can update these eight sections as needed (this is the same as other mobile phones ). The difference is that each section displays the latest content. For example, the email icon displays the recently received email. The purpose of this UI is to give the user a choice: Based on information, choose whether to continue browsing. Designers should make full use of this feature.

　　Organization content

Microsoft has introduced a hub concept (hub) as a content management center. It is implemented by three important design concepts:"Panorama" (Panorama), "Panorama""(Pivot rotation) andLive tile (Real-time update module ).

　　Panorama (panoramic mode)

When the user starts the application, they log on to a panoramic mode, and all the information in the application is placed on a screen (by sliding horizontally, the user can preview all the content ). In the WP design, pay special attention to setting, directory, etc. should be placed on the screen as much as possible, rather than independent windows.

 

　　Apply feedtso to panoramic mode

As shown in, the panoramic mode gives users an intuitive connection between content.

　　Rotate (pivot rotation)

Pivot rotates the logic orchestration content to classify the information and display different aspects of the same content

 

　　4th & Mayor

As shown in, this navigation control is like a tab.

　　Live tiles (Real-time update module)

As mentioned above, this real-time update section is another major feature of WP7. As shown in, the weather section shows the current weather conditions. You can view the latest information without opening the application.

 

　　Accuweather and appflow

　　Design

　　Clickable text

WP7 text can be clicked, without the so-called click security area. Therefore, pay attention to the use of appropriate visual orientation in design.

　　Animation

WP7 emphasizes the page switching or the animation effect of content conversion, which can capture the user's attention.

　　Icon

WP7 has strict rules on icon design. We recommend that you carefully read the design guidance they provide. The icon can only appear inApplication bar (Application bottom ).

 

　　Pictures lab

　　Color System

WP7 has a dark and light color option on the settings page. In terms of design, users must consider switching between two colors. Therefore, you need two solutions. Unless your product colors are brand marks, we strongly recommend that you use two sets of colors. Considering that WP7 applications need to be reviewed, the color system is the main reason why many applications are rejected.

　　Design Tools

In addition to conventional tools such as balsamiq, Adobe Illustrator, fireworks, and Photoshop, you can also use expression blend.