[Translation] Windows Phone 7 user interface framework

ArticleDirectory

• Screen Orientation)
• Frame and page Construction)
• Scroll Viewer)
• Themes)

User Interface framework

The Windows Phone 7 Series CTP user interface is designed to provide an optimal visual experience for end users. This section describes how to educate developers about full screen mode, screen orientation, frame and page navigation, and applications.ProgramApplications scroling and other topics.

The following topics will be discussed in this section:

Screen Orientation)

Two screen orientation types are supported: Portrait and landscape ).

Frame and page Construction)

Windows Phone 7 CTP applications are in Silverlight-based Web browsing mode. In this mode, users can navigate to each other under different content pages.

Scroll Viewer)

When the application content is larger than the screen size, it will scroll.

Themes)

A topic is a resource used to personalize the visual elements of Windows Phone.

 

Screen direction

Windows Phone supports three types of screen orientation: Portrait screen, landscape screen to the left, and right screen. The difference between the left horizontal screen and the Right horizontal screen is that the application toolbar and the system tray have different orientations.

Note:

The application cannot specify the orientation of the application toolbar and system tray that only support the Left or Right horizontal screen. Both options are required.

Portrait Mode

In portrait mode, the page height is greater than the width in the vertical direction. The orientation changes when the device rotates or slides out of the physical keyboard. When the screen direction is changed, the application with the direction awareness function should also respond to the direction change.

Landscape mode

In Landscape mode, the width of the page is greater than the height. The following are some usage of the Landscape mode:

• When a user uses a horizontal pull keyboard for input, such as writing emails and text messages.
• If a webpage is more suitable for horizontal browsing, the Landscape mode provides a better user experience.
• When taking the photo.
• When viewing a single photo or a slide.
• When watching movies or videos.
• When playing a game.

Considerations for Application Design

When designing the horizontal and vertical screen modes of applications, consider the following factors.

• The application must support all screen directions at the same time. If an application supports both landscape and portrait modes, the screen display mode is switched when the user switches the phone or slides out of the physical keyboard. Since the orientation attribute is read-only, the display mode of the screen cannot be directly converted through programming. However, there is also an indirect method to implement this function, which can be achieved by assigning values to the supported orientations attribute.
• When changed to Landscape mode, the application toolbar and System Tray, application menu, user volume interface components, Message notification module and system dialog box (such as low battery notification) and so on.
  Text input in landscape or Landscape mode is completed through a physical keyboard (if available) or a soft Screen Keyboard.

Framework and webpage Construction

This section describes how to build an application framework and a web page. It will also include the design of custom mobile phone UI framework including Windows Phone 7 Series CTP.

Note:
This section will be expanded in future versions.

Windows phone7 CTP applications are based on the Silverlight web browsing mode. Users can direct and browse each other on different content screens. In addition, you can clickBackHardware button to return to the previous page. This model is designed to ease the development difficulty of browser-based applications and make it more natural for the Windows Phone 7 Series CTP navigation model.

The core element contains the top-level container control called phoneapplicationframe (framework), which can carry the phoneapplicationpage (page ). In applications, content can be separated from pages. The Windows Phone 7-series CTP provides frameworks and page classes to facilitate navigation to independent content chapters. In applications, you can create multiple different pages based on your needs. These pages can be navigate through the framework. The following figure shows the hierarchy of frameworks and pages in an application:

Custom screen UI

This is the status of page content conversion, used to convert the normal browsing status and full screen status. The application can choose whether to include the system tray or the application toolbar. However, developers should not change these behaviors automatically, when you start a game on Windows Phone, the game settings menu is displayed. If you choose to start a new game, the page starts in full screen mode.

Note:
The above is considered to be the best practice to use the fully-customized UI mode. If the application only runs in full screen mode, all visual notifications (including incoming call notifications) will be normally transmitted to the user interface.

When your application enters full screen mode, the system tray bar and application toolbar become invisible. Developers can hide the application bar or display it on the most superficial layer. You can assign values to the page. fullscreen attribute to determine whether to display the toolbar and System Tray of the application.

 

Scroll Viewer

When the content is greater than the border of the scroll viewer, the application will scroll. Content is included in the scroll panel, which will process Page scrolling. The scroll panel displays a scroll indicator to show whether the content is longer or wider than the page, and shows the distribution of the current content throughout the page.

Considerations for Application Design

• The scroll indicator on the right is used for vertical scrolling, while the scroll indicator on the bottom is used for horizontal scrolling. The scroll indicator only appears when you interact with the page.
• If there is no gesture motion (such as clicking or translating) event, the scroll indicator disappears for a period of time. When a gesture motion event occurs, the scroll indicator appears again.
• The scroll indicator indicates the user's position in the content. For example, if you are at the top of the page, the scroll indicator is displayed at the top.
• Avoid using a list box control with a lot of content on the scroll viewer, which may reduce performance.

Topic

A topic is a resource for personalized window phone visual elements. When creating an application, the Windows Phone 7-series CTP developers can maintain the UI appearance and sensory consistency of the original device from the perspective of stylistic standpoint. These style attributes include the background color and key color (accent colors ). The topic ensures the consistency of the user interface elements and controls, and prevents the non-harmonious user experience.

The goals of this function include:

• Developers in Windows Phone 7 CTP can build applications and directlyCode.
• Developers can explicitly change the attributes of any theme to meet their own brand requirements.

The advantage of using a topic is to maintain consistency and compatibility with the Metro design principles. Developers can directly use the default control settings without changing some common attributes (such as the color style ), the style of these attributes will be changed at runtime according to the settings in the topic file. Applications running on Windows Phone automatically modify the visual effect based on the corresponding topic. In addition, developers can cover topics at the application level. For example, if some companies need to display their own strong color elements, they can maintain their own color style when developing applications. Developers can use their own resources to overwrite the attributes of any topic. However, they cannot close theme.

Note:
The topic only contains colors. Font, widget size, and other elements cannot be changed.

Considerations for Application Design

• You can select a bright or gloomy topic. Developers should consider this when developing the UI. For example, if you select white for all backgrounds in the entire application. This may affect the battery life of the LED display. During development, you should always consider the impact of application background color on battery life.
• You can select 5 different key color schemes in your application. If your application supports key color schemes, these color schemes will change based on your original preferences. These key color schemes include orange, blue, green, and red. Mobile phone manufacturers can customize their own final key color solutions.
• You cannot modify system-level topics. You can only modify topics at the application level.
• If you explicitly set the foreground or background color of the control, you should also verify whether the control is visible in the black and white topic. If the selected color is invisible, either select a more appropriate color or set the background or foreground contrast.

About this translation

This article is translated from UI design and interaction guide for Windows Phone 7 series. The translation activity is initiated by the webmaster of www.wpmind.com. The final version will be published at www.wpmind.com.

 

Translation is a kind of physical activity. Although it is a short translation, it takes me a few hours to modify and proofread the translation before and after. However, due to my technical and English level restrictions, there is something wrong with translation, please correct me. Thank you!

 

 

Every year at this time, I can't forget to remember what I forgot. Every sacrifice will survive forever.