Uidesign theory-Gui Principle 3-skin Skin

Originally, the skin should be placed in the final stage, including Vector Fonts, channels, filters, and so on. However, most UI designers care about icons and skins, so they put this section above. I have studied the skin in depth, including the implementation principles of windowblinds and stylexp, and most of the luxury software.

The most important technology in skin-jiugongge

I don't know what the specific term is like. I always call him "jiugongge", which is a 3*3 grid. The style of a whole image is 9 blocks in the horizontal and vertical way. Some software sets the split width
(Left, top, right, bottom), I think it is more accurate to call (toleft, totop, toright, tobottom. The principle of separation,
You need to try the image to make sure that the rounded corner is around, and the area in the middle is continuous or gradient color.

Split the nine cells of the button in stylebuilder

All kinds of Software generally use left and right, but I think it is more appropriate to set toleft and toright here, because right is the distance from left to right, toright is the distance from the point to the right. Windowblinds is the same as this.

Sizingmargins
The first and most important attribute that is derived from the jiugong Lattice-sizingmargins, type structure, field toleft, totop, toright, and tobottom. The value must be greater than or equal to 0. This value must be determined by the graphic designer, not by the programmer.

 Sizingmargins Value
Sizingmargins has four field types: Unsigned short. The values can be different, depending on the image style.

Two variants

If the left and right sides, or the up and down values are located at 0, two variants are generated. The most common one is the apple button. Because it is an inverted rounded corner, the rounded corner cannot be reduced. Therefore, the area on the left is merged, that is, Area 1, 4, and 7 are merged to area 4. The value of totop and tobottom is 0.

A special case

Generally, checkbox and radiobutton are both small charts and do not need to be scaled. Therefore, the sizingmargins value here is 0 and is concentrated in Area 5.

 

Three basic filling modes
The second property of skin-sizingtype, enumeration type. The basic values include truesize, tile, and stretch. Of course, there are still some extensions. Here we only discuss these three types.

Truesize is the simplest. If sizingmargins is not considered, you can directly paste the image to the specified area, such as the previous checkbox and radiobutton.

To talk about tile and stretch, we have to talk about the skin texture process. Let's take the scroll bar as an example.

 

Pasting process of the scroll bar

This section describes how the program draws a scroll bar based on sizingmargins and sizingtype.

First, let's take a look at the sizingmargins of the scroll bar. Because Microsoft's scroll bar is relatively regular, the distance to each side is 5.

The original texture and target area of the scroll bar.

 

First, paste four headers, namely area 1, 3, 7, and 9.

Then four sides are pasted. The sizingtype attribute is required here. If tile is used, the side is tiled. If stretch is used, the side is stretched.

Last, paste the central area, that is, Area 5, in the sizingtype mode. If the color of the central area is the same, tile is recommended. Otherwise, use stretch in case of gradient.

Tile and stretch, depending on whether there is gradient in the fill direction, in case of gradient or complex pattern, the latter must be used. From the perspective of program implementation, the tile filling speed is much higher
Stretch, and do not expect programmers to provide a stretch method to eliminate serrations, because the speed will be at least 10 times lower than the rack stretch method. For the effects of tile and stretch, see
The wallpaper filling mode in windows is not mentioned here.

How to determine the size of the original texture?

This is a matter of skill and experience that requires constant exploration and summarization by designers.

 
Generally, we recommend that you use smaller textures to reduce the size of the texture file to make the final package small enough. However, it is not as small as possible. For example, in stretch mode, the stretch areas are gradient, while
The effect of rack stretch mode on gradient stretch is very poor. Therefore, we need to provide enough colors, that is, a large enough texture, to meet the need for gradient stretching. However, if it is in tile mode
The value of sizingmargins is preferably controlled at around 10. The larger the figure is, the smaller the number of times the program reciprocating tile is increased, and the number of times it needs to be cut is also increased.

For example, in the Windows startmenu, there are many gradient colors in the middle. The sizingtype value is stretch, and the figure must be large enough to meet the requirements of tensile sampling.

5 texture statuses

Here two parameters are involved: imagecount and imagelayout.

First
First, let's take a look at five skin states: Normal, rolover, pressed, disabled, and default. These statuses are like
The status of a button is the same. When a button is in different States (for example, pressed), different styles must be displayed. The difference between normal and default is whether the control obtains the focus,
Rolover is the State where the mouse stays on the control, pressed is the state when the mouse or keyboard is pressed but not lifted, and disabled is the state when the control is unavailable. Note: the order of these statuses
Cannot be reversed. There are no sequence parameters in the program. In another case, for example, a scroll bar is a control that cannot obtain the focus, and the last default status is not required.

Imagecount describes several state diagrams of the skin. If a State needs to be used but the texture is not provided, the normal state is used by default. Generally, the imagecount value is 1, 4, and 5. If you are too lazy to paste a lot of images, use to indicate that the control cannot obtain the focus. 5 is normal.

Also
There is a special case, such as radiobutton, which has two states: unselected and selected. Windows will have two groups by default, so imagecount is generally 10. While
There are three states: unselected, selected, and semi-selected. Therefore, imagecount is generally 15, which can also be 12 or 3. It depends on whether the designer is willing to draw more images.

Imagelayout tells the program how to place these images in the horizontal and vertical directions.

No matter how many states, the size of each graph must be the same and be controlled by the same sizingmargins. Therefore, try to use the same style, but change the color.

 

How to determine the texture file type

The package file does not convert the texture file type, so the designer determines this. Generally, do not use BMP or JPEG. The former is too large and the latter is lossy.

 
Therefore, the remaining formats are GIF and PNG. Select these two types, depending on whether the system supports 256 level transparency Paster mode. Generally, Windows only supports rack-and-Rack Cutting and cannot be used.
A translucent texture. Therefore, GIF is preferred. However, a disadvantage of GIF is that it can only have a maximum of 256 colors. Therefore, if there are many colors, you still need to use PNG format. PNG supports the alpha channel.
It is a 4-byte argb mode. It is compressed in zip mode and belongs to the lossless compression type. If the image is not complex, the compression size of PNG must be smaller than that of JPEG.

Like stylebuilder, you must specify the transparent color when using the texture and record it as transparentcolor. Even in PNG format, it depends on whether the system needs to specify the transparent color.

 

Controls

 
Here, the scroll bar control is used as an example. In Windows, the scroll bar requires more than a dozen textures to re-paint its appearance. First, there are two buttons up and down and arrows at the same time. Note that the arrow is a separate texture
Use the truesize mode. The scroll area in the middle is pasted with lowertrack, uppertrack, and thumbbutton.
Gripper. Both arrow and Gripper use the truesize method, and their locations are subject to contentmargins constraints.

Another margins

Contentmargins describes the text in the texture and the pattern of other textures. The default value is the same as that of sizingmargins and the fields are the same. Contentmargins will crop text and textures, and the area beyond will be cut, and the data in it will be aligned in the center.

 
For example, the text on the button will be affected by contentmargins. If the button control is set to left alignment, the start position on the leftmost is
The toleff value of contentmargins. If we need to place the originally centered text on the right vertex, we can adjust the toleft and toright attributes so that the latter is smaller than the former.
Point.

In Windows, when the startmenu button is displayed as "start", You need to align left to make the toleft smaller.

The rest is textcolor and fillcolor, which are both easy to understand. Designers can adjust the texture color. In general, fillcolor is rarely used unless it is a texture file error.

My skin directory

I forgot a parameter, minisize, structure type, field width and height, which defines the minimum size of the texture. Windows will consider the minisize provided by textures when creating and changing controls, because the designer's idea cannot be restored if it is too small.

 

From design to implementation

The following uses a skin on the Internet as an example. This is a special window for download from the windowblinds website. Let's take a look at how to convert a design into a practical skin, and how to optimize and determine parameters.

Extract window appearance

We only do the skin of the window. First, we need to remove the controls in the window, remove the title bar text, and remove the close button (close itself is a skin ). Delete the background and save the file in transparent GIF format.

Extract Caption

Windows makes windows skin very complicated and does not support Windows Background skin. A window consists of four skins: caption, leftframe, rightframe, and bottomframe. The customer area in the middle can only define the fillcolor.

We only use caption skin (a little lazy), so we extract the caption. Note that there is a shadow on the border, and the shadow should also be taken down.

 

Split using jiugongge

Haha, the demo was not selected, and it was actually written to the dead height. Therefore, the height attribute of caption cannot be adjusted. The totop and tobottom values of caption are 0. toleft and toright are determined based on the length of the continuous area in the middle of the image. Note that the start and end positions keep a complete bead length.

 

Compress the texture size and determine the filling mode.

This long texture makes the file very large. You can reduce the texture size by reducing the continuous content of the intermediate section. Note that the middle part is a piece of beads, so only the width of one bead is extracted, just like DNA, as long as one clip.

Because it is a continuous fragment, the sizingtype value is tile, that is, tiled. Minisize is (), and Windows can specify the height of caption to 36.

Disassembling wmp10

I
I like Windows Media very much.
Player. Since 9.0, other player software has been abandoned. If the machine does not have Winamp, it saves a lot of download. After a long time, it has not downloaded the Winamp skin and
Visual. There is also Apple's iTunes, which accounts for a huge amount of memory. I don't know what these programmers are doing, so I don't feel bad about spending our users' memory.

Microsoft recently upgraded WMP to 10.0, which is simple and elegant, and does not like to switch to the appearance mode. Today, Let's unload the favorite WMP to see how this Dongdong program and skin are implemented.

Old Rules: erase useless ones first.

Remove various buttons and adjust the volume. These are all other skin

Main Components

Extract the current option

This
It is a well-extracted skin, with a style of 9 blocks in the horizontal and vertical directions of 2. The color of the horizontal part in the middle is continuous and can be compressed into a small block. Gradient in the upper and lower directions. To ensure sufficient rack tensile sampling rate
Keep the original height. The sizingtype is horztile & vertstretch, which is the horizontal tiled mode and vertical stretching mode.

Extract online service and playback status

 
The two skin are the same, and the color is slightly different. Here we only make one. The inverted triangle should be taken into account on the left side, and a horizontal gradient on the right side is slight to zoom in. The color in the middle is continuous. However,
Due to the relationship between the Left triangle, the upper and lower sides are not separated, and the totop and tobottom are both 0. Unfortunately, I believe that Microsoft cannot change its height in any way. Stretch mode
Sizingtype is tile, because the middle horizontal color is continuous, you can use the tile method.

Next, disassemble the progress bar.

The scroll bar consists of several parts: lowertrack and uppertrack, which are used to drag thumbbutton in the middle, and upbutton and downbutton on both sides.

Lowertrack, bottom slot, rounded corner, left and right cutting, up and down 0, tiled filling.

Uppertrack: the playback progress. Because thumbbutton, upbutton, and downbutton are blocked, the boundary shape does not matter. Here, a rectangle is used, and the top and bottom are 0. tiled.

Thumbbutton indicates the current playback position. In this example, there are two statuses, namely, "Pa role ormal" and "rolover". The filling mode is truesize, imagecount is 2, and imagelayout is vert.

Upbutton & downbutton, rewind fast forward, available and unavailable status, in fact, there is still a rolover status not painted, attributes are the same as above.

Gripper is used to drag and change the window size, which is relatively simple and skipped here.

 

What does the WMP that removes all these items look like?

Okay, the last one.

Only the last shell is left. Not found. It is very simple and can be filled as tiled.