QQ Transparent Skin: Multi-layer algorithm one-click to fit various backgrounds

Those who linger over the scenery, the people who live in the heart, those who aspire to the beautiful, or the sentence once let people suddenly words. Moving pictures, we want to not only print in the mind, but also want them to screen. When QQ becomes a part of life, special skin can also be the pointer to the memory, the beacon of hope, lighting the mood of the sun. Transparent skin: Through a moment, the heart is melodious.

1. What is transparent skin

Transparent skin, as the name implies is to achieve the main QQ window skin transparent, so that the main panel and session window can fully display the image of the skin, improve the visual effect of QQ to meet the user's personality needs.

2. Requirements background

A the calls from 700,000 of users

According to the background data monitoring (ignoring unable to monitor the version of the user does not count), there are 700,000 QQ users to use the patch made to modify the QQ profile, in order to achieve transparent skin beautification effect.

B. User analysis of transparent skin patches

Our analysis through 700,000 of users, found that the use of transparent skin patches are mainly network activity, the pursuit of unique personality and the desire to express their own youth. They either follow the trend: they love to dress up, have a crush on a star, have a passion for self-portraits, or have a strong sense of self: rebellion, emotional, Maverick. Transparent skin not only has the interest, but also can reveal individuality, express oneself.

c) Patch of the 3 major drawbacks

Disadvantage 1: The visual effect of the patch is rough. Users through the modification of the configuration file, directly removed the QQ main panel and Session window white texture layer, can not be very good to meet the needs of the user's aesthetic, can not provide the white texture layer transparency of the sexual adjustment.

Disadvantage 2: Unable to adapt to various backgrounds. User-made patches can only be fully through, not to adjust the transparency. When the selected background color is biased, the text of the main panel and session window will not be readable.

Disadvantage 3: The use of patches exist security risks, to bring potential harm to users.

Therefore, based on the needs of users, we have achieved this demand, and in a number of ways to achieve a functional innovation breakthrough. Especially in the development of technology, we skillfully use the hierarchical control algorithm, not only to achieve the control of the specific visual effects of the particular optimization, and to resolve the extreme when setting the black ribbon problem.

3. Technological innovation

(Figure 2 Layered technical notes)

A) Layered drawing windows and controls

Existing QQ main window is through the background layer, texture layer and content layer to draw separately. The background layer changes the skin image, the texture layer transparency determines the background transparent effect, and content layer display content Transparency can also be adjusted.

If you consider the beautification effect carefully, you will find that the transparency requirements of the windows and controls are not consistent. The window pursues the high penetration effect to realize the complete display of the background, while some controls, such as the tab area need to be relatively low, so that the user makes clear and easy to distinguish during the exercise.

Refinement to a single control, the various parts of the transparent changes are inconsistent, with the scroll bar for example, the foreground (scrollbars, buttons) should be as opaque as possible, the user can be identified, and the background is as transparent as possible to enhance the beautification effect.

In pursuit of the best transparency, we creatively draw the texture of the window separately from the texture of each control, setting a specific rate of change for the window and different controls. So that the user only need to adjust a set item, can adjust the overall transparency, and always ensure that the window and the control of the optimization display.

b) The logical algorithm of layered rendering

Adjust the transparency effect by modifying the alpha value of the texture layer, and separate the control window and the texture layer of each control: adding a control parameter dbpercent (proportional to the transparency change rate) in the conversion process, the main form takes the default value, the specific control assigns different values to each part, Enables forms and controls to achieve different rates of change. To highlight the display of special controls such as scrollbars, we also modify the alpha parameters of the content layer. The Unified formula is:

Realalpha (real application texture transparency) =

255-(255–materialalpha (Global texture transparency) * dbpercent

Note: dbpercent default equals 1

where the window and individual control specific parameters are set as follows:

/tr>

Window/control	Dbpercent (=)
Session window body (AIO, session area, input area)	default
Main panel main body	default
Session window > toolbar	0. 8
Main panel >tab area foreground (icon)	0.3
Main panel >tab area background	0.5
scroll bar foreground (lever, button)	0.08
scroll bar background	0.9

(Figure 3 illustrates)

c) RichEdit black color Band Repair algorithm

The RichEdit Txdraw interface does not return an alpha channel, so the alpha channel is determined using three-pass rendering. But in the case of ClearType, this method will not be able to accurately obtain the alpha channel, so there will be a flower screen situation.

To solve this problem, we force a brush at the end of the RichEdit drawing to make the alpha channel of all pixels 255, and the Sequela of this method is that when the window background is darker, the RichEdit part is darker than the other controls, and a black ribbon appears.

In pursuit of the ultimate beautification effect, we must overcome this sequela. So before the window texture layer, add a layer of pure white mixed layer, this layer of texture layer of the Alpha formula:

Revertalpha = sqrt (255 * 255–materialalph * materialalpha)

Thus the RichEdit background color is maintained in a whiter effect, and the RichEdit black ribbon is better repaired.

(Fig. 4 effect comparison before and after repair)

d) Good algorithm to bring the effect of breakthrough

Compared with the version of the user to rough remove texture layer, not only caused by the degree of transparency can not be adjusted, the partial display is not coordinated, some areas of low identification, and even appear black, beautification effect is not ideal. Because the user cannot adjust each form separately, the transparent effect is spread blindly to each form, but will affect the appearance. And if you add a separate form of adjustment, will greatly increase the user's energy costs, reduce the ease of use of functionality. Therefore, we use technological innovation, to achieve a breakthrough in the effect. Effect beautification: Search box of black display; The tab area, scroll bar, session window, and other operating areas are clearly displayed without affecting user action.

(Figure 5 User version transparent skin) (Fig 6 Qq2012beta2 transparent skin effect)

4. Easy to operate, a key to fit various backgrounds

Although in order to achieve a transparent skin, we have a lot of transformation of technology, but the present thing is the simplest operation: users only need to adjust a set item, you can achieve the above mentioned parts of the transparency and coordination of changes. If the user uses the hair glass effect at the same time, will increase the transparent skin to be able to play sex.

(Figure 7 Qq2012beta2 set Transparent skin entrance)

Transparent skin is set to adjust the transparency of the interactive design, in order to give users can adjust the white texture layer control rights, can be based on different backgrounds, adjust to the most appropriate transparency.

(Figure 8 Background color is more transparent when text is read)

(Figure 9 The background color does not affect text reading when the transparency is 100% full transparent)

5. Surprise discovery: User expansion, unlimited potential

Transparent skin actually has a huge potential user base. On the line, we found that the transparent skin of the user base is not limited to our expected youth groups, has been extended to a large number of QQ active users. According to the observation of the use of colleagues, see the photographer to change their own pride, parents of parents have changed the lovely photos of the baby. Everyone has an objective need to pursue interest, beauty and individuality. The user's general affirmation also strengthened the team to meet the new challenge the confidence.

(Figure 10 User Weibo feedback)

Article source: Tencent Big Lecture Hall