Compiled with the assistance of the Tiger University Program of the Estonian Information Technology Foundation

The Anatomy of iOS Design

Ilja morgun, Jaagup Kippar

iOS Human Interface Guidelines

The Basics
The comfortable minimum size of tappable
UI elements is 44 x 44 points

The quality of app artwork is very apparent The users focus is on the content

Screen Resolutions

Device
iPhone 3GS

Portait
320 x 480 pixels

Landscape
480 x 320 pixels

iPhone 4

640 x 960 pixels

960 x 640 pixels

iPad

768 x 1024 pixels 1024 x 768 pixels

Retina Display

Platform Characteristics

Native and Web Applications

Native applications come from the App Store

Applications cannot be side-loaded

All content needs to be saved automatically

The lesystem is never exposed to the user

Onscreen user help is minimal

User interacts with one app at a time

Multitasking UI
Launched with a double-tap on the Home
button

Appears at the bottom of the screen, below

the UI of the currently running app or the Home screen

Application Icon

iPhone and iPod Touch

57 x 57 pixels 114 x 114 pixels (high resolution)

iPad

72 x 72 pixels

Default Visual Effects

Rounded corners Drop shadow Reective shine (unless you prevent the
shine effect)

Original Icon

On the Home Screen

512 x 512 pixel for the App Store

Additional Icons

Icons for Spotlight and Settings

29 x 29 pixels 58 x 58 pixels (high resolution)

iPad Icons for Spotlight and Settings

29 x 29 pixels (for Settings) 50 x 50 pixels (for Spotlight search results)

Launch Images

For iPhone and iPod Touch

320 x 480 pixels 640 x 960 pixels (high resolution)

For iPad
768 x 1024 pixels (portrait) 1024 x 748 pixels (landscape)

UI Elements

Status Bar

Displays important information about the

device and the current environment

Navigation Bar
Enables navigation through an information
hierarchy and, optionally, management of screen contents

Toolbar

Contains controls that perform actions

related to objects in the screen or view

Tab Bar

Gives users the ability to switch between

different subtasks, views, or modes

Popover
Is transient Can be revealed when people tap a control
or an onscreen area

Split View

A full-screen view that consists of two sideby-side panes

Table View

Presents data in a single-column list of

multiple rows

Grouping Elements

Text View

Accepts and displays multiple lines of text

Web View

A region that can display rich HTML

content

Alerts

Give people important information that

affects their use of the application

Action Sheet

Displays a set of choices related to a task

the user initiates

Modal View

Provides self-contained functionality in the

context of the current task or workow

Date and Time Picker

Displays components of date and time, such

as hours, minutes, days, and years

Detail Disclosure Button

Reveals additional details or functionality
related to an item

Picker

Displays a set of values from which a user

picks one

Progress View

Shows the progress of a task or process

that has a known duration

Search Bar

Accepts text from users, which can be used

as input for a search

Scope Bar
Allows users to dene the scope of a
search

Is available only in conjunction with a

search bar

Segmented Control
Linear list of segments Each functions as a button Each button can display a different view

Slider
Makes adjustments to a value Has a specic range of values

Switch

Represents two mutually exclusive choices

Text Field

Accepts a single line of user input

iOS Simulator