Mobile phone token 2.0 design sharing

A small tool software, how to win the IPhone app Store4 star + rating, Android Electronics market 4.5 star rating, let me share with you the design process of the mobile phone token.

What is a mobile phone token?

Mobile phone token is through the 6-bit dynamic password protection QQ account, Q-coins and game equipment, such as virtual property security software. Mobile phone token Every 30S change a dynamic password, the user in the sensitive operation of the validation of dynamic passwords, in order to protect their own account security. Simply put: The mobile phone token is a dynamic password generation software. Is our specially designed to protect the user QQ account security design mobile phone app.

The design work mainly includes: The mobile phone token style setting, the novice binds, the replacement and the establishment flow, as well as the AQ website propaganda three parts.

Download Address: Http://aq.qq.com/cn/manage/token/download

How to do a simple tool-type software, we do the following design thinking:

I. Defining clear frameworks and structures

Mobile Phone Token 2.0 is a tool type app, in the frame design, should show the app's main interface (dynamic password), followed by the "set" operation.

Using the features of the iphone platform, we will display it in front and back, making the software structure clear. On the Android platform, we use our own menu key to exhale the option menu to set up the operation.

iphone Platform:

Android Platform:

Second, activation and use of the operation of the process of convenience, details determine success or failure

To give users a quick idea of how to use tokens, each operation takes into account what the user expects, how feedback is received after the user's actions, and whether the tokens are fully considered in the details of the product's planning and design.

When the user first opens the product, needs the app to automatically send a text message to confirm the identity to be able to activate, in the use process, we need to fully remind the user each step operation reason, next will how, and has the operation feedback is how. The token has not received an example of a complaint or question about use since it was published, and the token itself, in use, does not provide any FAQ, and we combine education in operation and use.

In the initial planning, the designer used the sketch design software mockups, designed the first draft of the minimum-subsistence interactive prototype, quickly set up the use process and discuss with the product changes, the process interface as follows:

Third, follow the platform software design code

Our product design team although only 3 people, but for the details and the pursuit of quality, let us decide for different platforms, complete redesign of product interaction UI, each detail in accordance with the characteristics of the system redesign.

The iphone's "Settings" button at a glance, that is, click on the screen after the interface flip to the back to set, for the Android token, you must take full advantage of the "menu" and "return" of the physical keys, which makes the Android page more concise:

Iv. the soul of the moving design

After summarizing and analyzing all kinds of handheld devices, especially in touch-screen handheld devices, it is found that the UI materialized style has its inevitability and rationality, the virtual experience comes from the accumulation of real life experience, so that the fingertips can feel the formal scene in the interaction with the equipment. Combination of mobile phone token users need, as well as various platforms on the characteristics of mobile phone needs, bold design imagination.

Therefore, the mobile phone token chose the shield as the core element of the object, the shield is the natural protection and security endorsement, directly let the user feel the phone token on the QQ security care.

Of course, a simple shield does not trigger a visual impact, nor does it solve the monotony of a bunch of numbers in a token. So we creatively introduced the concept of a similar electrocardiogram, the expression of digital updates at the same time adding a sense of technology, and the rapid changes in numbers and change the effect, so that the number of the scene to change the performance of more vividly. In particular, there are many user feedback, will be staring at the phone screen, dynamic password every 30 seconds to jump animation to see, perhaps this is the design of the details to attract users, touched the user.

Five, let the user feel pleasantly surprised, introduce gesture operation (advanced function)

Token is a very simple tool software, how in such a simple software to introduce gestures, to the user surprise, so that users can also dig out some advanced features in use, so as to improve the user experience, is a problem worth considering. Finally, we take into account the token-time calibration of a feature, although the user does not use a lot of time, but for users who use this feature will be very proud of this function, because we introduced the shaking calibration time, the shaking itself will be disorderly into order. While increasing the user experience, it conforms to the user's operating expectation.

Vi. Screen Fitting

This puzzle is particularly prominent on Android, how to match the different pixel resolutions of the Android phone, 320x240,480x320,800x480,854x480?

Multiple versions? We only have a visual designer and a development classmate who has to address these adaptation issues with a single version with limited resources. In the splash screen, how to make a picture fit so many screens? To ensure that there is no ambiguity or image distortion?

We used a very simple method, the splash screen in the middle of the transition color, the bottom of pure white processing. For the splash screen interface, direct default first to draw a pure white background, and then the splash screen picture top. form the following figure:

For the full fitting style of the token home page, how to adapt to these different resolutions, we also do a unified adaptation process: We first used a wood background to fill all the positions of the page, for different resolution, the program first detect the phone resolution, and then for different resolution, the shield placed at different heights. Of course, the height should also take full account of the menu key to Exhale option after the effect, you can pay attention to the different mobile phone to see the shield distance from the status bar, as shown in the following figure:

Other scenarios also adopt a similar approach to screen suitability.

After much thought, we used a 670k installation package that fitted all of Android's models and got a 4.5-star high score in the electronics market.

VII. Project team full participation in product experience and design

Mobile phone token of the whole project process, a lot of details of the optimization, is from the product and development of the creative students.

In this, especially thanks for the mobile phone licensing projects to pay efforts for products and development of students, without your efforts and suggestions, mobile phone token will not achieve the current results!

Source Address: http://cdc.tencent.com/?p=3409