"In real life, stores need to be renovated; The same is true of e-commerce. It is necessary to complete the "store decoration"-the design and layout of each column through CMS system.

I wrote two articles about e-commerce system. Article, this is the third article. This paper introduces the store decoration function of e-commerce system. Simple store decoration is the dynamic configuration of the page. For example, the layout of our application homepage from top to bottom is as follows: search bar, recorded map, tab bar, advertising space, product recommendation; We can deliver the design prototype to R&D for development.

so what is the function of store decoration?

The layout of page components, such as the position of the label bar and advertising space, can be changed first in the shop decoration; You can add or subtract components from the page, you can add coupon components to the home page, and you can also delete carousel components; You can also define different components. Style, carousel map can choose 3 or 4, and label bar can choose single line or multiple lines.

it can be seen that the process of store decoration is actually me. The process of drawing a prototype. First, define a page, then define components and design the style of components; Finally, the page is generated. However, the store decoration will write this process into the system program. After modification, the system becomes a modified system.

at the same time, it can be seen that the system code was modified during the store decoration process, which means that the technical requirements are relatively high.

in fact, store decoration itself is a CMS system, and store decoration is only a part of the application of CMS system in e-commerce system.

first of all, the relationship between CMS system and store decoration

CMS system is called content management system, which is applicable to many industries, and CMS system is applied to e-commerce industry. It has become a store decoration.

Let's take a look at the definition given by Baidu Encyclopedia: CMS is the abbreviation of "content management system", which means "content management system".

Content management system is the new favorite of enterprise information construction and electronic affairs, and it is also a relatively new market. For content management, there is no uniform definition in the industry, and different organizations have different understandings. There is no uniform standard in the content management system industry, but we know that it is management content; And this content is placed in various pages of e-commerce system. The content management of e-commerce system is also called shop decoration, and the technical application of shop decoration is CMS technology.

at this stage, due to the different needs of different products and companies, we see that many products have different store decoration functions. Some products can only adjust the layout of page components. Some products can only configure the home page. High-tech requirements are reflected in the fact that many times we can't make full use of CMS system, and different products have different designs because of different businesses.

this article will summarize the design methods and methods of store decoration. Having a good method may not make us invincible, but it is better than nothing.

second, how to design a shop decoration

The dynamic configuration of e-commerce system pages is called shop decoration because this function is similar to the decoration of our home. Before introducing the decoration of the shop, we were the first one. First consider how to decorate the house:

1. The house has just been covered by many rooms, and the decoration of different rooms must be different-the living room needs to put TV and the test needs to go to the toilet, so we have to choose the home page. A nice room.

2。 When we choose a good room, we must renovate it. Before decorating, we still need to do one thing, that is, buy furniture and decoration materials. Now we are going to decorate the toilet, and we need to prepare toilets, trash cans and toilet paper.

3。 When we are ready to go to the toilet, we must consider such a question: what kind of toilet to use, the latest fully functional Japanese style, or ordinary toilets in the market, whether gold toilets or silver toilets, that is, we can say that we can have a variety of options to decorate items.

The store decoration function of e-commerce system is actually the process of renovating the house, but the house has become our product, the room has become a page, and decorative items are components.

when we decorate the house, we must consider what we need in advance, and then buy it back to decorate it. This is also the most important step. There are three steps in the renovation of the house: the house and room are certain; The key is to prepare what items, because the items are bought and there are various items, and the price of the items determines the luxury of the house.

For the decoration of e-commerce stores, preparing components is also the most important step, that is, defining the styles and rules of components, writing them into code, and calling it directly when we use it. Because you can't create new components yourself, we can only choose the required components from the existing component library of the system. We can customize the style of components, and different component styles have different rules.

so what is a component? A component is a unit. For example, carousel is a component, search is a component, a product is a component, and each component has many styles.

Next, we look for the process of store decoration and what needs to be prepared according to the process of house decoration.

1。 First of all, we have to choose the page to be renovated, whether it is the home page, the detailed page or the list page, etc. The layout of each page is definitely different.

there are several questions to consider when selecting pages: can you refresh every page and refresh every page? And these are existing pages, I can create a new page for decoration. If it is a new page, this page is not part of the system, how can I contact the system?

2。 After selecting the page, we must select the layout and the components of the layout. Take the home page as an example. Where to search, where to put the carousel and where to put the advertising space are issues that we need to consider.

this is a component selection, provided that we have components, which means that we need to define styles and rules for each component when designing the product. After writing these components into the system, we can call them. .

3。 After we finished the layout, we chose the style and configuration information of each component.

For example, if we choose a merry-go-round, how many, three or four will we choose; After choosing the style, we need to configure specific information: we want to upload the image and then set the link of the image. Click these components to jump to other pages, and different components need to configure different information, depending on the components themselves.

summary: component definition rules need to be defined in advance; Decoration is divided into three steps: select/create page component layout component configuration.

the following will focus on the main contents of the article. I will first introduce the styles and configuration information of different components, and then introduce the details of the store decoration process.

Third, component types

The richness of component types determines the decorative effect. The more components, the more optional the decoration.

for example, with product iteration and improvement, common components will continue to increase. Designers will iterate according to specific requirements, and the definition of components is inclusive. Many things can be defined as components with variable granularity. Two functions can be used as components, and activities can also be used as components.

Common component forms:

top search bar, search bar, announcement, product group, business group, auxiliary navigation, list navigation, rich text, title bar, guide line, auxiliary blank, button group graphics, button group text, single picture, picture carousel, picture window, picture exhibition, icon group, audio player and coupon.

Here is a description of the component configuration. The system is still being optimized, and there may be some functions that you can't understand. But that is not the point. The key is to understand the logic and method of design, and then combine it with your own experience to sum up your knowledge.

the core of the component is to configure the component style and information, which mainly depends on what I write in the text. Configuration information, which is more important, is too complicated to be used sometimes.

the complexity of component configuration can also be designed simply, depending on specific requirements.

3.1 top search bar

the top search bar is embedded in the top navigation bar. If there are more pages, you need to embed them to provide more space for the pages.

if the content of the page is not too much, the top navigation bar can only display titles, and the top search bar is fixed at the top; When the search bar clicks the search area, you need to jump to a separate search page and search result page. The information that needs to be configured in the search is:

Add button: you can choose not to add it; If the Add button is selected on the left or right side of the search bar, you need to upload the button icon and icon color, that is, the link address of the icon. Icons can also be replaced with pictures. If you use pictures, you don't need to set the background color. This button can be used to set the left button or the right button. Background color of search box User search text color Search box style: right angle, circular arc, rounded corner

3.2 Search bar

Search bar is similar to top search bar, except that the position of top search bar is not fixed and can be placed freely. Similarly, search pages and search results pages need to be defined in advance.

3.3 announcements

announcements are similar to banner advertisements. Usually, it is necessary to include products in the system, jump to article details or freely set links.

3.4 commodity group

commodity group is one of the more complex components, because the most important thing for e-commerce system is commodities. There are two main forms of commodity display in e-commerce system: @] product list Product details are undeniable, and product details are the main position to display product information, and users' purchase depends on the design of product details page to a great extent. But before entering the product details page, the first thing to face is the product list page. The quality of the product list page determines the probability of users entering the details page. Therefore, the product list component is more complicated when configuring. The main configuration information is:

list style: single column display, double column display, three column display, and the list is displayed for the first time (this is mainly the product list display form). Product selection: the selected products can be directly obtained from the product list, or the product group can enter the

3.5 merchant group by category

Selecting merchants: the selected merchants are similar to the selected products, and can be obtained directly from the merchant list, or can be obtained by classification

3.6 list navigation

List navigation In most cases, the pages used by the personal center are the entrance points of many functions, and you need to edit the list title and link address. You can add multiple lists; You can also choose different styles, such as not adding icons or "View" prompt text.

3.7 rich text

The rich text editor is not used much, and it is mainly used in some places where deviation is introduced.

3.8 button group graphics

The button group is mainly applied to the main page, such as the bottom of the family carousel map, which can be the entrance of multiple categories or the entrance of sub-modules; Define the text of each button, upload the Icon, and then set the jump link. You can set multiple lines.

3.9 button group text

The button has no icon, and the main application scenario is the function category under the module, such as My Points and the redemption record under the Points.

3.1 single picture

The single large picture component is mainly used for the introduction page of special events, and it can enter the list of special events through links.

3.11 Image Carousel

Carousel image, used for each main page, set the number of pictures and link address.

3.12 coupons

coupons are usually not designed according to the following styles and have no practical significance. Usually, you can use pictures to link coupons, or design various coupon styles, choose different styles, and automatically fill in the content when you choose coupons.

Description of component definition and design

The more types and styles of components, the better, but the fewer configurations of components, the better. The richness of diversity determines the flexibility of decoration. However, the configuration confidence of components should not be too high. If it is obtained automatically, it can be obtained automatically. The picture I mentioned above is only understood, because a lot of configuration information is useless, and the main logic is to understand the logic of CMS system.

The function of store decoration is a marketing tool, which also requires high technology. There are basically two ways to use it now:

Docking third-party plug-ins: This method is convenient and quick, and does not need research and development. The disadvantage is that the functional logic is complex, and it can't have a good user experience, which is not conducive to future iterations and can't be very suitable for the company's business. Independent development: The research and development cost of this method is very high, but the advantage is that the style and rules of components can be defined by themselves, which greatly optimizes the user experience and operability, but the disadvantage is still high cost.

fourth, the shop decoration process

the shop decoration shop is the first choice of the page, and then configure the component information.

4.1 choosing pages: which pages need to be decorated? Which pages don't need to be refurbished?

when we start decorating, the first step is to select the pages to be renovated. In theory, all pages can be renovated, but in fact we don't need to decorate so many pages. Because the decoration of many pages is meaningless, we must first consider which pages need to be refurbished and which pages do not need to be refurbished. This is very important to us.

because it directly affects research and development costs and product design, such as some related pages, the personal center page does not need to be renovated. Before we define the pages that need to be renovated, we need to think about our work. What was the initial idea of the store decoration function? We have opened a shop. Why should we decorate it?

because beautiful appearance can attract customers, if our interior is very beautiful, then customers will think this shop is very good; In other words, the original intention of our store decoration is for marketing needs, and our purpose is to show users what they want to see.

therefore, before deciding which pages need to be refurbished, let's consider which users come to our store and which pages are important for users to buy. Because the purpose of decoration is marketing, and the purpose of marketing is to make money, making money does not depend on whether users buy it, so we must consider which pages in the shopping center are crucial for the final purchase of users.

We can put ourselves in thinking about what you want to see when you buy something on Taobao, what information you think is important, and what information is decisive for your final purchase; Which pages do you often contact is good, the so-called thinking user scenario.

first, the home page, which is the first page and page of users entering the mall. This page is equivalent to the appearance of a shopping mall.