nternet product design cutting tips point nine map multiplier



users see the product interface renderings are not designers make painstaking efforts of creation, but a single slice through the development of technology students. Map as a bridge between designers and developers, its role is very important, appropriate and accurate cutting position can be design to maximize the reduction effect, exquisite cutting will have a multiplier effect Oh!

We often do a

known as the "Nine" figure, what is "Nine"? "Nine" is a special form of Android platform for image processing, because the file extension ".9.png", so called "nine". Point nine is also a unique technology developed for the needs of Android platforms with multiple resolutions to be adapted. The pictures can be arbitrarily transverse and longitudinal tensile, and retain the original pixel size precision, gradient texture and rounded, to achieve the perfect display multi resolution, while reducing unnecessary image resources, can be described as cutting tool.

production tools "point nine" to "draw9patch", the production of specific steps here will not say, no tip first: to abandon this tool, reducing the tedious steps, not every picture onto the tool draw! The direct use of ps+ pencil can draw oh.


nine" knowledge of course, but that Android not only need to clear "nine points" method, there are a variety of other tips. Here we share a few I summarized in the work on that experience.

(a) from the perspective of development to map

understands how technology is implemented, just as understanding a developer and getting to know more about it will make the job easier.

, such as the "button nine" diagram for the following button, some students might do this:


this is a high degree of left and right stretch of the "point nine" picture, the content display area for the entire button range. Button effect chart, the text is displayed vertically, the development of students to get the piece of "Nine" pictures, property will be written on the center in the code, this property is set to the text in the button of the vertical center position. Speaking of this, have you noticed the problem? First let’s see how it works out.


designers with pixel eyes will immediately notice that the text is biased. And then find the development of students to adjust the text position, "the text to N pixels, not centered" and so on, it is very frequent dialogue, development of students will increase the code fine tune the text location in order to achieve the effect of map effect. Circle of events >

Leave a Reply

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