Example of Panoramic Control Design

Original blog: http://windowsteamblog.com/windows_phone/ B /wpdev/archive/2011/03/15/designing-hubs-good-examples-using-the-panoramic-control.aspx

One of the most frequently asked questions in the developer community is "can you give us an example of Panoramas ?" In some previous posts, we called the "Panoramic control" as "hub" or simply called the scroll view, this control uses a horizontal canvas with a length beyond the screen size limit to present content, which is very unique. This visualization model is a symbolic element of the WP platform, so it can be used by all applications. In fact, in most cases, the panorama control is the first place the user sees when entering the application, which also gives more meaning to the control. First, we can think of panorama as the cover of a magazine. Similarly, panorama allows users to browse the highlighted and relatively important content, and the highlighted content should be the portal for further operations. Panorama should focus on a few fresh, dynamic, and eye-catching tasks. In your applications, panorama should neither interact independently, nor be overwhelming. Based on the above content, I will show you some examples that follow the above specifications. Facebook shows a good mixed format that combines several types of content that interest users. The same is true for Twitter, although the content displayed on it is only a simple list.

650) this. width = 650; "border =" 0 "alt =" "src =" http://www.bkjia.com/uploads/allimg/131228/1T4334152-0.png "/>

Use background imagesPanoramas can have a fixed or updatable background image). This background helps make the application emphasize the topic, or add a good touch to increase the screen appeal. You can use a texture or image containing the app icon or related photos to achieve this effect. In both cases, make sure that the background image has a sufficient contrast so that text or other content can be easily identified without mixing with the background image. Background images should also be deprecated and not more attractive to users than the content. The following are some examples of how to use background images properly.

650) this. width = 650; "border =" 0 "alt =" "src =" http://www.bkjia.com/uploads/allimg/131228/1T4333029-1.png "/>

  Tile formatIn most cases, the Hub contains tiles that can be linked to related content, which may be photos, business cards, news, or movies. There are not many restrictions on using tiles in your panorama. It can be used almost as long as it meets the grid layout requirements. A rectangle is suitable for movie posters and a square is suitable for portraits. a panoramic view can be used as a news title or landscape projection, or even a mixture of images of different sizes, it is like a collage-style wallpaper (please refer to the Facebook Hub at the beginning of this article ). The following are examples of tiles of different sizes and styles.

650) this. width = 650; "border =" 0 "alt =" "src =" http://www.bkjia.com/uploads/allimg/131228/1T4333H0-2.png "/>

How to Use the scroll function in different formats? Note that in some examples above, different methods are used in combination for the scrolling part. The scrolling part of the image can only be horizontal, and the scrolling part of the text list can only be vertical. The same part of content cannot be rolled in two ways. In some hubs, one common mistake is that the part containing tiles can be moved horizontally or vertically, this forces the user to use shaking instead of rolling. Shaking is not the expected result, which destroys the user's psychological model, so they cannot see all the content in this part. If you are developing a very casual application using the panoramic control, you can use the examples in this chapter to get inspiration. If you have resources or talents and come up with a required and very unique method of use, please let me know. In future articles, we will show examples of more creative or unconventional use of panoramic controls.