iOS vs. Android App UI Design: The Complete Guide

learnui.design learnui.design2 years ago in#UX Love543

If you’re designing both an iOS and an Android (Material Design) version of an app, this guide is your new best friend 😎. We’re going to cover the most relevant differences between iOS and Android for UX/UI designers. If you’ve created an app on one platform, this is most of what you need to know to “translate” it for the other platform. But! – these are guidelines, and basically everything I’ll say is contradicted somewhere, even by Apple/Google themselves. This is about translating “iOS thinking” to “Android thinking” and vice versa. Here’s what we’ll cover. Skip ahead, or read it straight through – like a freak. It’s your call. Overview of the main differences Navigation Controls Typography Other platform standards iOS vs. Android UI Design: The Main Differences Here are the most important differences that UX/UI designers need to take into account when “translating” an app from iOS to Android or vice versa: Oh, and before we really dive in, let’s answer one important question that will frame everything else here… Do I have to make my Android and iOS apps different? Long story short: no. Apple and Google are both very smart companies with a zillion users each. They will make UX mistakes like anyone else, but in general, when they define a design language for the default way in which their system should work, they’re not going to be making incredibly glaring mistakes. So while I present two ways of doing everything below (the iOS way and the Android way), neither is wrong. If your users are able to confidently navigate and use the app you’re creating, then no one can tell you not to use tabs on iOS or modal views on Android. This article is written in the spirit of learning to “think in iOS” or “think in Android” – and if your goal is to make an app for both platforms, but have each feel native to the system it’s on, then this guide will be a huge help. With that being said, let’s dive in. iOS vs. Android Navigation Top-of-screen navigation We’ll start from the top – literally. Each platform has different standards for what appears at the top of most screens. On iOS, the (optional) left action is almost always some sort of “back” – whether to the previous screen sequentially (“Step 2” goes back to “Step “1), or the parent screen hierarchically (“Inbox” goes up to “Mailboxes”). Alternatively, a non-related destination can be linked here. The page title is virtually always present, and starts large, but shrinks with the header as the user scrolls. The optional right page action(s) can be displayed as a single text action or multiple icon actions. On Android, the page title is left-aligned. There doesn’t need to be anything to the left of the page title, but (a) if the page is a top-level page and there’s a hamburger button in the app, it appears there, or (b) if this page follows another sequentially, you can optionally add a back button. Resources: iOS navigation bars; Material Design top app bar Primary Navigation Destinations The main parts or “destinations” in the app are laid out in different ways. On iOS apps, primary destinations in the app are listed as tabs across the bottom. There are 2-5 tabs total They are labelled in size 10 font They represent the main destinations or “nouns” of the application For what it’s worth, many popular third-party iOS apps also conform to a few additional guidelines: Any tab that represents the primary action of the app – for instance, adding a new photo…

Like to keep reading?

This article first appeared on learnui.design. If you'd like to keep reading, follow the white rabbit.

View Full Article

Leave a Reply