iOS Human Interface Guidelines I

A Study Guide

NONA
NONA
Dec 18, 2017 · 24 min read
Image for post
Image for post
Image for post
Image for post

Find Your Way

Themes & Principles

Image for post
Image for post
Image SOURCE.

iOS Design Themes

Design Principles

Image for post
Image for post
Image SOURCE.
Image for post
Image for post
Image SOURCE.
Image for post
Image for post
Image SOURCE.

Human Interface Guidelines Summary — 2

Interface Essentials & 3D Touch

Image for post
Image for post
Image SOURCE.

Interface Essentials

Image for post
Image for post
Image SOURCE.
Image for post
Image for post
Image SOURCE.

Other Frameworks

3D TOUCH

Home Screen Interaction

Peek and Pop

Image for post
Image for post
Example of an edit menu. Image SOURCE.
Image for post
Image for post
Image SOURCE.

Live Photos

Human Interface Guidelines — 3

Accessibility & Audio

Image for post
Image for post
Image SOURCE.

Accessibility

Image for post
Image for post
Image SOURCE.
Image for post
Image for post
Image for post
Image for post

Audio

Image for post
Image for post
Image SOURCE.

Human Interface Guidelines — 4

Authentication & Data Entry

Image for post
Image for post
Image SOURCE.

Authentication

Image for post
Image for post

Data Entry

Image for post
Image for post
Image SOURCE.

Human Interface Guidelines — 5

Drag & Drop

Image for post
Image for post
Image SOURCE.

Drag and Drop

Supporting Drag and Drop

Providing dragged content

Accessing dragged content

Image for post
Image for post

Human Interface Guidelines — 6

Feedback & File Handling

Image for post
Image for post
Image SOURCE.

File Handling

Image for post
Image for post
Image SOURCE.

Human Interface Guidelines — 7

First Launch Experience & Gestures

Image for post
Image for post
Source.

First Launch Experience — onboard new users, reconnect with returning users

Image for post
Image for post
Source

Gesture Pointers

Human Interface Guidelines — 8

Loading & Modality

Image for post
Image for post
Source.

Loading

Modality

Image for post
Image for post
Source.
Image for post
Image for post
Source.

Human Interface Guidelines — 9

Navigation & Rating and Reviews

Image for post
Image for post
Source.

iOS has 3 Main Styles of Navigation

Image for post
Image for post
Source.
Image for post
Image for post
Image for post
Image for post
Source.

Pro Tips

Ratings & Reviews

System Rating & Review Prompts

Requesting Permission

Human Interface Guidelines — 10

Settings, Terminology & Undo and Redo

Image for post
Image for post
Source.

Settings

Terminology

Undo & Redo

Image for post
Image for post
Source.

Human Interface Guidelines — 11

System Capabilities: Multitasking & Notifications

Image for post
Image for post
Source.

System Capabilities

Multitasking

Notifications

Image for post
Image for post
Source.
Image for post
Image for post
Source.

Human Interface Guidelines — 12

Printing & Quick Look

Image for post
Image for post
Source.

Printing

Quick Look

Image for post
Image for post
Source.

Human Interface Guidelines — 13: Ratings & Reviews, & Screenshots

Image for post
Image for post
Source.

Screenshots

Image for post
Image for post
Source.
Image for post
Image for post
Source.

Human Interface Guidelines — 14

Siri & TV Providers

Image for post
Image for post
Source.

Siri

Image for post
Image for post

Responding to users

Designing a custom interface

Improve Accuracy

TV Providers

Image for post
Image for post
Source.

Loading Content (for the TV App)

Image for post
Image for post
Source.

Leaving playback (TV app)

Human Interface Guidelines — 15

VISUAL DESIGN — Adaptivity & Layout & Animation

Image for post
Image for post

Auto layout

NB Layout Considerations

Image for post
Image for post
Finger friendly mobile design for iOS. Image SOURCE.

Animation

Human Interface Guidelines — 16

VISUAL DESIGN: Branding, Colour & Terminology

Branding

Colour

Image for post
Image for post
SOURCE

Colour Management

Image for post
Image for post
SOURCE

Terminology

Typography

New Elements in iOS 11

Image for post
Image for post
Source.

NONA

We build beautiful front ends on scalable, well-engineered…

NONA

Written by

NONA

We are a leading software development studio with a focus on blockchain consultation and smart contract development. Contact: studio@nona.digital.

NONA

NONA

We build beautiful front ends on scalable, well-engineered back ends to produce software products your users will love. Get in touch: hello@nona.digital

NONA

Written by

NONA

We are a leading software development studio with a focus on blockchain consultation and smart contract development. Contact: studio@nona.digital.

NONA

NONA

We build beautiful front ends on scalable, well-engineered back ends to produce software products your users will love. Get in touch: hello@nona.digital

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store