Discussion on the design of 360 mobile phone desktop lock screen

Objective

When I started to design the 3.0 version of the Desktop lock screen interface, I was thinking about a series of questions: What type of lock screen would users like? How to design if there is no big change in the existing interaction design? Can design an interesting design ....

If you want to solve these problems at the same time, there will be no focus and clues, so decided to start from the shape of this direction, targeted to solve the problem.

As we all know, the lock screen is divided into three forms, and the network is as follows:

First, the original state

Which is the most common form that users meet.

Now that there are large frames (time, date elements) unchanged, I want to give users a simple, comfortable interface. No extra visual elements, buttons don't give any special material.

Survey found that many users like to actively replace the wallpaper, in order to highlight the demand, I will button design a stainless steel glass material scheme, but the follow-up problem came: The button has been given to the material, which is not in line with the nature of the platform, so decisively abandoned the program.

The picture above is the modified scheme: The button is a simple gray gradient, there is no color feature, at the edge of the button there is a layer of 75% transparent area, so that the whole button is not so rigid, the edge of the use of light processing, the reduction of any redundant visual elements; The drop-guided origin abandons the overly complex effect, The guided arrows give up the vertical bar because the animation of the dots is sufficient to embody the guidelines, refine your design in subtraction, and solve the problem succinctly and effectively.

Second, charging status

This is an interesting starting point for the lock screen state.

Charging in the previous version exposed some problems, such as: The main body is not delicate, animation rigid, not to give better plot sex.

From the point of charge, can think of the key words are: Energy release channel absorption feedback, we conducted a simple brainstorming, as follows:

In constant thinking and try, still did not reach my most satisfied with the effect, one day I saw a picture of my friend's microblog, which was a picture of 1 fireflies in my hand .... I remember before: Early summer night, the stars empty, drinking beer sitting in the country friends home roof, chatting together. In front of it is a paddy field, the Firefly is like a little elf, can think of a lot of fireflies in the jar, like light candles ... So my whim, can not give up the energy bar, wire, magnetic field and so on these too hard scheme, return to the original feeling. Think of the energy of charging as a firefly, flying, and then flying into the bottle ...

With this idea, I can't wait to start the implementation, in the design of the middle button, is very simple a black prop, the feedback of the energy groove is around the button of a circle of energy rods, the middle is a gradually hidden breathing light, let a person have a quiet feeling. This scheme weakens the button and is designed to be a hive-like container, so it's better to blend with the elves and the energy bar is more intuitive.

http://uxc.360.cn/wp-content/uploads/2012/09/Charging Animation 1.swf

Third, click the trigger behavior of the state

When the user fires the button, the option pops up, and the entire icon's background is simply black and semi transparent, with no more complex elements to be able to best articulate the functional area.

In order to avoid the animation of blunt, not soft problems occur, I modified the pop-up and retract the mechanism, so that the whole process of soft display.

The icon was optimized on a previous basis to keep it consistent with other icons, with an edge of 3 pixels, an outer fillet of 3 pixels, and an inner fillet of 1 pixels.

Conclusion

Through the initial analysis of the entire default lock screen refining, to the medium and late continuous design tuning, we have followed from each detail to the user to bring the best experience for the principle of continuous thinking and improvement.

Every day we shuttle in the high-rise buildings, a wide range of electronic goods filled with our lives, then I was more nostalgic and nature close to the day, blue sky, white clouds, green space ... I think this is a lot of urban people are looking forward to, I hope in a small mobile phone screen, can arouse the memories of nature.

Lock screen Design installation package Download >>

360 Mobile Desktop Download >>

Article Source: 360UXC