Interactive Design Example: Taobao Mall homepage Visual design

Taobao home page today's navigation and revision, and the last time Taobao mall, the same, micro-Bo friend rushes gave a lot of advice, coarse and coarse seems to be mostly negative views. I have always thought that negative views will be raised and it is important that we can make constructive comments. Just now has left Taobao, but can openly say my opinion, right and wrong are please more advice.

This two-time revision, from the interaction is not a big problem. Home is a good, horizontal tab-oriented navigation, the left Longitudinal tab as a guide (non-level two navigation, such as two, preferably or horizontally), Taobao's current "main business", "auxiliary industry" said very clearly.

Mall home interaction More "brilliant" place, is the upper left corner of "all commodity classification." This interaction in the search results page can reflect its advantages, is a good reference (should be from Amazon).

However, in terms of visual design, two pages have some problems. Especially the large homepage of visual design, can be regarded as a major mistake.

We say " design = Problem solving ", and visual design is " solving logical problems with visual language ". To give a very simple example, if a thing is important, we will make it centered, white, enlarged, bold, and so on. Center (position), white (color) These are visual languages that we use to solve a logical problem-"important".

Visual designers in the design of the time, must firmly remember this sentence. Open PS before the heart should be very clear: I want to solve the logic of what is the problem? Then turn on PS and start selecting the visual language you have mastered.

Here I only take the home page of the mall as an example to specifically talk about its problems. Only said that the home page is because I know its designer is my apprentice Fei Fei, she is Taobao the most outstanding visual designers, but also I brought the most visual designers have Reiki one.

This is the current Mall home page (click to enlarge):

This page visual impact strong, primary and secondary clear, brand image expression is very rich in tension. In particular, the top of the large color block, used very bold, and the effect is excellent (no matter how the following banner how fancy, will not rob it).

But this page has two fatal injuries:

1. The search box is not obvious, there is "submerged" feeling;
2. The left-hand category menu, which plays the role of navigation, does not produce any visual association with the "dominant flight".

These two fatal wounds, seriously weaken the mall home the main function: Guide traffic.

All E-commerce site Home page, the flow of the guide function, are indispensable to these three: search, classification, recommendation. Search and classification is the user initiative self guidance, is the accurate flow. If this part of the flow is not very good grasp, will certainly be from the final sales figures to see the consequences.

Then we analyze the causes of these two problems separately.

Look at the part of the search box first:

Did you find the problem? Not yet? ^_^ This should be very obvious. Here are two white strips, one is a very useful search box, and the other is almost useless to leave white. They appear at this close distance (too close), and both sides are so heavy and so fancy that our eyes and brains will definitely classify them as a group. Notice that my argument is--" grouped together," which logically puts them into a category, is there any problem? Of course it was flooded.

To solve this problem is not difficult, but also the use of visual language to solve. For example, let them separate a bit in space, let one of the colors change color and so on.

Then look at the local menu:

We use the same idea to see which of these things are in a group? Obviously "Amoy brand" and "all categories of goods" are a group, the following menu is another group. From a logical point of view, is the question obvious?

Another problem is not so obvious, it is to be seen on the search results page, which is what I mentioned above "the brilliant interaction". When the user mouse hover on the "All Commodity Classification" button. The following gray category menu expands downward in the form of dropdown menu. So there is also an implicit logic problem to be solved, that is, "button" and "Pull-down menu" are a group.

This is my modified effect chart (click to enlarge) to see if it's better:

A total of small changes:

1. Add a gradient background so that the white strip below the search box is gone;
2. Move the search box up a little, and keep pulling the distance from the bottom blank. In this way, it will not be flooded;
3. Menu icon changed to red, and the top of the navigation echoes, forming a group;
4. Moved the menu up to 10 pixels, dashed into the large color block, and added a little bit of projection, reflecting its "drop down menu" feature.

So visual design actually solves the problem of interaction--or, to say the least--a logical question.

Some designers have been doing web design for several years or even more than 10 years, but still think that web design is an art problem, which is wrong.

Taobao Big Home page of the problem will not say, we are interested in words can follow the discussion, but also want to see it as soon as possible to improve.

Taobao's designer has been the industry's thousand Select Elite, practical experience, if the entire team's "design Philosophy" and "design philosophy" of the right direction, will be able to continue to maintain the position of leader.