Windows Phone 7 UI design and interaction specifications (1)

When the iPhone and Android are invincible in the market, mobile phones equipped with Windows Phone 7 finally entered the market. I plan to write a Windows
If you try the phone 7 app, you can simply flip the Windows Phone
7. the SDK is well written and released in a timely manner. It would be nice if sdks of other Microsoft products were the same.

Many sections of the Windows Phone 7 SDK prompt you to read "UI design and interaction guide for Windows Phone 7 V2.0" first. This specification is very detailed and the content is not just designed for user experience, developers can also learn about some Windows Phone 7 capabilities and restrictions.

In these articles, I will not only extract some important content for me, but also compare it with Android and IOS. In addition, this specification contains a lot of common sense about the user experience of the touch screen, and I will not go into detail in this article.

Metro

The UI System of Windows Phone 7 is called Metro, and its design is inspired by the logo of public places (such as road signs of subway and airport ), the logo uses a simple and easy-to-understand image, a clear contrast color, and a large font, so it is clear and easy to distinguish, a glance to know its meaning.

This is what Metro wants to achieve. In the real world, we take the metaphor that everyone is used to into the mobile phone interface. When creating a Windows Phone 7 Application, we should put availability and UI first, in addition, we should follow the design principles of Metro:

• Clean, lightweight, open, fast, enthusiastic, and lively
• Focus on content, not decoration
• Software and Hardware integration to respond to physical key events
• Gesture operation

Start Screen

The Start Screen of Windows Phone 7 is very distinctive and consists of many small blocks. The small blocks are called tile, and each tile is composed of a background image, icon, and title.

The background image is a 172 dpi jpeg or PNG image with a standard size of 173 x pixels. If the image size is smaller than the standard size, it will be stretched. If it is larger than the standard size, it will be cut from the upper left corner.

The Icon size is 63*63 pixels. If multiple images are used, ensure style consistency.

If no icon or title is specified, the System-defined icon and project name are displayed. In addition, you can use tile notification to update the image, title, and counter of tile, however, the counter style cannot be customized.

There is also a double-width tile on the Start Screen of Windows Phone 7, such as the calendar tile. Unfortunately, this double-width tile is currently only available to Microsoft, mobile phone manufacturers and operators.

Windows Phone 7 has two built-in backgrounds, dark and light, and 10 sets of colors. In addition, mobile phone manufacturers and telecom operators may also add themes.

System-level themes cannot be customized, but applications can rewrite their own themes. We recommend that you use the system theme. Do not rewrite the theme for no special reason. If the application customizes the color, make sure that the color can be identified under various themes.

In addition, avoid using a white background as it consumes a lot of power.

Notification

There are three types of push Notification Services in Windows Phone 7:

• Tile notification
• Toast notification
• Raw notification

Tile notification is a system-level notification that consists of optional counters, optional titles, and background images specified by developers. Notifications are displayed on the tile of the Start Screen, but be careful when using them. frequent notifications consume power.

Toast
Notification: it is also a system-level notification. When a notification arrives, it will be displayed at the top of the screen for 10 seconds, and the application that sends the notification will be opened with a single click. The application icon is displayed on the left of the notification, and the application icon is displayed on the right.
The side is the title and sub-title, and the font of the title is displayed in bold. Too long text will be in the phase. Toast
Notification should be mainly used for point-to-point communication. You should also be careful when using it. Too many toast notifications will not only consume power, but also make users angry. Toast supported
The notification application must disable this function by default and grant the permission to the user.

Raw notification is an application-level notification. It can only appear within the application and is controlled by the application.

Application bar

The application bar is the most common task operation entry, a bit like the toolbar of a Windows program. Its height is 72 pixels and a maximum of four graphic buttons can be displayed.

A graphic button consists of text and icons. Icons should be designed with the metaphor of the real world, which is clear, clear, and easy to understand. The Icon size is 48x48 pixels (other sizes are scaled
To this size), we recommend that you use white as the foreground color. The background color is transparent and saved as PNG files containing alpha channels. The system automatically colors the current topic and adds a ring to the icon.
The ring is not required. After installing the Windows Phone 7 development tool, you can go to c: \ Program Files \ Microsoft
Some chart examples are found in sdks \ Windows Phone \ v7.0 \ icons.

In addition to the graphic buttons, the application bar displays a ellipsis. After you click the ellipsis, the application
Bar menu. Menus provide portals for functions that are difficult to describe with icons or are not commonly used. A menu can contain up to five menu items. Each menu item has a length of 14-20 English characters and is too long.
Characters will be truncated. Remember to "less is more" to simplify the text.

The transparency of the application bar can be adjusted freely. The recommended values are 0, 0.5, and 1. When the transparency is less than 1, the application bar will overwrite the page. When the transparency is equal to 1, the page size will change to make room for the applicaiton bar.

For the application bar, it is recommended that you do not need to use it. It is not a good thing to give too many options to users.

Here, by the way, Android also has a similar mechanism, that is, menus, and Android phones are also equipped with a physical menu key for displaying menus, which is a good
Design, but Android does not have a mechanism to prompt users that the current page contains menus, So that I try a new application, every time I jump to a new page, try to press the menu key to see
What are the options? This is a terrible experience.

Widget

When using Silverlight to develop a Windows Phone 7 Application, you can use many built-in controls for rapid development. Here is a brief introduction to some controls.

Progress indicator is a system-level control. It has two modes:

• Determinate: The progress bar increases from the beginning to the end.
• Indeterminate: progress bar continues until the task is completed.

Checkbox supports the intermediate status, but it is not recommended because the intermediate status can confuse users.

Hyperlink should be used only for navigation and display the remaining text, and should not be used as a button.

The image control does not support GIF. In Silverlight, this is the case.

You can add multiple mediaelement controls to the page, but only one of them is active. Do not use the mediaelement control to play the audio or full screen playback, which may be interrupted.

The multiscaleimage control does not have any built-in gesture functions, which must be implemented by developers themselves.

The background of the panorama control can be a monochrome or image. The size ranges from 480x800 pixels to 1024x800 pixels. A large image may affect the performance. Control
The section ratio is 16: 9. The title of the panorama control can be text or image, but must be consistent with the tile title of the application. Panaorma Control
Section title can be text or image. If the thumbnail in section does not contain a text description, you can place two in one line, and it is recommended that only two in one line be placed.

The render control is used to display simple data types. Do not nest it in the render control or the panorama control. In addition, the head height of the render control is fixed and immutable.

The slider control is used to select a value in a certain range, which has two directions: horizontal and vertical. However, we recommend that you use horizontal.

The text of a button should be a simple and clear verb.

The button in the dialog box, indicating that the positive meaning should be on the left side (such as "OK" and "save ").

Canvas performs better than grid in multi-layer nested controls. However, grid supports scaling and rotation, while canvas does not. Therefore, consider the page content and performance during development.

Pay attention to the Metro principle when creating custom controls.

By the way, Windows Phone 7 has a special system settings page, but developers cannot add application settings pages in system settings. application settings pages can only be added to applications.

The purpose of the design setting page is to keep it short and clear, so as to avoid creating setting options for more than two pages. Otherwise, you may suspect that you have entered another application.

The title of the application settings page must be consistent with that of the system-level settings page.

Applications that obtain data from the network must provide the option to disable the internet.

The user's changes to the settings page should take effect in a timely manner, that is to say, the use of "done", "OK" or other forms of confirmation mechanisms should be avoided.

The original Article is published in coding.windstyle.cn. Welcome to visit and subscribe to it and share it with me.