iOS & Android

iOS & Android

Design Guidelines

iOS & Android are operating systems used primarily in mobile technology, such as smartphones and tablets. Android, which is Linux based and partly open source, is more PC like than iOS, in that its interface and basic features are generally more customizable from top to bottom. However, iOS’ uniform design elements are sometimes seen as being more user-friendly.


IOS

IOSStatus Bar –Contains Battery Charge/Time/Network Connection. 
Things to Note- 
It can be hidden but should only be done when the media being displayed needs the extra realestate.

Navigation Bar- Contains Navigation control (like the back button)/Screen Title/Content Display Controls (like filtering).

Things to Note- If the screen title is too long to fit on the screen, it should be truncated not scaled down in size.

Content Display- Contains Standard and Custom content views such as map view/Page View/Table View/Web View and Collection View.

Things to Note- This is the most customizable area of the application. Typical screen views should remain as true as possible to the standard iOS screen design in order to minimize user familiarity.

Tab Bar/Toolbar- Contains the style navigation or progress bar/activity indication and/or other controls.

Things to Note- Tab bars are used as main source of navigation and as such should be present on every screen (excluding some edge cases) toolbars are only used when your application requires the user to edit the app’s content view.

Screen Sizes (in points)-

5/5S (320*568pt)

6/6S (375*667pt)

6 Plus/7 Plus (414*736pt)

iPad/iPad Mini  (768*1024pt)

Retina Support-

1X (1 Point= 1 Pixel (original iphones))

2X (1 Point= 4 Pixels (iphone 4, 5 & 6))

3X (1 Point= 9 Pixels (iphone 6 Plus))

Interface Icons-

App Store-1024*1024px

Tool/Nav Bar-44*44px @2X

Spot Light Search-80*80px @2X

Tab Bar-50*50px @2X


Android

Android

Status Bar- Contains Battery Charge/Time/Network Connection.
Things to Note- It can be hidden but should only be done when the media being displayed needs the extra realestate.

Main Action Bar- Contains Up Button/App Icon/Spinner

Things to Note- This bar is both a source of navigation as well as a toolbar for the displayed content.

Action Bar Tabs- Contains Tab style navigation.

Things to Note-You can choose between fixed and scrollable tabs for your action bar. Fixed allows the user to see all options at a glance while scrollable can support more view.

Content Display-Contains Standard and Custom content views such as map view/Page View/Table View/Web View and Collection View.

Things to Note-This is the most customizable area of the application. Typical screen views should remain as true as possible to the standard Android screen design in order to minimize user familiarity.

Navigation Bar-Contains Back Button/Home Button/History Button.

Things to Note-The Nav Bar is persistent across all views.

Screen Sizes (in density independent pixel (DPI or DP)-

Small (320*426dp)

Medium (320*470dp)

Large (480*640dp)

Extra Large (720*960dp)

Variable Screen Support

4X (xxxhdpi) 640dpi

3X (xxhdpi) 480dpi

2X (xhdpi) 320dpi

1.5X (hdpi) 240dpi

1X (mdpi) 160dpi

Interface Icons-

Action Bar-96*96px (xxxhdpi)

Contextual Icons-64*64px (xxxhdpi)

Google Play-512*512px

Launcher-192*192px (xxxhdpi)

LEAVE A REPLY

Please enter your comment!
Please enter your name here

This site uses Akismet to reduce spam. Learn how your comment data is processed.