Win8 Design Features and Tencent Weibo first edition MS design ideas share

Author: dengxuecui (Cui school board) miaotong (Tong Miao)

October, a harvest season, Microsoft's next-generation operating system window8 quietly to the same time, our Weibo client team, also catch the first wave win8 application of the last train, designed and launched Tencent Weibo MS version . This article will be combined with Tencent microblogging MS version of the design process and understanding of the characteristics of win8 system, talk about win8 operation platform design.

The article is long, please select the valuable part to read, maybe you dare to read it ...

This article index:

1. Windows8 - Refactoring

2. Win8 system features

3. Win8 interactive features

4. Win8 visual features - Metro evolution

5. Tencent microblogging MS first edition of the design ideas

6. Win8 platform application design recommendations

First, Windows8 - Refactoring

Keywords: post-PC era

The first paragraph of the opening "Windows 8 guide" states: "More than two-thirds of PCs today are mobile devices, such as laptops, netbooks, and tablets." Almost every PC has the ability to connect wirelessly. " Therefore, win8 design more consideration of the mobile device and touch experience, more attention is the user and application relationship, not the operating system itself. While retaining most of the basic features of windows7, but win8 system designed to create a better touch experience, the establishment of a new good ecosystem.

If Apple completed the post-pc era of basic innovation, then the emergence of win8 means the full migration of traditional PC. To ipad, iphone represented by the strong impact of wireless touch products, Microsoft realized that PC battlefield in fact has been completely transferred, and win8 operating system is Microsoft in this case a re-vision.

Second, Win8 system features

Win8 system has a lot of different general operating experience, here I extract some of the features that better reflect their design concepts are introduced, more exhaustive features will not be here.

Win as One

In the win8 system, the program exists in the form of applications, it has the application market, the user can purchase applications and services, people can not help but think of it more like IOS, Android and other wireless areas, but the difference is that the win8 attempt Through the system platform, all the applications installed on the platform are organically connected, emphasizing the collaboration and sharing among applications, giving users a complete and ecological experience, and letting every application in this ecosystem be " Win as One ".

Charms (super buttons): higher than any application system integration toolbar

At any time, users can exhale Charms by swiping to the left at the right edge of the screen or by hovering to the right of the screen. Charms is a hub-like system toolbar, through which users can quickly search, share, set up and other operations.

2. Search: Integrated search at the system level for a more comprehensive and efficient search and information retrieval experience

Search can be no longer limited to the scope of procedures and documents, almost throughout the operating system and the Internet throughout the environment. Users can not only query keywords in one application, but also quickly switch to other applications, or in several applications directly switch back and forth search results. Simplifies user operation, without having to re-enter the keywords, you can get different aspects of the search results directly in the new application.

3. Sharing: System-level integration and sharing, making the application more open, there is no limit to the delivery of information and content

Users can at any time, any content directly through the sharing, sharing to support the content sharing applications, so that information is open and accessible mobility and proliferation.

4. Relief view: a screen dual-use, coexistence of the application of the road

5. Dynamic reminder: everywhere, so that more timely and accurate information processing

Win8 dynamic reminder mechanism mainly through two ways to achieve: dynamic tile and system toast. In the start interface, you can set a dynamic tile to display the latest updates in each application in real time. At any time, your application can use real-time toast to remind users of important information or application operations. Toast can be Users take the initiative to slip away, toast can directly display the contents of the new message.

Avant-garde touch experience

More recently, when asked by business users about the features of the Windows 8 operating system, Steve Ballmer at Microsoft's helm gave a very concise answer: touch, touch, touch!

Win8 attaches great importance to touch experience, excluding the basic touch operation does not say that many of its key system operations are relying on more advanced gesture operation, although the need for a certain cost of learning, but because the user is not allowed to learn the operation, but also after the habit Indeed, the overall experience will bring more fluid and quick feeling, which I still prefer. In addition, through such advanced gesture settings, win8 makes the user's operation can be completely controlled only by touching the screen, ipad also have similar gestures, but that is only as ancillary operations exists, relatively speaking, win8 implement a more thorough, at the same time Also more fluid and convenient.

Semantic zooming

Win8 horizontal flow interface can be extended indefinitely, combined with its content-based design thinking, in many pages users have to face long long sliding navigation pressure, such as win8 start (start) interface, in such an interface, the system increases One step advanced gesture operation, the user can pinch the two fingers, the current interface reduced to pure navigation view, and rapid navigation jump. This view and the normal view is actually two interfaces, application designers can design their own style and view of the view.

2. Application switching

Win8 support true multi-process management, but also immersive experience, so how to switch applications, but also a problem. Win8 solution is that users can slide to the right through the left edge, you can directly switch to the previous application, the entire over-smooth, fast.

3. Choose the operation

Win8 selection operation using the pull down to select the advanced gestures, select the operation can be carried out directly in the default interface, do not need more than one edit mode, do not need to set a multi-select box, more direct, but also need to learn the cost.

Close the program

Win8 did not return the physical buttons to promote the design concept of immersive experience, but also resulted in each application are not closed or exit the button, then how to close an application? Only need to finger down from the top of the screen to the bottom half of the screen, with the smooth animation, the application off.

5 multi-process management

Users can slide to the right of the left side of the screen a short distance and then slide back to exhale the current process management.

6. Call out the toolbar

Win8 application most of the operating tools, are hidden in the toolbar, the fixed navigation is often on the hidden navigation bar, the user can slide down the edge of the screen or the lower edge of the slide, exhale toolbar and navigation bar .

The balance of traditional mouse and keyboard considerations

Win8 system is not only the main touch experience metro interface, but also retained the Windows operating system before the window, on the one hand to take care of the habits of windows users, but also because of the short period of time in the future, win8 is very Large part of the user will still use the mouse button as the main method of use. In addition, all the touch operations in the metro interface, there is a corresponding mouse button to achieve the way.

Third, Win8 interactive features

Win8 metro interface follows the WP7 visual style, and in the interaction also inherits its simple, fast, content-based and so on, such as dynamic tiles for dynamic tiles, horizontal list for panoramic view, global share and Search for HUBS ... Win8 Many interactive forms are based on the evolution and development of WP7. They are mentally interoperable, where even shameless chain about their last year, an article - "WP7 interactive features of APP design and exploration," interested can refer to read oh.

In fact, most of the characteristics of win8 specific interactive form in the above system features have done a lot of introduction, here mainly for some interactive design thinking summary, combined with examples to illustrate.

1. "Content not Chrome" - content is better than content, focusing on information rather than interface

This is the core idea of ​​win8 design, Chrome in the design, the idea is to allow users to pay more attention to the content of the web, while ignoring the browser itself, win8 take it to some, and carried forward, content first, followed by interface. We can see some of the interaction design directions mentioned below are guided by this core idea.

To give an example of a cell phone to describe this is more appropriate. A long time before the iPhone, the design of mobile phones is the most important hardware design, bizarre, when people buy a mobile phone also attaches great importance to the appearance of beauty and ugliness, but until now, each phone has only one big screen, people More emphasis is on the inside of the screen, the phone's appearance is no longer so relevant, when one day, the phone gradually invisible, I think we will not be so weird. In fact, the design of the interface is the truth, all the forms are in order to better present the content and let the user happy to accept the existence. Win8 this as a guideline for its design.

2. Mobile navigation, clear content flow, continue or look back

Content-driven interactive interface, win8 more hope that through the flow of content to drive or attract the user's use, hoping to guide the user through the subconscious. So its navigation is with the content, the user perceived next step is what kind of content, rather than how to go the next step.

3. Immersive browsing and operating experience, hidden tools and navigation operations

Win8's design promotes an immersive experience for the user, maximizing the content to the user on a limited screen, and hiding fixed navigation and tools in the upper and lower edge of the toolbar and navigation bar. Windows is no longer a window, but a world.

4. Flat screen browsing landscape brought

Win8 page is the most prominent feature of the smooth horizontal screen browsing, content-based navigation architecture, so win8 navigation is not important, but directly to other platforms may need two pages of the content presented directly. In addition, the good scalability of horizontal screen space also makes the overall system architecture flatter and usable.

5. Horizontal screen operation experience is obviously better than vertical screen operation in most cases

Win8 device ratio, the majority of equipment usage scenarios and horizontal sliding system operation and other reasons, resulting in most of the win8 system horizontal screen operation experience due to vertical screen operation.

risk

This is not Microsoft's soft paper, so win8 still has a lot of risks and problems:

User's subconscious is most easily lost

Win8 advocate content to guide the user's browsing, hoping to guide the user through the user's subconscious. But in fact, once the presentation of the content is not well-handled, users can easily lose themselves in front of stereotyped content.

l high cost of learning

The use of a variety of advanced gestures, users need high learning costs, high operating threshold, while admire their courage, but also had to worry about.

l content will be tired

The vitality of Win8 lies in the content, the good content can be awesomely presented on the win8 platform, but over-neglecting the form can also cause its content requirements to be more harsh, because it's hard to express it differently on the win8 platform Ways to make up for some lack of content itself. External demand for high-quality content may also lead to later weakness and the user's aesthetic fatigue.

Touch and mouse and keyboard confusion

Win8 is very aggressive touch experience, but have to consider most of the user's equipment threshold and habits, direct integration of the Modern UI interface and the Windows interface together, causing no small disturbance. In the design of each touch experience at the same time, but also consider the operation of the mouse and keyboard users, but also to the design itself has brought a lot of difficulties.

Fourth, the visual characteristics of Win8 -Metro evolution

Metro style from the WP7 triggered a saliva war of words. Some people say that this is Microsoft's last struggle, some people say that this is the future style can not be avoided. Looks like WP7 and Win8 seems to be the difference between iPhone and iPad, but in fact the Win8 tablet represents a larger extent the so-called Metro style, oh, it should be called the Modern UI or Windows 8 style.

Inspiration source:

• Modern Design - Bauhaus (Concise, Practical, Reduced Elements to Highlight Essence)

• Internationalism graphic design style - Swiss graphic design style (clear and intense grid design, emphasizing layout design, with text size and level to control the rhythm of the page)

• Dynamic Design - Movie Art (a world-class animation that inspires user emotions)

This design concept clearly laid out the theme of "content is higher than the form," simple and borderless, leaving behind the complex elements without texture, the perfect interpretation of Metro style design essence.

Classic style of evolution

Although Microsoft still offers a lot of "design suggestions" in the design of Win8, Microsoft gradually released designers' hands and feet and made a lot of improvements in the classic Metro style, all in order to better convey and display information.

• Lightweight - Squares, patches, and right angles still look like Win8's main visual style, but in more and more applications we see graded, projected, translucent and light-weight mimics.

• More Resolution Dimensions - Unlike the WP7's single size, Win8 has a minimum resolution of 10 "(1024 × 768) and a recommended size of 11" (1366 × 768) and above. Microsoft provides a dynamic layout that can reduce, enlarge, or rearrange control elements to accommodate the available visual space for each device.

• Excellent Grid System - At a recommended resolution of 1366 × 768, the sub-unit of the grid is 5px and the 1 unit is 20px. All intervals and zoning are based on this. For different resolution, the grid system is also divided into three basic sizes: 1 times, 1.4 times, 1.8 times. This also requires three sizes when providing bitmap resources.

• Dynamic Tile - Win8's Dynamic Tile offers two sizes and a variety of layouts, allowing designers to choose the most efficient way for different pushes. You can show the latest upload photos, the music you are listening to, your new references, new mail. The user can read the prompt information directly in the tile, but also can select, delete, and so on. It constantly attracts users back to your immersive experience as a door to attract and motivate users.

• Directional design, from physical back to the interface - WP7 physical back button is a continuous path, Win8 buttons are all moved to the interface. In addition to the back button, there are a number of brilliant ways to choose between the semantic zooming, superb buttons, switching programs, and closing the program. Of course, in the design, the use of visual elements to make it more effective and clear hierarchical conversion relationship, reducing the risk of user loss.

• Immersive Experience - The status bar and toolbar are still kept in WP7, and everything is hidden in Win8. Win8 style users want to be able to immerse the content itself, rather than allowing users to consider the role of each button, allowing users to use their own subconscious behavior to operate.

Fifth, Tencent microblogging MS first edition of the design ideas

All applications are to solve the user's problems, all of the design is to solve the problem of applications and users. This Tencent Weibo MS first edition of the design to share, we decided to present the problem in the form, to solve these problems, we have also completed the design of the application.

? Tencent microblogging MS is the core content of what is presented

Every win8 application design will be asked at the beginning of such a question: "This app is the best app in its category at____?". What is our application good at? What can our users do with it? What kind of function and content should we provide? After thinking about this core, go on to extend the way you design interaction or visual presentation.

Undoubtedly, all we have to do is to present the Weibo information to users in a complete and rapid manner, and to provide users with the interactivity and the core experience of expanding the Weibo relationship chain.

Clearly the relationship between user needs and product content, the problems we face has become the product design itself and the platform of the fit, as well as user-friendly and product details polished.

Tangled homepage design: the relationship between the mobile navigation and endless microblogging homepage

Weibo is a convergence of information, the core part is the user's Timeline, where the number of messages is endless, and the user's operation of obtaining content is also continuous. In the win8 platform, the most traditional form of information organization than the Timeline to render part of the contents of the way as part of the home page rendering, to get more, you need to go to the next level of detail page (below), so The advantage is that we can show more content on the homepage to attract users. However, we found that our core content has not been well displayed.

So, we gave up the original idea, tried the second structure. In order to show the core content, we decided to give up the square, channel and other content of the interference, directly removed. In order to facilitate users to handle their personal information as soon as possible, we retain the user's personal center in the initial view, after which all the microblogging in order of relative arrangement of the rules, with a rectangle carrying each microblogging Information (below).

The advantage of this is that we can present the user's timeline microblogging all without worrying about being interrupted. However, due to the relative rule ordering of rectangles, we can not guarantee that each microblog is completely rendered. Users still need to click into each microblog to browse his content, increasing the user's operating pressure. In addition, in the information flow of horizontal screen browsing, the up-down arrangement of the micro-blogging information also causes troubles to the user's one-way browsing.

As a result, we improved and implemented the third option. Timeline design so that the endless microblogging home page looks more lively, but so taken for granted. Users can browse each page on the home page microblogging news, one-way content browsing makes the user's behavior more smoothly and naturally. Even, we can confidently remove the home page LOGO, when we return to nature to think about the essence of the content, you will find that you want to present to the user will no longer be some form, but a certain temperament.

? Win8 applications in the vast how to find their own unique qualities

Let's take a look at some of the apps in the store. The Win8 style is a pioneer in other platform styles, but with overwhelming boxes and right angles, it's hard for users to remember the app that looks similar. So how do we reflect our own unique temperament in visual design?

1. Home page evolution

Early design, we conservatively tried the classic Win8 style. We found our gaze was taken away by those gorgeous large patches of color. At the same time, this layout, the text reading microblogging is not a good one

the way. In the second and third drafts, we removed the gradient, adjusted the background color, and weaved the microblog to a regular, uniform, non-graded square. Although the content is obvious, but the microblogging read the integrity and the advantages of the picture is still not fully reflected ...

In psychology, the short-term human memory of the picture will be faster than the text, when reading a picture will make people more quickly locate the last reading position, and if it is a simple text statement is difficult to do At this point. So in the final timeline program, we fully consider Win8's large-size screen, weibo and text presentation for the presentation of a special strategy: Each chronological order microblogging block is a fixed width, Pictures are displayed with a fixed width and no border. The height of the microblogging block is automatically adapted according to the screen, to ensure that all the text is displayed, and the height of the picture is tailored according to the height of the screen and the height of the text. At the same time also set the minimum height, to avoid the micro-Bo block appears too high level gap.

Personal center typesetting also abandon the general color, large size avatars, page layout of the list, with highlighted numbers and strong contrast color tips to efficiently display information.

Blue, continuous DNA

In the design we continue the classic blue Tengxun microblogging, but for the overall idea we will reduce the brightness of blue, with a clear effect to create a comfortable and soft atmosphere, reducing the interference of environmental color reading.

3 details, simple and simple step difference

Minimalist style is the most fear is not designed to look like, in order to avoid this phenomenon, we use a simple style with a unique typesetting, both visual and interactive increase more elegant details.

l Timeline different - with the timeline throughout; using a circular avatar balance screen; with the timeline rotation refresh animation; Large-size display of the picture strategy.

l search page, profile page - Tab page to reduce the level of jumps; remove unnecessary elements such as the border of the Chrome.

? Make the architecture level processing more flat, to the user less full screen jump

In win8 allows users to get lost in addition to the flow of mobile content, there is too much full-screen jump. Immersive experience should not exist in every page of the application, after a reasonable distinction of information, flatten the architecture to deal with more in line with win8 users.

? Touch and PC choice

Writing is one of the core experiences of Weibo, considering that when users write on the Win8 platform, they are more likely to choose to use the keyboard to input the content of the microblog. When we talk about multiplayer and insert topic functions, we also consider touching Screen input and keyboard input two modes of different operational feedback, draw on the PC-side microblogging write operation experience.

Win8 design, the operation of the mouse and keyboard design is not as a major design factor, but it must be considered. Many times we think about it a bit, users will be a lot easier.

Six, Win8 platform application design recommendations

l Do not over-win win8 design guidelines, everything in the guide is recommended or not recommended, the application of the design should make a comprehensive consideration, balance users, platforms and their own content, and then make a choice.

l Win8 application for the content of Health, please think clearly before designing your application to the user what, and then reasonable arrangements for your content level.

l Win8 navigation is mobile, but also easy to lose, so we should make different forms of content presentation, in order to increase the user's recognition and focus, to reduce the loss.

Win8 toolbar and fixed navigation bar are hidden, but not that the interface should not appear on these, the application of the core operation and the user's most commonly used operation, or recommended appropriate to be presented in the application interface.

Metro UI is not a big box, let those comments go to hell, to maintain the lightweight and content-based premise, the appropriate increase in the interface visual level and other graphics or non-graphical display is conducive to the user identification of content and comfort Read

l In the main meet the touch experience, but also give due consideration to the operation of the mouse button user experience, which can bring you word of mouth.

l try to reduce the level of operation, win8 horizontal browsing has brought a more flat information architecture opportunities, do not squander off.

Immersive experience is not bad, but it does not mean that it is necessary to do a variety of full-screen page jump, reasonable arrangements for the primary and secondary information to make the interaction more lightweight and predictable, the user effort.

l Win8 operating system can generally provide more reliable hardware platform, so please keep your application dynamic and fluid.

l carefully consider the vertical screen operation, you can choose to let go for love.

Seven, summary

The overall feeling Win8 operating system is still very fast, smooth, direct, this is an attempt, Microsoft tried to put people's habits on the PC to move more touch more mobile direction, but there is still a long way to go. However, the design philosophy of win8 still deserves recognition. I also hope that in the near future, when it comes to the simple, straightforward and rapid words, it is not only Bruce Lee who came to think of such an operation that he dared to try system.

(This article from the Tencent MXD Blog, reprint, please indicate the source)