Focus on product UI design: Mobile Interface design principles and design tools

Article Description: Mobile interface design drip.

The design of mobile platforms differs from traditional Web pages in many ways, such as unique interactive experiences, visual effects under different lighting, and limited resources for mobile terminals. These are testing the technology of the developer.

By recording the design of mobile interface, this paper introduces the design principles and relevant cases of interface planning for readers, and recommends the design tools.

One, reduce space occupation

Unlike web design for desktop computers, screen space is a limiting factor in the design of mobile platforms. The design needs to conform to the usage of mobile platform users and render the screen information in the best state.

Next to the currently working UI as a sample, actual combat space optimization.

Improvement Principles

Remove unwanted hint information:

reasonable reduction of text information in the interface, graphical interface intuitive user can complete the operation task.

Control the font size, highlighting similar entry information using a highlight/contrast method:

There is a need to make full use of single-screen space, without affecting the text to display the bottom line, the use of multi-channel design methods to describe the content.

Reasonable layout function Control:

Reduce the use of controls in the display, learn to hide the low priority function intelligently, for the user familiar with the operation and product development will be beneficial.

As with the use of standardized action sheet on the iphone platform, collapsed menu in Android.

limiting factors

Platform Operating Habits

Follow the design guidelines for different platforms (you can get these help tutorials from the official UI Development Guide) to avoid bringing the wrong ideas to a particular platform. If you don't use Android/symbian options in the iphone design. Familiarity with these principles not only makes the product easy to use, but also improves the operational experience by using the combined design.

Screen Physical Properties

Different sizes of the screens are not the same as the UI. The display effect of the product to be considered on the different screens of all target users. If you want to do a version of the UI design, you need to focus on the negative impact. Touch screen is another case to consider, sliding makes it easy to flip the page, clickable element size is necessary to increase to fit the big finger ... You know, Mutli-touch is just Apple's patent.

What we need to do for this particular page

This is a program for an Android platform. A coupon list page, coupons are our most important display content. Users need to preview more coupon information in a single screen, store information second, and tab navigation will be maintained to ensure that the user does not get lost.

1. Remove title.

2. The default store information, click can be displayed under the bullets.

3. To ensure the user's initial knowledge and attention to store information, add the store name.

Next we will get the following interface.

UI is not just skin, please make the interface more useful.

[1] [2] [3] [4] Next page