Sina Micro Bo V6 version of the design Beginner's mind

a few words of emotion

After more than six months of sharpening, Micro Bo V6.0 (hereinafter referred to as V6) in October, the official test. As a massive user of mature products, every change is full of challenges. And as a micro-Bo product design team, not only to make the world a better place to forget beginner's mind, more than a customer service for the product is responsible for the party always.

　　A set of services

Thin (WU) Heart (Liao) users should have found that micro-blog slogan quietly changed, anytime, anywhere "found" new, here Why is "discovery"? We understand that the user's demand for microblogs has spread, from broadcast-type information acquisition to differentiated interest content acquisition. (please speak Mandarin) means that everyone is tired of the homogeneity of the flow of content and large v forwarded content, began to pay more attention to or explore their own interest in content. So Weibo has been adjusting the access to information consumption, making it easier for users to find information. Therefore, the design should also be around providing users with personalized information access to the service launched ...

　　So, here's the problem.

In the V5 version of the micro-blogging explosion, a lot of red tape and exposure to the product left too many experience wounds. So V6 revision noise reduction is also a major focus. Intended to create a more distinct and relatively pure information/functional zoning.

Personal homepage of the head area of simplification, after several PK we put some personal information (fan count, certification, data) moved to the bottom of the module, highlighting the cover map with the owner of the contact, but also more in line with the trend of mobile design to achieve both ends of the style of unification.

The application module at the bottom of the left guide, the entrance of the jump diversion and the uncontrollable icon style affect the purity of the Zoo as the navigation and feed consumption navigation tool of the station. Kill ~

Homepage and personal homepage navigation various products import a wide range, weakening the tool class entrance. Hot, application products to kill Redo (into the new product "discovery"), even the Gaofu member entrance is cruel to kill (member products in the bathroom for a long time) personal homepage navigation is also simplified to the extreme, in addition to the main function of the entrance to kill all ~

Around noise reduction, there are many details of the optimization. In fact, every "kill" means a huge cost and pressure, there are users from the custom, there are from the partners, the entrance has changed, the function of the deletion, the data will inevitably be affected. But for users to get content to reduce interference is the most imminent.

　　What? Another card ...?

Since the opening of the upgrade, V6 bring you the most intuitive change should be card (cards) module. Of course, there are a lot of users spit "fragmented page", "incoherent", "brush microblogging efficiency is poor" ...

Why did we choose the card style? In fact, this is a big game of chess ... (PA!) Well, here's a little talk (face ...).

　　A concept: The water cooler is dwarfed

Micro Bo is mainly composed of information content, all kinds of content like water as different forms. V5 before is a head of the present in front of the user, the beginning of any content can arouse the user's attention, the user only from the top to the bottom of the brush information list, so at that time always to browse Weibo said as "Brush Weibo." Later, with the information explosion, the mass of information users really want the content is not much, often to drink the support of the intestinal belly may not be able to absorb their lack of nutrition. If there is a container can be installed in the pool of water to classify the present, whether it can solve the problem of the hope pool is deterred?

This "container" of the election corner, eventually we also unavoidably vulgar choice of the industry's popular fried chicken--card. Choose the container, and the next step is how to flood the water. How to improve the product experience, in line with the development direction of micro-blog design.

　　Show clearly, can't be silly to know

Card design so that each group of content can be behaved, all kinds of content can be quickly identified. For example, micro blog in the core of the feed area (micro-blog list) in the image of micro-blog, multi-map micro-blog, content recommendations (relationship recommendations, music recommendations, etc.), text microblogging ... The original uneven shape of the content are different from the same card container installed in an orderly display. After the open upgrade many users the most intuitive feeling evaluation is two words "refreshing", but card spacing between the design also lets many use the color background image template users are not accustomed to. Well, the skin-changing template function is the pit we dug ourselves for many years, and we will try our best to fill it, you know why there is a design of the background mask of the home page (a pitiful: custom skin-changing function is equivalent to IE6 in the UI design field)

Today, there is no shortage of content of micro-blog, from mass content output to vertical content production is imperative. Card style compared to traditional list does make users more focused on content, no longer up to the next one of the "brush" (even if you have developed such a habit of browsing the microblogging). Instead, it provides convenience and encourages users to proactively find content that interests them.

Small mention, V6 Personal homepage of the flow of information on the right added to the timeline function, can be based on the year free access to their microblog content, convenient for old users to find their own sentimental memories yo ...

　　Service to a unified design across the end. Look, it's all the same.

PC-side users, the use of the cross-end (while using the mobile end) of the user volume accounted for 59%, the terminal aspect, the phone's size is getting bigger, pad size is getting smaller, desktop resolution more and more large, touch screen popularization, technical breakthrough ... The boundaries between web design and mobile design are becoming blurred. So we at the beginning of the revision of the service at the end of the unified experience as a design purpose. As we all know, the mobile end of the display size is limited, in a limited space card can help users distinguish between the regional level, to avoid finger misoperation. and card application in Weibo PC side is not much of a disadvantage (custom background image back Boingo hindering ...), whether from style or compatibility is more suitable for multi-terminal rendering.

As a result, V6 each function module in card form across the end of the corresponding, consistent style brings experience consistent, reduce user cognitive costs. Where, all the same.

Of course, the unification does not mean that the presentation should be absolutely unified, such as the PC side has a larger size, to ensure that the core operation is consistent with the premise of the PC side can also provide more detailed content. At the same time, we think that card should be smart and clever, to achieve the unity of the end, the focus is not "unified" and in the "cross-end", do a cross end is to do fit. This Weibo also has an obscure place is: The whole station is based on the response design (response design is what?) Ask Niang Ah, the word write more charge flow AH), simply said that the Web page at different resolutions can present different visual experience, in the industry has been a long time, but in the mainstream Internet products at home and abroad, Only Taobao did a part (home only) um ... It feels like we're hanging out. But obviously we did not perfect enough (the product manager responsible for this piece to pull out to play small JJ), has not finished the big screen display and more user scene automatic adaptation, this piece we will continue to work hard (not because the boss is urging the line ...) A friend with pad on hand can try the browser to open Weibo, and the card will respond to different display widths.

　　A content, multi-terminal presentation. Access side so easy

Weibo has many content producers (media, large v) and access parties (such as music, movies), they provide content may be based on the PC side may be based on the mobile end may also be based on the third party itself, when the content to be presented in the multiplatform multi-terminal micro-blog, the rendering effect often become uncontrollable ... Now in V6, the access party only needs to provide a content, multiple platforms can simultaneously consume.

In the design system of micro-bo, a content-multi-terminal presentation tends to be unified, the effect is controllable, the cost of the access party is reduced and the internal development and design cost is reduced.

Support flexible layout, access side can be combined freely, personalized content can also be presented with card.

　　Wdesign

Finally talk about branding design, starting from the V5 version, Micro Bo began to deliberately form a set of their own design style, V6 version continues to keep pace with the use of a larger size of the control, added a moderate dynamic interactive feedback, minus the extra decorative elements to increase the overall layout more refreshing. Optimized brand color (micro-bo Orange) Also at both ends of the unified continuity, icon style and semantics are also unified. We also defined the circle of the user head, not only in order to lead in the design trend, with the circle do "Avatar" and square Do "picture" to distinguish between "people" and "things." When users form a habit, they can quickly distinguish between the attributes of the content. For example our movie interest homepage belongs to the object class, our own personal homepage is human, their head shape is different.

The revision also has a more controversial place is the use of Microsoft Ya Black font. Because a lot of user feedback font "small" "fuzzy" why Die to give up the use of the Song Dynasty ya Black? Because the song body is a pure pixel font, a large number of text fonts appear, the word recognition degree is not as good as Cleratype font Jache ( ClearType is a technology that Windows uses to optimize the display of text on a flat panel display, using ClearType to make text appear smooth and aesthetically pleasing. Windows in the Vista era, Microsoft's elegant black as the default font to replace the XP era of the song, with the current increase in the resolution of the hardware screen, operating system and browser to upgrade the rendering effect will be more and more good.

So why there is user feedback font "smaller" "fuzzy" it? There is a head, debt is the Lord. Front right turn is Microsoft ... We found that the Jache did show some errors in some environments (alas, the boss is too good for the art, all to match the real eight-core display) such as XP system users (but also for you to kneel) the installation of advanced browser (en ...) In addition to IE, the browser is called Advanced browser will force the use of Ya black, but their rendering of the black is very poor. In response to this situation, we have been on the line after the emergency processing, this part of the user's font degraded to the song, more optimization programs are in the formulation.

V6 is a major iteration of microblogging, the purpose of this revision is to provide users with better personalized information access services to the content producers to provide more exposure and incentive channels. Although Roman Fei built in a day, hope that through our design can make micro-bo become more pure, so that users more comfortable.