iOS & Android: UI Design

This is a summary of the differences between each platform you need to be aware of when designing. As mobile design has advanced, it is gradually developing into a similar UX, but there are detailed differences within it. When designing a service, I tend to design a pattern according to the purpose and apply the same to each platform, but looking at the UI guidelines recommended by the OS will help me select a suitable pattern.

iOS version history

Android version history

Navigation

Since iOS doesn't have a back button at the bottom, put back in the top left for Hierarchy Back. Since Android has a History Back button at the bottom, it is designed in a way that does not include a back button in the top left corner.

Navigation Bar & App Bar

iOS calls it a navigation bar, and it tends to place two icons on the left and right, and in the case of Back, a label indicating which page to move to is often used together. Android calls it the app bar or action bar, and 2-3 action icons are located on the right, and more actions are put in More.

Tool bar & Floating Action Button

iOS uses toolbars to display a list of actions within a page as icons. Android uses a round button with a floating action bar to indicate the main action within the page.

app icon

iOS and Android have different app icon designs. Create icons corresponding to each resolution using a generator.

https://makeappicon.com

resolution

The resolution of iOS is fixed because the device used is fixed. Since Android devices and specifications are different for each manufacturer, it is necessary to consider the layout.

typeface

iOS uses San Francisco and Sandoll Gothic Neo1. Roboto is the default for Android, Samsung Gothic for Galaxy, and LG smart body for LG. Android also allows you to apply custom fonts. When developing Android, the font used by the user in the OS may not be applied in order to maintain the intended usability.

https://developer.apple.com/fonts/

https://fonts.google.com/specimen/Roboto

shadow

Android can configure shadows only with the Elevation native UI included in Material Design. In order to express custom shadows on Android, assets must be passed in 9-patch.

material design guide

android shadow generator

Product Design Guide

popularity

macmini-01
Mac Mini: Is the Power Button Another Design Crime?
one-uo-7-01
One UI 7 leak: Coming next year alongside the Galaxy S25
nanumhuman-01
Nanum Human: Naver's new font

Design Compass Academy

thumbnail-course-list-ux
UX Design Class: UX Design for Selected Services
ui-design-main-mobile
UI Design Class: Learn the essence of an interface that will never change

Latest news

alessi-esspresso-01
windows-hello-01
lloyds-01
simplicity24-01
nintendomusic-01
macmini-01
grimace-01
nanumhuman-01

Design Compass Class