Revealing micro-Blog design Code: The growth of micro-blogging interaction

Introduction

Weibo designers know that there is an internal tool that can help build prototypes quickly, and we call them "WDL", the initials of the Weibo Design Library, the English name of the micro-blog. by February 28, 2011 WDL formally released the internal version, open browsing, our designers, as well as product managers have been using it, and actively focus on and support the WDL of each component Update and version upgrade.

Our official definition of WDL is:

"WDL is a code base for micro-blogging design, which is used to demonstrate the interactive behavior of micro-blogs and to standardize the design of interface prototypes." This is an online handbook built by Axure RP for online browsing. It also provides a "micro-blog Component Toolbox" that allows product personnel and interaction designers to avoid duplication of effort, and to build professional prototypes of products more efficiently, uniformly and conveniently. ”

"WDL covers a number of product component specifications, including micro-blog common component library, micro-group component library, client component library, community activity and voting component library, search component library and open Platform component library, with the expansion of the microblogging platform product line, will continue to expand in future." ”

Figure (i) WDL Online Handbook

Today, by the UDC of this blog platform, to everyone to reveal WDL after more than a year of a growing process:

The urgent need of the newborn

Background time

2011 Just past, remember is in October 10, Micro bo a big revision plan to put on the agenda,

At that time many of the microblogging product line will be revised, and will also add a lot of new social application products. To bring so many products close to the Micro Bo main station as the core platform around, to the outside output a consistent, unified micro-BO product image. How to set up a set of unified design rules, so that the designers of each product line to follow each other rather than their own actions, how to improve the design efficiency of the prototype and ensure the design quality in the limited task time, these are the major challenges that interactive design faces.

The former naturally let people think of the establishment of a normative system, but what kind of normative form can help designers the most efficient completion of the design work, during which we refer to a large number of domestic and foreign normative design cases, One of Yahoo's Yui gave us a lot of inspiration: the blunt text specifications into a visible can be operable interactive components, so that designers directly use, and can be modified according to the application scene. A workable plan has been worked out, and then we have to specifically comb out the production ideas.

Growing up in a step-by-step

Production ideas

The overall idea is: a number of commonly used, the product general function modules into high-fidelity interactive components, designers can directly use these components to build the basic interface prototype, and then on this basis to add new functions or have interactive action changes, eliminating many of the basic elements of the physical work, Designers can focus more on information architecture and interactive logic thinking.

Due to the number of microblogging products, the first version of WDL, we select the main station for the production of micro-blog, because the bread contains the most basic components, is the derivative of other products.

Figure (ii) micro-Bo component library production ideas

Specific steps:

The first step: the page goes to check. Take a look at the main station all page contains the function module, statistics possible related components. The criteria that can be used as components are: Independent, reusable functional modules. such as a Feed (including attention to Human head, a nickname, text content, original text, or picture or video or music, forwarding/collection/comment action can be used as a component because it is reused in other products or in the same product, such as forwarding/collection/comment operations in the Feed stream that are not suitable as components. Because they are attached to the entire feed and exist, not independent.

Step two: Component classification. To find out so many components, and how to make it easy for the user to find one of them quickly, we classify the components in detail. Taking the common component library as an example, including frame layout, navigation, tags and page numbers, dialog boxes, lists, message flow, publishers, table cell elements, such as 11 basic components, public components for all product design Unified reference, in addition, each product line can be based on their own characteristics of the product to produce the corresponding special component classification, Using the common library in conjunction with the respective component libraries, you can quickly build your own product pages.

Step three: Component making. The most core and time-consuming work is at this stage. Each component needs to be sure that its existing product and interactive logic is accurate, because in the new version of the microblog may be based on some of the additional functional requirements to modify it; we have to follow the real task of the process of the production of its interactive action, and strive to achieve complete high fidelity, improve the design of the transmission efficiency, This axure is still very strong, in addition to the data on the simulation more difficult, the general online interaction can be a perfect display. The application of axure in component fabrication We'll also mention it in our tools.

Currently completed components include: Common library component package, micro-component package, desktop client component package

Fourth Step: Online Handbook. Although WDL is a tool, it is not enough that we provide off-the-shelf components, designers also need to understand the context of the component's application in the process of using the component, and some detailed interaction rules are not explained by the component itself; Moreover, a component with practical value cannot be used only by a small number of people. They also need to be packaged and promoted, aren't they? Allowing more insiders and even outside partners to know WDL, WDL, is where we make the most of our component expectations. So we have the WDL online Handbook, a presentation component, a Lookup function description, an interactive rule, an introduction, and a place to download the package online.

Step Fifth: Customize the component package. The components that will be completed are generated by Axure custom component functionality, generating component packages by category, which can be exported to local or network users, and then stored in the Axure Custom component library for ease of use.

Making Tools

mentioned many times before Axure, in the process of the entire standard production, axure really work, thanks to have such a good design tool, so that the prototype design work can be more effective.

Figure (iii) Axure working interface

Briefly introduce the key roles that axure play in the process of standardizing production:

Interactive function: Axure is a master of dynamic prototyping, basic page jump, link action, drop-down menu, elastic layer, form input can be realized, but also the use of variables to make simple data transfer, add logic conditions.

Online generation of HTML: Without programming can be online demo prototype, a key to generate HTML, so that design communication more direct and convenient. That's why the WDL Online handbook is being implemented.

Custom components: Custom component functionality facilitates the sharing of resources among axure users, some good component material on the internet can be down, without copying and pasting, directly using the Axure custom components of the import and export function can be directly applied to their prototype, as we use the WDL package, very convenient.

Multi-person Collaboration: Some large projects require more than one person to work together to complete the different parts of the same prototype production, axure specially for such a project developed a multiplayer collaboration model. It may be rare for most small projects, but it's so sweet to WDL this huge component spec library, and the collaborative model we're working with today's spec-making teams is based on this functionality.

Now Axure application and promotion has been in full swing, there is a professional Axure training organization @webppd, has mastery the use of axure skills. Those who are still using PS, Viso, even PPT to make prototypes of the colleagues, are still waiting for.

Reach a goal

Although Axure is formidable, but is only the prototype tool, cannot produce the real online product. Yahoo's Yui finally is the real product form presented, and strengthen the visual packaging components, but also provide JS code, is set design and development as one of the normative library. We have achieved the production of prototype components, but also completed a part of the visual components of the package, but the code is still vacant, there is time to have resources, we can also try to fill the gap, is to achieve a goal.

Expand and Grow

According to the idea of production, last February, we launched the first edition of the main station components for the content of the specification library. In the design team and product team, the response is quite good, and external partners in the negotiations also played a role.

But this is only the beginning, 3 April, with the main station of the revision gradually formed, the entire micro-Bo product line of the various product upgrades also opened the curtain. WDL should also follow the form, start the second wave of pace, in addition to the main station, but also included more product specifications, expansion plan began.

In the July 11, micro-group, desktop client, open platform, search, activity, voting was added to the canonical production sequence, since then we have a standardized production team, WDL became a family of many members.

October 11, Micro-group component library successfully on-line, thanks @ is such as @evil-eric students meticulous work;

In the November 11, the desktop Client component library, which was @zway by the students, was also published internally, and the main station component library was officially renamed as "microblogging common component library" to serve all micro-blogging products;

Currently nearing completion, there is the @ss-susu @ Sanli UK-owned open Platform component library, @ The trailing fish responsible for the search component library;

Activities and voting component library is in preparation, respectively by @ Rose Island and @ Green small lazy students responsible;

Recently, we have added new members, WEB IM component specifications, by our small handsome @ Qinchuan Albert students are responsible;

Thank the above for WDL to make contributions to the students!

Development is not over

Believe that all about WDL will not end, he will be with the development of micro-blogging products have been going on, and constantly grow, and constantly into new members, and continuously for more people services. It is believed that even one day, the mission of Weibo will eventually end, but the new successor does not abandon WDL application value, WDL model can be reused for any Internet products.

Yes, everything is still on the way.

Finally, we enclose some screenshots of the WDL component library for your reference:

Author: Green Little Lazy

Article Source: Weibo UDC