Shulou(Shulou.com)06/03 Report--

This article mainly introduces "how to build a Banner component library". In daily operation, I believe many people have doubts about how to establish a Banner component library. The editor consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful to answer the doubts about "how to establish a Banner component library". Next, please follow the editor to study!

Why build Banner component Library

In Internet companies, the operation of Banner is often done by different operation teams, and even in some multinational companies, the operation of Banner is done by operation teams of different countries. So how to ensure that the output of the operational Banner can not only ensure the visual impact, but also efficiently output and reflect a unified design language? Can you easily replace Banner components even without a designer? The best way to solve this problem is to design Banner component library. The four advantages of Banner component library can solve the above problems perfectly.

Categories of Banner component Library

According to the different needs of individual designers and each company's business, I divide the Banner component library into two categories:

1. Banner component library operated by designers and design team:

The operators of this kind of component library are designers, and only designers have permission to operate on them:

The effect of the case section demonstrates:

two。 Banner component libraries that are not operated by designers:

This kind of component library is for non-designers (operation, sales, subsidiary employees, etc.). It is a Banner component library specially made by designers according to the needs of operation.

The reason why I made this component library at that time was because the parent and subsidiary companies often have the same template design interface replacement, and each replacement takes designers a lot of spare time, so we just set up the Banner component library directly and let the operators replace it on their own. We first teach the parent company's main operation process, and then the main operator is responsible for the subsidiary's operation process training. Such a set eliminates the communication and modification process between operators and designers, and operators can directly output finished products, thus improving the productivity of the whole team and allowing designers to focus on design creativity and user experience.

The effect of the case section demonstrates:

Four knowledge points of Banner component Library

No matter what kind of Banner component library is built, if you want to design it, you must first clearly understand the basic structure and design principles of Banner, and build the Banner component library from the underlying logic. My idea of building the Banner component library is mainly based on the following four knowledge points:

1. Hierarchical split of Banner

The main purpose of Banner level split is to set components. We can regularly set each level to an alternative option through level split, which can be divided into 5 levels in the Banner component library:

Background layer: replaceable background color, background style

Copy layer: replaceable fonts, colors

Tag layer: replaceable tags, show hidden tags, label colors

Embellishment layer: replaceable embellishment elements, element colors

Product drawings: can be replaced to display pictures, can also be replaced with illustration elements

Case study:

two。 Rational use of Point, Line and Surface in Banner

In the component-based Banner setting, we can divide the overall level of the picture with points, lines and planes, and we should list which levels are expressed by points and which levels are expressed by lines or surfaces, which is not only conducive to the rapid establishment of the component library, but also conducive to the visual expression of the whole Banner picture.

Points, lines and faces exist relatively, points may become lines and planes in the picture, and lines may also become points and faces in the picture.

The larger the "point" is, it may become "noodles", and the regular changes of "points" may also become "lines".

When the "line" appears on the screen for a short time, we can regard it as a "point". When the "line" is thickened to a certain extent, then we will regard it as a "face".

When the "face" becomes unclosed, it becomes the "line", and when the proportion of the "face" in the picture is reduced, we can regard it as a "point".

We should summarize the hierarchical points, lines and surfaces in advance when we Banner the components, so that there will not be clutter when we design the same elements. The general relationship between levels and points, lines and surfaces is as follows (such a regular combination relationship is conducive to the establishment of a component library):

It is important to note that the embellishment layer and label layer in the Banner component library do not have to exist in Banner.

3. Common layout of Banner component library

The layout of Banner is complex and diverse, and our component library wants to be lightweight, so it is more suitable for the following three conventional layouts, as follows:

4. Five principles of Banner design

The establishment of the component library must follow the five principles of Banner design: alignment, unification, contrast, blank and structural balance.

Alignment

The content of Banner must have a criterion of alignment, especially at the copywriting level, each element has its own position, and there must be order in order to have a sense of comfort. The common alignment methods are left alignment, right alignment, and center alignment, and it is recommended that only one of them be used in a plate. A small Banner layout, if you use a variety of alignment, in fact, the information is fragmented in the eyes of users, increasing the cognitive cost.

Unification

Fonts and font colors had better be no more than two, and the design style of content elements must also be consistent. Too much can easily lead to cluttered content and excessive interference.

Contrast

To understand the weight of each information, the important information should be strengthened and the secondary information can be weakened.

Leave blank

Make room for Banner to give Banner a little more breathing, which makes it easier to focus on important information.

Noise reduction principle

In Banner design, do not use too many fonts, colors or too complex graphics, this constant "multiplication" behavior, is actually increasing the user's cognitive "noise".

Component library production process and case presentation 1. Production premise: design specification (font / color / layout description) font usage specification

In the use of fonts, we need to determine the font type and font size.

Specification for use of colors

In order to ensure that Banner has a strong adaptability, we can not specify the precise color, use the range of color lightness instead. (color specifications are limited to dominant tones and do not include special colors: such as labels, embellishment elements)

Layout description

Determine the overall size of the layout, element spacing, typesetting, word limit.

two。 Designer application version production process:

The Banner component library used by designers can be made in Sketch or Figma.

If it is used for outsourced design or there is only one designer in the company, then it is recommended to use Sketch; if there are a large number of design teams, it is recommended to use Figma. Here I will use SKetch to explain the production process.

Step 1: design elements in Banner according to levels and points, lines and surfaces

Step 2: componentize the elements at each level

In Sketch, just select the layer (or group) of the component you want, and click the button to generate the component immediately, as shown below:

At the component level, we need to pay attention to where to start and where to end. For example, in this pet Banner case I did, the first layer is the Banner style switch, followed by the level switch within the style, which does not end after all the internal levels are composed of components. There may be more widget switching in the hierarchy. For example, in style 2, instead of composing the embellishment layer into a component switch, it is divided into three component switches, and even in the three switches you can set their color switch. This is the end of the real component only when it is all set up. Here is a hierarchical diagram of my component:

Step 3: design replaceable components

After the element componentization is completed, we can add more styles of replaceable components to the component library, as shown below:

After all the replaceable components are designed, you can use them. If you find that the content is not enough, you can add it internally again. Here is a demonstration of the switching effect of Banner style 1:

The effect of Banner style 2 is shown:

Key points to be noted:

The internal layers of Banner component library should not be too many and should be lightened as much as possible.

The same elements within the component library can be used at the same time, such as the copywriting part of style 1 and style 2, can be used with one component, no longer need to be set separately.

The naming should be clear and the levels should be separated by "/" to avoid misfetching within the component library.

Because of the component mechanism of SKetch, there should be differences in the size of components. If there are components of the same size, please modify one at will. (add 1px)

If you want to get the components quickly, you can change the layer panel on the left to the component panel, and you can drag the internal components directly.

3. Production process of application version for operators:

The software needed for the establishment of Banner component library applied by operators is PS and Excel.

In the design of this kind of component library, we must design from the operator's point of view, the most simple, the following case is from the previous PS components done in the old employer.

Step 1: design elements in Banner according to levels and points, lines and surfaces

Step 2: design replaceable element components

Before setting up, we need to know the following things:

PS uses image-variable attributes as a component library.

All the element replacements we do are not within the PS, but in the Excel operation. If there is an image replacement, the picture is in the same folder as the source file.

You can set the display and hiding of all elements.

From the above 4 points, we can see that the only element we need to design is the background image, while other elements can achieve the effect through variables. Here are four background replacement images of different colors:

Step 3: define variable elements

Just tag the elements that need variables, exactly how to do the variables in step 4

Quantitative step: select the layer-image-variable-definition you want to quantify

Note: PS will automatically recognize quantitative elements, if it is a group, then only the visibility option (visibility option means can be shown and hidden); if it is a picture, there will be more pixels to replace (replace the picture); if it is text, there will be text replacement (replace text)

In order to avoid operational errors in the definition, the definition name is the layer name. Press the "next" button when the definition is complete, and then press the "confirm" button until all the definitions are complete. The Banner in the case defines a total of six elements, namely, commodity map (pixel replacement), trade name (text replacement), original price (text replacement), discount price (text replacement), special offer (visibility) background map (pixel replacement).

Step 4: make the Excel table

All our data modifications are done in Excel. The Excel table is very simple. The first row is the defined name. We only need to enter the 6 names just defined into the first row of the table.

As shown in the figure above, it is recommended that you add an additional number definition and hide the layer defined by the number in PS, in order to make it more intuitive when selecting data sets, as follows:

Except for the first row, the following arrangements are all input definitions. If you want to change the text of the trade name, you can enter the modified text below.

If you want to replace an image, enter the name and suffix of the replacement image. Only pictures in png and jpg formats are supported, and the pictures must be in the same folder as the source file.

If you want to show or hide an element, you can enter "TRUE" or "FALSE" in uppercase.

When the form information is filled out, the final step is to save the form in .csv format. (note: .csv files must exist in the same folder as PS source files and picture files)

Step 5: import operation

When all the settings are done, we can import and switch different data applications in PS.

Operation path: image-variable-data set-Import data set-Select data-Application-OK

After these five steps, our Banner component library has been successfully completed!

Special reminder: to avoid operational errors, it is recommended to lock all layers inside the PS.

Step 6: train operators

Through the establishment of the above components, operators only need to add a sublist of Excel files and select the export in PS to complete the operation, which allows operators to regard PS as a picture export tool, which can be done very easily. (mechanized process)

Considering that the operators may not be able to understand the design logic, there may be operational errors or do not know how to operate, so it is recommended to guide the operators to operate through LVB, video files, PDF files and GIF files.

Live broadcast advantages: live broadcast online operation, do not understand can be asked in time, so that operators can quickly get started.

File advantage: it is mainly used to remind the operator when he forgets to operate or makes an error.

Special reminder: the operation file (PS source file, background picture, Excel table), font package (font used in PS), operation prompt document (video, PDF, GIF) must be included in the file for operators.

The following is an illustration of the employee PDF procedure:

Case source file extraction

Sketch component library source file:

PS, Excel component library source files:

At this point, the study on "how to build a Banner component library" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.