Click me
Transcribed

iOS And Android Design Guidelines

ieS & andro d Design Guidelines cheat-sheet Your reference for designing apps for the two most popular mobile platforms BASIC MOBILE USER INTERFACE 13G 1 2:54 STATUS BAR Contains- Battery charge / time / network- Connection. Things to note- It can be hidden but should only be done when the media being dis- played needs the extra realestate STATUS BAR -Contains Battery charge / time / network con- nection. -Things to note It can be hidden but should only be done when the media being dis- played needs the extra real estate Catego 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 MAIN ACTION BAR -Contains Up button / app icon / spinner -Things to note This bar is both a sourceof naviga- tion as well as a toolbar for the dis- Top C Top Pad Tep Fre Plague Games played content COLICE Catapu Games A Movie ACTION BAR TABS Contains CONTENT DISPLAY Contains- Tab style navigation. -Things to note You can choose between fixed and SPACE Standard and custome content views such as map view / page view / table view / web view / and collec- tion view Things to note- This is the most customizable area scr-ollable tabs for your action bar. fixed allows the user to see all options at a glance while scrollable can support more view. O Messer Social N of the application. typical screen views ahould remain as true as possible to the standard 1oS screen design in order to minimize user familarity CONTENT DISPLAY -Contains Android P Standard and custome content views such as map view / page view / table view / web view / and collection view TAB BAR/ TOOLBAR Contains~ The style navigation or progress bar / activity indi- cation 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. Featured -Things to note This is the most customizable area of the application. typical screen views ahould remain as true as possible to the standard android screen design in order to minimize user familarity NAVIGATION BAR -Contains Back button / Home button and History button -Things to note The Nav Bar is persistant across all views. *Mockup not to scale SUPPORTING MULTIPLE SCREENS SCREEN SIZES IN POINTSCPT) SCREEO SIZES IN DENSITY-INDEPENDENT PIXELSCDIP OR DP) Small Iphone 4/4s 320*480pt 320*426dp Iphone 5 Medium 320*568pt 320*470dp Large Ipad mini 768*1024pt 480*640dp Extra-Large 720*960dp ipad2 768*1024pt Retina Support in iOS For retina support, all you need to do is export all custom icons/graphics at 2x the regular size. if you are working with a bitmap program like photoshop, you will need to start at the 2x size and then scale down to the regular size. 2х Iphone 4s Iphone 5 New Ipad 1x Iphone 4 Ipad, Ipad2 Ipad mini Variable Screen Support in Android In order to support all of the varying screen densities that run on it, Android groups them into four buckets LDPI, MDPI, HDPI and XHDPI. the sizes listed on this doc support MDPI bucket which is the most common screen density. adjust- ing your custome graphics is as easy as scaling their sizes when you are export- ing them. 2х 1.5x 1x 0.75x XHDPI HDPI MDPI LDPI 320dpi 240dpi 160dpi 120dpi ICON SIZES INTERFAÇE ICONS APP ICONS APP ICONS App Store |1024*1024px Google Play 512*512px Toolbar/ Navbar Action bar 20*20px 24 24dp App icon and web clip icon 57*57px Launcher icon Tab Bar 48*48dp Content display 30*30px 12 12dp Spot light search | 29*29px TAE

iOS And Android Design Guidelines

shared by theappentrepreneur on Sep 02
1,507 views
4 shares
0 comments
When you are making an app, to follow your platform’s design guidelines is a tried and better way to increase metrics such as user retention and customer satisfaction.

Category

Technology
Did you work on this visual? Claim credit!

Get a Quote

Embed Code

For hosted site:

Click the code to copy

For wordpress.com:

Click the code to copy
Customize size