Product design world of mobile platform

With the emergence of smartphones, people's use of their time and stickiness rapidly increased, mobile Internet development is more and more rapid, more and more PC-side products began to focus on the screen between the shift to the top of the screens, like a tidal surge.

The current mobile internet industry, from the simple to achieve a single function primarily, to the platform of the transfer, and then to the formation of the industrial chain between the app, as well as advertising implantation of various operating means to generate a variety of profits. The prospect of mobile internet is well illustrated.

How to design a good app is the topic we need to introduce today.

The so-called mobile platform, except for inconvenient to move the PC, all portable and portable electronic equipment. We are not only popular in the use of smartphones and a variety of pad, but also includes automotive applications and a variety of home life electronic products.

Features of mobile platforms:

1. Time Fragmentation:

The portability of mobile devices also leads to the fragmentation of browsing time. Take smartphones as an example: we usually perform a task or an entertainment event in a short period of time, such as walking, taking a bus, going to bed, afternoon leisure, travelling, taking photos, sharing, taking notes, playing games, shopping, and so on. In an average of just 5-30 minutes, the idea is often interrupted, the mobile phone is often picked up to put down, efficient and light interaction, has become the characteristics of mobile design.

2. Gesture Application:

The emergence of mobile touch screens also brings with it a variety of gestures. The application of these gestures, compared to the keyboard, mouse, can be more rapid response, and reduce learning costs, more intuitive for human-computer communication. But touch compared to the mouse, but can not achieve a high degree of precision, and can not appear like a Web page in the mouse hover, hover and so on. The area of fingertip contact between East and West is slightly different, but usually, the appropriate click area is in the range of 44-44px.

3. Screen Restrictions:

We say the design of the mobile platform, in fact, like dancing with the shackles, this yoke is not only from the various platform system control specifications, and the biggest problem is the limited screen space, coupled with the previous 44-44px of the click Area, but also need our app design, in a single interface display, concise again concise, The interaction light weight again light quantity, the level is shallow again shallow again.

How to show more information on a limited screen. There are three elements:

A. Cleverly utilize the hidden and surfacing of toolbars and toolbar to maximize the presentation of themes while making interactive moves quickly.

B. Reasonable placement of control layout: Try to put the most important interactive buttons and information, placed in the first screen, this is believed in the PC side of the web design also apply.

C. Targeted transplants: There are more and more client applications, all from the mature site product transfer, but the Web page can host information and interaction, far greater than the client. So we should highly understand the core function of the product and spirit concept, extract the most important information module, the transformation of the client transfer.

Instance 1:flickr

Photo sharing is the spiritual purpose of Flickr, in the client, only to show the forwarding, photos, praise, comments, before and after browsing a few of the most reflect the function of the product. Other similar "interested" groups and various applications are no longer implemented here.

4. Limit input:

When we're using smartphones and other mobile devices, the task must be done quickly in an environment that is unstable and fragmented, instead of indulging in one thing like a PC, and tapping the keyboard to enter text, it takes a certain amount of time and effort, in the last resort, Users do not like to hit the virtual keyboard for a long time on the phone, (you must always press the wrong button), so many excellent apps will replace the keyboard with other functions, such as the voice function of micro-letters.

such as a mobile phone cost recharge app, in the selection amount, it through the user to use the sliding zone value, a good solution to the problem of input numbers.

5. Traffic and cost considerations:

Mobile users usually packet traffic to achieve the fun of the Internet, so we design the app should also take into account the flow and power consumption savings, especially the reasonable picture show the impact of traffic.

For example, the application of weico+, the latest version of the savings of 60% of the power consumption, is undoubtedly a major selling point.

There are Sina Weibo client, for the display of pictures, divided into feeds small map, click out of the map, and then click Load detailed large map to meet the needs of a variety of users to browse the picture, through the needs of subdivision to achieve the purpose of saving traffic.

Design Requirements:

Now we're going to start designing an app, and when it comes to actual fencing, where do we start?

First you need to know your product attributes, is it a brand new app that doesn't have any PC base, or a porting app?

1. New app Design:

Every app has its spiritual purpose. We're here to give it a definition called: Product definition description (Creator definition statement ads), mastery, this concept is not only embodied in the design of the app, but also reflected in advertising strategies, such as the formation of different areas of work.

It is important to give you a reasonable definition of your product. First you have to think well, your product is roughly the type of app.

Currently there are 3 types of apps in the market:

Utility tool Type (Utility): such as weather forecast, recording, calculator, stock query and other applications.

Production efficiency (productivity): This kind of application is mainly to solve the user in extremely short and unstable situation to complete the task efficiently, such as impression notes, Mindmeister

Immersion (immersive): This kind of application is mostly game class, it can let the user immerse in the application for a long time. Like Angry-birds.

After defining the type of app you want,

For example: Today we want to work on a production efficiency of the application, it can help users to record the feelings and records of travel anytime, anywhere, and achieve synchronization between different platforms. Our name is Traveller ' s book.

What about the program definition to be applied next? You can try:

A. List all the feature points you think users will like:

You can try to list the tasks and ideas you can think of, like brainstorming, and don't be afraid of too much, and eventually they will go through a rigorous streamlining. In the case of Traveller's book, the interesting tasks in the head may be:

Record itinerary

Order Tickets

Chack belongings

Shooting + sharing

Find Introduction

Show the footprints of the experience

The location of the callout

Record food

......

B. Identify your target users:

What features do your users have in addition to using mobile devices, looking for exquisite pictures, simple interactions, and outstanding performance? Take traveller's book for example, you can determine whether the following descriptions are appropriate for your users:

Like to travel

Love to shop or enjoy life moving

Good at sharing

Hope to have experience and traces of life

Write a strategy

Backpackers

Donkey Friend

Travel time 3-5 Days vacation

Travel time over 15 days

......

After considering these questions, choose three features that best fit your target audience: like sharing and writing thoughts, finding routes and raiders, and facilitating booking (ticket tickets and tickets).

C. Filtering function points by defining the target User:

If you determine the characteristics of the target user, there are only a few points left in the function point, and you get it: A great program should be as accurate as a laser to focus on the task the user wants to accomplish.

For example, think about the number of potential feature points you have for a travel program in the first step. While these feature points are useful, they do not mean that each feature point is equally useful to users. Most importantly, the target user in the second step has a different liking for these feature points.

In the heart of the target users, and then to view the function point list, and finally can focus on the program in three function points: Photo sharing write records, a variety of form tickets to obtain location search strategy.

Now you can define your program to accurately generalize the function of the program and the target user. A good definition should be:

"A solution to the travel strategy, recording and online ticketing tools"

D. Design for equipment:

We know that different devices have different systems, different systems have different native interaction and UI controls, good and reasonable use, can be closely and highly economical development costs, and to achieve the same user experience, so that they feel the iphone app's operating habits should be in accordance with the original iphone's own inertia.

2. Porting products from Web pages:

More often when we have a mature web product, we will need to preempt the user in the fragments of time, to facilitate their solution. This time you need to reconsider giving the web design.

first you need to focus on your program, extract important features, and always think about ads to make sure you don't change the direction of the application because of too much functionality or an error in extracting the important features. Make sure that your app is able to help users do things and work more efficiently and directly, whether it's a game task or a job task. Combining the characteristics of mobile devices, consider the appropriate interaction:

A reasonably easy touch gesture.

When the content does not show up, you can consider to let the user page, because at the client, paging is a very easy to complete the action.

Reset the Home page icon, perhaps on the web side, two function buttons may be far apart, but on the mobile platform, you need to reconsider the relationship between their location.

We can see that in the example of "Impression notes", toolbar always shows the functionality throughout the application: adding events, viewing historical notes, labeling, synchronizing, and fast searching when you have too many notes. Hierarchical relations from the three-level column surface, into a single layer (such as the toolbar is also calculated layer is the two layer). Cut off the less important features such as: Event classification, time reminders, project cooperation, and sharing to friends.

Designed for different platforms

Finally, don't forget to adapt to different equipment platforms. For example, the return button, the interface on both iOS and Android, because iOS does not have a physical return key, while the Android device platform has a physical return key, but when we do a task from the screen to move the finger to the physical key is not so smooth. And in plum equipment, the application will sometimes remove the return key (Plum return operation is the physical key to the left), because the plum user loyalty and habits are very high, the first reaction is the use of physical keys, so this time in the interface of the return button appears chicken.

In a word, we must show the most important spirit and function in the shortest time. So you can design the desired and ideal program in your mind.

Source: http://ued.taobao.com/blog/2012/08/01/design-of-mobile/