Visual design case: How to design a different weather application

Article Description: One-stop creative design: Weather applications stunning?? /FONT>

Objective
How to make an application stand out in a wide range of competing products? As one of the most popular applications in the world: The weather is so familiar to all of us today, to talk to you about how we can design and complete this unusual weather application.

Not long ago, we (Tencent User research and experience design, CDC) received and began to plan to launch such a new weather design project, previously we have more than once carried out the design of the weather, including the now widely circulated on the QQ weather class icon. Now the whole process is based on a one-stop design process (both experience design phase Integration High-fidelity prototype/front-end implementation output), so that we have more free innovation and the opportunity to realize the details, for us such a team with innovation and design, This opportunity is almost perfect to achieve the ultimate in design and experience.

So over the past six weeks, the entire team through very efficient communication and iteration to make the design of continuous integration with the prototype, and eventually become finished.

Directory

Design Objectives

Design implementation

The design of the weather

Skybox Vault System

Fusion of Opengl+xplayer engine and design

Design goal: Create experience Peak

People are perceptual, and after our experience of something, all we can remember is the experience at the peak and end (the theory of kurtosis). And in the process of good and bad experience of proportion, good and bad experience of the length of time, the memory almost no impact.

To allow users to have a deep memory of the small Q weather, it is necessary to create a positive peak in the main task. The core purpose of the weather forecast is to look at weather conditions and temperatures. Therefore, we decided to simulate the real nature scene in the weather state, do dynamic weather, to create a pleasant product experience for users. Other basic tasks, to achieve ease of use and comfort, in the interface arrangement also for highlighting dynamic weather information.

As shown in the following figure, we preset the peak point of the heaviest--dynamic weather:

"Figure 1" experience peak

Design realization: Looking at the real world through the window

Based on the design goal of creating experience peaks, in the premise of clear weather information to design dynamic weather to give users more powerful visual impact, so as to restore the current climate environment more real, and in the context of user virtual environment considerations, we hope to convey to the user of the metaphor information is not in the sun of the sun or the rain, But in the room, through the table or ceiling glass window view to see the external meteorological changes; On the basis of this environment, with the design objectives, we have identified the clear display information on the glass to make it the first layer of the entire environment, and the glass medium design for the second layer, taking into account that glass is transparent media, So the design adds a part of the diffuse reflection of the light, at present, the diffuse reflection considered some aesthetic factors to eliminate some unnecessary projection of objects, otherwise the diffuse reflection with 3D software would be more distracting to the main world after the windows were disturbed; behind the window is a real simulation of the meteorological environment, It is also one of the most expensive design tasks.

"Fig. 2" The design implementation of weather application, the environment in the above picture is the first edition of the Sunny Day, but because of the color and animation effect and other reasons can not be included in the first edition of the weather package, we also gradually realized that design is a practice and dynamic rendering process, static picture again elegant but appear to come out may be completely not that thing, Here's a look at some of the most frustrating weather design processes.

The design of the weather

on the composition of Figure 3, we have slowly clarified from the scatter, the horizontal to the focus of the excessive, this helps to balance the left text area, but also focus on an object. Thus have the opportunity to blur the other parts of the screen, so that the changes in the screen more. The picture is more balanced.

"Figure 4" color , the whole little Q weather will be used in the color of the cold tones. In addition to the sandstorm weather, basically in the blue gray tone, the reason is mainly in the sky to the main, natural scenery mainly. Although it is in the blue tone wandering, but also a small number of cold tones on the basis of the addition of some warm as embellishment, such as in the Blue cloudy day to add a warm yellow light, to reduce the cold color of the people to bring cold feeling.

"Figure 5" is the first day we try the weather, is also the most exploratory one. In the framing, you can see from the early design of the country streets to high-rise buildings, from the paved road to the Chinese wind-filled river. In the design process, we have done a lot of contrast and correction. Finally, the lighthouse is used as a more representative element. It is easy to focus on the visual focus. In addition to the cold color inside add yellow warm light to increase the warmth of the feeling. such as the foggy days of the season, always a successive moisture diffuse, although the temperature may not be low, but the feeling is bleak. At this time the scene takes color to increase the warm light, the feeling will be more comfortable.

The upper half of the figure 6 shows the Shangguang weather on a sunny day, and the lower half of the picture is backlit. Although the sun's picture is more intuitive to feel the sunny atmosphere. But because of the general situation, the human eye can feel discomfort by direct sunlight. While looking at things from the sun is clear, comfortable, so the lower half of the design we emphasize is to give people the feeling of pleasure, after a round of repeated verification, the following plan is adopted, and also quickly in the user's feedback received a positive voice.

Figure 7 is tricky in motion, although the animation engine is very powerful, providing a variety of motion modes including Skybox, but the most we use is still translation. Many of the designs are based on translation. The reason is the translation of a picture on the X and Y axes, which takes up a minimum of machine performance.

[1] [2] Next page