Application Design Specification
|
A Interaction specification
A1 Instructions
-
This document defines the interaction framework structure of microblog third-party products. Please refer to the microblog visual specification and PSD source file for the size definition and visual style of relevant content. Sections 02, 03 and 04 in this document are mandatory and must be followed when you design the product. Section 05 is optional. It lists the existing layout, component/control styles of Weibo for reference in setting timing.
-
A2 Interaction design principles
-
In addition to following the general specifications listed in this document, third-party products have greater design freedom in the design scheme. The Weibo Design Department provides the following interaction design principles for reference:
-
-
Uniformity and standardization -
Pages of the same type adopt the same or similar layout structure, and the response methods of similar operations remain consistent; -
The structure of navigation class is consistent, including global navigation, search, filtering, etc; -
The text expression is unified and easy to understand, including information prompts, titles, menus, grammar punctuation, function names, etc;
-
-
Clear information and guidance -
The layout of primary and secondary content is reasonable, and the organization logic of various types of information is clear; -
Know the current page status clearly, and the second level and lower pages should have clear navigation levels, such as unified navigation, bread crumbs, etc;
-
-
Timely and effective feedback -
Timely feedback on user operation; -
The feedback information is accurate, concise, straightforward, and instructive for user operation;
-
-
Error and safety precautions -
Provide necessary reminders for operations with serious consequences; -
Provide ways to prevent or correct errors; -
Provide privacy protection measures;
-
A3 Framework Specification for Independent Third Party Products
-
Third party products should strictly include the following five parts: microblog top guide, page header, content, bottom guide and microblog footer. Among them, the Weibo top guide and page footer should call the interface directly, and the page header, content and bottom guide should be designed by you according to the principle of interactive framework. 
-
-
In principle, third-party products should directly call the top guide of Weibo's simple version. If you want to use the full version of top guide for special needs, please contact the relevant contact person on Weibo for confirmation. 
-
-
The header is the global navigation area of the entire product, and must contain the logo and title of the product. Other elements, such as Slogan, brand header map display, search box, and operation position, should be arranged by yourself without destroying the overall structure of the page header. 
-
-
There are two sizes of headers: standard header and narrow version header. The standard header is applicable to the primary page of the product, and the narrow header is applicable to the secondary page. The narrow page header is designed to display more content on the secondary page, so the height of the page header is lowered. In specific products, please follow the following principles. Narrow page headers cannot be used only on product pages, nor can narrow page headers be used on product level pages.
-
-
If the primary navigation of the product is placed in the header area, please align it to the right, and refer to the following structure: 
-
-
The layout of the content area has a variety of column structures for use: three column version, two column version (narrow left and wide right, wide right and narrow left), and full column version. See the visual specification definition for grid system dimensions. The product can choose an appropriate layout according to its structural characteristics.
-
-
Three column edition -
The left side is navigation, the middle is main content area, and the right side is secondary content such as recommendation and help. 
-
-
Two column version - narrow left and wide right -
The left side is navigation, and the right side is content area. According to the product content, you can select the following four narrow left and wide right column layouts. 
-
-
Two column version - wide left and narrow right -
The left side is the content area, and the right side is navigation. The following four two column layouts can be selected according to the product content. 
-
-
Bulletin board -
There is no clear specification for navigation and primary and secondary content in the column structure. Please design your own. Principle, clear information structure and clear navigation guidance. 
-
If the above column structure cannot meet the actual needs of the product, it can be changed based on this grid system with 30px as the modulus unit, such as 720/260.
-
-
The bottom guide is used as the external navigation entrance related to the product, such as the links of other third-party products, mobile terminal download links, etc. Please refer to the following structure: 
-
-
For third-party products, please call the microblog footer directly. 
-
A4 Specification of application framework embedded in microblog personal homepage
-
The part selected by the dotted line in the following figure is the content area of the embedded application. Different from the design of independent web pages, the interactive components/controls and visual styles of embedded applications should strictly comply with the design specifications of Weibo, and the reusable parts should directly call the relevant interfaces of Weibo.
-
-
It is recommended to use two column layouts in the application content area: 560-20-380 two column layout and 940 full column layout.
-
A5 Specification for general components and controls
-
There are two forms of login, page and dialog box. -
When you need to use the login page, please call the Weibo Mini login page, which can be customized except for the operation area. 
-
-
When you need to use the login dialog box, please call the Weibo login panel. 
-
-
When you need to use shared microblogs in third-party products, please call the microblog publisher. The elements in the publisher are not allowed to be modified. 
-
-
Both dialog boxes and pop-up layers are interactive carriers used to complete certain information prompts or tasks. The difference is that dialog boxes tend to be more important operations or information behaviors, appearing in the middle of the page or near the operating object is to forcibly interrupt the user's current task. The pop-up layer is more inclined to quick operation or information behavior, appearing near the operating object, hoping to interrupt the user's current task as little as possible.
-
-
dialog box -
The basic structure of the dialog box is as follows: 
-
-
The dialog box must contain a title, an "X" button, content, and commands. Align the title and content to the left, and close and command to the right. The command area must contain actions to close the dialog box. In principle, the height of the dialog box should not be too high to exceed the user's screen.
-
-
Dialog boxes are mainly divided into two categories: information dialog boxes and task dialog boxes. -
Information dialog box is applicable to important prompt, confirmation, warning, feedback and other scenarios. Its content area is mainly text information description. It is required to have type icons on the left side of the text information. For example, different icons shall be used to distinguish the types of deletion, confirmation and warning operations. The task dialog box is applicable to object selection, form filling and other scenarios.
-
-
Bomb layer -
The elastic layer appears near the operating object. The following are the two basic structures of the elastic layer: 
-
-
The pop-up with command is applicable to the behavior of task class, and the pop-up without command is applicable to the feedback of success prompt. The pop-up layer without command will disappear automatically, so the prompt text is not required for users to see.
-
B Visual specification
B1 Instructions
-
B The visual specification defines the grid system, frame visual size and style of microblog third-party products. The relevant source files can be downloaded from the PSD document provided by Weibo. -
Three unit size blocks are used in the visual specification: 10px for green, 15px for red, and 20px for purple. 
-
B2 Grid system
B3 Navigation
-
The top navigation is centered, and the height is 25px. 
-
-
Standard Header 
-
-
Narrow Page Header 
-
B4 Weibo Publisher
B5 Basic Controls
B6 Application Specification for Embedding Weibo Personal Homepage
-
Icon limited height: 20px, height including projection should be within 22 * 22px 
-
A User relationship content 
-
B Multimedia content 
-
-
C Topic content 
-
-
D Weibo content 
-
B7 dialog box and bullet layer
-
Standard dialog box 
-
-
Modal dialog box (forced black background) 
-
-
Bomb layer 
-
-
Template selection dialog box 
-
-
Microblog publisher attachment selection pop-up 
-
B8 Logo Specification
-
Proportional relationship between Chinese and English domain name combinations (this is the recommended combination): 
-
-
No combination proportion of domain names: 
-
-
The light source position is 90 degrees above 
-
-
As shown in the figure, based on the height of the logo main body, its extension range shall not exceed 20% of the main body height.
-
When the background brightness range is B70~B100, the following specifications shall be used: 
-
-
When the background brightness range is B0~B60, the following specifications shall be used: 
-
-
The recommended design style is: light and thin, flat. Overweight gradient texture, crystal and luminescence should be avoided. -
The following is a comparison of the design before and after the micro application and micro disk for reference: 
