The author center | baidu search the user experience

The Web Design Guide is divided into design principles and basic specifications. It also provides practical examples and resources to download. Follow OpenWeb developers and subscribe to the Web Design Guide.

preface

Web Design Guide is designed to provide a set of simple and practical design guidelines for the vast Web content ecosystem. The purpose is to improve the efficiency and quality of design and development, and provide high-quality user experience for the majority of users.

Hundreds of billions of Web content cover all aspects of life, in addition to stable and smooth browsing, quality content and services, but also need high-quality interaction and visual experience. Based on baidu’s new mission and the open ecological characteristics of Baidu search, we provide design guidelines and intuitive case references suitable for third parties.

The Web Design Guide will be updated and optimized as the Web ecosystem evolves, but the design principles in the guide remain relatively stable and durable. Design principles include: general consistency, concise and clear, advanced refinement, intelligent and fast, this article will introduce the general consistency principle.

General agreement principle

Common and consistent design can reduce cognitive load for a smooth experience and improve design and development efficiency.

The Web content page in the search scenario covers all aspects of life, serves the public, and spans multiple systems and devices of different sizes, providing a stable and intuitive experience based on a common and consistent design. Only by continuous reuse according to certain standards can users transform from unfamiliar to familiar and establish habits and trust, which requires universal and consistent experience in interface layout, visual style, icon implication, functional copywriting, interactive logic and other aspects.

A common and consistent interface is not only convenient for users, but also for third-party developers to improve development efficiency and ensure page performance and loading speed by adopting common UI components based on their own requirements and by referring to basic design principles and cases.

Of course, universal consistency is not absolute, and absolute uniformity can make users feel repetitive and boring. Sometimes we need special styles to give users fun, lively, and pleasant experiences beyond their expectations. This part will be explained in the principles of advanced refinement and intelligent quickness.

Design Case 01

It is recommended to use flat control style, fully consider the universality, similar or the same function, use the same interaction and visual style; Common and consistent design can improve design quality and efficiency.

 

Design Case 02

It is recommended that the size of the control be a multiple of 4pt. For example, buttons, input boxes, ICONS and other controls, follow the same rhythm and rules, can make the controls more common, improve the design and development efficiency, reduce the confusion and interference of different size selection.

   

Design Case 03

It is recommended to use a common title bar to avoid custom title bars with inconsistent layout, height, and icon styles. Consistent standards can avoid repetitive design and provide users with stable experience.

Design Case 04

The same control may be applied to multiple scenarios, sizes, and states. For example, the unified design of ICONS adopts the style of geometric frontal diagram, and the filling style can be flexibly changed according to the needs. The unified shape can be maintained during the change, which can reduce the cognitive burden of users and build trust.

Design Case 05

Page layout using raster, can ensure that the page section is divided in accordance with certain rules, the module is consistent. We recommend a 12-column flow grid, as detailed in the grid section of the basic specification.

Recommended reading

(Click the picture to jump to)

Mobile Web Acceleration Technology Monthly No. 1

Brilliant Open Web 

The BOW (Brillant Open Web) team is a dedicated Web technology building group dedicated to promoting the development of Open Web technology and making the Web the first choice for developers again.

BOW will rely on [Open Web Developer] public account, to provide you with design, development, security and other Web related knowledge and cases.We also welcome you to join us if you are interested in changing the world!

Follow OpenWeb developers, reply to “Add group”, let’s promote the development of OpenWeb technology together!


OpenWeb developers

ID: BrilliantOpenWeb

Technology connects the world, openness wins the future