Course User interface - Lesson 5

ПРОЕКТИРОВАНИЕ

ИНТЕРФЕЙСОВ

занятие №5

Alexander Lisovsky Co-Founder at ZZ Photo, UX/UI designer

a.lisovsky@zzphoto.me

facebook.com/alexlisovsky, pinterest.com/alexlisovsky, twitter.com/lisovsky

iOS Human Interface Guideline

Фокус внимания Удобство навигации

Use visual weight and balance to show users the relative importance of onscreen elements

https://developer.apple.com/design/

YES NO

https://developer.apple.com/design/

As much as possible, avoid displaying a splash screen or other startup experience. It’s best when users can begin using your app immediately.

https://developer.apple.com/design/

People use gestures—such as tap, drag, and pinch—to interact with apps and their iOS devices.

https://developer.apple.com/design/

Tap To press or select a control or item. Drag To scroll or pan—that is, move side to side. To drag an element. Flick To scroll or pan quickly. Swipe With one finger, to return to the previous screen, to reveal the hidden view in a split view controller, or the Delete button in a table-view row. With four fingers, to switch between apps on iPad.

https://developer.apple.com/design/

Double tap To zoom in and center a block of content or an image. To zoom out (if already zoomed in). Double tap To zoom in and center a block of content or an image. To zoom out (if already zoomed in). Touch and hold In editable or selectable text, to display a magnified view for cursor positioning. Shake To initiate an undo or redo action.

A key color gives users a strong visual indicator of interactivity, especially in apps that don’t use an abundance of other colors. In Contacts, blue marks the interactive elements and gives the app a unified and recognizable visual theme.

https://developer.apple.com/design/

An icon or a title that provides a clear call to action invites users to tap it. For example, the titles in Maps, such as “Flyover Tour” and “Directions to Here,” clearly describe actions that users can take. Combined with a key color, actionable titles tend to make button borders or other embellishments superfluous.

https://developer.apple.com/design/

In a content area, add a button border or background only if necessary. Buttons in bars, action sheets, and alerts don’t need borders because users know that most of the items in these areas are interactive. In a content area, on the other hand, a button might need a border or a background to distinguish it from the rest of the content.

https://developer.apple.com/design/

Incorporate a brand’s assets in a refined, unobtrusive way. People use your app to get things done or be entertained; they don’t want to feel as if they’re being forced to watch an advertisement.

https://developer.apple.com/design/

Colors

https://developer.apple.com/design/

In general, use a single font throughout your app. Mixing several different fonts can make your app seem fragmented and sloppy. Instead, use one font and just a few styles and sizes.

https://developer.apple.com/design/

The Status Bar

https://developer.apple.com/design/

Navigation Bar

Tab Bar

Search Bar

Scope Bar

Search Bar

https://developer.apple.com/design/

Content Views

A collection view manages an ordered collection of items and presents them in a customizable layout.

https://developer.apple.com/design/

A map view presents geographical data and supports most of the functionality provided by the built-in Maps app (shown below in Photos).

https://developer.apple.com/design/

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

https://developer.apple.com/design/

A split view controller is a full-screen view controller that manages the presentation of two child view controllers.

https://developer.apple.com/design/

A table view presents data in a scrolling single-column list of multiple rows.

https://developer.apple.com/design/

A text view accepts and displays multiple lines of attributed text.

https://developer.apple.com/design/

A web view is a region that can display rich HTML content (shown here between the navigation bar and toolbar in Mail on iPhone).

https://developer.apple.com/design/

Do and Don`t

Formatting content

https://developer.apple.com/design/tips/

YES NO

Touch Controls

https://developer.apple.com/design/tips/

YES NO

Hit targets

https://developer.apple.com/design/tips/

YES NO

Text size

https://developer.apple.com/design/tips/

YES NO

Contrast

https://developer.apple.com/design/tips/

YES NO

Spacing

https://developer.apple.com/design/tips/

YES NO

High Resolution

https://developer.apple.com/design/tips/

YES NO

Distortion

https://developer.apple.com/design/tips/

YES NO

Organization

https://developer.apple.com/design/tips/

YES NO

Aligment

https://developer.apple.com/design/tips/

YES NO

Smart Home iOS app

Moodboard

Практическое задание:

Создаем скетч приложения Smart Home: - Экран входа - Главный экран - Экран истории событий

Alexander Lisovsky Co-Founder at ZZ Photo

UX/UI designer

a.lisovsky@zzphoto.me facebook.com/alexlisovsky, pinterest.com/alexlisovsky,

twitter.com/lisovsky