Jeanine Swatton

December 4, 2014

Design Principles
Aesthetic Integrity

Feedback

Consistency

User Control

Direct Manipulation

Metaphors

UI Design Basics
1. iOS App Anatomy
4 Categories:
1.
2.
3.
4.

Bars
Content views
Controls
Temporary views

UI Design Basics
1. iOS App Anatomy
Example to present the
UI of an iOS app:

NOTE
An iOS app includes a window. Butunlike a window in
a computer appan iOS window has no visible parts and
it cant be moved to another location on the display.
Most iOS apps contain only one window; apps that support
an external display can have more than one.

UI Design Basics
2. Adaptivity and Layout
Build In Adaptivity
2 Size Classes:
1. Regular
2. compact

NOTE
Within a size class, continue to use Auto Layout to make
small layout adjustments, such as stretching or
condensing content.

UI Design Basics
2. Adaptivity and Layout

Provide a Great Experience in Each Environment

- Maintain focus on the primary content in all environments.

- Avoid gratuitous changes in layout.
- Be straightforward if your app runs in only one orientation.
- If your app interprets changes in device orientation as user input,
handle rotation in app-specific ways.

Use Layout to Communicate

UI Design Basics
3. Starting and Stopping
Start Instantly

- avoid displaying a splash screen or other

startup experience
- avoid asking people to supply
setup information
- delay a login requirement
- think carefully before providing an onboarding
experience
- avoid asking users to rate your app too soon
- launch in the devices current orientation
- provide a launch file or image
- if possible, avoid requiring users to read a
disclaimer or agree to an end-user license
agreement before they can do anything else
- when your app restarts, restore its state so
users can continue where they left off

UI Design Basics
3. Starting and Stopping
Always Be Prepared to Stop

If all app features are

unavailable, display a
screen that describes
the situation and
suggests a correction.

If only some app features

are unavailable, display
either a screen or an alert
when people try to use
the feature.

UI Design Basics
4. Navigation
3 Main Styles:

1. Hierarchical
2. Flat
3. Content- or experience-driven

UI Design Basics
5. Modal Contexts
Modality a mode in which something exists or is experienced

UI Design Basics
6. Interactivity and Feedback
Users Know the Standard Gestures

- such as tap, drag, pinch, flick, swipe, double tap, touch and hold, and shake

Interactive Elements Invite Touch

A key color gives users a
strong visual indicator of
interactivity

The back button uses

several cues to indicate its
interactivity and convey its
function

UI Design Basics
6. Interactivity and Feedback
Interactive Elements Invite Touch
Photos uses a button
border to
differentiate the Start
Sharing button from
the explanatory text

An icon or a title
that provides a clear
call to action invites
users to tap it.

Clock uses button

backgrounds in the
Stopwatch and Timer
screens to draw attention
to the Start and Pause
buttons and to make them
easy to tap

App Store uses a button

border in a table row to
emphasize the
distinction between
tapping the row and
tapping the button

UI Design Basics
6. Interactivity and Feedback
Feedback Aids Understanding
Inputting Information Should Be Easy
- Make it easy for users to make choices.
- Get information from iOS,
when appropriate.
- Balance a request for input
by giving users something
useful in return.

UI Design Basics
7. Animation
Appropriate animation can:

Communicate status and provide feedback

Enhance the sense of direct manipulation
Help people visualize the results of their actions

Add animation cautiously, especially in apps that

dont provide an immersive experience.
When appropriate, make custom animation
consistent with built-in animation.
Use animation consistently throughout your app.
In general, strive for realism and credibility in
custom animation.

UI Design Basics
8. Branding
Two things to remember as you design
these elements:
1. Each custom element should look good and function well
by itself, but it should also look like it belongs with the
other elements in the app, whether theyre custom or
standard.
2. To feel at home in iOS, an app doesnt have to look like
the built-in apps but it does need to integrate deference,
clarity, and depth.

UI Design Basics
8. Branding

Incorporate a brands assets in a refined, unobtrusive way.

Dont take space away from the content people care about.
Resist the temptation to display your logo throughout the app.

UI Design Basics
9. Color and Typography
Color Enhances Communication

The built-in apps use a family of pure, clean colors that look great
individually and in combination, and on both light and dark backgrounds.

API NOTE
To tint bar button items, use thetintColorproperty; to tint
the bar itself, use thebarTintColorproperty.

UI Design Basics
9. Color and Typography
Text Should Always Be Legible

Prioritize content when responding to text-size changes.

When appropriate, adjust the layout when the user chooses
a different text size.
Make sure all styles of a custom
font are legible at
different sizes.
In general, use a
single font throughout
your app.

NOTE
If you use a custom font, you can still scale type
according to the system setting for text size. Your app is
responsible for responding appropriately when the user
changes the setting.

UI Design Basics
10. Icons and Graphics
The App Icon

Things to remember:
-
-
-

The app icon is an important part of your apps brand. Approach

the design as an opportunity to tell your apps story and build
an emotional connection with users.
The best app icons are unique, uncluttered, engaging, and
memorable.
An app icon needs to look good at many different sizes and on
different backgrounds. Details that might enrich an icon at large
sizes can make it look muddy at small sizes.

UI Design Basics
10. Icons and Graphics
Bar Icons

Its a good idea to use the built-in icons as much as possible because users
already know what they mean.

Graphics

Note that you can

use text instead of
icons to represent
items in a
navigation bar or
toolbar. For
example, Calendar
uses Today,
Calendars, and
Inbox instead of
icons in the
toolbar.

UI Design Basics
11. Terminology and Wording
Settings is an essential app for all users,
so it uses simple, direct language to
describe what users can do.

UI Design Basics
12. Integrating with iOS

Use Standard UI Elements Correctly

Downplay File and Document Handling

TIP
You can use the
Quick Look
Preview feature to
let people preview
documents within
your app, even if
your app cant
open them.

UI Design Basics
12. Integrating with iOS
Be Configurable If Necessary
Take Advantage of iOS Technologies
-
-

As much as possible, offer configuration options in the main UI.

If necessary, help users go directly to your apps settings in
Settings.

UI Elements
1. Bars
Status Bar

Navigation Bar

Toolbar

UI Elements
1. Bars
Tab Bar

Search Bar

Scope Bar

UI Elements
2. Content Views
Activity
Activity View Controller
Collection View

UI Elements
2. Content Views

Container View Controller

Image View
Map View

UI Elements
2. Content Views

Page View Controller

Popover

UI Elements
2. Content Views
Scroll View

Split View Controller

UI Elements
2. Content Views
Table View

Text View

UI Elements
2. Content Views
Web View

UI Elements
3. Controls

Activity Indicator

Contact Add Button

Detail Disclosure Button
Info Button

Date Picker

UI Elements
3. Controls
Label

Picker

Network Activity Indicator

Page Control
Progress View

UI Elements
3. Controls

Refresh Control

Rounded Rectangle Button

Segmented Control
Slider
Stepper

UI Elements
3. Controls
Switch
System Button
Text Field

UI Elements
4. Temporary Views
Alert

Action Sheet

UI Elements
4. Temporary Views
Modal View

iOS New Gaming

Technologies
SpriteKit
SpriteKit enables developers to create highperformance, battery-efficient 2D games. In iOS
8, weve added several enhancements that will
make 2D games even better. These new
technologies will help in-game characters move
more naturally and make it easier for
developers to add force fields, detect collisions,
and generate new lighting effects in
theirgames.

iOS New Gaming

Technologies
SceneKit
SceneKit enables developers to render game
scenes in 3D and is designed for casual 3D
gaming. SceneKit incorporates a physics engine,
a particle generator, and easy ways to script the
actions of 3D objects. Its also completely
integrated with SpriteKit, so developers can
include SpriteKit assets in 3Dgames.

iOS New Gaming

Technologies
Metal
Built for developers who create highly
immersive console games, Metal is a new
technology that allows them to squeeze
maximum performance from the A7 and A8
chips. Its optimized to allow the CPU and GPU
to work together to achieve optimal
performance. Its designed for multithreading,
and there are great tools for putting it all
together inXcode.*