Click me
Transcribed

iOS & Android Design Guidelines Cheat Sheet

iOS & Android Design Guidelines Cheat Sheet

In order to make designing for your target platforms easier, we made a cheat sheet for both iOS and Android Human Interface Guidelines (HIGs). It gives a high level summary of the User Interface, how to support multiple screen sizes, icon sizes, and touch gestures so that you don’t have to dig through the books to find them every time you need them



<div class='visually_embed' data-category='Technology' rel='infographic'>
<img class='visually_embed_infographic' src='http://thumbnails.visually.netdna-cdn.com/ios--android-design-guidelines-cheat-sheet_5193d06db6411_w587.png' rel='http://thumbnails.visually.netdna-cdn.com/ios--android-design-guidelines-cheat-sheet_5193d06db6411.png' alt='iOS & Android Design Guidelines Cheat Sheet' />
<div class='visually_embed_bar'>
<span class='visually_embed_cycle'><span>by </span> <a target='_blank' href='http://kinvey.com?utm_source=visually_embed'>Kinvey</a>.<br/>Explore more <a href='http://visual.ly'>infographics</a> like this one on the web's largest information design community - <a href='http://visual.ly'>Visually</a>.</span>
</div>
<a id='visually_embed_view_more' target='_blank' href='http://visual.ly/ios-android-design-guidelines-cheat-sheet?utm_source=visually_embed'></a>
<link rel='stylesheet' type='text/css' href='http://visual.ly/embeder/style.css' />
<script type='text/javascript' src='http://visual.ly/embeder/embed.js'></script>
</div> i0S 1OS and Android DESIGN GUIDELINES CHEAT-SHEET Your reference for designing apps for the two most popular mobile platforms BASIC MOBILE USER INTERFACE 1 8 6:21 2 l AT&T '3G 6:21 AM Comment Home Comments HOME CAMERA CHECKIN IBird, paintedPat, Konstantin916, greenlineband @ez_Jake_oven Wish I could go back to this little town... @ez_Jake_oven Wish I could go back to this little town... @IBird someday...someday @paintedPat see you the 4 @IBird so 5 .someday ... *Mockup not to scale *Mockup not to scale #1 STATUS BAR #1 STATUS BAR Contains Contains Battery charge, network connection, time Battery charge, network connection, time Things to note It can be hidden but should only be done when the media being displayed needs the extra real estate. Things to note It can be hidden but should only be done when the media being displayed needs the extra real estate. #2 NAVIGATION BAR #2 MAIN ACTION BAR %23 %23 Contains Contains the back button), screen title, Navigation controls (lik content display controls (like filtering) Up button, app icon, spinner Things to note If the screen title is too long to fit on the screen, it should be truncated-not scaled down in size. Things to note This bar is both a source of navigation as well as a toolbar for the displayed content. #3 CONTENT DISPLAY #3 CONTENT DISPLAY Contains Contains Standard and custom content views such as map view, page view, table view, web view, and collection view 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 designs in order to maximize user familiarity. 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 designs in order to maximize user familiarity. #4 TAB BAR / TOOLBAR #4 ACTION BAR TABS Contains Contains Tab style navigation Tab style navigation or progress bar, activity indicator and/or other controls Things to note You can choose between fixed and scrollable tabs for Things to note Tab bars are used as a main source of navigation and as such should be present on every screen (excluding some edge cases). Toolbars are only used when your applica- tion requires the user to edit the app's content view. your action bar. Fixed allows the user to see all options at a glance while scrollable can support more views. #5 NAVIGATION BAR Contains Back button, home button, and history button Things to note The nav bar is persistent accross all views. SUPPORTING MULTIPLE SCREENS Screen sizes In points (pt) Screen sizes In density-independent pixels (dip or dp) iPhone 4/4s iPhone 5 small normal 320 x 480pt 320 x 568pt 320 x 426dp 320 x 470dp iPad mini iPad2 large extra large 768 x 1024pt 768 х 1024pt 480 x 640dp 720 x 960dp ICON SIZES Interface icons Interface icons Toolbar/Nav Bar Action Bar 20 x 20px 24 x 24dp Tab Bar Content Display 30 х 30рх 12 x 12dp App icons App icons App store Spotlight search Google Play Launcher icon 512 x 512px 29 x 29px 512 x 512px 48 x 48dp App icon and web clip icon 57 x 57px Retina support Variable screen density support 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. 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 the MDPI bucket which is the most common screen density. Adjusting your custom graphics is as easy as scaling their sizes when you are exporting them: 2x 1x 2x 1.5x Ix 0.75x iphone 4s, iPhone 5 iPhone 4 iPad, iPad 2 iPad mini XHDPI 320dpi HDPI 240dpi MDPI 160dpi LDPI 120dpi New iPad TOUCH GESTURES touch long press double touch flick/swige pinch close pinch open drag shake device Brought to you by: QOkinvey Designed by: Jake McKibben

iOS & Android Design Guidelines Cheat Sheet

shared by Kinvey on May 16
13,794 views
10 shares
3 comments
In order to make designing for your target platforms easier, we made a cheat sheet for both iOS and Android Human Interface Guidelines (HIGs). It gives a high level summary of the User Interface, how ...

Publisher


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