{"id":3229,"date":"2016-09-20T16:09:26","date_gmt":"2016-09-20T16:09:26","guid":{"rendered":"http:\/\/www.ckl.io\/?p=3229"},"modified":"2022-07-01T17:55:25","modified_gmt":"2022-07-01T17:55:25","slug":"designing-native-apps-for-android-and-ios-key-differences-and-similarities","status":"publish","type":"post","link":"https:\/\/cheesecakelabs.com\/blog\/designing-native-apps-for-android-and-ios-key-differences-and-similarities\/","title":{"rendered":"Designing native apps for Android and iOS: key differences and similarities"},"content":{"rendered":"

Smartphones have been in the market for a while now. After some comings and goings of different players, Android and iOS were established as the main contenders and now represent almost 99% of the global market share<\/a>. Because of that, virtually any new app idea will focus on these two platforms.<\/p>\n

In this article I\u2019ll be talking about the main differences and similarities that every designer should consider when designing UX and UI for iOS and Android<\/a>. You can be starting from scratch or already have a published app that needs to be adapted for the other platform. For both cases, I\u2019ll be constantly linking the platform guidelines, as they are the main source of reference when designing a new interface.<\/p>\n

<\/p>\n

App Icons<\/h2>\n

An app icon is probably the first thing the user will see and where the brand will be more visible.<\/p>\n

iOS guidelines define a few rules for its icons<\/a>: they usually follow a flat style and skeuomorphism – the act of representing or imitating  real-world elements – stopped being  recommended since iOS7. You should also take into account that all iOS icons have the same shape \u2013 a square with rounded corners \u2013 and they can\u2019t have transparent background. In the end this square shape is the canvas you\u2019ll be working to create an icon.<\/p>\n

Android, in the same way, proposes the material guidelines for icons<\/a>, that between other recommendations, suggest a range of colors and the use of paper shadows. These are, of course, just recommendations, and most apps don\u2019t follow these guidelines strictly. The main difference from iOS is that Android icons are allowed to have transparent background, so you can basically work with any shape that fits the icon area.<\/p>\n

\"The<\/p>\n

The App Bars<\/h2>\n

Referring to the basic elements of a mobile interface sometimes can be confusing. Android and iOS name similar items differently and give the same name to different items. It\u2019s always good to know how each bar is called on each platform, it makes a conversation between designers and developers<\/a> much clearer.<\/p>\n

These bars should have consistent styles across the app and follow the platform sizes for a native look and feel. For iOS you’ll find these definitions following this link<\/a>, while for android they are here<\/a>.<\/p>\n

\"the_bars\"<\/p>\n

The Grid<\/h2>\n

Even though it\u2019s not common to use a column grid like in the web, sizes, paddings and spaces should be consistent across each platform. Material Design defines a specific grid<\/a>: 8dp grid for general purposes and a 4dp spacing for icons and types alignment. Meanwhile iOS is not specific about grid, but apps usually use multiples of 4pt and 5pt for sizes and spacings.<\/p>\n

\"grid\"
The Android 8dp grid.<\/figcaption><\/figure>\n

The Navigation<\/h2>\n

Besides styles, navigation is where huge differences will come up. Some components can be exclusive or more common in one platform and this may change the main navigation structure of an app.<\/p>\n

iOS uses the tab bar as a main navigation component, while Android can use tabs or a drawer menu. The use of a bottom navigation bar on Android is not very common, but it is part of the Material guidelines<\/a>, and some apps like Foursquare and Instagram use it. It\u2019s up to you to decide \u2013 and test \u2013 if your users are ready to use this component.<\/p>\n

\"navigation\"<\/p>\n

The main actions of a screen, like adding a new item, will usually use a floating button on Android. On iOS they are usually positioned on the right side of the navigation bar.<\/p>\n

\"action-buttons\"<\/p>\n

Another big difference is that Android has the navigation bar, a set of three physical or virtual buttons (back, home and overview), depending on the device. iOS has only the physical home button. This means that Android users can go back anytime, not depending on a back button inside the app. The built in back button will always send the user back in history, even outside the app. On the other hand, iOS users will always need the back button on the interface, otherwise they can get stuck in a screen.<\/p>\n

Typography<\/h2>\n

Both Android Material and iOS have default fonts that are encouraged to be used.<\/p>\n

Android uses Roboto as the default typeface and Noto for languages that are not covered by Roboto. Both can be downloaded from Google Fonts<\/a>.<\/p>\n

iOS uses San Francisco as the default font. There are two variants of the font, according to the guidelines<\/a>, SF UI Text is used for text 19 points or smaller, and SF UI Display for text 20 points or larger. San Francisco font can be download from Apple\u2019s website<\/a> by members of the Apple Developer Program.<\/p>\n

Assets and Screen Densities<\/h2>\n

Once the design is done and is ready to be implemented, you\u2019ll need to export the assets, and you\u2019ll also find a few differences  between Android and iOS. If you use Sketch to build interfaces, there are good tips in my previous article<\/a>.<\/p>\n

Android devices are manufactured by many different companies, because of that, you\u2019ll find a lot of different screen sizes and densities. Basically Android will require 1x, 1.5x, 2x, 3x and 4x as you can see in the table below.<\/p>\n

\"Android
Android screen densities. Source: https:\/\/design.google.com\/articles\/design-from-ios-to-android\/<\/figcaption><\/figure>\n

Meanwhile, on iOS it’s much simpler to work with screen densities<\/a>: for modern devices, 2x and 3x resolutions will do the job.<\/p>\n

Apps Interfaces Examples<\/h2>\n

So, we\u2019ve talked about the main differences and similarities between the platforms. I\u2019ve gathered a few screenshots of famous apps on each platform so you can compare them.<\/p>\n

\"twitter\" \"uber\" \"spotify\" \"instagram\" \"foursquare\"<\/p>\n

Wraping up<\/h2>\n

This is just a starting point, there are other several differences, either visually, in components or in interactions that should also be taken into account. Using apps in both platforms and paying attention to these details will also help to understand how similar tasks can be handled differently on each platform. Hope you enjoyed it, feel free to leave your thoughts about it.<\/p>\n","protected":false},"excerpt":{"rendered":"

Smartphones have been in the market for a while now. After some comings and goings of different players, Android and iOS were established as the main contenders and now represent almost 99% of the global market share. Because of that, virtually any new app idea will focus on these two platforms. In this article I\u2019ll […]<\/p>\n","protected":false},"author":65,"featured_media":3283,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6],"tags":[],"class_list":["post-3229","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-product-design"],"yoast_head":"\nDesigning native apps for Android and iOS: key differences and similarities<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/cheesecakelabs.com\/blog\/designing-native-apps-for-android-and-ios-key-differences-and-similarities\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Designing native apps for Android and iOS: key differences and similarities\" \/>\n<meta property=\"og:description\" content=\"Smartphones have been in the market for a while now. After some comings and goings of different players, Android and iOS were established as the main contenders and now represent almost 99% of the global market share. Because of that, virtually any new app idea will focus on these two platforms. In this article I\u2019ll […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cheesecakelabs.com\/blog\/designing-native-apps-for-android-and-ios-key-differences-and-similarities\/\" \/>\n<meta property=\"og:site_name\" content=\"Cheesecake Labs\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/cheesecakelabs\" \/>\n<meta property=\"article:published_time\" content=\"2016-09-20T16:09:26+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-07-01T17:55:25+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2016\/09\/Banner_iosandroid1.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"2000\" \/>\n\t<meta property=\"og:image:height\" content=\"720\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Cheesecake Labs\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@cheesecakelabs\" \/>\n<meta name=\"twitter:site\" content=\"@cheesecakelabs\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/cheesecakelabs.com\/blog\/designing-native-apps-for-android-and-ios-key-differences-and-similarities\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/cheesecakelabs.com\/blog\/designing-native-apps-for-android-and-ios-key-differences-and-similarities\/\"},\"author\":{\"name\":\"Bruno M\u00fcller\"},\"headline\":\"Designing native apps for Android and iOS: key differences and similarities\",\"datePublished\":\"2016-09-20T16:09:26+00:00\",\"dateModified\":\"2022-07-01T17:55:25+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cheesecakelabs.com\/blog\/designing-native-apps-for-android-and-ios-key-differences-and-similarities\/\"},\"wordCount\":1017,\"commentCount\":0,\"image\":{\"@id\":\"https:\/\/cheesecakelabs.com\/blog\/designing-native-apps-for-android-and-ios-key-differences-and-similarities\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2016\/09\/Banner_iosandroid1.jpg\",\"articleSection\":[\"Product Design\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/cheesecakelabs.com\/blog\/designing-native-apps-for-android-and-ios-key-differences-and-similarities\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cheesecakelabs.com\/blog\/designing-native-apps-for-android-and-ios-key-differences-and-similarities\/\",\"url\":\"https:\/\/cheesecakelabs.com\/blog\/designing-native-apps-for-android-and-ios-key-differences-and-similarities\/\",\"name\":\"Designing native apps for Android and iOS: key differences and similarities\",\"isPartOf\":{\"@id\":\"https:\/\/cheesecakelabs.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cheesecakelabs.com\/blog\/designing-native-apps-for-android-and-ios-key-differences-and-similarities\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cheesecakelabs.com\/blog\/designing-native-apps-for-android-and-ios-key-differences-and-similarities\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2016\/09\/Banner_iosandroid1.jpg\",\"datePublished\":\"2016-09-20T16:09:26+00:00\",\"dateModified\":\"2022-07-01T17:55:25+00:00\",\"author\":{\"@type\":\"person\",\"name\":\"Bruno M\u00fcller\"},\"breadcrumb\":{\"@id\":\"https:\/\/cheesecakelabs.com\/blog\/designing-native-apps-for-android-and-ios-key-differences-and-similarities\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cheesecakelabs.com\/blog\/designing-native-apps-for-android-and-ios-key-differences-and-similarities\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cheesecakelabs.com\/blog\/designing-native-apps-for-android-and-ios-key-differences-and-similarities\/#primaryimage\",\"url\":\"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2016\/09\/Banner_iosandroid1.jpg\",\"contentUrl\":\"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2016\/09\/Banner_iosandroid1.jpg\",\"width\":2000,\"height\":720},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cheesecakelabs.com\/blog\/designing-native-apps-for-android-and-ios-key-differences-and-similarities\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cheesecakelabs.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Designing native apps for Android and iOS: key differences and similarities\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/cheesecakelabs.com\/blog\/#website\",\"url\":\"https:\/\/cheesecakelabs.com\/blog\/\",\"name\":\"Cheesecake Labs\",\"description\":\"Nearshore outsourcing company for Web and Mobile design and engineering services, and staff augmentation for startups and enterprises..\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/cheesecakelabs.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"name\":\"Bruno M\u00fcller\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cheesecakelabs.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2016\/10\/brunomuller-300x300.jpg\",\"contentUrl\":\"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2016\/10\/brunomuller-300x300.jpg\",\"caption\":\"Bruno M\u00fcller\"},\"description\":\"10 years of experience in Marketing and Sales in the Technology sector. My main purpose is help, support and structure efficient operations and also develop independent and multidisciplinary teams.\",\"url\":\"https:\/\/cheesecakelabs.com\/blog\/autor\/brunomuller-3\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Designing native apps for Android and iOS: key differences and similarities","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/cheesecakelabs.com\/blog\/designing-native-apps-for-android-and-ios-key-differences-and-similarities\/","og_locale":"en_US","og_type":"article","og_title":"Designing native apps for Android and iOS: key differences and similarities","og_description":"Smartphones have been in the market for a while now. After some comings and goings of different players, Android and iOS were established as the main contenders and now represent almost 99% of the global market share. Because of that, virtually any new app idea will focus on these two platforms. In this article I\u2019ll […]","og_url":"https:\/\/cheesecakelabs.com\/blog\/designing-native-apps-for-android-and-ios-key-differences-and-similarities\/","og_site_name":"Cheesecake Labs","article_publisher":"https:\/\/www.facebook.com\/cheesecakelabs","article_published_time":"2016-09-20T16:09:26+00:00","article_modified_time":"2022-07-01T17:55:25+00:00","og_image":[{"width":2000,"height":720,"url":"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2016\/09\/Banner_iosandroid1.jpg","type":"image\/jpeg"}],"author":"Cheesecake Labs","twitter_card":"summary_large_image","twitter_creator":"@cheesecakelabs","twitter_site":"@cheesecakelabs","twitter_misc":{"Written by":null,"Est. reading time":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/cheesecakelabs.com\/blog\/designing-native-apps-for-android-and-ios-key-differences-and-similarities\/#article","isPartOf":{"@id":"https:\/\/cheesecakelabs.com\/blog\/designing-native-apps-for-android-and-ios-key-differences-and-similarities\/"},"author":{"name":"Bruno M\u00fcller"},"headline":"Designing native apps for Android and iOS: key differences and similarities","datePublished":"2016-09-20T16:09:26+00:00","dateModified":"2022-07-01T17:55:25+00:00","mainEntityOfPage":{"@id":"https:\/\/cheesecakelabs.com\/blog\/designing-native-apps-for-android-and-ios-key-differences-and-similarities\/"},"wordCount":1017,"commentCount":0,"image":{"@id":"https:\/\/cheesecakelabs.com\/blog\/designing-native-apps-for-android-and-ios-key-differences-and-similarities\/#primaryimage"},"thumbnailUrl":"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2016\/09\/Banner_iosandroid1.jpg","articleSection":["Product Design"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/cheesecakelabs.com\/blog\/designing-native-apps-for-android-and-ios-key-differences-and-similarities\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/cheesecakelabs.com\/blog\/designing-native-apps-for-android-and-ios-key-differences-and-similarities\/","url":"https:\/\/cheesecakelabs.com\/blog\/designing-native-apps-for-android-and-ios-key-differences-and-similarities\/","name":"Designing native apps for Android and iOS: key differences and similarities","isPartOf":{"@id":"https:\/\/cheesecakelabs.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cheesecakelabs.com\/blog\/designing-native-apps-for-android-and-ios-key-differences-and-similarities\/#primaryimage"},"image":{"@id":"https:\/\/cheesecakelabs.com\/blog\/designing-native-apps-for-android-and-ios-key-differences-and-similarities\/#primaryimage"},"thumbnailUrl":"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2016\/09\/Banner_iosandroid1.jpg","datePublished":"2016-09-20T16:09:26+00:00","dateModified":"2022-07-01T17:55:25+00:00","author":{"@type":"person","name":"Bruno M\u00fcller"},"breadcrumb":{"@id":"https:\/\/cheesecakelabs.com\/blog\/designing-native-apps-for-android-and-ios-key-differences-and-similarities\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cheesecakelabs.com\/blog\/designing-native-apps-for-android-and-ios-key-differences-and-similarities\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cheesecakelabs.com\/blog\/designing-native-apps-for-android-and-ios-key-differences-and-similarities\/#primaryimage","url":"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2016\/09\/Banner_iosandroid1.jpg","contentUrl":"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2016\/09\/Banner_iosandroid1.jpg","width":2000,"height":720},{"@type":"BreadcrumbList","@id":"https:\/\/cheesecakelabs.com\/blog\/designing-native-apps-for-android-and-ios-key-differences-and-similarities\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cheesecakelabs.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Designing native apps for Android and iOS: key differences and similarities"}]},{"@type":"WebSite","@id":"https:\/\/cheesecakelabs.com\/blog\/#website","url":"https:\/\/cheesecakelabs.com\/blog\/","name":"Cheesecake Labs","description":"Nearshore outsourcing company for Web and Mobile design and engineering services, and staff augmentation for startups and enterprises..","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/cheesecakelabs.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","name":"Bruno M\u00fcller","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cheesecakelabs.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2016\/10\/brunomuller-300x300.jpg","contentUrl":"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2016\/10\/brunomuller-300x300.jpg","caption":"Bruno M\u00fcller"},"description":"10 years of experience in Marketing and Sales in the Technology sector. My main purpose is help, support and structure efficient operations and also develop independent and multidisciplinary teams.","url":"https:\/\/cheesecakelabs.com\/blog\/autor\/brunomuller-3\/"}]}},"_links":{"self":[{"href":"https:\/\/cheesecakelabs.com\/blog\/wp-json\/wp\/v2\/posts\/3229","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cheesecakelabs.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cheesecakelabs.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cheesecakelabs.com\/blog\/wp-json\/wp\/v2\/users\/65"}],"replies":[{"embeddable":true,"href":"https:\/\/cheesecakelabs.com\/blog\/wp-json\/wp\/v2\/comments?post=3229"}],"version-history":[{"count":1,"href":"https:\/\/cheesecakelabs.com\/blog\/wp-json\/wp\/v2\/posts\/3229\/revisions"}],"predecessor-version":[{"id":10331,"href":"https:\/\/cheesecakelabs.com\/blog\/wp-json\/wp\/v2\/posts\/3229\/revisions\/10331"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cheesecakelabs.com\/blog\/wp-json\/wp\/v2\/media\/3283"}],"wp:attachment":[{"href":"https:\/\/cheesecakelabs.com\/blog\/wp-json\/wp\/v2\/media?parent=3229"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cheesecakelabs.com\/blog\/wp-json\/wp\/v2\/categories?post=3229"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cheesecakelabs.com\/blog\/wp-json\/wp\/v2\/tags?post=3229"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}