Naming Conventions followed in iOS device controls

Part-I

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.

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.

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.

• 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.

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.

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.

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

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.

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.

Toolbar

• A toolbar contains controls that perform actions related to objects in the screen or view.

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.

Tab Bar

A tab bar gives people the ability to switch between different subtasks, views, or modes.

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.

Popover (iPad Only)

• A popover is a transient view that can be revealed when people tap a control or an onscreen area.

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.

Types

Plain table Grouped table

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

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

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

Default cell style

Subtitle cell style

Value 1 cell style

Value 2 cell Style

THANK YOU

To be Contd..