Anatomy of iOS Design

7/23/2019 Anatomy of iOS Design

1/90

Compiled with the assistance of the Tiger University Program of the Estonian

Information Technology Foundation


2/90

The Anatomy of iOS

DesignIlja morgun, Jaagup Kippar


3/90

iOS Human InterfaceGuidelines


4/90

The Basics

The comfortable minimum size of tappableUI elements is 44 x 44 points

The quality of app artwork is very apparent

The users focus is on the content


5/90

Screen Resolutions


6/90

Device Portait Landscape

iPhone 3GS 320 x 480 pixels 480 x 320 pixels

iPhone 4 640 x 960 pixels 960 x 640 pixels

iPad 768 x 1024 pixels 1024 x 768 pixels


7/90

Retina Display


8/90


9/90


10/90

PlatformCharacteristics


11/90

Native and WebApplications


12/90

Native applications

come from the AppStore


13/90

Applications cannot beside-loaded


14/90

All content needs to besaved automatically


15/90

The filesystem is neverexposed to the user


16/90

Onscreen user help isminimal


17/90

User interacts with oneapp at a time


18/90

Multitasking UI

Launched with a double-tap on the Home

button

Appears at the bottom of the screen, belowthe UI of the currently running app or the

Home screen


19/90


20/90

Application Icon


21/90

iPhone and iPod Touch

57 x 57 pixels

114 x 114 pixels (high resolution)


22/90

iPad

72 x 72 pixels


23/90

Default Visual Effects

Rounded corners Drop shadow

Reflective shine (unless you prevent theshine effect)


24/90

Original Icon On the Home Screen


25/90

512 x 512 pixel for theApp Store


26/90

Additional Icons


27/90

Icons for Spotlight and

Settings

29 x 29 pixels



28/90

iPad Icons for Spotlight

and Settings

29 x 29 pixels (for Settings)

50 x 50 pixels (for Spotlight search results)


29/90

Launch Images


30/90

For iPhone and iPod

Touch

320 x 480 pixels



31/90

For iPad

768 x 1024 pixels (portrait)

1024 x 748 pixels (landscape)


32/90


33/90

UI Elements


34/90

Status Bar

Displays important information about thedevice and the current environment


35/90


36/90


37/90

Navigation Bar

Enables navigation through an informationhierarchy and, optionally, management of

screen contents


38/90


39/90


40/90


41/90

Toolbar

Contains controls that perform actionsrelated to objects in the screen or view


42/90


43/90

Tab Bar

Gives users the ability to switch betweendifferent subtasks, views, or modes


44/90


45/90


46/90

Popover

Is transient Can be revealed when people tap a control

or an onscreen area


47/90


48/90

Split View

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


49/90


50/90

Table View

Presents data in a single-column list ofmultiple rows


51/90


52/90


53/90


54/90

Grouping Elements


55/90

Text View

Accepts and displays multiple lines of text


56/90


57/90

Web View

A region that can display rich HTMLcontent


58/90


59/90

Alerts

Give people important information thataffects their use of the application


60/90


61/90


62/90


63/90


64/90

Action Sheet

Displays a set of choices related to a taskthe user initiates


65/90


66/90


67/90

Modal View

Provides self-contained functionality in thecontext of the current task or workflow


68/90


69/90


70/90

Date and Time Picker

Displays components of date and time, suchas hours, minutes, days, and years


71/90

Detail Disclosure


72/90

Detail Disclosure

Button

Reveals additional details or functionalityrelated to an item


73/90


74/90

Picker

Displays a set of values from which a userpicks one


75/90


76/90

Progress View

Shows the progress of a task or processthat has a known duration


77/90


78/90

Search Bar

Accepts text from users, which can be usedas input for a search


79/90


80/90

Scope Bar

Allows users to define the scope of asearch

Is available only in conjunction with asearch bar


81/90


82/90

Segmented Control

Linear list of segments Each functions as a button

Each button can display a different view


83/90


84/90

Slider

Makes adjustments to a value

Has a specific range of values


85/90


86/90

Switch

Represents two mutually exclusive choices


87/90


88/90

Text Field

Accepts a single line of user input


89/90


90/90

iOS Simulator

Anatomy of iOS Design

Documents

Transcript of Anatomy of iOS Design