2. iOS UI Element Usage Guidelines
• User expect the standard views and controls
to behave as they do in the built-in
applications.
• Automatically receive updates if iOS
introduces a redesigned appearance .
• using the appearance customization
programming interfaces available in iOS 5 and
later. use these APIs to receive automatic
appearance updates.
3. Device orientation
• On iPhone and iPod touch, the Home screen is
displayed in one orientation only, which is
portrait, with the Home button at the bottom.
This leads users to expect iPhone apps to
launch in this orientation by default.
• On iPad, the Home screen is displayed in all
orientations, so users tend to expect iPad apps
to launch in the device orientation.
4. Gestures
• Tap - To press or select a control or item (analogous to
a single mouse click).
• Drag- To scroll or pan (that is, move side to side).
• Flick- To scroll or pan quickly.
• Swipe-
- With one finger, to reveal the Delete button in a
table-view row or to reveal
- Notification Center (from the top edge of the
screen).
- With four fingers, to switch between apps on
iPad.
5. • Double tap
- To zoom in and center a block of content or
an image.
- To zoom out (if already zoomed in).
• Pinch
- Zoom in
- Zoom out
• Touch and hold
- In editable or selectable text, to display a
magnified view for cursor positioning.
• Shake - To initiate an undo or redo action.
6. Multitasking
• Only one application is visible in the
foreground at a time.
• In iOS 4 and later
• multitasking, allows apps to remain in the
background until they are launched again or
until they are terminated.
7. BARS
- Status bar
- Navigation bar
- Tab bar
- Toolbar
• Bars are not required to be present in every
application. but, if they are present-use them
correctly.
8. The Status Bar
• The status bar displays important information
about the device and the current
environment.
• Present on upper edge of the device screen.
• On iPhone, the status bar can have different
colors; on iPad, the status bar is always black.
• network activity indicator
9. Navigation bar
• The navigation bar should contain current
title, back button and one control that manages
the view’s contents.
• A navigation bar can be translucent or opaque.
• On iPhone, changing the device orientation from
portrait to landscape can change the height of
the navigation bar automatically.
• On iPad, pane of a split view, that does not
extend across the screen.
10. Navigation Bar …
• Segmented control can be used in a navigation
bar
• When the user navigates to a new level, two
things should happen:
- The bar title should change to the new
level’s title.
- A back button should appear to the left of
the title, and it should be labeled with the
previous level’s title.
11. Toolbar
• A toolbar contains controls that perform
actions related to objects in the screen or
view.
12. Appearance and Behavior
• On iPhone, a toolbar always appears at the
bottom edge of a screen or view, but on iPad it
can instead appear at the top edge.
• Toolbar items are displayed equally spaced
across the width of the toolbar.
• On iPhone, changing the device orientation
from portrait to landscape can change the
height of the toolbar automatically.
Whereas, On iPad, the it does not.
13. Tab Bar
A tab bar gives people the ability to switch
between different subtasks, views, or modes.
14. Appearance and Behavior
• A tab bar appears at the bottom edge of the
screen and should be accessible from every
location in the application.
• Black background by default.
• The tab displays a lighter background when
selected its icon receives a blue glow, which is
known as the selection indicator image.
15. Popover (iPad Only)
• A popover is a transient view that can be
revealed when people tap a control or an
onscreen area.
16. Table View
• A table view presents data in a single-column
list of multiple rows.
• Two styles of table views, which are
distinguished mainly by appearance.
18. Table view elements
Checkmark- Indicates that the row is selected
Disclosure indicator - another table associated
with the row
Detail disclosure button - additional details
about the row in a new view
Row reorder- Indicates that the row can be
dragged to another location in the table
19. Table view elements
Row insert- Adds a new row to the table
Delete button control- In an editing context,
reveals and hides the Delete button for a row
Delete button- Deletes the row
20. Forms of Tables
iOS 3 and later defines four table-cell styles that
implement the most common layouts for table
rows in both plain and grouped tables. Each
cell style is best suited to display a different
type of information.
- Default Cell Style
- Subtitle Cell Style
- Value 1 Cell Style
- Value 2 Cell Style