QQ Mobile Phone version 5.0 "One key off work" Design summary

Remember the new version of QQ that particularly likable little red dot? A drag-and-drop, splash spread, unread message on the clear, so a very good reputation for obsessive-compulsive disorder, the author really spent a lot of Kung Fu, today to carry out the process of sharing out, to learn how professional designers to the idea of landing from the point of view to become a reality, The author's thinking process is very mature, it is worth novice learning yo.

　　Introduction

Even meter gamma: in a product and the designer to participate in a very common brain violence activities, produced an idea: the world of obsessive-compulsive disorder patients so much, and small red dot is let obsessive-compulsive disorder of the most entangled existence, should be a key to clear the red dot function? Everyone's unanimous view: "Well, right, to do." Come on, record it. "Then smooth the record, send the mail, and then ... There's no more then. Perhaps this is also the result of most of the brain violence, there are many bright spots, but no effective landing implementation.

　　Thinking

There are many ways to eliminate small red dots, and there are also records in the brain-violence conference, such as:

Scheme one, by shaking a crank little red dot shake off;

Plan two, by blowing on the phone, the Little red dot blow off;

Plan three, the small red dot dragged down, do not like which to drag which;

Do you need to try these three options? Before you start, thinking about it can reduce a lot of work.

For the scheme one, shake a shake of the scheme really quite handy, but with a lot of other software shake concept similar, others see also won't feel is original, gesture no longer has the dissemination;

For the scheme two, blowing is also feasible, but for volume detection, if you use the QQ mobile version of the time, surrounded by a large noise, small bubbles may disappear, this experience should not be tolerated;

For plan three, well, it looks good! But can you accept that? This is really hard to say.

　　Perform

According to the process of the top brain complement, "I think" program three can make Word-of-mouth and spread point of the probability is more, and looks very technical content appearance. So start doing demo to experience. A quick solution to a demo on iOS and Android is to use flash because it's easier to add a shell on two platforms, but as a demo, it's good to run on a platform.

Then it starts the output of the proposal. Here is the first draft:

Drag must have an animation, otherwise it will feel inexplicable. And the way the animation, the idea is to simulate the pull out of the visual sensation, and visual and development can be simply processed. The idea of the first draft is to want to drag the digital red dot, in the original position to leave a red dot with the number of small red dots, dragged farther, the original location of the bubble will be smaller, ideally, there will be a drag down the hurrying feet ... , huh?

With the idea, the speed with flash to restore the next, and then experience a mobile phone, feel, this is a bug ah ... Because drag not far enough, so the finger has not moved away, the red dot was dragged down, let go when just see the red dot inexplicable its appearance disappeared. The goods absolutely not pass the review, at least have a distance, can see clearly when you can drag and drop small red dot, when let go Red point will return. Although the draft is not qualified, but the implementation of simple Ah, but this does not seem to be the original intention, easy to use more important point, and then have the second draft:

On the basis of the first draft to increase the distance of the drag, in two red points between a trapezoid to connect up, feeling in addition to look a bit two seemingly no other problem. Here's a schematic to describe the workaround:

Figure 1. Establish a coordinate system with two red dots (the y axis of the Flash is really downward)

Figure 2. Calculates four tangent coordinates and draws a segment, filling the color.

(with the coordinate system, I feel a lot bigger ...)

There is no solution to the problem that looks a bit leng, but it is more troublesome to solve it. As a moral designer, the texture here should be the kind of meat (nian) meat (huhu) feeling, let go back to play, disappear when there will be an explosion of animation, accidentally thrown out should have acceleration at the same time by the impact of the acceleration of gravity is right. So, the expectation should be realized in this way:

The key or the implementation, the effect is this, is it feasible? Try to remember the next junior high school math teacher said when graduation, Bezier curve or something may be a war.

———————-for designers to burn the brain, ready to mind ——————————

Figure 3. Bezier curve model to indicate

Since it is a Bezier curve, you have to have a control point where the position of the control point is more critical. The initial assumption is that as the distance between the two dots increases, the temporary point point_temp from the P2 to the center of the Great Circle P0, and then draws the line from P1 to Point_temp, focusing on the Bezier curve control point P5, which can be achieved as the distance increases the center of the connection area becomes thinner, Think about it like that. Experience, it is found that the rate of narrowing in the middle is too slow to feel right, so the model is optimized, as shown below:

Figure 4. Bezier Curve model optimization schematic

Move the point_temp moving distance from P2 to P0, modify to move from P2 to P4, so that the control point moves a lot faster, experience the next, finally like that. But not perfect enough, if P2 and P4 is a dynamic calculation of the curve is more perfect, but so powerful algorithm problems to the professional development of GG to deal with. As for the other, springback is a conventional algorithm with a ready-made rebound model that explodes out of the sequence frame. Coupled with product students strong project management and promotion capabilities, the development of students of wisdom, the whole project on the smooth landing.

Landing is landing, there are many judges in the Goose factory. Well, then listen to the big guy's affirmative comments ~ "good fun." "This thing, the sticky feeling ah ..." "Yo, you will also point development ..." "What's so funny about this?" "What's the use of wasting your time doing this little function?" "To look at the overall level, there is a system. "Sounds like, it's not very negative, and it's a very clear guide to the future work ... At the very least, the scheme has not been shot dead, so happy to push the market test.

Let's look at what the user has to say after the release:

A desolate sense of superiority: used to feel Good (August 17 06:40)

Huangpu River to see the stars: Long known, but also quite practical!! (August 16 23:51)

Han an: @ small out to the right @ Find the Bard @ Pig Demon @ Bun Head Wawa get new skills (August 16 23:25)

Joy__d's Galaxy is Fanfan: I have tears falling from knowing the truth ... (August 16 22:04)

Roaming around the world: This is a great feature (August 16 22:00)

123sdf's Nest: Too much like this feature. Especially when there is only group information. (August 15 19:34)

Under the Eaves Yan XI: Wow ~ ~ ~ for red dot phobia, information reading obsessive-compulsive disorder, saved (August 18 16:18)

Moonlight-Unrivaled listen to the piano: It feels super cool there are wood ~ ~ (August 16 15:33)

Later, this drag-and-drop red Dot has its own name: "One key off work." For a while, Weibo search "Qq5.0″ the hottest selected micro Bo is" one key off work ", offline also a lot of friends to mention, even at the bus station have heard someone recommend this function to friends. All these, after seeing is really a little happy.

　　Written in the last

To sum up, a thing to do, the user will naturally feel! So: QQ design Team (Shenzhen), an interactive designer, a visual designer, have the intention of the speed of finishing the work of the following mailbox: Omegashao@tencent.com (5M Annex) or 382931382@qq.com (not limited to attachment size).