UI design of Mobile mobile platform: reduce space footprint

Mobile UI design tips--how to reduce needless spaces

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 to render the screen information in the best state.

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

Improvement Principles

• Get rid of unwanted hints

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

• Control font size, highlighting similar entry information with 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.

• Rational 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. The touch screen is another case to consider, sliding makes it easier to flip the page, and the size of the clickable element needs to be enlarged 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.
This is the Coupon list page, the coupon is our most important display content, the user needs to preview more coupons information in a single screen. Store information second. tab navigation will be maintained to ensure that users do not get lost.

• Remove the caption.
• The default store information, click can be displayed under the bullets.
• 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.
Enjoy your design~