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, record map, label bar, advertising space, product recommendation; We can deliver the design prototype to R&D for development.
So what is the function of storefront decoration?
Shop decoration can first change the layout of page components, such as the location of label bar and advertising space; You can add or subtract components from the page, add coupon components to the home page, and delete carousel components; You can also define different components. Style, carousel can choose 3 or 4, and label bar can choose single line or multi-line.
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, generate the page. 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 renovation of the store, indicating 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, CMS system and storefront decoration
The relationship between CMS systems is called content management system, which is suitable for many industries, and CMS system is applied to e-commerce industry. Became a storefront 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 e-government, and it is also a relatively new market. There is no uniform definition of content management 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 to manage content; And these contents are placed in various pages of the 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. The requirement of high technology is that we can't make full use of CMS system in many cases, and different products have different designs because of different businesses.
This paper will summarize the design methods and means of shop 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. First consider how to decorate the house:
1。 The house has just been covered by many rooms, and the decoration of different rooms is definitely 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 beautiful room.
2。 When we choose a good room, we must transform it. Before the decoration, we need to do one more thing, that is, buy furniture and decoration materials. Now to decorate the toilet, you 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 the ordinary toilet on the market, whether it is a gold toilet or a silver toilet, that is to say, we can have a variety of choices to decorate items.
The store decoration function of e-commerce system is actually the process of decorating the house, but the house has become our product, the room has become a page, and the decorative items are components.
When we decorate the house, we must consider what we need in advance, and then buy it back for decoration. This is also the most important step. House decoration is divided into three steps: house and room determination; The key is what to prepare, because the goods are bought, there are all kinds of goods, and the price of the goods determines the luxury of the house.
Similarly, 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 codes, and calling them directly when we use them. Because you can't create new components by 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, and product is a component. Each component has many styles.
Below, according to the process of decorating the house, we look for the process of storefront decoration and what needs to be prepared.
1。 First of all, we have to choose the page to decorate, whether it is the home page, the details page or the list page, etc. The layout of each page is definitely different.
There are several questions to consider when choosing a page: Can you refresh every page and refresh every page? These are all existing web pages, and I can create a new decorative page. 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 turntable and where to put the advertising space are all issues we need to consider.
This is to choose components, provided that we have components, that is to say, we need to define styles and rules for each component when designing products. After writing these components into the system, we can call them. .
3。 After finishing the layout, we selected the style and configuration information of each component.
For example, if we choose a carousel, how many, three or four will we choose; After choosing a good style, we need to configure specific information: we want to upload pictures, and then set the links of the pictures. Click on these components to jump to other pages. Different components need to be configured with different information, depending on the components themselves.
Abstract: Component definition rules must be defined in advance. Decoration is divided into three steps: select/create page component layout component configuration.
The following will focus on the main content of the article. I will first introduce the styles and configuration information of different parts, and then introduce the details of the store decoration process.
Third, the component type.
The richness of component types determines the decorative effect. The more components, the more optional decoration.
For example, with the iteration and improvement of products, commonly used components will continue to increase. Designers will iterate according to specific needs, 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 turntable, picture window, picture exhibition, icon group, audio player, coupon.
The following 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 methods of design, and then sum up the knowledge with your own experience.
The core of the component is to configure the component style and information, which mainly depends on what I write in the text. More important configuration information is sometimes too complicated to use.
The complexity of component configuration can also be simply designed according to 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 page content is not too much, the top navigation bar can only display the title, and the top search bar is fixed at the top; When the search bar clicks on the search area, you need to jump to a separate search page and search results page. The information to be configured in the search column 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. Search box background color User search text color Search box style: right angle, arc, rounded corner
3.2 search bar
The search bar is similar to the top search bar, except that the position of the top search bar fixed on the 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 announcement
Announcements are similar to banner advertisements. It is usually necessary to incorporate the product into 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 in e-commerce system is commodities. In e-commerce system, there are two main forms of commodity display: @] Commodity list Commodity details are undeniable, and commodity details are the main location for displaying commodity information, and users' purchases largely depend on the design of commodity details pages. 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 to configure. The main configuration information is:
List style: single-column display, double-column display and three-column display, displaying the list 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 entered by category and product group.
3.5 Business Groups
Select merchants: the selected merchants are similar to the selected commodities, and can be obtained directly from the list of merchants or by classification.
3.6 list navigation
List navigation In most cases, the page used by the personal center is the entrance of many functions, and the list title and link address need to be edited. You can add multiple lists; You can also choose different styles, such as not adding icons or "view" prompt text.
3.7 rich text
Rich text editors are not used much, mainly in some places where deviation is introduced.
3.8 button group graphics
Button group is mainly used in the main page, such as the bottom of the family carousel, which can be the entrance of multiple categories or 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
Buttons have no icons, and the main application scenarios are the function categories under the module, such as my points and the exchange records under the points.
3. 10 Single picture
Single big picture component, which is mainly used for the introduction page of special events, and enters the list of special events through links.
3. 1 1 image conveyor belt
Rotate pictures for each main page, and set the number of pictures and link addresses.
3. 12 coupon
Coupons are usually not designed according to the following styles and have no practical significance. Usually, you can link coupons with pictures, or design various coupon styles, choose different styles, and automatically fill in the content when choosing 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 diagram I said above is just an understanding, 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 method, which requires high technology. There are basically two ways to use it now:
Docking third-party plug-ins: This method is convenient and does not require research and development. The disadvantage is that the functional logic is complex, so 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 you can define the style and rules of components by yourself, which greatly optimizes the user experience and operability, but the disadvantage is still high cost.
Fourth, the shop decoration process
Shop decoration is to select the shop page first, and then configure the component information.
4. 1 select pages: which pages need to be decorated? Which pages don't need to be refurbished?
When we start to decorate, the first step is to choose the page to decorate. In theory, all pages can be decorated, but in fact, we don't need to decorate so many pages. Because the decoration of many pages is meaningless, we should first consider which pages need to be renovated and which pages do not need to be renovated. 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 refurbished. Before we define the pages that need to be updated, we need to consider our work. What was the initial idea of the storefront decoration function? We opened a shop. Why do you want to decorate?
Because beautiful appearance can attract customers, if our interior is beautiful, then customers will think this store 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.
So before deciding which pages need to be renovated, consider which users come to our store and which pages are important for users to buy. Because the purpose of decoration is marketing, the purpose of marketing is to make money, and making money does not depend on whether the user buys it, so it is necessary to consider which pages of the shopping center are very important for the user's final purchase.
We can put ourselves in the shoes to think about what you want to see when you buy things on Taobao, what information you think is important and what information is decisive for your final purchase; What pages do you often contact are good, the so-called thinking about user scenarios.
The first is the home page, which is the first page and page for users to enter the mall. This page is equivalent to the appearance of a shopping mall-an important page, no one, absolutely no one. There is a lot of information to display on the home page. Many activities, including the theme porch, are displayed on the home page, so the home page needs to be renovated.
Sometimes I may stay on the home page for a while to see what I am doing recently; And the configuration of the home page needs to be based on specific marketing needs. For example, the festival will hold some special activities and new products. Recommend to the home page.
Before entering the product details page, we sometimes need a page, which is the category list page. This page is only used as a channel. In some small-sized mall system, the bottom navigation bar is classified, but in fact, in a slightly mature mall system, classification will not occupy the bottom navigation, so the classification page does not need to be renovated.
Some people may say that the product details page needs to be renovated. Let's talk about the product details page, which is the product details.
Yes, the word "information" is well used and needs to be tested.
Because what does it depend on whether we buy or not?
Some people say that this is a demand, but it is meaningless and exaggerated. This is a very broad concept and cannot guide us to make specific decisions.
Although as a product manager, I never put demand in my mouth. There is a general demand in the industry. As we all know, there is no need to explain it over and over again. Since users come to the details page, it is definitely needed; Even if he doesn't come, he needs it. Even if he doesn't need Taobao, he needs it.
What exactly do you want to buy? This depends on the understanding of the product, that is, the understanding of product information. If I have to spend a lot of money to decide what to buy, I believe I know it before I buy it.
The core information of the details page has two parts: product information introduction and product evaluation, so the display of these information will have some fixed formats and cannot be changed at will. If you change the details page at will, it will cause users to interfere with information acquisition, thus affecting users' final purchase;
When entering the mall, one of the components we often use is the search function. Compared with the products we want, direct search seems more convenient, and all search results pages need to be refurbished.
The shopping cart page is also a page we often use, and the shopping cart needs to be refurbished. As for the personal center, there is no need to renovate it.
At the same time, for the needs of special activities, store decoration needs to support custom pages and use display pages as special products. Of course, there is no necessary connection between custom pages and special events. Custom pages are used to create pages and special events. The display page can also be built into the template.
4. 1. 1 How to determine which pages need to be renovated and which pages do not need to be renovated?
To determine which pages need retouching. We can think from these aspects:
User contact frequency: The higher the contact frequency, the more we need to decorate (home, shopping cart). User Stay Time: The longer the user stays, the more the page needs to be refreshed (home page). User click frequency: The higher the probability of users clicking on a page, the more decorations (search result pages) are needed. 4. 1.2 How to judge which pages do not need decoration (do not need decoration, let alone change, iterative optimization)
Information complex pages: These pages generally have a fixed format of user display information (details page, personal center). Pages not closely related to the product: (Help, Settings).
4.2 Configuration Component Information
Knowing which pages have been decorated and which components have been repaired, the next step is to enter the page configuration (knowing which houses and materials are available, the next work can be done).
Select the page and then configure the component information, and finally generate the whole page and synchronize it to the system, which needs to be realized in the interactive design of specific products; It depends on how you lay out the page, how you drag and interact.
In my opinion, how to put the above information into specific product design for everyone to see and feel.
Refer to the picture I cut above, which is basically similar to the preview picture on the left and the component on the right, then fill it in and finally save it.
Five, the specific product design method of shop decoration
First of all, the background menu structure and store decoration function can be taken out separately or put in the promotion module, depending on the complexity of the system.
If the decoration function is particularly simple, for example, you can just adjust the position of components on the home page. If you can only adjust one or several components, put them into the promotion module.
If the effect of storefront decoration is only to place advertisements, or to build pages for special activities, the function of storefront decoration is relatively simple. Just put it in the promotion module. There are only two menus, as follows:
5. 1 is built into the promotion system.
Promotion System-Advertising Display Location
After entering, it is a preview of the system page, showing the usage of advertising space, and you can edit pictures and link advertising space. .
Promotion System-Special Event Management
The so-called special event is an extension of the promotion activity, which I mentioned in the last article; After entering, you can see the modules of the special activity page, and the style of each template is absolutely different. Even a template may have multiple pages (templates with a bottom navigation bar). After selecting the module, enter the configuration mode of the page, which is step 4.2 above. You need to upload products, pictures, etc. It depends on the style of the template you design.
5.2 Because the store decoration system exists independently.
As a storefront decoration, the menus and functions are as follows:
1 level menu: system page management
The secondary menu displays the system pages that can be used for renovation. Click the page to enter the page configuration interface. (see 4.2)
1 level menu: Customize page management
The secondary menu displays the system pages that can be refurbished. Click this page to enter the page configuration interface. (see 4.2)
Level 1 menu: Create a custom page.
Click to enter the configuration interface of the page, which is just a blank page. (see 4.2)
describe
You can think about it. What's it like to have an independent system? Nothing is more useful than embedded promotion. As an independent system, it should contain 5. 1, followed by advertising. How to carry out and hold special activities?
You can add advertisements and set jump links anywhere on the configurable page, regardless of the page format.
Tubatu Online provides you with "every decoration quotation, 1-4 local decoration companies, 3 sets of decoration design schemes" and the decoration pit avoidance strategy for free! Click this link:/Zhu Ye /zxbj-cszy.php? to8to _ from = SEO _ zhidao _ m _ jiare & amp； Wb, you can get it for free ~