How to design a good Windows 8 application?

Document directory

• 2. Good background/image/Image
• 3. Good Design Interface
• 1. User Interaction Guide
• 2. Page Interaction Design

Windows 8 Application Status

Although Windows 8 has just been listed for more than half a month, but the father of Windows 8, at the same time, Stephen veninovski, who is also the President of Windows and Windows Live, And the next-generation CEO of Microsoft, has left Microsoft (it will be hard to see him and Ballmer and Bay as the leading party in the future ). at the same time, tzov refreshed the screen that geeks had known :(), the design language name of Windows 8 also changes from the initial Metro to Modern and then to Windows 8 Style, finally, Microsoft Design, officially referred to as Microsoft Design in China (this article still uses the old name Metro to represent Microsoft Design Language/Style), but Windows 8 is still moving forward according to the previous Microsoft plan, the number of Windows app stores has rapidly increased from several hundred applications to nearly 15 thousand. Although the growth has slowed down today, it is still strong and is expected to reach November by the end of 20 thousand.

Although the number of outstanding applications has continued to grow, there are still only a few outstanding applications. If you want to ask a Windows 8 user, you can hardly answer any of them. Of course, this is also related to the characteristics of the design language of Windows 8 itself. It seems that simplicity actually requires the designer to carefully crafted it, or it will always be simple to make it, it is still the same as that in the Metro culture of Windows 8 traditional desktop, "the Metro style is not intended for programmers to replace designers." On the contrary, it is more challenging for designers.

Although it is called the "Windows 8 Application", it is very different from the iOS, Andriod, and similar Windows Phone applications, in terms of interface design, it is more inclined to be in the graphic design field where web pages and media platforms are located. In terms of interaction design, it is also more inclined to relatively large screen operation interactions. This must be recognized during the design process. How to design a good Windows 8 application?

We all know that an application can be called a good application only when it is adapted to the style of the platform where the application is located, because only in this way can users maintain a good user experience. How can we design a good Windows 8 application with a brand new starting interface, brand new user experience interface, and brand new application layout?

1. Good dynamic Start Screen

The Start Screen is the beginning of a user's understanding of an application. If there is a good start screen, you can leave a good impression on the user and it is also a must for a good Windows 8 application.

The Start Screen subdivision can be divided into Start Screen, login, and loading screen. For the startup screen, Microsoft's official regulations are quite dead, so you can see almost all of them are monochrome foreground logos, so unless your LOGO is very attractive, it can only be said to be quite satisfactory, after all, you cannot rely on a rotating chrysanthemum to impress users. Therefore, it is best to shorten the limited startup screen time, and focus more on the subsequent login and loading interfaces. In this regard, QQ, Cookbook, and Netease cloud reading are better.

Among them, the login interface of QQ for Windows 8 is similar to the latest 2013 desktop version. The background is a Clean Sky, and yunyun is also floating dynamically. While Cookbook and Netease cloud reading are dynamic loading and redirection, all of which are based on dynamic effects, and animation effects are the most common in Windows 8. They are the main means to create a dynamic Metro. Therefore, if you want to design a good Windows 8 Application and create a dynamic startup screen that is smooth and soothing, you can add extra points.

2. Good background/image/Image

In an application, a background image may be the whole process of using the application (except for posting), and its importance exceeds that of the Start image. In graphic design, a harmonious and effective Graph Base relationship can make the entire diagram active, thus enhancing the visual impact and appeal. This is also true in the design of Windows 8 applications. selecting a suitable overall background image will not only attract the user's attention, but also encourage them to stay and explore other sections and serve the page layout. Selecting an unspecified background image not only makes the interface eye-catching, but also interferes with the user's information. See the following White House application.

There is a reason for scoring only one star.

Let's take a look at a better background. Love Windows

In addition, you can refer to the graphic design for the selection of background images. For example, you can use a gradient background to increase the freshness of the application. You can also use illustrations and graffiti to increase the modernity and activeness; use a circular image to enhance the pop style, so that the style is closer to the overall style of Windows 8. For most gray background applications, adding some irregular patterns to the background can eliminate the negative effects of slightly rustic.

3. Good Design Interface

The page consists of the main interface (central page), content interface (partial page), and details page. So what is a good design interface?

1. Rigorous Layout

In graphic design, there is an invisible Graphic Guide, which is a grid system. A grid can help you visually group block information sets, while a designer uses a grid to organize information content to ensure its clarity. To a certain extent, it can be said that grid layout affects the final appearance, psychological feelings, and availability of a work.

In Windows 8, the main feature of Metro applications is content normalization. Therefore, for applications that occupy the absolute mainstream of the Windows app store, if an application has a rigorous grid layout, it can be said that this application will not be too bad, even if it is stacked by blocks. In Windows 8 application design, the grid will still be the basis of the structure. It guides the layout of elements and organizes text, graphics, and charts into the skeleton of the design. It ensures that the information in an application has basic clarity and is not messy.

Strange layout: the old and new la s

Official well-regulated typographical: I can't say how good it is, but it's not a bad idea.

The initial grid layout is a neat square block or rectangular frame, as officially recommended by Microsoft. In addition, you can use the grid to create hotspot areas, use the ratio difference to add a dynamic state, and establish a hierarchical relationship. For details, see the next one.

2. Excellent Layout

As mentioned in the previous article, Microsoft's "demonstration function" from Windows Phone to Windows 8 has caused many well-regulated "block applications" and even quickly became a template. Now, I believe many people are still impressed with the main Metro interface by building blocks or rectangular boxes.

The design under the Metro specification looks like dancing in a chain, so many designs are framed by Metro blocks. Windows 8 systems are becoming more and more like a "bean curd block" system. Similar application blocks are often reminiscent of the newspaper's recruitment layout.

In this way, if you want to design an excellent Layout, you need to work hard on the grid design. If you do well in this aspect, you still need to do well in the background mentioned above. Love Windows. In order to compare the results, let's take a look at the popular recommended applications in the Microsoft Windows App Store, as well as the Win8 application of the same category.

As you can see, Love Windows wins Win8 with diagonal/Angular mesh. This 45-degree angular mesh not only has a basic sense of stability and a sense of body, you can also direct the user's line of sight to the right. It can be said that it represents the characteristics of Metro and the best instance that can break through Metro blocks.

3. Excellent Layout Design

Different from the overall layout, layout design refers to the arrangement of image, text, and other design elements in space. It can be seen as the refinement of content in local layout. Good layout design should be able to use color, interval, positioning and other design methods to create a visual focus to attract the reader's attention and maintain it. As a whole, there should be as few visual focuses as possible, so that users can stay focused and stay fresh.

Although it is a coincidence with official Mail, Nextgen Reader still does not lose an excellent Layout Design Application

For example, if blocks are stacked, you can say that there is no visual focus on the screen, or that each block on the screen is the visual focus, and then the block itself is more flooded, for a variety of reasons, such as white spaces and the default Chinese font,, etc., the entire interface makes people feel overwhelmed, and there is no sense of association between information. Therefore, we should pay attention to improving the layout design in three aspects: reasonable white space, proper font selection, and reasonable color.

Reasonable white space

As we all know, for all graphic design, the basic principle of layout design is to leave enough space and space to make reading and understanding easier. Therefore, it is the basic principle to increase breathing by intentionally retaining white space and keeping information easy to read. How to Create a white space also shows the strength of the designer.

If the text cannot be too close, if the title or text really needs to span across the entire width, leave space for the text on both sides of the blank column, or choose a larger Character spacing. (In addition, the title can be simplified as much as possible) in addition to reasonable handling of column width, Character spacing, line spacing, column width, broken words (hyphens), punctuation, alignment, and so on. (Take the column width as an example: if the column width is too narrow, the content will become intermittent and the user cannot obtain a large amount of complete information during browsing. When the column width is too wide, it is difficult for the eyes to locate the starting point of a new line of text. Both cases lead to visual fatigue and affect the reading experience .)

Proper font

As mentioned above, in Windows 8, the system selects the font by default, which belongs to the non-lined font and the ing in the font design, therefore, it takes into account the two main disadvantages of Windows 8 applications that are not suitable for long-time reading and full-featured fonts. The former causes visual fatigue for users, while the latter increases the gap between content, increases the space flooding, and increases the difficulty of interface breathing. Therefore, it is a good choice to reselect a finer and more open font out of.

Reasonable color

During the design, in addition to the need to pay attention to the white and the word body, there are also pay attention to the reasonable color, such as through the light and bright simple color to reduce the single tone of the pressure, Aesthetic Fatigue and visual fatigue. In addition, avoid matching colors that may cause visual vibration and color distortion, such as matching complementary colors or colors with similar brightness.

In addition, for financial, financial, weather, and other applications that focus on displaying data and information, more information-based design is required, such as pie chart, column chart, limit chart, line chart, scatter chart, and Time Sequence Chart to convert complex data into two-dimensional visual presentation, so that people can clearly understand the information and even the trends behind it in the shortest time.

The above are all interface designs. Pay attention to the following points in interaction design:

1. User Interaction Guide

Previously we introduced some new concepts to the computer in the new Windows 8 UI topic, for example, you need to re-learn many interactive operations such as search, setting, and right-click Options integrated in the Charm menu. However, most users do not know this! I believe that there will not be too many people who will be able to complete the Windows 8 topic or learn a little more about Windows from other places. Therefore, in terms of interaction, a simple guide for users can also be added in the early stage.

Simple tutorial for initial use

Simple Guide for users on Weibo and Renren

Guide user interaction on the Interface

Top bar of the Application of fanke and Renren

If you strictly follow Microsoft's official interaction specifications, in Windows applications, the main interface should not have any command button or navigation button (should be placed in the navigation bar at the top and in the application bar below), because for Windows 8, in-app search, settings, and sharing can be completed directly in the Charm menu. However, some drop-down menu buttons that direct the user's right-click are available now. For example, renrenren can prevent the initial user from being completely overwhelmed to some extent. While fanke has been placed in the middle, which affects user shutdown operations to a certain extent.

2. Page Interaction Design 1. Fewer page level settings

On Windows 8, where the navigation is weak, the information layers tend to be flat. In the page interaction design, the page layers should be reduced to display as much information as possible at one page level, reduce the time for users to make choices and decisions. As we mentioned earlier in the Hick's Law/Sike Law, "Each menu has five items compared to two menus, you can select 10 items from one menu more quickly."

2. Pay attention to horizontal scrolling

This is crucial if the most application scenario you have designed is for tablet users such as Surface. Compared with iOS devices that perform vertical scrolling to the extreme, Touch devices such as the Surface tablet for Win8 are characterized by horizontal scrolling. However, there are still many applications in which horizontal and vertical scrolling exist on one page at the same time. This interactive mode of horizontal and vertical scrolling will cause great inconvenience to users. The following are official standards.

• You can only slide in one direction on any page:
• The Hub view should slide horizontally. Horizontal and vertical sliding is not allowed at the same time.
• The pasted view must slide along the vertical direction

"Unless there is a better choice, it will follow the standard." Therefore, when designing a Windows 8 Application for the Surface tablet, be sure to use the background design (implied) the user is guided to slide between the left and right, rather than subconsciously sliding up and down to avoid errors. As in Love Windows, readers are guided to adjust the F-reading mode of their inertia through angular emission content and diagonal lines.

3. Page Switching Effect

Similar to the top dynamic Start Screen, if you can make the page switching effect better, you can also add points.

Finally, this article focuses on the design of the horizontal full screen view. We also need to pay attention to the design of the portrait screen, secondary screen view and filling view (pasting mode), and semantic scaling page. "Good design will not be fully accurate from the design guidelines". To design a good Windows 8 Application Designer, they must be able to fully understand the characteristics of Metro while jumping out of the official specifications. In this regard, you may wish to return to Metro's design source-the graphic design field to find design inspiration.

Link: http://www.geekpark.net/read/view/166706