Mobile platform product design world

With the emergence of smartphones, people are rapidly increasing their use time and stickiness, and mobile Internet is growing rapidly, as more and more PC-end products begin to focus their attention on the screen, they are surging.

The current mobile internet industry has gone from simply focusing on achieving a single function, to the transfer of platforms, and then to the formation of an industry chain between various apps, there are also various operating methods for advertising implant to generate various profits. This fully demonstrates that the prospects for the mobile Internet are very good.

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

 

The so-called mobile platform refers to all electronic devices that are convenient to move and carry, except for PCs that are inconvenient to move. Not only are we using smartphones and various pad products, but also include vehicle applications and various household electronic products.

 

Features of the mobile platform:

 

1. Time fragmentation:

The convenient Carrying of mobile devices also results in fragmentation of browsing time. Taking a smartphone as an example: we usually complete a task or an entertainment event in a short period of time, such as walking, taking a bus, going to bed, leisure in the afternoon, and traveling, start taking photos, sharing, taking notes, playing games, shopping, and so on. In average short5-30 minutesIn time,Ideas are often interrupted, and mobile phones are often picked up and put down,Efficient and light interactionHas become a feature of mobile design.

 

2. Application of gestures:

 

The emergence of mobile touch screens also brings about the matching of various gestures. Compared with the keyboard and mouse, these gestures can respond more quickly, reduce learning costs, and communicate with people and machines more intuitively. However, compared with the mouseIt cannot achieve high precision, and the effects such as mouse hover and hover on a webpage cannot appear.. The fingertip touch area of East and West people is slightly different, but usually the appropriate click area is in the range of 44-44px.

 

3. Screen restrictions:

We can say that the design of a mobile platform is actually like dancing with a cool. This cool is not only from the Control Specifications of various platform systems, but also the biggest problem is the limited screen space, in addition, the previously mentioned 44-44px click area requires our app design. The display on a single interface is concise and concise, and the interaction is lightweight and simple, and the hierarchy is simple and simple.

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

A. Clever UseHiding and hiding toolbar and toolbar, To the greatest extent possibleDisplay topic, At the same timeQuick Interaction.

B. Properly place the control layout: TryPlace the most important interaction buttons and information on the first screen.It is believed that this is also applicable in PC-side web page design.

C. Targeted transplantation: now more and more client applications come from the transfer of mature website products, but the information and interaction that the web page can carry is far greater than that of the client. Therefore, we should be highly aware of the product'sCore functions and concepts, Extract the mostImportant information module for client conversion and Transplantation.

Instance 1: Flickr

Image Sharing is the spiritual purpose of Flickr. on the client side, it only shows the features of the product, including forwarding, taking photos, likes, comments, and browsing before and after. Other applications such as "interested" and "group" will not be implemented here.

 

4. Restricted Input:

When using smartphones and other mobile devices, we must quickly complete tasks in an unstable environment and in part time, unlike in front of PC computers, indulge in focusing on one thing, and it takes a certain amount of time and effort to input text on the keyboard, users do not like to press the virtual keyboard on their mobile phones for a long time (you must press the wrong key frequently), so many excellent apps willReplace the keyboard with other functionsSuch as the voice function.

The above is a mobile phone recharge app. In terms of the selected amount, the user uses the sliding area value to solve the problem of entering numbers.

 

5. Traffic and fee considerations:

Mobile users usually package traffic to achieve the fun of surfing the internet, so we should also considerSaving traffic and power consumption, EspeciallyReasonable Image DisplayImpact on traffic.

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

In addition, Sina Weibo's client divides the image display into feeds small images, click the output graph, and then click to load the detailed image to meet the needs of various users to browse the image.Demand SegmentationTo achieve the purpose of saving traffic.

 

Design requirements:

Now we are starting to design an app. When it comes to practical operation, where should we start?

First of all, you need to understand your product attributes. Is it a brand new app without any basic PC or a portable app?

 

1. Brand new app design:

Every app has its spiritual purpose. Here we give it a definition called:Product Definition descriptionApplication Definition Statement (ADS) is integrated. This concept is not only reflected in the design of apps, but also in the formation and guidance of different work areas such as advertising policy cases.

It is very important to reasonably define your product. First of all, you have to think about it. Your product generally belongs to that type of app.

 

Currently, apps on the market are roughly divided into three categories:

Utility Model): For example, weather forecast, recording, calculator, stock query, and other applications.

Productiefficiency): This type of application is mainly used to efficiently complete tasks, such as Evernote and mindmeister, in the case of extremely short and unstable conditions.

Immersive): Most of these applications are game applications, which allow users to immerse themselves in applications for a long time. For example, angry-birds

After specifying the desired app type,

For example, today we want to develop a production efficiency application, which can help users record the feelings and records of travel anytime, anywhere, and synchronize between different platforms. We are now calling it traveller's book.

How to applyProgramWhat is the definition? You can try:

A. list all the things you think users will like.Features:

You can list the tasks and ideas you can think of as much as possible like brainstorming. Don't be afraid of too much. In the end, they will go through a rigorous streamlining. Take the traveller's book as an example. The tasks in the head may be:

 

Record trip

Air Ticket Order

Chack portable items

Shooting and sharing with you

Search Strategy

Show the experience footprint

Mark the location

Record food

......

 

B. Confirm yourTarget User:

What features do your users have in addition to using mobile devices, looking forward to exquisite images, simple interaction methods, and outstanding performance? Take the traveller's book as an example. You can determine whether the following description is suitable for your users:

 

Travel lovers

I love shopping or enjoying my life.

Good at sharing

Hope to have experience and traces of life

Introduction

Backpackers

Youyou

3-5 days of vacation

Travel for more than 15 days

......

 

After considering these questions, we will select three features that best suit your target users: Share and write your thoughts, find routes and strategies, and book tickets (air tickets and tickets ).

 

C.By defining the filtering function for the target user:

After you have determined the features of the target user, there are only a few remaining features, and you will get it: great programs should focus exactly like lasers on the tasks that the user wants to accomplish.

For example, think about the number of potential features you have configured for a travel program in step 1. Although these functions are useful, they do not mean that each function is equally useful to users. The most important thing is that the target users in step 2 have different degrees of liking for these features.

With the target user in mind, check the function list and focus the program on three Function Points: taking photos, sharing and writing records, subscribing to various ticket forms, and obtaining the location search strategy.

Now you can define your program to accurately summarize the functions and target users of the program. A good definition should be as follows:

"A tool for solving travel strategy, recording a bit of information and purchasing tickets online"

 

D.Designed for devices:

We know that different devices have different systems, and different systems have different native interaction and UI controls, which are well utilized and can greatly reduce development costs, in addition, the user experience is consistent, making them feel that the Operation habits of iPhone apps should follow the iPhone's original inertia.

 

2. transplant a product from a webpage:

More often, when we have a mature web product, we will need to seize the user's time in the fragment to help them solve the problem. At this time, you need to reconsider the web design.

1. First, you need to pay attention to your program,Extract important functionsAlways think about ads and make sure that you do not change the application direction because of too many features or the extraction of important functions.
2. Make sure your app,Help Users do thingsTo complete tasks more efficiently and directly, whether it is game tasks or work tasks.
3. Considering the features of mobile devicesSuitable Interaction:

Reasonable and easy touch gestures.

When the content cannot be displayed, you can consider turning pages on the client, because page turning is a very easy operation.

Reset the Home Page icon. On the web side, the buttons of the two functions may be far apart, but on the mobile platform, you need to rethink the relationship between their locations.

We can see that in the "Evernote" instance, the toolbar always shows the functions throughout the application: add events, view historical notes, tags, sync, and quick search when you take too many notes. The hierarchical relationship is changed from a three-level list layer to a single layer (for example, if a toolbar is used as a layer, it is two layers ). Cut down less important functions such as event classification, time reminders, project cooperation, and sharing with friends.

 

Designed for different platforms

Finally, do not forget to adapt to different device platforms. For example, the return button appears on both iOS and Android interfaces, because IOS does not have a physical return key, while the Android device platform has a physical return key, however, it is not that smooth to move our fingers from the screen to the physical key when performing a task. In plum devices, applications sometimes remove the return key (the return operation of plum is to move the physical key to the left) Because Plum's user loyalty and habits are very high, the first reaction is to use the physical key, so the return button on the interface will look awkward at this time.

All in all, we must show the most importantSpirit and Function. In this way, you can design the expected and ideal program.

 

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