This document contains UI elements and interaction patterns for an iPhone mockup app. It includes common interface elements like status bars, navigation bars, tab bars, as well as lists, tables, pickers, and keyboard designs. The file is intended to provide reusable vector graphics and guidelines for mockups, while deferring to Apple's official guidelines for final designs.

1. Welcome The comments in this file are meant as handy reminders ONLY. You must refer to Apple’s latest iPhone Interface Guidelines document as the definitive guide in the matter. If there’s a UI element you can’t find here, email me at [email_address] and I’ll do my best to include it in the next release. Hello, This library file contains iPhone UI elements you’ll want to copy and paste into your MockApp Template file. Vector format: Most UI elements you’ll 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 you’re working on into your app template before ungrouping it. That way you always keep a clean grouped copy here. Enjoy MockApp! Dotan Saguy

2. Status Bar, Navigation Bar, etc. Status bar 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. 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. 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.) A collection of tab bar icons is located on the next slide 99 999 9 Badges are superimposed to icons in the tab bar to inform the user of new items not yet acted upon in the corresponding tab Activity Indicators An activity indicator should be displayed if the app will take more than a couple of seconds to perform the current task Page Indicator 10:32 AM Carrier 10:32 AM Carrier 3G 10:32 AM Carrier Back Button Button Pane Label Disabled Pane Label Groups All Contacts + Music Videos Podcasts Search More 6 Tab bar Navigation bar Status bar Optional instructions for this pane Pane Label Save Cancel 2 of 50 Inbox (20) Activity indicator for nav bar on grey background... Network activity Activity Indicator

3. Tab Bar Icon Library Music Videos Podcasts Search More Music Videos Podcasts Search More iTunes U Downloads Ringtones iTunes U Downloads Ringtones Genres Genres Artists Artists Audiobooks Albums Audiobooks Albums Compilations Composers Playlist Compilations Composers Playlists 6 More More Most Recent Featured Favorites Top Rated Top Rated Most Recent Featured Favorites Updates Categories Categories Updates Playlists Subscriptions Subscriptions My Videos My Videos Playlists Voicemail Keypad Keypad Contacts Contacts Voicemail World Clock Alarm Stopwatch Timer Timer World Clock Alarm Stopwatch Clock App tab bar controller . iDisk App tab bar controller . iDisk Recents Shared Files Public Folders Recents Public Folders Shared Files iDisk iTunes store and iPod tab controllers + icons (including “table view” black on white versions) Youtube , App Store and Phone additional tab controller + icons (including “table view” black on white versions) More tab bar icons coming soon!

4. 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. 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”) Browser bar Google Toolbar 5 Progress Indicator 24 of 39 Primary Secondary Sample search text Search Cancel Search Cancel Directions Clear Start: End: Current Location Type a company name or stock ID. Cancel MockApp mockapp.com/ Google Browser bar MockApp http://mockapp.com/ Cancel MockApp Cancel

5. Toolbar Icons and other icons (vector) Any toolbar icons missing? email me at dotan@mockapp,com and I will add them in the next version. 99 999 9 Previous Next Previous disabled Next disabled Back Forward Back Disabled Forward disabled Fast forward Move backward Pause Reply Refresh Action Route Organize Trash Compose Page Add Bookmark Low volume High volume Detail Disclosure Add contact Bookmarks Street view Unread Info Camera Search Erase Stop Single digit badge Double digit badge Triple digit badge Delete locked Delete unlocked Grab and move Need to re-color an icon? 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 2

6. 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. Bubbles I’m hoping this one will help put MockApp on the map ;-) Action sheet Primary action you can also do this or maybe this or why not that Cancel Cancel Delete Paste Select Select All MockApp OK Delete 0:00 0:28 Play Record

7. 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 user’s 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). 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). Web / Email Views 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: Alert Confirmation Message Optional explanation of what the system is asking Primary Secondary Main Message Optional explanation of what a user needs to do Primary Button Dotan Sent from iPhone From: Twitter Hide Dotan Saguy To: Everybody is now following you on Twitter! April 1, 2035 1:33 PM Mark Unread Confirmation Message Optional explanation of what the system is asking Primary Cancel Please enter your password [email_address] OK Password

8. 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. 1 4 2 3 5 6 7 8 9 0 $ ! ~ & = # . _ - + space @ . #+= ABC return Q R W E T Y U I O P space @ . #+= ABC return A F S D G H J K L Z V X C B N M ` } | { ? % ^ * / , $ ! ~ & = # . _ - + space @ . #+= ABC return 1 2 ABC 3 DEF 5 JKL 6 MNO 4 GHI 8 TUV 9 WXYZ 7 PQRS 0 +

9. 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. M N O A B C D E F G H I J K L M N O P Q R S T U This is a regular table view Divided into sections (the letters are the sections) and can contain several data elements (image, text, etc.) Each row is an item of the list This is a regular table view With icons like in The “more” tab of the iPod app Podcasts G Pete Gardener Tess Grady M.J. Grey Jenn Guggenheim H Sara Hashimoto A B C D E F G H I J K L M N O P Q R S T U V W Em Hirsch Unread Item to delete or move Ready to be deleted Delete First Last name mobile it highlights When pressed Not pressed yet Current status 29

10. 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. This group has 3 items Items highlight briefly when hit This group has only 1 item This item is turned This one lets you drill down This one shows Current status You can insert headers too This item has been selected Text Message Share Contact Mike Avatar home (111) 222-3333 mobile (111) 222-3333 work (111) 222-3333 whatever (111) 222-3333 You can even insert instructions like these as well if they’re helpful in this context. Ring Silent This item is turned Segmented controls ON ON OFF Tab Three Tab One Tab Two Tab Three Tab Two Tab Three Tab One Tab Two Tab One

11. Date, Time and other Pickers Date and Time Pickers Value Picker Analogous to “pull-downs” frequently used on websites and desktop applications. Sat Oct 3 Sun Oct 4 Today Tue Oct 6 Wed Oct 7 7 8 9 10 11 50 55 00 05 10 AM PM August September October November December 03 04 05 06 07 2007 2008 2009 2010 2011 7 8 9 10 11 45 46 47 48 49 AM PM 28 29 30 mins 31 32 0 hours 1 2 First & default value Second value Third value

12. Finger Motions and Backgrounds Top press or select a control or item (like a single mouse click) Hit presentation mode to see the animations. In a table-view row, to reveal the delete button Top scroll or pan To zoom-in/out and center a block of content or an image. In editable text, to display a magnified view (moving cursor + copy/paste functions) To zoom-in To zoom out No fingers were harmed in the making of these graphics. Animated iPhone Gestures 2x tap tap swipe drag pinch close 2x tap pinch open touch and hold