Tencent Game Senior Designer! 5 tips for moving a small screen design

Editor's note: Mobile device is now one of the main network browsing, how to do a good job in the interface of gold and the user experience is a lot of designers headaches. Today Tencent game senior designers combined with years of experience + several popular app interface, summed up a small screen design 5 practical moves, the UI designers hurriedly collection!

wayne:1997 years, it is a spring, an old man in the South China Sea drew a circle, this circle is painted in our big Shenzhen! The circle of people is comrade Xiaoping.

2014, or this spring, the popularity of mobile devices has become another change in the current development of the Internet, we are in a variety of small screen painting one after another circle, now, the user's mobile experience is not intended to be better, because more and more sites have started to design mobile devices, Designers also understand what's better for small screens. However, there are still a number of obstacles to performing task operations on the phone.

Dear Friends of the Base division if you are troubled by this, please pay attention to the following moves:

First of all, even if the 4G download time problem persists, then users hate websites that need a lot of downloads, because they need to pay for it, and once again, even experienced mobile users are no different from ordinary people when they access the full web site via the mobile side. This means that the user still has a high failure in the entire mobile experience.

If viewed from the equipment, the current market major mobile devices can be divided into: functional mobile phones, smartphones, full-screen mobile phones.

Remark: Functional mobile phone: is the basic function has, does not have the function expansion or the rare expansion handset, its biggest difference is the smart phone. Functional mobile phone general standby time for the president, more stable.

Smart Mobile: Refers to the same as a personal computer, with an independent operating system, independent operation space, can be installed by the user's own software, games, navigation and other third-party providers to provide the program, and through the mobile communication network to achieve wireless network access to such a class of mobile phones collectively.

Full Screen mobile phone: Also can be called touch screen mobile phone, the biggest feature is its oversized screen, using touch screen technology, the technology applied to the mobile phone screen above an intelligent mobile phone. It is the most popular mobile phone class nowadays.

To achieve higher user performance, you should design a different experience for each type of mobile device: the smaller the screen, the less functionality, and the simpler the design should be.

How do I design for a small screen?

When designing for mobile devices, focus on two points:

1. Content and navigation is clear enough, users do not have to spend the cost of learning.

2. Design for small screen and slow download speed.

These two points explain why all mobile Web sites must be made according to the characteristics of the target site.

The space of the inch gold--mobile screen is so small, you so waste space your mother know?

Figure II shows a way to show more news, this is the actual use of people. Figure A compared to more user-step operation, although good-looking but flashy. Why do users prefer ordinary and somewhat uninteresting designs in their daily use? This is because the design allows the user to see more content at a glance.

The second case is the successful waste of the ipad's screen space, which allows most of the weather information to be densely packed at the bottom, while most of the screen space is decorated with a pure picture, so the default design is tedious.

One content two presents more choices

The same data if there are two different rendering is a bit redundant, usually the designers do not know which is more suitable for users, so give two solutions, let users choose for themselves. Using two interfaces for data, the only logical scenario is that the two data need to be emphasized in two different directions.

The group's interface has a list view and a map view, which allows users to view different directions, including detailed information and prices, while the map shows the location of the restaurant.

There are two displays in the ibook, but you will find that one interface is obviously superior to the other. It turns out that the list interface makes it easier for users to identify books and authors, or to make quick searches with titles, which are sorted alphabetically by letter and not in the bookshelf. The existence of a large number of books, through the book cover quickly find the possibility of the lower end.

Don't let the virtual elements rob the territory.

A virtual design element is a command that provides information about the content of the screen, or the operation of the content, like a user. These virtual elements are usually provided by the underlying system. For example, the PC side of his virtual element is a variety of PC instructions such as taskbar, System Tray area. The menu bar, toolbar, and so on in the Software PS tool.

The cost of using these virtual elements on the mobile side is obvious, they take up space, and the area that compresses the content.

You'll find these virtual elements in figure one that make the content less effective, but also as the system's own elements stack up, the accumulated virtual elements usually occupy half the screen space. It is also dangerous if we hide these elements temporarily, because the user is often ignored for invisible parts. So what's the good?!!!

In fact, as long as you treat them kindly, they will naturally repay you with a better gesture:

1. Consider the simpler and more effective design of these virtual elements

2. Provide consistency from beginning to finish, let the user remember you these virtual operations are in hiding state, and his operation can repeat this pattern continuously.

3. Contextual hints and incremental exposures reduce the complexity of concealment through the spread of content.

The path is hidden from the early days of the menu, and long-term use fosters a user's awareness of the virtual element. And you need to repeat that in the process.

Reader default state tool is hidden, users can understand the page through the text scattered, click on the screen to exhale tools.

Where is the time to go--the secret of downloading time

Just imagine that if you have the space to use well, but the waiting time is very long, users will not forgive you. Therefore, when designing for mobile devices, it is critical to minimize the cost of interactive processes.

1. Let the operation process less, the need to download less interface the better. For example, if the content is already stored on the phone, it does not need to download information from the server.

2. Load only the information that is needed, that is, the value information that is useful to the user.

3. Do not misuse pictures. The more pictures, the slower the download speed. PS: Perhaps this is one of the reasons why flattening is prevalent at the mobile end.

4. Provide feedback to users. For example, your download to what kind of state, need to let users have a knowledge, so although not completely solve their interrupt operation, but can slightly alleviate.

Solve the above problem is not to be able to retain users, improve the success rate?

Take a look at the last trick!

Early registration and high threshold must be avoided

One of the most important principles of mobile applications is to avoid allowing users to register in the first step. Because the initial users of such products did not establish a perception and goodwill, in the initial requirements of the user registration is wrong. It's important to keep in mind that the user has a low level of commitment to your application at the beginning. Unless you're really awesome and too popular, it's worth registering for.

Let's take a look at a couple of cases here:

Figure I in the first step is to ask users to fill out the information, resulting in a great loss rate, because the initial user did not have your information to know, you why ask someone to fill out. Figure II Forced user registration, you long so why do I register?! Many people will quit the application and never touch it. Then you lose a good first impression of others.

The case shown above is a reasonable experience:

1. Display the information the user needs

2. Let the user make their own order

3. Display price information, and the corresponding order time.

4. Accept the order, at this time request to fill in registration and other relevant information, just right.

In the design of the mobile End If you can consider the above points, I believe that your mobile design will be more sincere, in fact, users more often just want to see you for their tailor-made services. This is like Comrade Deng Xiaoping designated Shenzhen as the reform and opening-up zone, enjoying economic privileges, so the sincerity of a circle created today's Shenzhen.

The feeling is not deep, the wine is stuffy

Sincerity is not enough for you to make clothes