INTRODACTION

Mobile design
• Особенности
• Навигация
• Примеры
• Тенденции
Немного статистики
🥳
MOBILE DESIGN

Статистика
Американец тратит 5 часов в день на свой мобильный телефон.
MOBILE DESIGN

Desktop VS Mobile
Особенности
🥳
ОСОБЕННОСТИ

Всегда с человеком
Появляются идеи приложений, которые
ранее были не востребованы, например,
Foursquare.
ОСОБЕННОСТИ

Персонализированный опыт
Знаем о телефонах друзей, твоё фото,
помним о тебе историю действий.
ОСОБЕННОСТИ

Маленький экран
Чаще всего можно поместить только одну
колонку текста. Людям это нравится, они
потребляют контент больше с мобильных
телефонов.
ОСОБЕННОСТИ

Короткие сессии использования

Пользовательские сценарии должны быть
гораздо короче, чем в веб-системах.
Например, на мобильном устройстве почти
невозможно писать формулы в икселе.
ОСОБЕННОСТИ

Дополнительное железо
GPS навигатор, гироскоп, камеры, блютуз,
датчик приближения.
Использование экрана
🥳
MOBILE DESIGN

Использование экрана
UI особенности
🥳
MOBILE DESIGN

UI особенности
• Жесты

• Переходы вместо поп-апов

• Карусели

• Быстрые возврат

• Больше текста, чем фото

• Малое количество выборов на экране

Задание №1
ЗАДАНИЕ #1

Плюси и минусы
Задача: Проанализируйте ваше самое
любимое (часто используемое)
мобильное приложение. Подумайте
какую навигации использует данное
приложение и опишите плюсы минусы
данной навигации.
Процесс: На бумажке в письменной
форме.
Навигация: таббар, сайтбар,
жесты
MOBILE DESIGN

Навигация: таббар, сайтбар, жесты

MOBILE DESIGN

Таббар
• Главная особенность заключается в быстром
доступе к меню верхнего уровня в один теп. Это
подразумевает, что пользователь часто будет
переключаться между пунктами меню. • Обычно
состоит из 3-5 пунктов. Если больше, тогда либо
применяем сайтбар, либо собираем все не
поместившиеся пункты меню в последнюю
иконку

• Таб бар никогда не скрывается под скроллом

• Начинаем с первого пункта меню, чаще всего в

нём лежит главная польза приложения

• Не прячьте таб бар при перехода внутрь страниц

MOBILE DESIGN

Сайтбар
• Сайтбар чаще всего используется в случаем с 5+
пунктов меню

• Преимуществ в более чистом дизайн решении (всего

одна иконка, “бургер”) Главным недостатком является
непонимание места в системе и сложно дотягиваться
большим пальцем до бургер меню.

• Приоритезируйте пункты меню так, чтобы самые

важные были первыми

• Не используйте таб бар и гамбургер меню. Это дурной

тон

• При переходе на первый пункт меню всегда

оставляйте иконку бургер меню, не добавляйте бек

• Подсвечивайте выбранный пункт меню

MOBILE DESIGN

Жесты
• Различные типы навигации, основанные на
жестах. Преимущество в свободен
реализации, сложность в том, что человеку
нужно научиться быстро пользоваться
непривычным ему интерфейсов.

• Используйте самые базовые жесты: скролл

и свайп. Не усложняйте сам интерфейс,
визуально он должен быть чистым.
Примеры
🥳
ПРИМЕРЫ
ПРИМЕРЫ
ПРИМЕРЫ
ПРИМЕРЫ
ПРИМЕРЫ
ПРИМЕРЫ
ПРИМЕРЫ
ПРИМЕРЫ
ПРИМЕРЫ
ПРИМЕРЫ
ПРИМЕРЫ
ПРИМЕРЫ
ПРИМЕРЫ
ПРИМЕРЫ
ПРИМЕРЫ
ПРИМЕРЫ
ПРИМЕРЫ
ПРИМЕРЫ
ПРИМЕРЫ
ЗАДАНИЕ #2

Примеры в мобильном
дизайне
Задача: Выберите 5-10 примеров
мобильных приложений. Опишите
почему они вам нравятся в свободной
форме.
Процесс: В команде.
Задание №2
ЗАДАНИЕ #2

Мобильное
приложение
Задача: Придумать идею для
мобильного приложения, описать ее в
2-х предложениях. (Не больше!) И
нарисовать 2-3 ключевых экрана в
вайфреймах.
Процесс: Индивидуально. На задание
20 минут.
Награды
Apple Design Awards
… 2015, 2016, 2017
STREAKS
THINGS 3
WORKFLOW
Material Design Awards
… 2015, 2016, 2017
Blinkist
Asana
Тенденций мобильного
UI/UX дизайна
ТЕНДЕНЦИЙ

Упрощение пользовательского пути

Когда мы взаимодействуем с
приложениями или веб-сайтами, у нас
есть определенная цель. И, как правило,
чем меньше усилий мы тратим на
достижение этой цели, тем лучше опыт.
ТЕНДЕНЦИЙ

Линейный путь юзера

Линейный дизайн - это UX с
определенным началом, серединой и
концом, который позволяет пользователям
выполнять одно действие с каждым шагом.
Линейный пользовательский поток хорош
для пользователей, поскольку он
позволяет оценить, сколько времени
требуется для выполнения задачи.
ТЕНДЕНЦИЙ

Постепенное раскрытие информации

Когда в вашем приложении много информации
или действий, нет необходимости показывать
все сразу. Дизайнеры будут использовать метод
под названием progressive disclosure
(прогрессивное раскрытие), чтобы сделать
информацию или действие видимыми только
тогда, когда это нужно пользователям.
Прогрессивное раскрытие информации имеет
возможность уменьшить когнитивную нагрузку и
улучшить понимание интерфейса.
ТЕНДЕНЦИЙ

Жесты в приложении в паре с анимацией

С выпуском iPhone Х дизайнеры
столкнулись с новым вызовом. Отсутствие
физической кнопки “домой” приводит к
тому, что даже самые основные
взаимодействия с устройством теперь
основаны на жестах. Что это значит для
разработчиков? Это означает, что
дизайнерам придется уделять больше
внимания жестам.
ТЕНДЕНЦИЙ

Очистите визуальную иерархию

Имейте четкий порядок того, как
представлены элементы
пользовательского интерфейса, чтобы
облегчить понимание контента. Сильные
визуальные сигнализаторы (такие как
контрастные цвета для кнопок призыва к
действию) используются для направления
пользователя на определенные
интерактивные элементы или
необходимую информацию.
ТЕНДЕНЦИЙ

Полноэкранный опыт
С выпуском Samsung Galaxy S8 и iPhone X
бескаркасный дизайн стал трендом.
Теперь все больше места экрана доступно
для потребителей и они рассчитывают
иметь полноэкранный опыт.
ТЕНДЕНЦИЙ

Яркий цвет
Цвет является одним из самых мощных
инструментов в арсенале дизайнера. Цвет
может привлекать внимание, задавать
настроение, влиять на эмоции и действия
пользователей. Когда дело доходит до
дизайна мобильных приложений, это,
безусловно, время ярких цветов.
ТЕНДЕНЦИЙ

Лучший способ выразить эмоции

Выражение эмоций естественно для
людей. Даже в эпоху интерфейсов
командной строки мы использовали
смайлики, чтобы заставить других людей
понять, что мы чувствуем.
ТЕНДЕНЦИЙ

Имитация эмоций в обратной связи с UI

Как люди, мы устанавливаем
эмоциональную связь со всеми
продуктами, которые мы используем.
Поэтому мы ожидаем некоторого уровня
человеческой обратной связи, когда мы
взаимодействуем с продуктами. Даже
если мы знаем, что продукты не люди и
не могут чувствовать эмоции, мы хотим
верить, что это не так.
ТЕНДЕНЦИЙ

Адаптация видео для концентрации

внимания
Средний объем внимания человека упал с 12
секунд в 2000 году до восьми секунд в 2015 году.
Новые способы доставки Контента появляются в
результате адаптации к изменениям. В результате
такой адаптации были созданы такие форматы,
как 360-градусные видео и Facebook Live. В 2018
году больше пользователей и бизнес будут
использовать этот формат для предоставления
важной и своевременной информации.
ТЕНДЕНЦИЙ

Биометрическая авторизация
Приложения, использующие
биометрические технологии, могут обойти
потребность в традиционном требовании
для входа в систему. С биометрией все,
что нужно, это конкретные
физиологические или поведенческие
характеристики, такие как распознавание
лиц, отпечатки пальцев или
распознавание голоса.
ТЕНДЕНЦИЙ

Чат-боты как помощники

Скорее всего, мы не увидим чат-ботов в
качестве полной замены для обычных
графических интерфейсов, но они будут
интегрированы в платформы обмена
сообщениями (такие как Facebook
Messanger), чтобы служить помощниками.
Бизнес будет иметь автоматизированные
разговоры в режиме реального времени со
своими клиентами.
ТЕНДЕНЦИЙ

Дополненная реальность
Помимо разговорных интерфейсов,
другим направлением, которое обещает
полностью изменить то, как мы видим и
используем приложения, является
быстрое появление дополненной
реальности (AR).
ТЕНДЕНЦИЙ

Безналичный расчет
Безналичный расчет быстро становится
новым стандартом для многих
пользователей.
Как оставаться
модным в 2020?
ТЕНДЕНЦИЙ

Скругленные края, изменение

соотношения
Тренд на “безрамочность” в смартфонах
породил в том числе и изменения в
дизайне мобильных приложений.
Скругленные края, “моноброви”
придется обыгрывать, а соотношение
сторон 18:9 сыграет только на руку –
добавится больше полезного места
ТЕНДЕНЦИЙ

Авторские иллюстрации и иконки

От простеньких лендингов до мобильных
приложений – тренд продолжает
нарастать последние пару лет. 2019 год
предъявит к иллюстрациям более
жесткие требования: больше
уникальности, дружелюбия, интеграций
с брендом. Черпать вдохновение в
векторных человечках на фотостоках
уже будет недостаточно.
ТЕНДЕНЦИЙ

Динамические линейные иконки

Помимо уникального стиля, такие
иконки служат инструментом для
привлечения внимания пользователя к
тому или иному элемента интерфейса.
Чаще всего, это услуги.
ТЕНДЕНЦИЙ

Анимация
Тренд на движущиеся элементы все
больше набирает обороты.

• Во-первых, это красиво.

• Во-вторых, привлекает внимание.

• В-третьих, на них нередко завязан

функционал приложения, интерфейс.
ТЕНДЕНЦИЙ

Контрастность шрифтов
В интерфейсе важно соблюдать
иерархию. Она достигается с помощью
шрифтов разных стилей, размеров и
цветов. Это решение помогает выделить
важные элементы текстовой
составляющей дизайна, правильно
“вести” пользователя по интерфейсу,
фиксировать его внимание на нужных
деталях.
Вопросы и ответы