Android vs iOS design guidelines
Choosing between Android and iOS to design an app is not easy decision. In order to make designing for your target platform easier, we have identified both iOS and Android Human Interface Guidelines.
Designing a mobile app seems simple when sketching it out on a whiteboard. But turning an idea into reality is not that easy as you think it is. The first thing you need to decide is whether you want to design an android or iOS app? What if you want to design both – android and iOS? Android and iOS framework share some basic principles but when it comes to design – both have very different aspects and principles. Well, design is the most important factor while developing a mobile app. We have simplified basic principles of designing android and iOS for you. Check out following design guidelines and build the app which increases customer satisfaction too.
1 App icons
In iOS app, icons are generally added to the application package as plain, squared PNG files. When rendered on the device iOS applies various effects to app icons. Generally, superellipse shape is used. You can design border stroke if you wish. Border stroke helps to recognize the edges of the icon. While designing an icon in android keep in mind – icon sizes, icon grid, key line shapes, color, shadow, material background and material foreground too.
Ideal Icon sizes for iOS & android are given below:
2 Status bar
iOS - It comprises battery display, network and time. The status bar can be kept hidden but only in the case when any media is being played in the full-screen mode.
Android - It comprises battery charge, network connection and time. The status bar only can be kept hidden when any media is being displayed and needs extra space.
3 Content display
Both android and iOS consist content such as map view, page view, table view, web view and collection view. The app's UI design can be customized as per your wish. Typically, screen views should remain as true as possible to the standard iOS and android screen designs in order to maximize user familiarity.
4 The navigation bar
The navigation bar contains control for navigating the application views and optionally manage the content of the current view. Navigation bar will always appear at the top of the screen. Android’s navigation bar consists of back-button, home button, and history button. In iOS, if the screen title is too long to fit on the screen – it should be decreased; not scaled down in size. The navigation bar should be persistent across all views.
5 The screen size
6 Action Bar of android
In android, you can choose between fixed and scrollable tabs for your action bar. Basically, fixed tabs allow the user to see all options at glance while scrollable can support more views.
7 Toolbar or tab bar of iOS
It contains tab style navigation or progress bar, activity indicator and other controls. Toolbars are only used when your application requires the user to edit the app’s content view.
8 Retina support
In iOS, for retina support all you need to do is export all custom icons at 2X - the regular size. If you are working with a bitmap program like Photoshop, you can start at 2X size and then scale down to the regular size. While for android, to support all of the varying screen densities that runs on it, android groups them into four buckets – XHDPI, HDPI, MDPI, and LDPI. Adjusting your custom graphics is as easy as scaling their sizes when you are exporting them.
9 Design philosophy
Google uses designing language named as Material Design. There are many great tools available on Material Design to check UI patterns and test designs as well. For iOS, Apple provides Human Interface Design Guidelines. Apple even provides some sample Photoshop and sketch resources on their site.
10 Moving screens
In android there is a universal navigation bar at the bottom. In iOS, the approach is little different. There is no universal back button available on iOS. Even every app screen needs to have a button on the top left corner.
11 The grid
It’s not common to use a column grid-like in web, sizes, padding, and spaces should be consistent across each platform. Material Design has defined specific grid – 8dp grid for general purpose and 4dp spacing for icons and types alignments. In case of iOS, nothing is specified about grid. But iOS app usually use multiples of 4pt and 5pt for sizes and spacing.
Android & iOS both have used default fonts in their design development. iOS uses San Francisco as default font. San Francisco font can be downloaded from Apple’s website by the members of the Apple Developer Program. Android uses Roboto as default font. Roboto can be downloaded from Google Fonts.
13 Assets and screen density
After completion of designing, next step is to export the assets. Well in that case you will find few differences between android and iOS. You can create sketch file to export assets. Though there are many tools available to create mockups still sketches are most popular among developers. Android devices are built by many companies so you will find different screen sizes and densities for Android app. Following a table is given for android screen density:
For iOS, screen densities are very simple. For modern devices – 2X and 3X size will work. Choosing between Android and iOS is a strategic decision. Android and iOS form a symbiotic relationship in the market which is a competitive market. According to market need, developers can create latest, greatest and bug-free app for the app store. Design your app with the affordances in mind. Feel free to drop your thoughts in comment box.