How does Microsoft's turnaround play? -WP7 design through IE

Source: Internet
Author: User
Keywords Toolbars start page OK hardware

About WP7 just start to write a comprehensive about the interaction of the article, write to find out how also can not get rid of scattered and empty, it is no wonder, want to express the face is too wide the inevitable excavation depth will become shallow, Finally, it's up to the all-inclusive to focus on an application. Below I will take the mobile Internet killer application One browser as the main line restricted view WP7 design.

application icon:

WP7 's own browser is Internet Explorer, its logo and desktop IE logo form the same only follow the style of WP7 processed into monochrome. The square icon to the left of the following figure is the WP7 start page, and the right side is the list of programs:

After processing the icon in the first screen recognition is very good, the following figure

Browser Start Page:

Click on the program launch icon to enter the browser start page:

The start page is divided into four parts from top to bottom: status bar, Address bar, content area, toolbars, and menus:
Status bar: status bar shows cell phone signal, electricity, time, etc. WP7 's status bar is different from the iphone and Android, one, the status bar does not always exist, for example, in the Panorama view (Panorama creator) page is no status bar; For example, in a few seconds after entering the browser will automatically disappear (status bar is still only state information disappeared), the status of information disappears after the top appears more refreshing, as shown:

Don't worry about not seeing the status information, just click on the status bar and they'll run out again.
Address bar: WP7 's Address bar places the refresh button to the left of the address bar. And at the time of loading the page, will appear in the refresh position "X", click Cancel page load. Putting two icons in one place is the same thing on other platforms, but it's the first time you put them on the left side of the address bar.
Content area: WP7 page Browsing and the iphone, drag to the top and then drag down the page as a whole will be pulled down, the difference is that WP7 increased the effect of the page was squeezed, more vivid performance.

Toolbars and menus: The Processing of toolbar sections is also very distinctive, the middle part is three very eye-catching icons, are bookmark, bookmark, and multiple windows, a little attention will find that the toolbar on the right side there are three "small dots", click will find it is a menu item entry. Click to see the menu item that is raised from below the toolbar.

The menu items in the browser are: forward, share the page, find the page content, add to the main screen, and set up. From the arrangement of the menu items can be seen, the toolbar is the most commonly used in the toolbar on the more obvious position, user-friendly operation, and the advance and other functions are not commonly used in the relatively weak menu items. Present the most concise and clear interface to the user. WP7 's menu strategy is better than ANDROID,WP7 no hardware menu keys, if there is a menu item will appear at the bottom of the screen toolbar and there are three points, if not the toolbar will not appear, such a strategy to help users feel the function, Android users do not know whether the interface contains a menu.

forward Back:

Although IE does not place the forward Back button on the toolbar, because forward fallback is a necessary feature of the browser, take it out here and analyze it separately.
WP7 has hardware to return so choose not to place the forward back on the toolbar (back by the hardware, forward hidden in the menu), the design is proven successful in Android's own browser, but there are problems with IE.
First look at Android's own browser-back strategy:

As shown in the "Browse page B" click on the main screen back to the Start page and then enter the browser back to the "Browse page B", then click on the hardware return will be in the page back, back to the end can not be back when the start page. Such a strategy, while not returning according to the user's antecedents, can satisfy the user's need to back up on the page and will not be surprised.
Then look at IE's return strategy:

In the same scenario, IE's handling strategy is different from Android, click on the hardware to return to the start page (return according to user routing) when "Browse page B", click the hardware again to return to the previous application "Application One" (not returned according to the user's antecedents) so there is a serious problem: once the user returns to the Start page, he can no longer go back to the previous page! (Narrator: Although the hardware is back, but WP7 's strategy is different from Android, Android can't back up after the start page, and WP7 back to the start page. From this point of view the hardware return to a bad place, the return function, although powerful but also to take into account a variety of responsibilities is inevitable confusion.

URL Input:

After analyzing the start page, we will enter the URL to browse.
Clicking on the Address bar pops up the keyboard and the content area is dimmed, which is consistent with the mainstream platform, and WP7 even follows the iphone's habit of putting the access button on the keyboard.

WP7 has no innovation in its own keyboard interaction, but it is visually simplified and the results are very good.

Content Browsing:

Because this browser does not support Flash and HTML5 also does not support Microsoft's own Silverlight, the page display effect is not satisfactory, Baidu News and hao123 HTML5 effect are unable to show.
Next we look at IE horizontal screen is how to deal with?
IE to horizontal screen also do subtraction, in the horizontal screen state does not exist "status bar", "Address bar" and "toolbars and menus" all the screen areas are used to display content. Figure:

To add, the design principle of the horizontal screen in the WP7 system is that the application can choose whether to keep the status bar and the toolbar, if reserved the page layout is as follows:

The position and shape of the status bar and the toolbar in the diagram are unchanged, except that the icon and text are reversed.

Let's take a look at the other features of IE:

Multi-Window

WP7 's multiple Windows don't have any new ideas, and the pages are even simpler to a bit rough:

Add Bookmark:

Add Bookmark page visual style and WP7 are unified, the page layout is very traditional.

Bookmarks and history page:


Bookmarks and history lists behave the same way yet they do not belong to the same content, so the Pivot control page type is used instead of the famous Panorama creator.
Pivot control can be understood as the iphone and Android tab in the WP7 variant, the page is divided into four parts: the status bar (information has been hidden), the title bar (because bookmarks and history does not have a unified name generalization, this page omitted the title), Pivot, page content. The biggest feature of Pivot control is the right and left sliding screen to toggle the page, and it can be rolled around.
On the bookmark page you can long press the bookmark list to eject the long press Menu "edit" "Delete" and the long press out menu follows the Android interaction.

Click the empty button on the history page to eject the confirmation box, under the WP7 system, the confirmation box and the toast are all at the top of the screen. The confirmation box is the following figure left, toast the following figure right, WP7 in the toast and the Android, WP7 toast clicks will go to the corresponding page.

There is a small suggestion for history here, the current History list is too long to look very laborious, you can refer to the index of the contact list in WP7 arranges to index the historical information.

Address List The blue box is the alphabetical index, click to show all the index letters, the following figure:

Click on the letter and the list will be positioned at that location. WP7 's Address Book index is intuitive and efficient, which is a highlight of WP7 system design.

Page Lookup:

Finally, I introduce you to the WP7 IE page lookup function, see the following figure:

Input content If no results will be pop-up prompts, see the following figure, the interface is very fresh, I particularly like the "No results" very elegant tips.

If there's a result, go to the Find results page,

The Find Results page toolbar becomes "prev" Next, although the interface is simple and clear but I have a problem with it: I don't know how to exit from the lookup interface when I use it for the first time. The interface does not have an exit entrance, I am confused, after many attempts I finally found that the hardware "back" can exit.

I am the tail:

WP7 does make me bright, not because of its powerful function, not because of its gorgeous interface, nor because of its high efficiency, but because it returns to natural intuitive interface interaction. WP7 's main screen at first glance looks like rough old age mobile phone, single color block, oversized click area and hint text, but soon I realized its advantage: simple, intuitive, information leakage, easy to click, use without any psychological burden. Windows Mobile has been criticized for being too complicated, and windows Phone has finally gone back to the other extreme, which may be what the mobile side needs most.
However, WP7 just released soon, there are still many need to optimize the place, such as settings, such as the interface elements in the page is too simple to distinguish between what is navigation and what is the content of the control.

Source: http://mux.baidu.com/2011/04/894/

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.