Website design analysis page details processing experience so that users will feel more intimate



page to see the details, from the view point of restructuring, page finesse, readability and scalability of the code, for the downstream service code comments, writing interface style, code compression, image optimization can be classified as the details of the deal, my understanding is that the details of the deal just mentioned is a basic skill for each reconstruction engineer should have, is not the true sense of the details, good details should be starting from the user, should be from the heart of a caring for the user. Here are two small cases, which are common sections of our pages. If we handle them carefully, they may make users feel more intimate.




pictured above, carousel map button (pictured box button) is user interaction on the important operating point into the carousel figure, the important degree of doubt, found that when analyzing the design draft, button clickable area is too small, only 22× 2! To switch to complete the picture of users is obviously a very painful thing, this will give users bring pleasure. So we have to find ways to make the click area larger,

possible solution:

1, the product is recommended for visual designers to change the buttons a little bit.


informs the product, we will use the code to enlarge the button first, gives the screenshot, lets the visual designer look.

is 3 pixels high, visual no problem, but the click area is still too small, as shown in figure


is 4 pixels high, and the click area is barely acceptable, but the visual designer feels the buttons are too large and the visual effects are poor, as shown in figure


results, designers still insist on using the original button size

if you re design the button, change form button? Obviously not feasible, the visual designer for a small change will not easily change the visual style, even if the designer to change after the draft design to give the product audit, through the audit and then give the reconstruction method obviously the cost of communication and change cost too high, the price is not high.

2, retain the original design, through the CSS to control

This kind of structure

carousel figure button we will write this:


to achieve the color area is 22× 2, the actual point area is 22× 12, two methods:

1, with the background: this color is relatively simple, solid color, square angle, style can be completely controlled, there is no need to use >

Leave a Reply

Your email address will not be published. Required fields are marked *