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.
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.
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.
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 designing the horizontal and vertical screen modes of applications, consider the following factors.
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.
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.
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.
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
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:
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.
The topic only contains colors. Font, widget size, and other elements cannot be changed.
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.