The interactive mode of redesigning applications from iOS to metro–

Last week was fortunate enough to play Metro's tablet. The visual style, is still my course, but really use but do not feel comfortable, especially when the horizontal browsing content list, the line of sight in the x axis and the y axis switch between, quickly feel dizzy, all this seems more ferocious than waterfall flow.

Of course, it's just personal feeling, and I don't want to come to the conclusion that Metro doesn't use it. This translation can be broadly representative of my position, that is, compared to iOS, Windows this set of things do have a lot of original essence in it; I also hope this article will be a small starting point for those who are already familiar with iOS, but who still belong to Metro and Windows. Next, let's go to the text, an article with the official Microsoft case.

iOS is a good platform for people to create a variety of touch-first, interesting and appealing applications. However, with the advent of Windows 8, designers and developers have a new arena for releasing creative energy.

In this case, we will help you redesign the original iOS application design using Metro Style design principles, and you will learn how to convert some of the common interface elements and experience patterns of the ipad into Metro style to create a new Windows 8 application. We will compare the different design styles of the same app on two platforms to help you understand how to seamlessly integrate your application with the Windows 8 and Metro design principles.

What we're going to look at is a photo log app that allows users to view and manage their photos or videos online. The following figure is the Metro version of this app:

This app was originally designed for the ipad, as shown in the following illustration.

From the angle of design and experience mode, the application can be roughly reconstructed into six aspects:

layout and navigation command and Behavior contract (CONTRACT): Search, share, and other touch and gesture screen orientation and view mode message notification

Then we will analyze and contrast the six elements in turn.

layout and navigation focus on content

This photo log application should have the ability to present two aspects of the content, that is to show the user's photos and the latest social developments related to these photos. When creating Metro style apps, our first goal was to remove all of the original ipad apps that were not directly related to the core features and content, such as the top navigation bar, the bottom page indicator, the tab bar, and so on. Don't worry about navigation, we'll talk about how to get users to call app bar when they need it.

ipad version:

A. Navigation bar B. Content c. Page indicator D. tab Bar

Metro version:

B. Presentation of content and logo photo content

The two versions organize the content in month order, but there are differences in how the month behaves. In the ipad version, photos are divided into 12 blocks depending on the month of the upload. In the Metro version, we tend to present more photos and social information in a more direct way, giving users a stronger understanding of the context of the content.

ipad version: Each month's photos are presented as stacks, and users can only see one of them.

Metro version: For the month's content, showing more photos, including the title, the number of comments and other information, users can browse to the first screen more "highlighting" content.

The tree-shaped information structure flat

The information structure and corresponding navigation mechanism in the ipad version is a typical tree model; in the metro version, we want to flatten it, reduce navigation, and make the most of the user's focus as much as possible in the first screen. To achieve this goal, we will remove the tab bar from the ipad and output a portion of the commentary directly to the first screen.

ipad version:

A. Photo View B. Comments View

Metro version:

comments and photo content in the same interface view of the hub style design, so that the most relevant content from the system to see more comments, users can click on the title of the content group, that is, "recent comments" to make navigation more consistent with the "direct manipulation" concept

The idea of "direct manipulation" allows users to interact with content and navigation systems in a more intuitive way. In metro style applications, we need to implement such interactive design ideas as much as possible in the right place. For example, using the Semanticzoom object provided by Windows as a navigation control can make the user's actions more mental and efficient.

ipad version: Click the "Perton" button in the navigation bar, pop-up navigation list, select a year to enter the relevant view interface.

Metro version: Use the double finger kneading gesture on the photo content to see the year and month corresponding to the entire content. This approach allows users to jump quickly in the content of any year and month. And in this view, the month entry uses a different background color, and the lighter represents nothing in the month, which allows the user to understand this information without going into the underlying view. This set of mechanisms does not contain any "entity" navigation elements, and users can navigate through direct interaction with the content.

The

command and behavior puts the control elements associated with the current interface into app bar

When we redesign the context-related behavior and control elements, we should also follow the principle of "content first" and only place the control elements associated with the current interface content in App bar. This approach avoids the user interface being complicated by the plethora of feature icons, which, regardless of the user's current view, can pull the app bar from the bottom or top of the interface to perform control actions related to the current content. All Metro style applications should support this interaction mechanism to help users build a universally applicable behavior expectation and improve usability and experience consistency across applications and platforms.

In addition, you can put the most commonly used commands near the left and right edges, so that the most easily touched by the fingers.

Take "Delete photos" For example, let's take a look at the difference between this operation and the two platforms:

ipad version: Click on the relevant Function button on the right side of the navigation bar, enter edit mode, and then click on the photos, as the object of the deletion and other operations.

Metro version:

A. By default, App bar is hidden, making the entire interface environment more realistic and keeping the user's attention to the content. The user can swipe the app bar from the bottom or top of the interface through a light sweep. B. After you call app bar, users can click on the content objects in the interface, such as photos, and the commands associated with the photos appear in App Bar. That is, what control elements appear here, depending on whether the user has selected a Content object, and which type of content object is selected. Such context-sensitive control elements are usually placed on the left side of app Bar, while commands with a global nature are on the right. Contract: Search, share and other search contracts make the search experience more intensive

In metro applications, we use search contracts instead of the traditional search controls that always stay in a certain position in the interface. Users can continue to use the search function in the side charms bar in any application that supports the search contract, and the search results are naturally presented in a way that is more in line with the nature of the content itself.

First, let's take a look at the application of the internal search photos in the photo log:

ipad version:

only through the search controls in the home navigation bar to perform search user input keywords, search suggestions will be dynamically output, users can choose directly from the

Metro version:

users pull up charms bar to use the search, the default selection in the application list is the current photo log application. When the user starts to enter search keywords, the tray will immediately appear search suggestions. After the user submits the query keyword, you can see the full view of the search results.

Next, let's take a look at the external search for the application's photos in the photo log; This feature does not apply to the ipad version. This example demonstrates how to perform cross application searches in other applications by searching for application selections in the tray. This feature allows users to search for any desired information at any time, any application.

As shown in the figure above, the user is currently in the Tweet@rama application environment, and for some reason the user wants to search for all photos that contain "Barcelona" keywords in the photo application. After the keyword is entered, the user chooses the photo application in the search tray to make it the search result provider, when the photo application is automatically loaded and the relevant search results are displayed. This approach eliminates the need for users to manually switch between the current running application and the search target application.

exchange information with more people through sharing contracts

The integration of social media is a key element in many applications. For ipad apps, designers often have to choose the social media channel they need to support, such as Twitter or Facebook, and then the developers will integrate the services into the application. When the API interface of some of these services changes, the developer must also adjust the code in the application to ensure that it works properly.

In metro style applications, we use a sharing contract. This technical solution simplifies design and development because we do not need to integrate them with each individual application for the social services that users are likely to use. Not only social services, users can also share information to all the applications on the platform that use the sharing contract, while developers need not worry about the interface problems of external services. From the user's point of view, they can complete the sharing operation at Charms Bar, a fixed place.

The following is an example of sharing pictures from photo log applications to other application services:

ipad version: Users need to click on the relevant action button on the right side of the navigation bar and choose "Share to Facebook" from the expanded list. If the application is to support more shared services, developers must add one by one to the application.

Metro version:

users can always find the sharing feature in a fixed place, regardless of which application they are using for all the support-sharing contracts installed in the current device, they will appear in the application list in the search tray, as shown in the socialite, Tweet@rama, Notespace, Paintplay, etc. Users can share multiple types of content, such as links, photos, or store information in the application of some Notepad classes. The services most commonly used by users appear at the top of the application list to enhance operational efficiency.

We can also register the current photo log application through the sharing protocol to the share tray application list, so that users can share the content of the images that are browsed in other applications to the photo log application.

For more information about content sharing between applications, you can query in guidelines and checklist for sharing content.

Use file selector to get files from different places

In a traditional desktop device, a user can view files or paths in a local storage device through the file selector (picker). In a mobile environment, all Metro applications that support the file selector contract can do the same.

The following example shows how users can upload a locally stored photo in the photo log application:

ipad Version: Users can select pictures in a local photo album or some external service.

Metro version:

A. The user clicks the Upload button in app bar and the system opens the file selector interface. The interface and how it is opened will be consistent in any context. B. By clicking the "files" title, the user can view the path to all supported file access. C. Users can select multiple photos to upload in one path, and the thumbnail list at the bottom of the interface will reflect the current selection status.

We can further use Metro to apply unique features that allow different applications to access and use the files that are included with each other, such as using photo log applications in other applications. With this feature, users do not need to first download the picture to local in the photo application, and then upload it to another application; The system will consider all applications that support the file selector contract as a file storage location that can be read anywhere.

As shown above, the user clicks "Browse" in the PC Settings screen to replace the avatar image. Because our photo log application supports the file selector contract, in the next file selection interface, you will see that the application name appears in the list, and the user can select the photos stored in the application as the new avatar.

Touch and gesture at the edge of the interface light sweep, pull out the application of the internal or the system global related toolbars for the current application context of the command and function, is usually placed in the bottom of the interface app bar. Charms Bar is hidden at the right end of the interface and contains several commands for the global nature of the system. The left edge of the interface hides the list of recently used applications. Swipe down from the top of the interface to find the command to fix or close the app.

The following two pictures illustrate the way to call app bar and charms bar:

file Multiple selection

ipad version:

The user first has to enter a specific editing mode to perform the selection and related editing operations, because "click" is usually used to load or enter a particular purpose. To exit edit mode when the selected and edited operation ends.

Metro version:

users do not have to enter a specific editing mode, as long as a short sweep down the Content object, you can select the object, and app bar will automatically appear, display with the selected objects related to the Operation function. This gesture is reversible. This set of interactive patterns gives Windows 8 an effective boost in the efficiency of object selection. Double finger opening and kneading

Both in iOS and Windows, these gestures are used most of the time to enlarge or reduce the size of the Content object. But for Metro applications, they can also use semantic zoom to navigate between content levels. Users can knead a Content object to enter the related content group. However, when a user is browsing a single photo in Full-screen mode, kneading and opening gestures are used to resize the picture.

screen orientation and view mode for different screen orientation and equipment size, improve the adaptability of the layout

In ipad applications, designers often need to consider two ways of screen orientation and the corresponding interface design. Windows 8 can run on a variety of devices, including tablets and desktops. Therefore, we have to take into account the larger display space, so that users can see more content in the large size devices. Grid layout can make the design better adapt to different screen orientation and different types of display devices, such as more vertical space for the device to display more of the month featured pictures.

ipad version: In different directional mode, the content is exactly the same, but the output layout is adjusted.

Metro version: Vertical screen mode and large size equipment can use more space to display more content, at the same time, the content output of the vicinity of the feature content will be adjusted according to the display equipment size. In addition, we can make multiple versions of the images in the content so that they are more appropriate for the different display environment response output.

use snapshot view to attract users

In Win8, a user can integrate a snapshot into another application, and multitask operations are implemented. Snapshot view can effectively increase the use time of the application, and attract users to maintain a longer period of use. By adjusting the divider bar between the two, users can easily switch between the current main application and the snapshot application. So the designer needs to consider that the main application and the snapshot application can still keep the contents of the context readable when the container size changes.

The

photo log applies the same content that is printed in the snapshot view as in the full pattern, but the layout style of the view is adjusted. In the snapshot view, users can navigate through more content by sliding up and down. Compared with the complete mode in the left and right sliding browsing mode, in such a small space, up and down sliding more reasonable, easy to operate. Message notification use tile to render dynamic information update

IOS 5 introduces the notification center so that all notification information can be quickly and instantly rendered at the top of the interface, allowing users to expand the message to the full Notification Center panel and view all messages. In addition, in iOS, the application of the image on the top side of the digital ID also allows users to understand the application of the content update quantity.

The tiles in Windows 8 integrate the Notification center and digital ID of the two aspects of the prompts, users can directly in the tile read the message, you can click into the application. In addition, the unified output format differs from the IOS Notification Center, and metro-style application tiles allow designers to choose different styles from a large number of templates.

You can also use Toast notifications to prompt users. This kind of instant information appears on the top right of the screen and can interfere with and disrupt the user's task in the current application. Usually, when an application is run for the first time, we can let the user choose whether to accept this hint. Toast is similar to the notice that appears at the top of the screen in iOS, but in Windows 8, a designer can choose from a set of toast templates to render it more relevant to the current application.

The following illustration shows the latest comments prompted by the photo log application:

Source Address: http://beforweb.com/node/92