UI design of Mobile mobile platform: reduce space footprint

Source: Internet
Author: User
Tags interface touch

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~



Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.