当前位置：网站首页>UI consistency design of products

UI consistency design of products

2022-06-12 03:26:00 【Hua Weiyun】

One 、 Preface

After a period of front-end development , Will you find yourself constantly working on page RE Development , It's even just Ctrl+C、Ctrl+V operation . You might say , Then use components ！ You bet , By extracting common views , The way you create subcomponents can really improve code reuse . The answer above is based on the fact that you are a programmer when developing a function point of a product module . When you think about the problem to a higher level , When thinking from the perspective of front-end framework design , Will you think about this question ： For the business system with fixed interaction style , Can it be based on UI Uniformity 、UI Design specification for normative interaction 、 Page and component style design , Simple and efficient interface building ？ By building Visualization 、 What you see is what you get Web APP How to design a code automatic generation platform to reduce the learning cost and threshold of front-end development ？ How to apply the above features to maximize the product UI Uniformity , Enhance user experience ？

Based on this , I read a lot of literature , for example , US mission “ Lego ”、 Ali's “ Flying ice ” etc. , And to explore how to achieve the sustainability of front-end product development , Enhance user experience .

Two 、 Pain points

To meet the rapid development of the business level , In the development process, due to UI Lack of standards , Lack of standardized specification constraints at the design level ,UI The design style is not uniform , As a result, the problem of poor user experience has become increasingly prominent , It's hard to implement a unified design code , It is embodied in the following 4 On every level ：

Design level ： because UI Lack of standardized design specifications , In different Web App And different development language platform design style is not unified , Leading to inconsistent user experience ; Design resources and code are lack of unified management means , It is impossible to realize the accumulation of knowledge , Unable to adapt to the rapid development needs of new business .
Development level ： Component code fragmentation , There are cases of repeated development , It is difficult to guarantee the quality of output ; Because of the end code API No unified , Maintenance and expansion costs are high , Change subject 、 adapter Dark Mode It's hard to meet the demand .
Test level ： Repeat the walk through , Frequent regression , The quality of components should be verified every time the version is released .
Product level ： Low efficiency of version iteration , The version requires low throughput , Do not have the ability to rapidly expand the business .

To improve the consistency of the user experience , Improve the commonality and reusability of components among multi technology solutions , Reduce the R & D cost brought by the overall visual revision , need PM/UI/RD Jointly maintain a set of design specifications , Unify the style on the product , Unify design at the source , Unified implementation in code .

Based on the practical pain points in the above development work , And the foreseeable future Web End capability requirements , There is an urgent need for a unified UI design code , This precipitates the design style , To establish a unified UI Design criteria .

By pulling away from mature business scenarios , Build can provide high quality 、 Scalable 、 Unified configuration based on ElementUI、iView、Ant-design-vue Wait for the mainstream UI The component code library of the style library , Make it have the ability to support multi business high-level code reuse , And then improve UI Business midrange capabilities , Keep the project highly consistent .

UI Consistency is a common problem faced by most R & D teams , Everyone's standard for landing design , Improve UI Midrange capabilities , There is a strong demand to improve the efficiency of production and research . adopt UI Constructive consistency , Not only can experience upgrade be realized on the brand , It can improve the efficiency of production and research in an all-round way , It provides strong support and effective guarantee for the rapid iteration of business .

Unified brand symbol 、 Brand features , Help to deepen the impression of the product in the eyes of users . Unified user interface and interaction form , It can help users deepen their sense of familiarity and trust in the product . And a good design language can add points to products in terms of experience , It can also better create a consistent experience .

In order to help more business modules to customize in line with The principle of consistency The exclusive design style of , Experience can be summed up in practice , Develop a universal set of UI Consistency solutions . adopt UI Consistency tool chain implementation project construction , And create a whole set of closed loops UI Development process .

3、 ... and 、 Project panorama

Meituan Take-out food UI The conformance suite consists of Building block tool chain 、 Code component library 、 Customized design cloud collaboration platform as well as Document it （ Official website ） Four-part composition .

Building block tool chain ： By creating Unified material market ,PM adopt Axure plug-in unit Pick up the components in the material market and produce prototypes ;UI/UE adopt Sketch plug-in unit Design specifications in the landing material market , Produce a design draft that meets the requirements . future , Hope to output through high fidelity prototypes , You can give the middle and back office projects 、 Independent experience projects provide a better service experience , Give product students the ability to output prototypes directly to the technical side .
Code component library （ElementUI、iView、Ant-design-vue）： The components in the design draft and RD The components in the code warehouse correspond to each other one by one .
Customized design cloud collaboration platform ： With the imprint team inside meituan （ Cloud collaboration platform ） Cooperative development , stay RD The design draft of the code component library indicates which elements exist in the code component library , Avoid duplicate development , At the same time, it is associated with the use instructions of the component in the official website , It is the link between the code component library and the official website .
Document it ： The official website describes the integration mode of code component library in detail 、 How to use components , Reduce the difficulty of development , You just need to understand the interfaces and responsibilities to do business development .

3.1 Expanding reading What is? UI/UE Design ？

3.1.1 What is? UE Design ？

UE Design generally refers to game design or game related design , And the website ue Design , In fact, that is UserExperience Abbreviation . It refers to the whole experience of a user when visiting a website or using a product . Their impressions and feelings , The success of , Whether to enjoy , Do you want to come again / Use , Problems they can tolerate , Doubts and BUG The degree of .

UE It's a purely subjective way for users to use a product （ service ） The psychological feelings built up in the process of learning . Because it's purely subjective , There are certain uncertainties . Individual differences also determine that each user's real experience cannot be fully simulated or reproduced through other ways . But for a well-defined group of users , The commonness of its user experience is that it can be realized through well-designed experiments .

and UE Design is a mechanism of interaction between designers and products or services , The background of users should be considered when designing human-computer interaction based on user experience 、 Experience and experience in operation , So as to design products that conform to the end users , Make end users happy when using the product 、 In line with their own logic 、 Effective completion and efficient use of the product . The purpose of interaction design is to make the product easy for users to use . The realization of any product function is accomplished through the interaction between human and machine . therefore , The human factor should be embodied as the core of design .

3.1.2 UI What design is ？

ui The full name is ：UserInterface I.e. user interface , It's human-computer interaction with software 、 Operation logic 、 The overall design with beautiful interface . Many students don't know ui What is it? , Think you can draw a ICON Icon is to do ui 了 , As a result, many people are busy drawing various icons , It's easy for those new people to go the wrong way .

Software design can be divided into two parts ： Coding design and UI Design . Everyone is familiar with the code design , however UI Design is still a strange word , Even those who specialize in website and multimedia design do not fully understand UI It means .UI It's meant to be a user interface , It's English User and interface Abbreviation . Literally, it's the user and interface 2 Components , But it actually includes the interaction between the user and the interface .

Interface design . In the long process of software development , Interface design has not been paid attention to . People who do interface design are also called “ Art Designer ”. In fact, software interface design is just like industrial modeling design in industrial products , It is an important point to buy products . A friendly and beautiful interface will bring people comfortable visual enjoyment , Narrow the distance between people and computers , Create selling points for businesses . Interface design is not a simple art painting , He needs to locate the user 、 Usage environment 、 Usage and design for end users , It is a purely scientific art design .

3.1.3 UE And UI The difference between

To put it simply UE One more dynamic effect ,UI It's the icon .UE and UI To some extent, it is different ,UI It is important to provide users with good senses , and UE What we pay attention to is the guidance of user behavior . The two should be mutually inclusive , Interact with each other .

UI Is the interface ,UE Is the feeling of use , Take jd.com and amazon.com ,UI Design has its own merits , But according to the usage habits of Chinese people, JD's UE Feel better , Maybe foreigners use Amazon better ,UI It is objective. UE More subjective . In product development , Especially during the development of mobile phones or websites , The key is UI and UE.UE yes User experience designer ,UI yes Visual designer . Popular point , The user experience designer is in charge of whether the product is easy to use , Is it humanized . Visual designer is the beauty of products .

Before the graphical interface came into being , For a long time UI Designers are interaction designers . The job of interaction designer is to design the operation process of software , Tree structure , Software structure and operation specification （spec） etc. . What a software product needs to do before coding is interaction design , And establish the interaction model , Interaction specification .

Four 、UI Consistent collaborative closed loop process

The designer Step by step Design language Precipitate into design code （ Including components 、 Color 、 typeface 、 Pictures, etc ） Upload to the warehouse for the whole design team to check , At the same time, it is quantified and built into building blocks Sketch plug-in unit in ; Development Engineer Responsible for coding it , in the light of ElementUI、iVIew、And-design-vue Wait for the mainstream UI Framework for component library development .
The designer Use Building blocks Sketch plug-in unit Draw a design draft , It can ensure that the design elements are obtained from the established design standards , Output design draft in line with business design specifications , And there are corresponding implementations in the code component library .
The finished design draft is uploaded to Collaboration platform , deliver Development Engineer Restore the design draft .
Development Engineer After getting the design draft , You can know which components have been built into the code component library , And you can click the link in the design draft , Look directly at the instructions for the component .

although UI Uniformity Landing will increase the workload of development engineers , Promoting consistency building is also a difficult task , And because of the high cost , It's impossible to quantify the benefits , But once it works effectively , The team will be rewarded handsomely .UI Consistent construction requires designers to have a good understanding of the existing state , Have a good understanding of the business , And excellent design skills , At the same time, we should practice and optimize constantly . In order to ensure the successful implementation of the consistent project , avoid “ give up halfway ”, The implementation and output quality can be improved through a series of promotion measures ：

The project team cannot be separated from the daily requirements development work . This can ensure that the design elements precipitated by designers always come from The latest business scenario , At the same time, the project output can be quickly applied to the latest version to be verified .
Preference is greatly influenced by visual factors 、 The module scenario with high input-output ratio is transformed , Change numerous for brief , Determine the minimum verification loop （MVP,Minimum Viable Product）, Constantly optimize in practice , And then run through the whole process .
The project was promoted by UI Students put forward the requirements according to the version , Business scheduling and implementation , from UI Unified acceptance .
Establish a phased goal , And complete the specific work plan , The completion of regular re examination , Ensure the continuous progress of the project .

In detail ,UI The overall scheme of consistency is mainly divided into two parts , One is Design system construction , The other is Tool chain construction . The construction of design system is Basics , Mainly The designer Precipitation design style , To establish a unified UI Design criteria , And tool chain construction is brace , It's the developers who develop a series of tools to close the development process , Realize the landing of design system .

In long-term version iterations , With the increasing function and UI Continuous revision of , The old and the new are mixed , Maintenance is extremely difficult . The designer By summarizing the results of page walkthrough , Develop design specifications , So we can select the components with high reusability Build component library .

By building component library, we can control the specification , Avoid random combination of controls , Reduce the difference between pages ;

The components in the component library can meet the business characteristics , It can also cope with the changing business environment , The cloud has the ability of dynamic adjustment , It can be adjusted uniformly when the specification is updated .

Without affecting the requirement realization and design effect , Only use components as much as possible in schematic design , Improve component coverage , It is possible to improve the efficiency through the component library . And in addition to using components in new requirements , You also need to replace the existing page content with components as much as possible , In order to avoid the repeated modification problem when upgrading the page , To really improve the efficiency of production and research . In the construction of component library, we should pay attention to the following points .

Select the appropriate particle size

The granularity of components has been a problem for designers and development engineers for a long time , Although there is a core theory of building a design system —— Atomic design theory For guidance , Namely, in accordance with the “ atom 、 molecular 、 organization 、 Templates 、 page ” Five levels of page design . This theory has no problem developing new applications from scratch , But the consistency transformation Web App, Many design problems will be exposed , For hundreds of mature online pages that already exist , There are great difficulties in the transformation , The right granularity must be chosen according to the specific business . Before making components , Project development engineers need to sort out the existing pages , Classify the components used , And sort the components according to their usage frequency , Make a step-by-step replacement plan . In order to avoid the component library, although it is very complete 、 It took a lot of manpower , But many components are not used , Or developing too few components , Insufficient coverage of the scene and other issues .
By communicating the results of the walkthrough with the designer repeatedly , You will find that components with high reusability can be divided into two categories ： The first category “ Basic controls ”, It's similar to a label 、 Button 、 switch 、 Pop up window and other elements with basic functions , Corresponding to... In atomic theory atom ; The second category “ Business component ”, It's like a commodity card , By “ Basic controls ” form （ For example, commodity cards are made by “ Label control ” And “ The image control ” form ）, meanwhile “ Business component ” It can also be combined with each other , Become a higher level of “ Complex components ”, Similar to... In atomic theory molecular .“ Business component ” The combination of the two is ever-changing , Different styles of business components can be made up of similar “ List of businesses ”、“ List of dishes ” etc. “ Templates ”, and “ Templates ” And “ Basic controls ” Put together , Has become a “ page ”.

It has expansibility

Components must have certain configurable properties to improve the coverage of applicable scenarios . Configurable properties are embodied in three aspects ： Components support the display and hiding of local elements , For example, the title of the product card 、 explain 、 The price can control the display logic according to the interface data ; Components support multiple styles , For example, the picture on the left and the text on the right of the commodity card are arranged 、 Above and below ; Components support business side configuration themes , For example, adjust the high light color 、 Adjust alignment, etc .

Support unified management

Component management function is very important to UI Uniformity Play a vital role , This is mainly reflected in two aspects ： The first is the design style precipitation , By forming your own unique style , The design team according to the design specification , Compliance UI Uniformity The components of business scenarios are constantly abstracted and constructed , More and more common business components have been precipitated , These components need to be expanded to Library in , For team members to use ; Another function is to keep the components used by the team up to date . For various reasons , Design elements of components （ color 、 typeface 、 Round corner and other attributes ） There may be changes , Need to remind team members to update components in time , To keep all pages consistent .

UI Design language is closely related to its own business , Many business modules have their own design system .“ Universal ” It usually means that the needs with business characteristics cannot be met , Different business components 、 Color system 、 Dynamic effect 、 There are so many different font styles , The absence of any one of these links will lead to UI Consistency is broken .

Design language is not an abstract concept , for example , When you talk about meituan, you think of meituan Huang , I think of Ali orange when I mention Ali 、 When it comes to Jingdong, I think of Jingdong red, etc , Through the design language can convey the brand idea and the design idea . The same plate products must form a unique style of their own , There is a set of standards for consistent element handling , For product designers , This stylization has to continue , In order to make our whole project have a high degree of consistency , To keep “ Product characteristics “, Make sure it's attractive .

Take illustration as an example , Illustration as a visual language , Is the key core element of brand identity , It's different from simple copywriting information , Graphing describes the inherent information intuitively at the same time , It's also shaping the emotional context , Make users more immersive and empathic . Illustration improves the user experience of the product and achieves the business goal at the same time , It has unique advantages in expression effect and production efficiency , In the pursuit of efficiency in the Internet products are widely used .

Because the illustrations in previous products have not been systematically integrated , And the illustrator's personal style is obvious , Different designers work together in a graphical way , Style is hard to reproduce , There is also a certain risk in the illustration construction work of the whole business completed by a designer . The elements that different designers have painted before cannot communicate with each other , Cause many elements to repeat the design 、 The style is not uniform , Lack of systematic creation and arrangement , Can't maximize productivity , And affect the quality of products . So the illustration system is maintaining brand consistency 、 It is particularly important to improve work efficiency and avoid risks .

Iconfont It can be translated into Icon Font , As the name suggests, the font file is used to replace the image file to display the icon 、 A method of special fonts and other elements , It's not only vector 、 The characteristic of being able to vary in size , And support any color change .. Simply speaking ,Iconfont It is to package multiple icon files as ttf The font file , Register in the system ,Web App Icons can be used just like Fonts . Its principle can be simply understood as through ttf Font files maintain a Unicode The mapping relationship between code and graph . When using Iconfont When it comes to helping the project , Configuring multiple icons no longer requires downloading several PNG file , Only one set of maintenance is needed ttf Font file can be .

When Web App Develop to a certain stage , Inevitably, the package volume will be larger and larger , There will be more and more useless pictures . meanwhile , New scenarios are emerging as a result of new business development , Inevitably, a large number of new images are added . In short , Image files need to solve two problems in consistency project , That is, the processing of stock images and the management of new images .

For stock images , We must judge its rationality , There are a lot of similar pictures in the project , These pictures may just be padding Different , Or there's a slight difference in color and size , Similar scripts can be scanned through images , According to the characteristics of the picture Hash Judge the similarity of pictures , Pictures with high similarity are based on UI Suggest , Just keep one . How to prevent new images from being added “ recommit the same error ” Well ？ Through the establishment of image management background , Sort the pictures by scene , Standard images need to be selected from the component code base , Add image execution PR Strategy , It needs to be reviewed by the relevant person in charge , It can effectively prevent the accumulation of similar pictures .

Dynamic effect refers to those dynamic interface elements and visual effects that can give vitality to products , These interactions are often associated with specific response behaviors , Even temporary states that are not directly related to the interaction behavior .

Fine and appropriate animation effects can convey state , Enhance the user's perception of direct manipulation , Visually present the results of the operation to the user .

As business needs continue to grow , The proportion of dynamic effect is increasing , It's becoming more and more important , It is also an important factor to enhance the user experience and open the gap between competitive products , therefore , The use of unified norms is particularly important . Through the construction of dynamic effect Library ,UI The level can carry the brand 、 Convey emotions , Deepen users' understanding of Web App The impression of , Let users relax 、 Pleasure ;RD The same component can be directly reused in multiple scenarios , It also reduces R & D costs .

Color can convey brand information 、 Distinguish the ownership of information 、 Mark the selected state of the control and display the information of the content hierarchically . Important information needs to be highlighted on the page . The system level color system mainly defines the main colors of the application 、 Text color 、 Auxiliary colors and standard gradients , In a certain period of time, it is suggested that new colors will no longer be supported . By building the standard palette into the plug-in , Limit UI The scope of use when drawing the design draft , and RD The engineer You can only select colors from the code component library , Ensure the accuracy of color values , It is also easy to customize the theme .

Font is one of the most basic components in systematic interface design . The user understands the content and completes the work through the text , Scientific font system will greatly improve the user's reading experience and work efficiency . Designers need to pay attention to many aspects in the process of font design , Like fonts family、 Word spacing 、 Row height 、 Paragraphs and so on . How to make text look more natural , It's the answer the designer team has been searching for ,UI Engineers according to the hierarchy of words , It specifies Headline、Subtitle、Body、Button as well as Caption The use of the text of the standard , According to the position of the text in the design draft , You can determine the specific style of the text .

In the component code base , It should have the following functions ：

Improve project maintainability

Due to the single responsibility of components in the component library , Reduce the coupling degree of the system , Developers can easily understand the capabilities provided by this component . Components can be replaced freely 、 Combined into high-order components , Only one modification is needed when updating the components . Each project member maintains a certain number of components , Let everyone in the team play to their strengths , Can maximize the team's development efficiency .

To document

There is a unified specification for component interfaces , Make it easier for new people to get started , New members only need to understand the interface and responsibilities to develop component code , Because the scope of the code is limited to the internal components , It is also very helpful for the risk control of the project . Through the unified management of components , Realize the accumulation and effective reuse of code , Improve the efficiency of new business requirements development .

Easy to unit test

Due to the single and clear responsibilities of components , Only the interface is exposed to the outside world , Conceptually, you can think of a component as a function , The input corresponds to the output , This makes automated testing easier .

To achieve accessibility and other customized functions

Accessibility can improve the user experience for people with Disabilities , The component resources in the component library are highly cohesive , Loading is completely self controlled , No impact with global or other components . Loading of components 、 The rendering path is clear and controllable , For custom functions , It is more convenient to realize the functions like barrier free .

at present , Familiar component libraries on the market include Ali's Antd Desigin、Fusion Design And meituan's Roo Design etc. , Basically, it's all about serving Web Developed component library , Through these component libraries, you can quickly build some middle and back-end systems .

Why is there no famous Native What about the open source component library ？ Because of the theme of each app 、 Styles and interactive experiences are different , And these differences are the soul of conveying brand ideas and design ideas , So it has to be combined with the business , in the light of ElementUI、iView、Ant-design-vue Wait for the mainstream UI Style library for component library development . By building the whole platform code component library , Can guarantee the same UI The components are consistent at each end , Conduct UI Reduce the risk of error correction or omission when upgrading , besides , It also reduces stress testing , Increase the throughput of demand .

The official website is the facade of the project , A good facade can attract more users , In order to better promote the project . The official website serves as a communication medium between designers and development engineers , It needs both to maintain . Through the official website, we can help the designers in the team to precipitate the design style , To establish a unified UI design code , help RD The engineer Manage and consult component documents .

4.1 Manual function

The current official website should mainly include Design language 、 Component library 、 Illustration Library as well as Download resources , Serve separately for UI and RD The engineer .

4.1.1 Design language

UI Uniformity The project takes “ Atomic theory ” The principle of its formation , That is to define from the smallest element , These elements are then assembled according to the rules , Splice it into components , Finally, the final page is assembled by these components , This is a point-to-face process . Design language chapter mainly serves for UI/UE The engineer , This chapter is visually 、 Design patterns 、 Dynamic effect and other three sub chapters enable readers to quickly understand the design specifications of the project , To get started quickly .

4.1.2 Component library

Component library is the concrete implementation of various elements in the design pattern , This page describes how the components are used .

4.1.3 Illustration Library

Illustration library introduces the use of illustration scenarios , Illustration drawing standard and illustration case show .

4.1.4 Download resources

Provide product download function .

4.2 The project design

Because the official website mainly displays pictures and texts , And the iteration frequency is faster , So choose the current more common document - Website generation system VuePress, Just write according to certain rules Markdown Put the document in the corresponding directory , The front end automatically parses and generates navigation , And support multilingualism 、 picture 、 file 、 Video and other material . This way greatly shortens the development cycle of the official website , Even students without front-end experience can get started quickly .

For convenience UI Engineer's modification of official website document , It shall be built based on the document website generation system Online editing platform . Through this platform , Relevant personnel can edit online directly 、 Release , Economize UI The engineer And RD The engineer Communication costs and release costs . During filling , Users can preview the edited content in real time , After modification, just click Save to update to the website immediately .

The official website supports platform functions , Different business parties can create their own document sites , A good document site for the design group of project promotion 、 External access can be of great benefit .

4.3 Closed loop of tool chain

When we are full of confidence UI When consistency solutions are extended to everyday development , In addition to hearing praise for improving efficiency , Students make complaints about the project ,“ How to know which component in the design draft has been developed ？”,“ It's troublesome to query the usage of this component , Every time I go to the official website to search ”,“ Standard colors 、 What is the name of the icon ？ How to quote ？…”

We can't limit other people's choices , So we can only make this system better , If you don't optimize the whole process , Connect them in series to form a closed loop , And then the whole project may collapse , Consider the design draft as a link RD And UI The link between , You can connect the official website with the code warehouse .

Design cloud collaboration platform through customization , In giving RD The design draft of the code component library indicates which elements exist in the code component library , Avoid redevelopment , At the same time, it is associated with the use instructions of the component on the official website ,RD Engineers do not need to search for components when they encounter problems in the development process , Click to jump to use document , It really achieves the full coverage of consistent elements .