Internet product design: Cut Figure Tips "point nine" cut the map with less effort

Intermediary transaction http://www.aliyun.com/zixun/aggregation/6858.html ">seo diagnose Taobao guest cloud host technology Hall

User hands to see the product interface, not the designer to create the effect of painstaking, but a separate Chettu through the development of students technology. Chettu as a bridge between designers and developers, its role is very critical, the appropriate Chettu, accurate location can maximize the reduction effect of the design, exquisite Chettu will have a multiplier effect Oh!

We often do a Chettu known as "Point Nine", what is "point nine"? Point Nine "is a special form of the Android platform for processing pictures, which is called" point nine "because the file extension is:". 9.png ". "Point Nine" is also a unique technology developed because of the need to fit the various resolutions of the Android platform. It can stretch the picture horizontally and vertically, while preserving the pixel fineness, the gradient texture and the original size of the fillet to achieve the perfect display under the multiresolution, while reducing unnecessary picture resources, it is a sharp weapon.

"Point Nine" of the production tool for "Draw9patch", the specific production steps here is not much to say, the first spot tips: Discard this production tool, reduce the cumbersome steps, not every picture is dragged to the tool to draw! You can draw it directly with a ps+ pencil.

"Point Nine" is of course a big one, but Android Chettu not only need to be clear about the "point nine" approach, but also all sorts of other tips. Here are a few of the lessons I've summed up about Chettu in my work.

(a) The development of the point of view to cut the map

Understand how technology is implemented, just like understanding a development classmate, more understanding, will make the work smoother.

As a "point nine" figure for the next Picture button, some students may do this:

This is a "dot nine" picture with a high degree of tension, and the content display area is the entire button range. button effect diagram, text is vertically centered, the development of students to get this "point nine" picture, will be written in the Code center of the attributes, this property is set to make the text in the vertical center of the button. Speaking of which, are you aware of the problem? Let's take a look at the effect of the implementation.

Designers who have pixel eyes immediately realize that the text is down. Then find a development classmate adjust the position of the text, "the text up n pixels, not centered" and so on, this is a very frequent dialogue, development alumni add code to fine-tune the position of the text to achieve the effect of the chart. Did it work out? In fact, we are wrong.

When we understand the development of the students to implement the method, we can try to use the reverse method to verify the "point nine" picture is still more accurate possible.

As shown above, the red area in the design effect chart is the text typesetting area, the idealized position, the height of 1 and 2 is equal, and the height of 3 and 4 in the implementation effect chart is equal. The problem has arisen! When we draw a point nine, the height of the projection is also painted in, so the visual text on the down.

Our usual drawing should be:

1. In the case of a height not stretching, point one pixel in the blank area.

This is the common custom with the development of students, with tacit understanding that this button height does not stretch, and is stretched, stretching is a blank area, visual will not cause impact.

The contrast is shown in the picture:

2. The height of the content display area should avoid the projection area, which can guarantee the center of the text vision.

The content display area of the "dot nine" picture, I like to call content typesetting area. In the process of Chettu, you will find different scenarios, always think of the results you want, through the careful treatment of this area, you can better for the content of the image to do typesetting. This development students as long as through a number of simple attribute settings, you can achieve the precise layout of the effect map. At the same time reduce unnecessary development, streamline code, improve product performance, add up, bring users a better experience.

(b) Choose a better Chettu approach

When we encounter alien or more complex Chettu, we often need to put aside the inherent thinking program to find a more suitable Chettu way. For example, for the next figure floating layer Chettu, we can also use our weapon "point nine" Mody?

First of all, analyze the characteristics of this floating layer: one is the translucent gradient has a thickness and projection effect; the other is the triangular shape, and the position is not fixed. In the Chettu when the first walk a little detour, with the inherent thinking of the floating layer into the upper and lower two parts, the following square made "point nine", the above triangle a single cut map, with the way to achieve the stitching. This is in line with the development of the students of the atom split design pattern, the changing parts are removed and encapsulated, so that the other parts are not affected. So the development of students soon to achieve, but the effect is unsatisfactory. We can actually expect, because there is a projection effect up and down stitching must overlap, so the stitching will have an obvious line.

So what do we do? After the designer's further thinking, finally found a more suitable Chettu way:

Split the left and right into two "point nine" picture, so that can ensure the effect of the connection, but also flexible triangular point of position. Think about how to Chettu, but also to communicate with technical students can achieve, measuring the cost of implementation. Finally, it is gratifying to realize that the effect is not in any discrepancy with the design effect chart.

(iii) Minimizing the size of resources

Chettu as much as possible to reduce the size of the resource, for product installation package thin body.

1. "Point Nine" picture stretching 1 pixels and stretching 10 pixel effect is no different, so try to reduce the size of the picture.

(In the above example, in order to keep a clear view, do not shrink to the minimum, in the actual work can be a little attention.) )

2. When we encounter the texture of the background or texture of the button, the cutting principle is: to find the texture of the law, with the smallest Chettu to tile, you can imagine the principle of superposition of patterns.

The first texture background, such as input into the input of the interface, different stationery, we use the smallest possible Chettu to tile and achieve. The following figure:

This is our input method stationery Chettu, follow the principle of minimum Chettu, according to the rules of different textures to the smallest Chettu, so you can see that the Chettu size of different textures is not the same.

The second kind of textured button that we normally do:

Our goal is to divide the button into three sections, retaining the left and right rounded corners, to find the middle texture can be reused tile parts, colleagues ensure that the middle texture can be seamless with the left and right two graphs, so that the length of the button becomes controllable, can be applied to different scenes.

First find the pattern of the texture, where the diagonal texture can only be Checon to 3px map, and then use the texture picture to try the left and right rounded corners, connected to the fillet part of the texture is successful. When you encounter other types of texture Chettu, ideas can be reused.

3. The appropriate compression of the image quality, in monochrome or without excessive effect can be stored as PNG8 bit or index mode.

Here is no example.

Summary

Designers in the provision of design standards after the unhappy implementation of the results are not satisfactory, as far as possible using some cutting tools to help your design to achieve 0 differences in the presentation, but also to help develop students to reduce a lot of unnecessary development burden, for the product itself also has to improve the speed of many self-evident benefits. Let the designer classmate and our dear development classmate become more intimate and tacit cooperation partner!

Above for the work of the Android Chettu a little experience, such as errors or deficiencies, please correct me, but also welcome to share more Chettu experience and skills.

Reprint please specify from "Baidu Mux"