This article says the actual problem, so it's not much to emphasize, the following are some of the more salient details I have summed up, and I have always thought that these problems are more serious, because these are basic problems, it is easy to solve, but the neglect of the formation of a habitual "experience" that the "Cup", However, these details also represent your http://www.aliyun.com/zixun/aggregation/7130.html "> work Attitude" in varying degrees. 1) Adjusted Flash
When the size of a bitmap is adjusted, under normal circumstances will leave 1px of burrs (if you notice), the boundary will become blurred, if continue to adjust the ambiguity will increase, the problem is too insignificant, so that you can not use the naked eye to draw, we first use the product picture to give examples:
Maybe a small picture is not enough to make a note, the following comparison of a list and large image, of course, unless you deliberately want this effect. Enlarge twice times after contrast enlarge twice times contrast again don't try to adjust the picture with border, it is best to draw their own, this face two contrast chart without amplification can see the whole problem: 2 about border and background
some blocks need to be embellished with a border there is a block of text blocks, and so on, the suggestion of text block plus border with the background color of the same base to fill the block, otherwise the content will be empty, the picture plus the border, if it is the CSS defined border is best to add spacing distance, because the picture is not fixed, So it may appear that the background color is not in harmony with the border, serious will cause the effect of the flash, the following in a few examples: text border background: Because the block has a border after the background and the background color is the same, so feel empty, so it is best to block plus background, and the background color and the border is preferably the same base colors. White background, the background should not be too deep than the border, and then try to adjust the color of the block content and background fusion also does not help, the border has become a rough edges. Use a highlighted border in a dark background. About picture borders, the picture itself has a background, and the color is diverse, in the picture to add a border with the picture background is also the same color background, and it is best to take the color of the image at the edge of the deep base, if there are many colors on the edge, take the most color, example: If the border is defined with CSS, and is the graph column , the analogy is a product list, and the list of product categories and background colors are inconsistent, there will be borders and backgrounds with the same color or uncoordinated, such as:
The color of the border of the picture in the middle of the diagram is not coordinated, and if the picture is indeterminate, it is best to add a border between the picture and the border.
In the dark background to see the effect of the dark background can have two options, one is to remove the outer frame, white spacing border, and the second is to highlight the outer frame, leaving the same color with the background spacing. The following figure: 3 about margin and alignment
designers look for inspiration, occasionally randomly, free to drag the block, fill, draw, etc., until satisfied will stop, in the process will appear with the "experience" of the small loopholes, such as: The following picture surface looks no problem, look at a little awkward, enlarged can be seen clearly, navigation text is high, The search box is not aligned with the navigation and there is a problem with the button icon distance in the search box.
after adjusting the following figure: Look at the following example: above the block up and down spacing between the upper and the right spacing is not symmetrical, and the first few examples, the text and the block vertical spacing is not coordinated, the following figure is the result of the correction. Looking at a set of boxes to the picture effect: In view of the column spacing:
the following chart looks fine, but there are two details (one of which should be a user experience problem). First column and second column spacing is smaller than the second column and the distance to the third column 2px, for this problem, some people will say that the gap with the definition of CSS unified, there will be no difference! Attention, we are talking about visual design, can not throw this problem to the front, or you lost behind the more (believe me), followed by the longitudinal spacing too small row too tightly. Adjusted after the following figure: 4 about shadows and textures:
in the design of decorative suites need to have depth and 3D texture, you may use the projection, shadow, light and other effects. But web design and print ads are different, too strong, too hard texture will only make the page look rough, the Web page is a very meticulous work, or that sentence, here only to say the details, first look at the picture: The shadow to a small, color to shallow, and in fact there is a problem, and the front of the border, If the picture is the same as the projection color (or background color), the effect will be very awkward, so you want to frame the picture with a spacing distance: Theoretically, it is unrealistic to cast or shadow an element without texture. Some of the shadow effects mentioned earlier, the element itself does not have any texture. Look at the following example: the above Picture button and the price block projection has no quality, the following image modified: In fact, the shadow and texture is associated with the overall style of the site, in some cases it is better not add up. On the dark background of the texture, shadow and projection is not realistic, so only with light or light texture to achieve. Said here, no time to go down, I want to tidy up the east, above all just you may not pay attention to the small details of the problem, you notice I will not say. Source: http://www.zhouwenqi.com/blog/board_43.html
