User experience: A brief talk on the image of the home page revision

Intermediary transaction SEO diagnosis Taobao guest Cloud host technology Hall

.

Some time ago in doing the whole station revision, including the first page, List page, details page, theme page, and other pages, the whole project lasted longer. A period of time ago, the new version of the image sent online, the first draft by the Onion classmate design finalized, later by my follow-up optimization, now just to print the home page as a starting point to do a design review.

NetEase Indian Image Faction (yxp.163.com) is the personalized product service platform introduced by NetEase company, which can print all kinds of digital products on the Internet. As the printing business continues to expand, a few years ago the design of the home page, whether in the interactive or visual has been unable to meet the existing business needs, so the home page revision is a matter of sooner or later to put on the agenda.

Home revision is a longer, more involved in the project, so must have a clear and effective project flow.

Project Flow:

1. Project Establishment

Product owner to write product plan, to determine the product market demand point and functional demand point, and the relevant business unit responsible for meeting to discuss the confirmation requirements, and then call the interaction, vision, front-end, development and other project related personnel to determine their respective task time points.

2. With research, interaction

Based on the data trend over the past one or two years, user researchers redefine the target user base and refine the product concept. Interaction draws product prototypes based on requirements.

3. Visual design

Visual designer to participate in the project meeting to understand the requirements, according to product prototypes and product function planning book for visual design. Visual design plays a connecting link in the whole project, it is necessary to communicate the product requirement with the product leader and communicate the page details with the front and back engineers.

4. Development

After the visual review is confirmed, the visual manuscript is followed by the development phase. This link takes the longest in the entire project, so the visual manuscript should be marked and Chettu before it is delivered, lest it be delayed.

5. Test

The front end test link is also very important, if you think the visual designer's work ends in the visual version of the manuscript, it is wrong, not to go online must not be lax, the testing phase of the problem is often the "pale gray bottom how to become white", "here how to offset 2 pixels" "Picture and text is not aligned", So want to achieve online effect and visual manuscript 100% match, often run to technical GG side of the manuscript is essential.

6. Online

After the on-line to pay close attention to data changes, based on data analysis, user feedback to make adjustments.

7. Follow up optimization

A successful product is generated in an optimized iteration, a validation process from design to user data feedback and back to design. #p # subtitle #e#

.

.

1. The old version of the first page of the visual style outdated, need to be fully packaged, enhance brand awareness.

2. Too many sections, the product area can not get a better display.

3. The old version of the navigation bar for the two-level full expansion of navigation, the full spread of navigation is the disadvantage of navigation will increase with the content of the longer, will lead to too long navigation bar, not conducive to browsing.

4. The page layout of the three column leads to information congestion.

5. The interactive operation of the carousel is not convenient and the visual style is not concise enough.

1. Image color of the re-refining

Users open a page, the first thing to see is color, the importance of the image of the site as the logo of the enterprise, a successful website image should be able to use the color of the user can be associated with the site. So the first thing the visual revision to do is the main color extraction, only to determine the main color to carry out other designs.

Product design should be rational after the perceptual. The first rational analysis of user attributes, and then perceptual grasp of the direction of the main hue, the following to see the image of the user data analysis:

Through the above analysis of user data, we can see that the main image of the major users of the 25-31-year-old young women, university degree, the income for 3k-5k. This kind of young female consumer's consumption ability belongs to middle level, have certain esthetic ability, so the key word that the main tone refines should be: Woman, fresh, fashionable, petty bourgeoisie, vigor.

The old version of the red saturation is too high, this large red identification is too low, the texture is not enough. Finally selected a slightly lower saturation, hue pink red, with a large number of white pages, the new red looks both woman and fresh, reached the above data analysis of the color requirements.

2. Re-planning the Forum

Abandon the official dynamic, micro-blog, buyers heat rating and other ribs, strengthen the focus on the rotation of banner, product promotion areas and other important sections, so that the product area to get a better display.

3. Navigation bar

The original navigation bar information confusion, simple icons. The new navigation bar to text information as the main design, and redesign icon, looks simple and refreshing, and the first level of navigation than the original two-level navigation is more conducive to post maintenance.

4. Page layout

Three-column layout can accommodate more information in one screen, common in large portal sites. The positioning of the Indian-like faction itself is different from the portal site, there is no vast sea of information, so should be in the limited home space will be better to show the product.

The old version of the three-column layout of the image is visually crowded and confusing, it is difficult to focus on the focus area in a short time, users can not clearly follow the page rhythm for effective browsing. So we need tailored, for the site positioning and capacity of the comb, select the appropriate page layout. #p # subtitle #e#

5.banner Carousel

The following figure shows that the old version of the banner-style of the operation is not user-friendly, the current frame and other frame distance too far, back and forth the cost is slightly higher.

Above is the front-end engineer GG to see the Chrome/ie6 browser under the wheel-style test effect, found that these 2 browsers can not fully support the visual version of the Carousel effect, and advanced browsers and IE6 under the different styles, it is really a depressing thing. Headaches, let's take a look at how other Web sites are compatible with multiple browsers:

Finally, you are welcome to visit the Indian image faction: yxp.163.com