QQ Browser (Android) Design Road

After several months and everyone's efforts, mobile phone QQ browser (Android version) from 2.0 gradually updated to 2.6. After a constant attempt at the inscrutable and architecture of the design, a new look has been made, and the experience has improved considerably from previous versions. However, this is only long March first step, here to share with you the first step behind the design experience.

Domestic situation

We can get to know the situation in the country first. At present, the browser market is a continuous war, Shiji. Let's not say that the PC-side of the big browser Daniel manufacturers wrestling for decades. Looking at the phone, especially the Android platform, seems to have become a battleground. Opera, revolted early, the international reputation of high, try to swallow the domestic market. UC, relying on years of accumulation, has long been a party overlord. Dolphins, Up-and-comer, are also constantly recruiting. There are also charming, every day, go, Baidu and other forces, as well as the Android default browser and is exerting power Firefox. and mobile phone QQ browser is sandwiched in which, really before there is a tiger, after the wolf. Want to keep the existing site, and continue to grow, not a bit of hard work, not to point grinding the professional spirit is not good.

The product definition

What type of browser is this?

What kind of feelings will it bring to the user?

What kind of impression does the product want to give a person?

How to extend the brand's good genes?

...

These are the most fundamental issues before us, through the nature of the browser itself to explore, we believe that browsers should be efficient performance, easy to operate, to achieve a comfortable reading experience.

Let the user quiet and enjoyable enjoyment of content, became the mobile phone browser design center of gravity.

Keyword extraction

According to the definition of the product, we found the design direction, and extracted a few key words: fresh, comfortable, concise, delicate, calm

So how do you visually express these keywords?

Let's go back to real life, collect some pictures related to this keyword, feel this feeling.

Color definition

From these pictures, we can easily find the color that conforms to the keyword temperament.

Blue, easily reminiscent of the vast expanse of the sky and the depth of the ocean, people have a quiet, clear, rational, technical color impression. At the same time, it is the company's other business base color, thereby extending the brand gene in color. Therefore, the blue is natural as the main color, calm and stable dark blue as a menu system. Blue in the green background, let people feel fresh and elegant, bright, clean. At the same time, add orange dot, make it appear lively and lively.

Color, like music, is a feeling. Music needs to keep order by the scales, and form a system. Similarly, color also needs to rely on three attributes to maintain the level and order of the interface.

Texture expression

Texture to the principle of flat light, one is more in line with the general trend of UI design, the second is to present content-oriented interface will be more friendly, increase intimacy. Therefore, the use of soft gradient, a little transparent, matt texture and other ways to reduce the large visual jumps and make the hierarchy clear. Strokes, gradients, lines, shadows, etc., can effectively enhance the design without being too lenient.

Classification of information, hierarchical structure

Clear information structure and functional layout, can increase product usability, reduce the user's learning costs, improve product affinity. Mobile browser as a whole divided into three areas, the most input navigation area, the middle content area, the lower menu area. At the same time, centralized information display in the content area, improve user operating efficiency, a key to direct content. About the content from the system, seamless connection processing, enhance the sliding screen experience. Appropriate gray and color contrast, reduce the user's visual fatigue, increase readability.

Simplified design

The previous version of the head design, although beautiful, but take up more space. Mobile phone in a square inch of the land, have to make full use of. For information and content-oriented browsers, subtraction design is a must, weakening non-functional design elements while increasing content free space. There are echoes in the structure.

Simplicity is beauty and less is more.

Small details Perfect content senses

The use of a small amount of texture can also make the interface more delicate, not monotonous.

The design of the waiting process

David Maister's Waiting psychology tells us that waiting for nothing is better than waiting for something to be done.

Therefore, we add function to the Web page loading process, every two seconds to transform a sentence, to divert the user's attention, to avoid users feel the waiting time too long, increase the product immersion experience.

New design of traditional control

Android's custom systems are complex, and the system controls are diverse. We have redesigned the pop-up menu, dialog boxes and other system controls, to avoid different customization system has a larger sensory differences, a full range of unified product visual experience.

Icon

The use of simple icons is also a development trend of UI design. In the exact form of the meaning of the same time, excluding unnecessary unnecessary elements, to maintain a light gradient, clear strokes, can make the icon more exquisite, but also in line with the overall interface style. At the same time, let the user more quickly intuitive understanding of the meaning of options.

After rapid prototyping, continuous trial and PK, converged into the current QQ browser, there is no best, only better. So long as can use the lowest interactive visual cost to help the user to solve the problem, is the good design.

Problems encountered

Complicated terminal adaptation

Andriod system has become the world's most widely used smartphone system, in the popularity of users at the same time, there are some very obvious problems, such as many manufacturers, each has its own norms. Many models, mobile phone display effects vary greatly. More resolution, terminal adaptation difficulties.

To simplify the design and to be compatible with more mobile screens, creating a good visual experience maximizes the need to provide two sets of graphs for the mainstream Medium precision screen (HVGA) and high-precision screens (WVGA), and to make full use of the features of the stretched picture to ensure the display at those strange resolutions.

The maddening picture jitter

Another problem that is easy to encounter, is the color display effect, the picture appears the obvious color order.

Due to the different hardware and the limitations of the system itself, after the program map, the image containing the gradient on different mobile phones, may appear different display effects. Perhaps the normal display on Google N1, the Moto milestone on the obvious color levels. At this point, you need to adjust the design picture, as far as possible to avoid too large or too meticulous gradient, in the gradient of the graphics added oblique texture, will be a greater improvement.

Postscript

Speaking of this, the whole design process is almost over, but our continuous optimization and improvement of the product is far from over. Thanks to the support of the whole team and the hard work that has been paid in the meantime. Release, has been a lot of users of the affirmation and appreciation, although the current version there are many deficiencies, but I believe we will gradually improve, because we have the ultimate pursuit of experience. The revolution has not yet been successful, comrades still need to work hard, long March go on, the show will be behind. ^_^

(This article originates from Tencent WSD Blog, please indicate the source when reprint)