iPhone UI Library

Welcome

Always start your mockups with the latest version from MockApp.com

Hello, This library file contains iPhone UI elements youll want to copy and paste into your MockApp Template file. Vector format: Most UI elements youll find here have been recreated in vector format so you can edit their text and even modify their shape, color, gradient, etc. Grouping / ungrouping: Note that most of the UI elements have been created by grouping several shapes together. You may want to copy and paste the UI element youre working on into your app template before ungrouping it. That way you always keep a clean grouped copy here. Enjoy MockApp! Dotan Saguy If theres a UI element you cant find here, email me at [email protected] and Ill do my best to include it in the next release.

The comments in this file are meant as handy reminders ONLY. You must refer to Apples latest iPhone Interface Guidelines document as the definitive guide in the matter.

iPhone UI Library
To create your App mockup just copy and paste UI elements to the right into your MockApp Template (the other file).

Status Bar, Navigation Bar, etc.

Status bar
Appears at the very top of the screen. Shows important information about their device, including signal strength, the current network connection, and battery charge. You can hide the status bar in an full-screen app (i.e. a game), but be aware that users like seeing this important information.

Always start your mockups with the latest version from MockApp.com

Navigation bar
Very popular and useful UI element. Appears at the top of the screen immediately under the status bar. Usually displays the title of the current view and can contain buttons that either do things to the view (Save, etc.), and/or navigate (Back, etc.)

Status bar

Carrier Carrier Carrier 3G

10:32 AM 10:32 AM 10:32 AM

Back Button

Pane Label

Button

Optional instructions for this pane Cancel

Navigation bar

Tab bar and badges

Recommended for apps that present the same type of information in different views (think iPod app, phone app, etc). Appears at the very bottom of the screen. Gives users the ability to switch among different modes or views in an application. Should be present on all screens to allow the user to switch quickly between the modes/views. 6
Music Videos Podcasts Search More

Pane Label Pane Label

Save

Disabled

Activity Indicator

Groups

All Contacts 2 of 50

Inbox (20)

A collection of tab bar icons is located on the next slide

Tab bar

Badges are superimposed to icons in the tab bar to inform the user of new items not yet acted upon in the corresponding tab 9 99 999

Page Indicator Activity Indicators

An activity indicator should be displayed if the app will take more than a couple of seconds to perform the current task

Activity indicator for nav bar

on grey background...

Network activity

iPhone UI Library
iTunes store and iPod tab controllers + icons
(including table view black on white versions)

Tab Bar Icon Library

Youtube, App Store and Phone additional tab controller + icons (including table view black on white
versions)

Always start your mockups with the latest version from MockApp.com

More tab bar icons coming soon!

6
Music Videos Podcasts Search More Featured Favorites Most Recent Top Rated More

Music

Videos

Podcasts

Search

More

Featured

Favorites

Most Recent

Top Rated

More

iTunes U

Downloads

Ringtones

Genres

Artists

My Videos Subscriptions Playlists

Categories

Updates

iTunes U

Downloads

Ringtones

Genres

Artists

My Videos Subscriptions Playlists

Categories

Updates

Audiobooks Compilations Composers

Albums

Playlist

Contacts

Keypad

Voicemail

Audiobooks Compilations Composers

Albums

Playlists

Contacts

Keypad

Voicemail

Clock App tab bar controller.

iDisk App tab bar controller.

World Clock

Alarm

Stopwatch

Timer

iDisk

Recents

Shared Files

Public Folders

World Clock

Alarm

Stopwatch

Timer

iDisk

Recents

Shared Files

Public Folders

iPhone UI Library
To create your App mockup just copy and paste UI elements to the right into your MockApp Template (the other file).

Toolbar, Browser Bar, Search Bar

Toolbar
Use a toolbar where the user can take various actions in the current context (for example browser screen, email reader screen). Appears at the very bottom of the screen. A toolbar should not be used to toggle among the different modes of an app; if you need to do this, use a tab bar instead. Keep in mind that the hit-region is recommended to be 44 x 44 pixels, so providing five or fewer toolbar icons is preferable.

Always start your mockups with the latest version from MockApp.com

Search Bar
When the user taps a search bar, a keyboard appears. By default, a search bar displays the search (magnifier) icon on the left side. In addition, a search bar can display a few optional elements:

Placeholder text (for example, Search) The Bookmarks button to provide a shortcut to previously
bookmarked searches/items.

The Clear button to erase the contents of the search bar. A descriptive title, called a prompt, that appears above the
search bar (for example, Directions)

Progress Indicator 24 of 39

Sample search text

Browser bar
Search
Primary Secondary Clear

Directions

Cancel

Start: Current Location

Browser bar
Toolbar
mockapp.com/
MockApp

End: Google

Type a company name or stock ID.

Cancel

MockApp

Cancel

http://mockapp.com/

Search

Cancel

MockApp

Cancel

Google

iPhone UI Library
Previous Next Previous disabled Next disabled Back Forward 2

Toolbar Icons and other icons (vector)

Page Add Bookmark Low volume High volume Delete locked Delete unlocked Grab and move Need to re-color an icon?

Always start your mockups with the latest version from MockApp.com

Most of these icons have been created by grouping several shapes together so you may have trouble coloring them. If so try this: 1) Copy the icon to your MockApp template file 2) Ungroup the icon into all of its parts 3) Color each part (color the fill or the stroke depending on the case). 4) Regroup the shapes that form the icons so you can move it around

Detail Disclosure

Back Disabled Forward disabled Fast forward

Add contact

Bookmarks Street view

Move backward Unread Pause Info Reply Camera Refresh Action Route Organize Trash Compose Search Erase Stop 9 99 999 Single digit badge

Double digit badge Triple digit badge Any toolbar icons missing? email me at dotan@mockapp,com and I will add them in the next version.

iPhone UI Library
To create your App mockup just copy and paste UI elements to the right into your MockApp Template (the other file).

Action sheets, Bubbles

Action sheets
An action sheet the user a set of choices for a task he/she just selected. It appears at the bottom of the screen by sliding upwards and over the current view. Action sheets can be used either to provide a selection of ways a task can be completed or to get confirmation before completing a potentially destructive task (i.e. delete or cancel). The most important or common action should appear as the top button. If the action is destructive (i.e. Delete), a red button might be called for.

Always start your mockups with the latest version from MockApp.com

0:00

0:28

OK

Delete

Primary action
Action sheet

Play

Record

you can also do this or maybe this or why not that Cancel

Bubbles
Select Select All Paste

Im hoping this one will help put MockApp on the map ;-)

MockApp

Delete

Cancel

iPhone UI Library
To create your App mockup just copy and paste UI elements to the right into your MockApp Template (the other file).

Alerts, Text Views, Web Views

Alerts
Alerts should be used ONLY for situations that require immediate user attention, typically from processes running in the background. Alerts pops up in the middle of the screen and contrarily to action sheets, alerts are not necessarily due to the users most recent action. To help guide inattentive users towards a safe choice, make the light-colored, right-hand button the default choice (for example, Cancel).

Always start your mockups with the latest version from MockApp.com

Text Views
A text view is a region of the screen with multiple lines of text. It supports scrolling when the content is too large to fit inside its bounds. Text views can be used to display text and/or enable the user to edit that text (in which case a keyboard appears).

Dotan Sent from iPhone

Main Message
Alert
Optional explanation of what a user needs to do

Primary Button

Web / Email Views

Confirmation Message
Optional explanation of what the system is asking
A web view is a region of the screen that can display rich, HTML content (including navigation) inside your app. For example, Mail uses a web view to display message content:

Secondary

Primary

From: To:

Twitter

Hide

Dotan Saguy

Confirmation Message Please enter your password

Optional explanation of what the [email protected] system is asking

Everybody is now following you on Twitter!

April 1, 2035 1:33 PM Mark Unread

Password
Cancel OK Primary

iPhone UI Library
To create your App mockup just copy and paste UI elements to the right into your MockApp Template (the other file).

Keyboards
Keyboards
Keyboards slide in from the bottom when an edit mode is activated. These are all in vector format in case you need to change the letters.

Always start your mockups with the latest version from MockApp.com

Q W E R T Y U I O P A S D F G H J K L
#+=
ABC

|
$ !

} ? % ^ ~ _
space

* /
= #

&

Z X C V B N M
space

#+=
ABC

@
.

+
return

return

1 2 3 4 5 6 7 8 9 0 $
#+=
ABC

1
GHI

ABC

2 5 8 0 +

DEF

3 6 9

~ _

&

4 7

.
space

JKL

MNO

@
.

+
return

PQRS

TUV

WXYZ

iPhone UI Library
To create your App mockup just copy and paste UI elements to the right into your MockApp Template (the other file).

Regular Table Views

Regular Table Views
Regular table views (as opposed to grouped table views - next slide) are most useful to display long lists of items such as messages, contacts, etc. which users must easily scroll. Each row is an item. The lists can be divided into sections (i.e. alphabetical) separated by grey headers as below. Hierarchical items let the user drill down and are indicated by a > icon to the right of the item.

Always start your mockups with the latest version from MockApp.com

This is a regular table

view

Divided into sections

Unread First Last name

29

(the letters are the sections)

mobile

Each row is an item

of the list

Item to delete or move Ready to be deleted

Delete

and can contain several

data elements (image, text, etc.)

A B C D E F G H I J K L M N O P Q R S T U

Not pressed yet Current status When pressed

it highlights

Pete Gardener Tess Grady

This is a regular table view M.J. Grey With icons like in Jenn Guggenheim The more tab of the iPod app Podcasts
H

Sara Hashimoto Em Hirsch

A B C D E F G H I J K L M N O P Q R S T U V W

iPhone UI Library
To create your App mockup just copy and paste UI elements to the right into your MockApp Template (the other file).

Grouped Table Views

Grouped Table Views
Grouped tables views list items by group on striped pajama background. This view is handy for lists of settings. Hierarchical items let the user drill down and are indicated by a > icon to the right of the item.

Always start your mockups with the latest version from MockApp.com

Mike Avatar

This group has 3 items This item has been selected Items highlight briefly when hit This group has only 1 item

home (111) 222-3333 mobile (111) 222-3333 work (111) 222-3333 whatever (111) 222-3333

Text Message

Share Contact

You can insert headers too This one lets you drill down This one shows
Current status

You can even insert instructions like these as well if theyre helpful in this context.

Segmented controls Tab One Tab One Tab One Tab Two Tab Two Tab Two Tab Three Tab Three Tab Three

Silent This item is turned Ring This item is turned

ON ON

OFF

iPhone UI Library
To create your App mockup just copy and paste UI elements to the right into your MockApp Template (the other file).

Date, Time and other Pickers

Date and Time Pickers

Always start your mockups with the latest version from MockApp.com

August 03 2007 September 04 2008 October 05 2009 November 06 2010 December 07 2011
Sat Oct 3 Sun Oct 4

28 29 0 hours 1 2
Value Picker
Analogous to pull-downs frequently used on websites and desktop applications.

30 mins 31 32

7 50 8 55 9 00 AM 10 05 PM 11 10 45 46 47 48 49
AM PM

Today
Tue Oct 6 Wed Oct 7

First & default value Second value Third value

7 8 9 10 11

iPhone UI Library

Finger Motions and Backgrounds

Always start your mockups with the latest version from MockApp.com

Animated iPhone Gestures

Hit presentation mode to see the animations.

tap

Top press or select a control or item (like a single mouse click)

swipe

In a table-view row, to reveal the delete button

Top scroll or pan

drag

2x tap

To zoom-in/out and center a block of content or an image.

touch and hold

In editable text, to display a magnified view (moving cursor + copy/paste functions)

To zoom-in

pinch close

To zoom out

pinch

open

No fingers were harmed in the making of these graphics.