• Language

  • Copyright © 2012 for code art and programming by Developers Global, New York City, USA, all rights reserved, ® 2008 - 2012
  • open panel
  • Blog
  • Mobile
  • iOS/Android User Interface Design Guidelines

iOS/Android User Interface Design Guidelines

Mobile app development can be a simple task if you have the right tools but at the same time it can also turn into a daunting one if you have to keep look for additional information in order to successfully complete the software development process.

This post is aimed at all of you out there that are trying to take up mobile app development. One of the first things that you should learn (and by learn I mean, learn by heart) is the User Interface. For efficient mobile app development you should know it inside out. Well, the guidelines below should be a pretty good place to start.



Android

1. Status Bar

You will find it at the top of the display.

  • Contents
    Clock, Network Connections, Battery, etc.
  • Things to keep in mind
    It is possible to hide it but this should only be done if the media or mobile app needs extra space to be displayed optimally.


2. Action Bar

Right under the Status Bar.

  • Contents
    Spinner, Up Button, Application Button.
  • Things to keep in mind
    Acts as a toolbar for the content displayed and as a navigation tool.


3. Content Display

The actual display. Occupies over 90% of the screen.

  • Contents
    Contains custom and standard views of web pages, maps, tables, media, etc.
  • Things to keep in mind
    This area is almost fully customizable but it is encouraged to use default Android screen views to ensure consistency with other applications. Most users don’t embrace unnecessary changes willingly.


4. Tabs

Found under the Action Bar.

  • Contents
    Tab based Navigation.
  • Things to keep in mind
    Includes an option to choose between scrollable tabs and fixed ones. Fixed tabs show all content instantly while scrolling tabs allow more views.


5. Navigation Bar

Found at the bottom of the screen.

  • Contents
    History Button, Home Button, Back Button.
  • Things to keep in mind
    The navigation bar is present across all views.



iOS

1. Status Bar

You will find it at the top of the display.

  • Contents
    Clock, Network Connections, Battery, etc.
  • Things to keep in mind
    It is possible to hide it but this should only be done if the media or mobile app needs extra space to be displayed optimally.


2. Navigation Bar

Right under the Status Bar.

  • Contents
    Screen Title, Navigation Controls and Content Display Controls.
  • Things to keep in mind
    When the screen title is too long, it should be truncated instead, not scaled down to size.


3. Content Display

The actual display. Occupies over 90% of the screen.

  • Contents
    Contains custom and standard views of web pages, maps, tables, media, etc.
  • Things to keep in mind
    This area is almost fully customizable but it is encouraged to use default iOS screen views to ensure consistency with other applications. Most users don’t embrace unnecessary changes willingly.


4. Toolbar

Found at the bottom of the screen.

  • Contents
    Activity Indicator, Progress Bar and other controls.
  • Things to keep in mind
    The controls displayed here are used as the main navigation tools so they should
    present on each screen. Toolbars should be used only to allow content view editing.

 
About the Author:

 

Radu is the Chief Communication Officer and your first point of contact for any informational requests related to Developers Global as well as your main source of information for any other questions you might have.