Как сделать дизайн для приложения android

Как сделать дизайн для приложения android

Мобильный телефон — средство связи, игрушка, энциклопедия… Список можно продолжать бесконечно благодаря созданию огромного количества приложений различной тематики. Но как добиться конкурентоспособности мобильной утилиты? В первую очередь — разработать привлекательный дизайн. Рассмотрим подробнее, каким должен быть интерфейс приложений для телефонов с операционной системой Андроид.

Создаем приложение для Андроида по гайдлайну — с макетом и версткой

Работа с утилитой для телефона должна быть привычной и интуитивно понятной даже новым пользователям, поэтому Google призывает разработчиков унифицировать интерфейсы нативных приложений и дает рекомендации, как это сделать. Для Android написан Material Design с образцами нейминга, дизайна и юзабилити.

Конечно, никто не принуждает строго следовать рекомендациям при создании макета. Вместе с тем, советы специалистов позволяют на выходе получить продукт, который будет пользоваться популярностью среди пользователей. Использование гайдлайнов дает возможность:

• оптимизировать процесс разработки собственного дизайна;
• унифицировать soft;
• создать понятный интерфейс.

Итак, каковы же основополагающие принципы Google Material Design при разработке приложения для Андроида?

Глубина тактильных поверхностей

Интерфейс приложения состоит из осязаемых листов «цифровой бумаги», которые наслаиваются друг на друга и отбрасывают тени как в окружающем нас мире. Таким образом создается глубина — отличительная особенность утилиты для Android.

Она выполняет ряд важных функций.

1. Позволяет четко обозначить структуру и иерархию отдельных деталей на дисплее, сконцентрировать внимание пользователей приложения на наиболее значимых вещах.
2. Задает подсказки о взаимодействии с утилитой. Когда пользователь Андроида перелистывает страницы, зеленая плашка прилипает к верхнему слою — появляется тень. Это демонстрирует, что перемещаются не только текст и изображения, но и создающая фон белая подложка.

Полиграфический дизайн

Все изображения в приложении, например, тексты, картинки, пиктограммы, наносятся «цифровыми чернилами» и являются важными составляющими UI — пользовательского интерфейса. При этом используется традиционный графический дизайн, которому присущи конкретные особенности.

1. Изящная и контрастная типографика. Задает стиль и структуру всего контента: крупный заголовок, насыщенные темные тона для обозначения важности отдельных элементов, существенный отступ между блоками информации.
2. Шрифт. В стандартной палитре используется стиль Roboto. Однако в каждом отдельном макете его можно заменить на любой другой, например, свой фирменный.
3. Модульная сетка и направляющие. Google Material Design предлагает использовать при разработке дизайна приложения для Андроида базовую сетку верстки с шагом в 8dp — density-independent pixel, это абстрактная единица измерения. При этом весь контент рекомендуется размещать согласно ключевым направляющим. Они задают отступы от краев экрана в 72dp и предполагают расположение основной информации посередине, а вспомогательной — на полях.
4. Геометрическая иконографика. Иконки отличаются простотой и дружелюбностью. За основу берутся привычные для всех геометрические фигуры — квадрат и круг.
5. Цвет. Стандартная цветовая палитра приложения для телефона с ОС Android включает в себя: яркий акцентный цвет — для точечного выделения наиболее важных элементов, основной — для больших областей, например, панели действий и строки состояния.
6. Красивые фото. Картинки должны быть яркими, насыщенными. Размещать их при верстке программы для Андроида рекомендуется без рамок, «навылет» — когда элементы иллюстрации как бы вылетают за ее пределы.

Простые, на первый взгляд, моменты полиграфического дизайна реализовать на практике не так легко. Да и в принципе, разработка интерфейса — задача не из легких. Конкретные доказательства этому можно найти в статье «Дизайн мобильных приложений». Поэтому при возникновении вопросов рекомендуется воспользоваться помощью специалистов. Мы — команда профессионалов в области разработки и продвижения приложений и сайтов — готовы оказать квалифицированную помощь как комплексно, так и на любом этапе проектирования дизайна. Подробнее с перечнем услуг можно ознакомиться здесь.

Осмысленная анимация

Суть — каждое новое действие связано с предыдущим. Проще говоря, объекты не возникают из ниоткуда и не исчезают в никуда — все происходит как в реальности и пользователи Андроида получают подсказки о работе интерфейса. Какие приемы при создании макета приложения помогают достичь осмысленной анимации?

1. Асимметрия. Поскольку вся трансформация происходит на плоскости, то ширина и высота объектов изменяются независимо друг от друга.
2. Реакция на манипуляции. Эпицентр изменений в приложении — прикосновение пользователя к экрану Андроида. Например, идущая от точки касания пальцем волна.
3. Микроанимация. Каждый отдельный элемент в утилите для телефона может быть анимирован — например, переходы между контентом или миниатюрные иконки действий.
4. Четкость и резкость. Эти две характеристики должны быть присущи каждому движению на экране. Важно, чтобы все элементы реагировали оперативно — быстро достигали целевого состояния и возвращались назад. Это поможет сократить время ожидания для пользователя.

Адаптивный дизайн

Речь идет об адаптации макета приложения под конкретное устройство с ОС Android.

Главный принцип — от общего к частному. Уменьшение экрана приводит к сокращению контента, который отображается на основной странице: важное — оставляем, второстепенное — скрываем в отдельных блоках. Если пользователь Андроида посчитает нужным изучить дополнительную информацию, он кликнет по плавающей кнопке и перейдет на страницу с конкретизирующими данными и изображениями.

Важно! Мобильные устройства с ОС Андроид можно использовать как горизонтально, так и вертикально. При разработке макетов приложений необходимо учитывать и основательно прорабатывать этот момент.

Гайды по разработке дизайна мобильной программы существуют не только для Android, но и iOS. Подробнее об этом можно прочитать в статье «Дизайн приложений для IOS».

Дизайн Android приложений — использование шаблонов

Шаблоны — отличный вариант для начинающих разработчиков софта для Андроида. Прибегать к использованию заготовок можно также при желании сэкономить время. Однако стоит понимать, что создать полностью уникальный продукт таким образом вряд ли получится.

Существуют как универсальные, так и тематические шаблоны приложений для Android.

Универсальные шаблоны

1. Universal Android App. С его помощью можно разработать soft любой направленности. Отличительная особенность — возможность соединить воедино все необходимые фишки — например, плейлисты, графики или веб-страницы. Помимо этого, можно рассчитывать на широкий функционал и поддержку от разработчика.
2. Android WebView. Позволяет в кратчайшие сроки конвертировать сайт любой направленности в приложение с интересным дизайном. При этом вполне реально сохранить все важные функции интернет-ресурса, поскольку шаблон поддерживает множество веб-технологий: HTML5, CSS3, JavaScript, jQuery, Bootstrap и т. д.

Дейтинг

Создать мобильную программу для поиска любви в интернете стало довольно просто благодаря трафарету Dating App. Отличительные особенности — красивая галерея и профили пользователей. Также можно настроить множество важных функций — например, возможность оставлять комментарии, ставить лайки, вести переписку или поставить блокировку на тот или иной профиль.

Города

Создание приложений, в которых будет отображаться город со всеми его достопримечательностями, кафе, развлекательными центрами, магазинами и прочими объектами, — трудоемкий процесс. The City способен значительно упростить процесс создания утилиты. Все необходимые для разработки данные сосредоточены в специальной базе SQLite. Также предусмотрен широкий функционал: отображение геолокации, блок для рекомендуемых мест, фильтр поиска с возможностью сохранить его историю и т. д.

Торговля

Интернет-магазины пользуются популярностью во всем мире. Для привлечения потенциальных клиентов отличное решение — разработка приложения. Поможет в этом E-Commerce App, в который включены, например, каталог товаров с удобным фильтром, возможность настраивать профиль клиента, выбирать валюту.

Новости

Android News App — трафарет, на основе которого удастся создать отличное приложение с широким функционалом. Каждый пользователь сможет быть в курсе последних событий, сохранять в своем профиле важную информацию. Отличительная особенность — понятная панель администрирования, позволяющая оперативно вносить изменения.

Игры

Jumper — отличная игра и в то же время доступный для каждого шаблон игрового приложения. Из названия понятно, что речь идет о прыжках. Используя Jumper, можно создать свою игру, добавив, например, больше баров, предметов или монет. Достоинства — хорошо написанный код и поддержка со стороны разработчика.

Конечно, на этом список шаблонов для приложений Android не заканчивается. Существует масса других вариантов. Но все же перед разработкой собственной утилиты для гаджета мы рекомендуем сделать правильный выбор между собственным макетом и трафаретом, взвесив все за и против, а также объективно оценив свои возможности.

Руководство по дизайну мобильных приложений под iOS и Android. Основные различия платформ

Посібник із дизайну мобільних додатків під iOS та Android. Основні відмінності платформ

Редакція ・ Серп 28 ’22

#mobile #tutorial

Если вы проектируете приложения для iOS и Android (Material Design), то это руководство станет вашим новым лучшим другом ?. Мы рассмотрим наиболее важные для UX / UI дизайнеров различия между iOS и Android. Если вы создали приложение для одной платформы, то из этой статьи вы узнаете, что нужно, чтобы «перевести» его на другую платформу. Но, это всего лишь рекомендации. Речь идет о переводе «iOS-мышления» на «Android-мышление» и наоборот.

Дизайн интерфейса iOS и Android: основные отличия

Ниже представлены наиболее важные различия, которые UX / UI дизайнеры должны учитывать при «переводе» приложения с iOS на Android или наоборот:

Элемент дизайна	iOS	Android
Минимальный размер цели нажатия	44×44 pt	48×48 dp (Что такое dp?)
Основная навигация приложений	Панель нижней навигации	Вкладки вверху экрана
Дополнительная навигация приложений	Кнопка «More» на нижней панели или интерфейс текущей страницы	Панель нижней навигации или боковое гамбургер-меню
Главная кнопка/действие	Верхняя навигация, с правой стороны	Floating action button
Вторичные действия	Интерфейс текущей страницы	Верхняя навигация, с правой стороны
Список с единственным вариантом выбора	Список с галочкой для выбранного элемента	Список Radio button
Списки множественного выбора	Список с переключателями или список с галочками для выбранных элементов	Список с галочками или список с переключателями
Подтверждение или отмена деструктивного действия	Модальное диалоговое окно подтверждения выбора	Отмена действия посредством временного уведомления на экране

Да, и прежде чем мы углубимся в эту тему, давайте ответим на один важный вопрос, который определяет все остальное.

Нужно ли делать приложения для Android и iOS разными?

Если коротко, то «нет». Apple и Google – очень умные компании с миллионами пользователей. Они будут совершать UX-ошибки, как и любая другая компания, но они не совершат вопиющих ошибок, когда будут определять язык дизайна своих систем. Поэтому, хотя, ниже я и представляю два альтернативных подхода (iOS и Android), ни один из них не является неправильным. Если пользователи могут уверенно перемещаться по вашему приложению и использовать его, никто не может запретить вам использовать вкладки на iOS или модальные представления на Android. Если ваша цель – создать приложение для обеих платформ так, чтобы оно было нативным для той системы, на которой работает, то это руководство для вас.

Навигация iOS и Android

Навигация в верхней части экрана

Начнем с вершины – буквально. Каждая платформа имеет разные стандарты для того, что отображается в верхней части большинства экранов. В iOS крайнее левое действие почти всегда является действием «назад» – последовательно к предыдущему экрану («Шаг 2» возвращает к «Шагу 1»), или иерархически к родительскому экрану (переход от «Inbox» к «Mailboxes»). Кроме того, здесь может быть привязан несвязанный пункт назначения. Заголовок страницы практически всегда присутствует, но сжимается по мере прокрутки представления пользователем. Дополнительные действия на странице могут отображаться, как одно текстовое действие или несколько иконок. На Android заголовок страницы выравнивается по левому краю. Слева от заголовка страницы не должно быть ничего, но (а) если это страница верхнего уровня и в приложении есть кнопка гамбургер-меню, она расположена там, или (б) если эта страница следует другой последовательно, вы можете (по желанию) добавить кнопку назад. Ресурсы: панель навигации iOS; верхняя панель Material Design.

Основная навигация

1. Всего 2-5 вкладок
2. Они имеют размер шрифта 10
3. Они представляют основные пункты назначения

Многие популярные сторонние iOS-приложения также соответствуют нескольким дополнительным правилам:

1. Любая вкладка, представляющая основное действие приложения – например, добавление новой фотографии в фото-приложение – центрируется
2. Любая вкладка профиля или настроек расположена последней
3. Поиск идет вторым

С другой стороны, iOS-приложения по умолчанию (1) не поощряют действия, находящиеся на панели вкладок, (2) не имеют вкладок, связанных с профилем или настройками, и (3) показывают поиск последним.

Самое большое различие в приложениях Android заключается в том, что одни и те же основные пункты назначения распространены по всему интерфейсу – часто между (a) кнопкой гамбургер-меню, (b) панелью поиска, (c) вкладками или (d) floating action button. Мы поговорим обо всех 4 элементах в следующих разделах. Да, и обратите внимание: Android использует нижнюю навигацию совсем недавно, аналогично iOS – так что вы можете вообще не делать разницу между версиями приложений.

Вторичное навигационное меню

В iOS пункты навигации, которые не помещаются в нижней панели вкладок, могут (a) быть перенаправлены на универсальную вкладку «More» или (b) отображаться как действия в верхнем левом или верхнем правом углу других пунктов назначений.

На Android вторичные навигационные пункты назначения перечислены в боковом меню, доступном при нажатии кнопки гамбургер-меню.

Примечание: хотя Apple специально не рекомендует использовать кнопку гамбургер-меню, у многих сторонних iOS-приложений она есть, и вы можете сами выбрать, использовать ее или нет. Лучше всего избегать элементов, скрывающих важные вещи, потому что очевидное всегда побеждает.

Ресурсы: Material Design nav drawer

Действие «Назад»

В iOS вы можете перемещаться назад 4 различными способами, в зависимости от контекста.

Метод навигации назад (IOS)

Контекст, в котором используется

Нажать «Назад» в верхнем левом углу экрана

Любой экран, на котором присутствует действие «Назад»

Свайп вправо от левого края экрана

Любой экран, на котором действие назад расположено в верхнем левом углу

Нажать «Готово» в верхнем правом углу экрана

Не редактируемые модальные представления

Свайп вниз по контенту

Модальные или полноэкранные представления

Что такое модальные и полноэкранные представления? Хорошо, что вы спросили.

Модальные окна – это одноэкранные задачи, которые появляются, на переднем плане, заставляя предыдущий экран отступить на задний план. Вы можете отклонить их, проведя пальцем вниз или нажав «Назад» в верхней части модального окна.

Полноэкранные окна – это медиа-файлы, фотографии или видео, которые занимают весь экран. Их можно закрыть на iOS и Android, свайпом вниз.

В Android навигация назад намного проще: для Android 10 и новее просто проведите пальцем с любой стороны экрана – это всегда будет навигация назад. Для Android 9 используйте вездесущую кнопку «Назад» в левом нижнем углу экрана.

Дизайн элементов управления iOS и Android

Основные кнопки призыва к действию

В iOS основная кнопка страницы обычно находится в правом верхнем углу.

В Android, однако, основная кнопка страницы часто отображается в правом нижнем углу, как кнопка floating action button или сокращенно FAB.

Стоит отметить, что у каждой платформы будут исключения. Давайте рассмотрим их.

Иногда в iOS важные действия страницы отображаются на нижней панели инструментов. Apple любит подчеркивать, что она очень отличается от панели вкладок, но мы-то знаем.

В Android, напротив, иногда важные действия будут отображаться в верхней части экрана.

Поиск

Как на iOS, так и на Android поиск – очень гибкий элемент управления. Иногда это основной пункт приложения, иногда это крайний вариант использования, и большую часть времени он находится между этими двумя вариантами. Как и следовало ожидать, каждая платформа обеспечивает определенную гибкость. Давайте посмотрим на общие парадигмы.

Одно из различий в стиле поиска между iOS и Android:

• Чтобы отменить поиск, в iOS нажмите «Отмена» или «←» в Android
• Чтобы очистить текущий запрос, но остаться на экране поиска, нажмите «X» в iOS или «X» в Android

Когда поиск является очень важной функцией приложения, iOS и Android сразу отобразят панель поиска. Нажатие на строку поиска откроет отдельный экран.

Если поиск не является критически важным, вы можете получить к нему доступ из других мест.

В iOS поиск обычно отображается среди основных вкладок или действий в верхней навигационной панели.

В Android вы также найдете его в контекстных действиях на верхней панели.

Меню действий

В iOS меню действий могут быть вызваны любой кнопкой или попыткой предпринять какое-либо действие. Они скользят снизу-вверх, в легко доступную область экрана.

В Android, однако, нижние листы появляются только при нажатии на иконку с тремя точками (это иконка Android для «дополнительных параметров»). И обычно появляются снизу только тогда, когда есть много вариантов возможных действий.

Обе платформы имеют свои стандарты для меню действий.

В новой версии iOS (iOS 13) функция, называемая «контекстное меню», отображает связанные действия при нажатии и удержании элемента. Когда отображается контекстное меню, фон размыт.

А в Android многие меню будут отображаться прямо на элементе. В более новых версиях Android меню будет закрывать иконку многоточия.

Элементы управления выбором

На мобильных устройствах следует по-разному реализовывать выбор одного варианта и выбор нескольких вариантов из множества.

Для выбора среди относительно небольшого числа вариантов в iOS используйте элемент управления выбора. Вы можете отображать его закрепленным внизу (как показано выше) или встроенным в контент (см. «Date Pickers» ниже).

Для выбора из нескольких вариантов на Android обычно используется раскрывающееся меню (которое отображается на месте) или модальное диалоговое окно со списком вариантов (которое отображается по центру и затемняет фон приложения).

Для более длинных списков вариантов или, когда возможен множественный выбор, как на iOS, так и на Android, часто встречается выделенный «экран выбора». Одна из самых больших ошибок начинающего дизайнера в дизайне мобильных приложений – это не выделение полного экрана для выбора одного варианта из большого количества опций.

Средства выбора даты (Date pickers)

В iOS средства выбора даты имеют вид любого другого элемента выбора, но со столбцом для дня, месяца и года (по желанию).

Android имеет свой собственный элемент выбора даты. Вы можете добавить год, не добавлять его или позволить пользователю самому решить, хочет ли он его добавить.

Ресурсы: iOS picker; Android date picker (обратите внимание на различия в спецификации Material Design)

Вкладки

Стоит отметить, что у iOS нет элемента управления, который визуально напоминает «вкладки». Вместо этого Apple призывает вас использовать сегментированную кнопку для перехода между сестринскими представлениями.

В Android вкладка в стиле «плоский дизайн» используется для того же дисплея.

Отмена действия

В iOS предупреждения появляются по центру экрана, но вы также увидите, как предупреждения скользят вверх от нижней части экрана (технически называемой «панелью действий» языком iOS). Деструктивные действия (например, удаление чего-либо) имеют красный цвет.

В Android некоторые предупреждения появляются по центру экрана. Однако, когда они не требуют ввода данных пользователем и должны исчезнуть через несколько секунд, вы можете использовать «snackbars». Snackbars – хороший выбор, потому что (а) они дают вам возможность сообщить пользователю, что его действие было успешным, и (б) вы можете добавить к ним одно или два действия, что делает их идеальным местом для размещения действия «Отменить». Я бы предпочел, чтобы мои пользователи имели возможность отменить действие. Дважды спрашивайте пользователя каждый раз, когда он пытается принять важное решение.

Ресурсы: Undo от iOS; snackbars от Material Design

Типографика iOS и Android

Шрифт по умолчанию

Хотя нет необходимости устанавливать приложение iPhone или Android с системным шрифтом по умолчанию, полезно знать, что такое системные шрифты. На случай, если вы захотите имитировать стиль нативного приложения.

Системный шрифт iOS называется San Francisco (SF). Это компактный шрифт, разработанный для сохранения удобочитаемости при небольших размерах текста. Вы можете скачать SF здесь.

Системный шрифт Android называется Roboto. Хотя он очень похож на SF, его буквы выше, а межбуквенное расстояние немного больше. Вы можете скачать Roboto здесь.

Кроме того, для многих Android систем установлен собственный Google-шрифт под названием Product Sans, который недоступен для стороннего использования.

Стили текста

Другие стандарты платформ iOS vs. Android

Размер и форма иконок приложений

Вы должны проектировать иконки приложений iPhone в следующих размерах:

Размер иконки	Где используется
180×180 px	Экран «Домой» iPhone для размеров @3x (например, 11 Pro, X, Xs, 8+)
120×120 px	Экран «Домой» iPhone для размеров @2x (например, 11, XR, 8)
1024×1024 px	App Store

В конечном счете, ваша иконка может быть сделана и в других размерах, но, если вы сделаете ее в 60px, то убедитесь, что она хорошо смотрится в размерах 120×120, 180×180 и 1024x1024px.

Проектируйте иконки Android-приложений в следующих размерах:

Размер иконки	Где используется	Кратность 48×48 px
48×48 px	Основной экран (medium DPI телефоны)	1x
72×72 px	Основной экран (high DPI телефоны)	1.5x
96×96 px	Основной экран (xhdpi телефоны)	2x
144×144 px	Основной экран (xxhdpi телефоны)	3x
192×192 px	Основной экран (xxxhdpi телефоны)	4x
512×512 px	Большая версия для Google Play store (все устройства)	N/A

Поэтому: 1) создайте красивую векторную иконку с разрешением 48×48 px, 2) увеличьте изображение до 400%, чтобы убедиться, что оно по-прежнему выглядит великолепно, и 3) создайте отдельную версию с разрешением 512×512 px.

Когда вы впервые просматриваете таблицы иконок, нужных для iPhone или Android-смартфонов, это может показаться довольно пугающим. Но, если вы знаете базовый размер, умеете проверять изображения и экспортировать их в различных кратных значениях, это вовсе не сложно.

Ресурсы: рекомендации по иконкам приложений iOS; рекомендации по иконкам приложений Material Design (к сожалению, это ничего не говорит о размерах иконок)

Минимальный размер цели нажатия

Платформа	Минимальный размер цели нажатия
iOS	44x44pt
Android	48x48dp

Обратите внимание, что points Apple («pt») и device-independent pixels Android («dp») функционально эквивалентны. Они просто ссылаются на базовый размер (такой же, как CSS-единица «пиксель»), который измеряется независимо от разрешения экрана.

Приложения Android с большим целевым размером экрана и меньшим количеством пикселей на экран, как правило, выглядят более чистыми и воздушными, чем их собратья для iOS.

Язык дизайна

Пытаясь показать различия между двумя языками дизайна и философиями, лежащими в их основе, я попытался рассказать об основных частях языка iOS и Material Design, которые похожи. Чтобы узнать больше, вам нужно погрузиться в официальную документацию каждой дизайн-системы.

Чтобы узнать больше о проектировании для iOS, прочтите рекомендации Apple «Human Interface Guidelines».

Чтобы узнать больше о проектировании в стиле Material Design, прочтите материалы на сайте Material Design.

Заключение

Я что-то упустил? Что-то устарело? Пишите на почту erik@learnui.design. Я буду постоянно обновлять это руководство, чтобы оно было наиболее точным и актуальным для перевода мобильных приложений для iPhone и Android.

Как создаётся дизайн мобильных приложений

150 тысяч новых приложений регистрируют в App Store и Google Play каждый месяц. Привлечь внимание пользователей и добиться коммерческого успеха помогает продуманный дизайн мобильных приложений. Так, согласно исследованию McKinsey, в компаниях с хорошим дизайном рост выручки больше на треть.

О том, какие знания и навыки нужны дизайнеру приложений, как создаётся мобильное приложение, что нужно учитывать при разработке, рассказывает Алексей Комаров, UX/UI-дизайнер в IBM и преподаватель Нетологии на курсе «Дизайнер мобильных приложений».

Алексей Комаров

UX/UI-дизайнер в IBM

светлана третяк

Редактор
Медиа Нетологии

Дизайнер приложения отвечает за эмоции от использования продукта. Для реализации этой задачи дизайнер должен создавать не только привлекательный визуальный облик, но и уметь выяснять потребности пользователей с помощью исследований, составлять навигационную модель (как связаны экраны приложения), проектировать интерфейс (расставлять по важности иерархию компонентов).

Давайте разбираться с самого начала.

Что нужно знать мобильному дизайнеру

Колористика

— искусство сочетания цветов.

Например, вместе не рекомендуется использовать зелёный и красный — насыщенные цвета, которые как бы перекрикивают друг друга. Получается вырвиглазный интерфейс, отсутствует контрастность и объекты трудно различить на экране. Для несочетаемых цветов дизайнеры даже придумали определение «зелубой» (зелёный + голубой).

Для подбора цвета часто используют специальные палитры или цветовые круги — например, Material palette, Adobe Color.

Также можно брать на заметку палитры готовых продуктов. Например, в Америке существует определённый культ кроссовок, где их покупают не ради замены старой пары, а, скорее, с эстетической точки зрения. Поэтому некоторые экземпляры можно назвать источником вдохновения для дизайнеров, которые используют цветовые схемы кроссовок для своих продуктов.

Типографика

— умение оформлять текст при помощи набора и вёрстки.

По сути дизайн — это оформление контента, 80% которого передаётся через текст. Любая информация располагается в виде иерархии — главная и второстепенная части, которые выделяются с помощью определённой стилизации текста.

Например, уровни заголовков — заголовок 1-го или 2-го уровня — различаются по размеру шрифта и служат навигацией, а также делают материал структурированным.

Выравнивание по левому краю придаёт тексту аккуратный вид — его легче воспринимать. Строки начинаются на одном уровне, и глаз быстро находит начало следующей строки — удобно и быстро привыкаешь.

Композиция

— умение грамотно управлять объектами в пространстве. Какие размеры объекта, отступы между объектами и краями экрана, расстояния и связи между объектами позволят создать гармоничную композицию для лучшего восприятия объектов.

Если говорить о том, как колористика, типографика и композиция влияют на поведение пользователя и эффективность интерфейса, то стоит упомянуть про четыре типа нагрузок.

Когнитивные нагрузки — усилия, которые прикладываем, чтобы распознать объект, логику его работы и принять решение о дальнейших действиях. Например, понимаем, что перед нами кнопка, а не округлый прямоугольник, и на эту кнопку можно нажать, чтобы попасть на нужный экран.

⇒ Чем больше мозгу требуется усилий для определения объекта, тем больше мы устаём.

Визуальные нагрузки — усилия для определения объекта на экране по визуальным признакам (круг, небо, кошка) и выделения его среди других.

⇒ Чем больше объектов в интерфейсе, тем больше мы устаём.

Моторные нагрузки — возникают при физическом контакте с интерфейсом: свайп, тап и другие.

⇒ Чем больше жестов управления интерфейсом и чем они сложнее, тем больше мы устаём.

Внешние нагрузки — возникают при взаимодействии пользователя с приложением (собака залаяла, машина проехала, пошёл дождь). Эти нагрузки сложно точно предугадать — можно лишь предположить, в каких условиях будет использоваться приложение чаще всего.

⇒ Чем больше отвлекающих моментов, тем больше мы пытаемся сосредоточиться и быстрее устаём.

Все типы нагрузок идут в связке, влияя друг на друга.

К примеру, если приложение предназначено для пожарных, которые часто находятся в стрессовых ситуациях, нужен максимально понятный интерфейс — у них нет времени разбираться в чём-то сложном. А если пользователь — офисный сотрудник, который заходит в приложение, чтобы убить время по дороге на работу, то можно добавить больше контента или функций, чтобы пользователь увлёкся и провёл в приложении больше времени.

Инструменты

Из графических редакторов сейчас популярны Figma, Sketch или Adobe XD.

Figma

Кросс-платформенный онлайн-редактор, который работает на Windows, macOS, Linux. В нём можно работать всей командой, в том числе с заказчиками. Бесплатный для одного пользователя и платный для работы с командой, если нужно видеть все действия команды, а не только за последние 30 дней.

Sketch

Платный графический редактор для macOS. Плюс Sketch в том, что на рынке он дольше Figma, поэтому в некоторых случаях возможностей и интеграций для него находится больше. Но если вы фрилансер, работать с заказчиками будет непросто, поскольку это не кросс-платформенный инструмент. В Sketch можно работать в офлайне.

Adobe XD

Приложение Adobe для проектирования интерфейсов. Плюсы и минусы аналогичны Sketch, кроме того, что в Adobe XD есть возможность создавать голосовые прототипы при помощи Amazon Alexa. XD заметно менее популярен по сравнению с Figma и Sketch.

Графические редакторы достаточно похожи, поэтому, если освоить один инструмент, то изучение другого не займёт много времени.

Из других инструментов дизайнера можно отметить:

Miro

В этом сервисе удобно делать брейнстормы, обсуждения, прорабатывать гипотезы, проектировать навигацию с помощью mindmap и создавать Customer Journey Map.

Сервисы для создания прототипов

Помимо встроенного прототипирования в Figma, Sketch или Adobe XD дополнительно используют такие решения, как InVision, Marvel, ProtoPie, Flinto, Principle for Mac.

Цели и задачи разработки

Дизайнер должен понимать, какие задачи у бизнеса и для кого предназначено приложение.

Приложение — это инструмент бизнеса со своими целями и задачами.

Для примера рассмотрим мобильное приложение банка.

снизить расходы на обслуживание клиентов в отделениях и повысить средний доход на одного клиента.

контролировать свои расходы.

создать дистанционный канал поддержки клиентов и увеличить продажи банковских продуктов.

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

Можно сделать великолепный дизайн, но он не будет решать задачи компании или разработчики не смогут его реализовать. Например, бывает, что бизнес выдвигает гипотезы, не проверяет их на этапе исследования и сразу отправляет в разработку. Получается функциональность, которая никому не нужна, при этом время и деньги потрачены впустую.

Бывает, что ресурсы безрезультатно тратятся не только на бесполезные фичи, но и на приложение.

К слову, если интересуетесь культурой стартапов, в целом (есть утрированные моменты) она хорошо показана в сериале «Кремниевая долина». Его рекомендует к просмотру и Билл Гейтс: «Продюсеры и сценаристы проводят много исследований перед каждым новым сезоном шоу. В прошлом году я был одним из нескольких людей, с которыми они встретились, чтобы поговорить об истории отрасли и рассказать о некоторых своих идеях для пятого сезона».

Soft skills

Коммуникационные навыки

Например, больше половины рабочего времени я общаюсь, согласовываю, обсуждаю. При этом стоит помнить, что непрерывное общение может привести к профессиональному выгоранию, поэтому периодически нужно прислушиваться к себе.

Правильная реакция на критику

Дизайнеров постоянно критикуют, и многие на это обижаются.

Если критикуют, то критикуют работу, а не дизайнера. Важно отделять и не принимать близко к сердцу.

Главное — получать конструктивную критику. Если сказали, что плохо, но не сказали почему, то это неаргументированное мнение, на которое не нужно реагировать.

Относитесь ко всему с юмором — это помогает в том числе трансформировать негатив в хорошее настроение ��

К примеру, когда я работал в крупной финансовой компании, менеджер попросила меня сделать кнопки жёлтыми (этот цвет не корпоративный). На мой вопрос, почему именно таким цветом, менеджер пояснила, что на курсах, которые она посещала, сказали, что «жёлтые кнопки привлекают внимание, поэтому, например, в IKEA выходы жёлтые». То, что в IKEA жёлтый — один из корпоративных цветов, которые логично использовали в оформлении магазина, на курсах, видимо, забыли сказать ¯\_(ツ)_/¯

Mindmap — диаграмма связей, интеллект-карта, карта мыслей или ассоциативная карта.

Это способ изображения процесса общего системного мышления с помощью схем.

Что нужно учитывать при разработке интерфейса

Взаимодействие с пользователями

​​Создание мобильных приложений не сильно отличается от создания сайтов в плане процессов — и те, и другие относятся к цифровым продуктам.

Основное различие заключается во взаимодействии пользователя с продуктом. За компьютером мы сидим или стоим, а вот с телефоном мы можем оказаться в любой ситуации: на прогулке, занимаясь спортом, в магазине, автомобиле и так далее. Также различаются размеры устройств и период контакта.

Смартфоны меньше компьютеров и ноутбуков, а сеансы использования приложений короткие, но частые — всё это нужно учитывать. На экране приложения должно быть минимум информации — только полезная. Пользователь должен быстро получать доступ к контенту. Возьмём, к примеру, Яндекс.Почту. Если мы зайдём в браузерную версию с компьютера, то увидим много дополнительной информации. На телефоне видим только письма, остальное скрыто и показывается по требованию (нажатию) — удобно.

Во многом благодаря желанию быстро и удобно получать информацию и появились мобильные приложения.

Ведь чтобы зайти на сайт, нужно ввести его адрес в строку браузера, а приложение можно открыть и сразу им пользоваться.

Нюансы мобильных платформ

​​Особенности создания интерфейсов для приложений описаны в гайдлайнах мобильных платформ — Human Interface Guidelines для iOS (Apple) и Material Design для Android (Google).

В создании приложений на платформах Android и iOS есть различия. Например, в паттернах поведения: в iOS меню показывается целиком, а в Android «гамбургерное» меню (три полоски); в разном управлении: в Android три кнопки («назад», «домой» и «последние приложения»), в iOS только «домой».

Грань с каждым обновлением постепенно стирается, но пока ограничения существуют. К примеру, модельный ряд iOS достаточно скромен, а в Android большое количество устройств да ещё и от разных производителей. Из-за этого при разработке на Android тяжелее отлаживать интерфейс — на это уходит много времени.

В основном Android доступнее, чем iOS. И из-за дешёвых компонентов встаёт вопрос качества — на плохой матрице экрана страдает цветопередача, а с плохим сенсором тяжелее попадать на кнопки (низкая чувствительность).

Интерфейс приложения лучше сразу адаптировать для двух платформ, а не делать что-то среднее — в будущем такая попытка сэкономить может дорого обойтись.

Стоимость «экономии» оценить в вакууме сложно — зависит от компании, бизнес-модели, рынка. Немаловажно и то, что для iOS характерна одна модель поведения пользователей, для Android — другая.

Если говорить о средних значениях, то давайте прикинем. Средняя зарплата разработчика — 150 тысяч рублей. В крупной компании приложение могут делать год, но мы будем ориентироваться на агентства, которые делают приложение примерно 3 месяца. Для Android нужны 2 программиста, для iOS — 1 (разработка примерно одинаковая по трудозатратам, но больше нужно отлаживать в Android).

Если просчитались с разработкой приложения на iOS, то это 150 000 рублей х 1 разработчик х 3 месяца = 450 000 рублей, на Android — 900 000 рублей. И это только расходы на зарплатный фонд — без учёта упущенной выгоды, репутационных потерь и снижения лояльности пользователей.

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

Не нужно пытаться уместить контент сайта в десктопной версии на компьютере или ноутбуке в маленький экран смартфона. При адаптации интерфейса под телефон контент приоритезируют и оставляют только самое важное.

Длинные процессы

Если на сайте можно использовать длинные формы (опросники) в несколько шагов, то на телефоне это делать не рекомендуется. Пользователю будет неудобно их заполнять, и он может бросить это занятие в любой момент.

Профессия

Дизайнер
мобильных приложений

Узнать больше

• Сможете самостоятельно разрабатывать дизайн мобильных приложений и руководить созданием интерфейсов мобильных продуктов
• Можно работать над своим проектом или выбрать учебный
• Каждый выпускник получает помощь и поддержку Центра развития карьеры Нетологии

Итак, мы разобрали базу для создания визуальной части интерфейса — дизайна. А теперь рассмотрим непосредственно процесс разработки приложений.

Этапы создания мобильного приложения

Исследование

Погружаемся в цели и задачи бизнеса.

Изучаем целевую аудиторию.

Исследования делятся на количественные и качественные.

Количественные исследования отвечают на вопросы «сколько?», «как часто?». Обычно их проводят при помощи опросов, анкетирования, телефонных интервью.

Качественные отвечают на вопросы «кто?», «почему?». Получают информацию в индивидуальных глубинных интервью, групповых дискуссиях (фокус-группах) или прибегая к экспертным оценкам.

Если приложение делается с нуля, то сначала с помощью комбинации методов проводят качественные исследования, потом количественные.

Если приложение уже разработано и его нужно доработать, тогда сначала собирают статистику количественными методами, а потом — качественными.

Дальше проводим конкурентный анализ, изучаем другие каналы коммуникации бизнеса: сайт, презентации, реклама, при наличии — офлайн-точки.

Это нужно для правильного позиционирования бизнеса в приложении. У каждого бренда или компании есть свой язык общения с клиентом. Через каналы коммуникации бренд транслирует посылы аудитории. Например, слоган Nike «Just do it» отражается в простом, спортивно-повседневном стиле, в котором оформлены магазины и сайты компании.

Аналитики предварительно пропускают через себя требования бизнеса и упаковывают это в понятные модели: mindmap, схемы бизнес-процессов, типичные пользовательские пути и другое, — создают артефакты аналитики.

На основе вышеуказанных артефактов дизайнер принимает решения.

Также артефакты помогают управлять коммуникацией с бизнесом: чтобы каждую неделю не прилетали изменения, все бизнес-требования обговариваются и фиксируются. Это важно, чтобы не делать работу в стол и избежать бесконечных доработок.

Если каждую неделю приходят новые требования, то бизнес-заказчик не знает или не понимает, что на самом деле он хочет. А если нет чётких критериев приёмки, будет сложно показывать результат работы. Можно попасть в петлю непрекращающихся правок и постоянных переделок.

Вышеперечисленное — исследования, общение с бизнесом, аналитика — может сделать дизайнер, менеджер продукта или аналитик, если есть такой специалист в компании. Это зависит от компании и бюджета на проект.

Если есть выделенные аналитики, то зона ответственности между ними для целей разработки приложения может распределяться следующим образом:

• бизнес-аналитик погружается в бизнес-процессы и собирает требования от компании,
• UX-аналитик изучает проблемы пользователей, проводит качественные и количественные исследования,
• продуктовый аналитик обычно работает с метриками и показателями продукта.

Проектирование

По сути это создание скелета приложения: дизайнер понимает, где какая будет информация, раскидывает контент по экранам и определяет, сколько экранов будет в каждом пользовательском сценарии.

Чтобы проверить эту логику на практике, дизайнер собирает черновик приложения. Там он тестирует связку экранов, проверяет, что компоненты интерфейса расположены в правильном месте и понятно, как с ними взаимодействовать: что-то нужно нажать, потянуть, выделить или удалить.

На этом этапе важно не переходить в визуальный дизайн и не углубляться в вопросы из серии «какого цвета будет кнопка» или «какие сделать скругления у картинки».

Для проектирования чаще всего используют чёрно-белые прототипы — вайрфреймы, которые создаются в графическом редакторе.

Перед вайрфреймами некоторые создают бумажные прототипы — от руки делают эскиз будущего приложения на бумаге.

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

Бумага и карандаш — такие же инструменты дизайнера, как и графический редактор.

Когда дизайнер продумывает процессы в приложении, сложно удержать всё в памяти в один момент времени — нужно фиксировать ход мысли. И в этом сложно полагаться на графические редакторы, которые заточены под определённые задачи — например, обработать фотографии или создать иллюстрации. К тому же, когда мы сразу работаем в графическом редакторе, мы вынуждены подстраиваться под его ограничения, то есть не мы управляем инструментом, а инструмент — нами.

Между идеей в голове и её реализацией получается много посредников: интерфейс графического редактора, экран монитора, клавиатура, мышка. А при работе с бумагой идея быстрее становится осязаемой.

Читать также

Дизайн без исследований: несколько антикейсов и выводы из них

Рекомендации по созданию бумажных прототипов

Лучше использовать обычную бумагу — разлинованные листы будут отвлекать от сути действия. Мы и не заметим, как будем пытаться не заходить за границу линий или объединять их. Кроме этого, посторонние линии отвлекают от обсуждения.

Простой карандаш с ластиком позволит быстро поправить ошибки и не отвлекать собеседников и самого себя на цвета. С помощью бумажного прототипа важно обсудить логику работы интерфейса, а не почему эта кнопка красная, а другая синяя.

Дизайн-концепция

Дизайн-концепция — совокупность дизайнерских решений при разработке продукта, которая даёт общее представление о нём, другими словами, модель будущего приложения.

На этом этапе дизайнер подбирает визуальные референсы, сверяется с брендбуком компании, прорабатывает один из целевых сценариев из 5‒6 экранов ⟶ согласовывает дизайн-концепцию с клиентом.

Дизайн-концепция презентуется клиенту, чтобы выровняться с ним по стилю донесения информации и визуального контента.

Также обсуждение концепции нужно и для того, чтобы не оставлять клиента в информационном вакууме и дать возможность задать вопросы, оставить комментарии.

«Дизайн говорит сам за себя» — ошибочное мнение. Заказчику нужно показать путь дизайнера от анализа информации до создания концепции приложения. В таком случае к дизайнеру возникнет больше доверия и впоследствии снимет лишние вопросы клиента.

И уже после согласования дизайн-концепции клиенту демонстрируются вайрфреймы для утверждения остальной функциональности приложения.

Если клиент согласовал вайрфреймы, то дизайн-концепция целевого сценария тиражируется на всё приложение, то есть чёрно-белые вайрфреймы приобретают облик привычного приложения.

Визуальный дизайн

После согласования концепции на целевом сценарии дизайнер дорабатывает приложение:

• покрывает все пользовательские сценарии;
• отрабатывает так называемые пограничные состояния: нет интернета, неправильно введены данные, успешная и неудачная отправка данных, пустые экраны (данных ещё нет), контекстные подсказки (краткие сообщения, которые подсказывают пользователю, как работает интерфейс) и другие.

Иногда итоговый результат в визуальном дизайне может отличаться от того, что клиенту показали на этапе проектирования из-за новых вводных в процессе доработки, — это нормально. Главное — сохранить логику взаимодействия компонентов интерфейса.

У большинства компаний есть дизайн-системы — наборы компонентов, которые реализованы в визуальном дизайне и в коде, то есть они охватывают сразу и дизайн, и программирование. Благодаря этому этап создания вайрфреймов всё чаще пропускают.

Например, я использую только бумажные прототипы для понимания, что хочу спроектировать в графическом редакторе. И дальше делаю макет с использованием дизайн-системы без использования вайрфреймов.

Дизайн-системы обычно собирают на основе созданных приложений. Такой подход ускоряет создание и согласование дизайна с заказчиком, а дизайнеры могут использовать проверенные решения в новых проектах.

​​Прототипирование и тестирование

Прежде чем отдать макет приложения в разработку, его нужно протестировать. Для этого дизайнер собирает интерактивные прототипы.

Разработка — самая дорогая часть любого продукта. Поэтому важно при помощи прототипа проверить возможные недочёты и исправить ошибки.

Дизайнер собирает макеты в условное слайд-шоу с помощью графического редактора или ПО, о которых упомянули выше. Переключение от одного к другому макету происходит при нажатии на определённую область макета. Обычно эти области прозрачные и находятся поверх нарисованных кнопок — при нажатии складывается впечатление, что кнопка не нарисованная и статичная, а настоящая.

Недостаток прототипа в том, что это не реальное приложение, а ряд картинок. И для разных сессий тестирования нужно создавать новый прототип.

Создание спецификации для разработчика

Дизайнер собирает UI-кит (user interface kit) — файлы с элементами в едином стиле, которые часто используются в приложении: цвета, шрифты, состояния компонентов и другие.

Приложение состоит из визуальных и логических шаблонов — на основе этих шаблонов и создаётся UI-кит. Визуальные шаблоны определяют, какого цвета и размера должны быть кнопки, количество текстовых стилей. Логические шаблоны — шаблоны проектирования — показывают, как элементы интерфейса расположены на экране и что произойдёт при нажатии на кнопку.

UI-кит нужен, чтобы:

• упростить разработку — разработчик один раз запрограммировал кнопку и потом просто её копирует на разные экраны;
• сформировать привычку к интерфейсу приложения — если пользователь два раза нажал на синюю кнопку, после чего два раза происходит одинаковое действие, то формируется связь «действие‒последствие».

Разработка приложения

Далее макеты с UI-китом дизайнер передаёт в разработку.

К примеру, для переноса макетов из графического редактора я пользуюсь программой Zeplin, в которой разработчик может посмотреть отступы и размеры элементов на макетах.

Авторский надзор

После того, как разработчики перенесли макеты в код, дизайнер ещё раз проверяет соответствие дизайна интерфейса поставленной задаче. Бывает, разработчики сами пытаются что-то добавить или изменить, и не всегда это получается хорошо.

При необходимости изменений дизайнер создаёт задачу на доработку.

​​Публикация в магазинах приложений

Для публикации дизайнер оформляет страницу приложения в магазине и подготавливает примеры интерфейса (главные экраны приложения) для промо-раздела.

Текстовое описание страницы готовит менеджер продукта, аналитик или маркетолог.

Разработчик публикует приложение в App Store и Google Play, чтобы желающие могли его скачать и использовать.

После релиза: внедрение фичей

Когда аудитория приложения начала им пользоваться, появляются новые данные. Например, в какие разделы часто заходят, а в какие не заходят вообще; дальше какого экрана не проходят; сколько пользователей не завершает покупку или сколько людей добавили товар в корзину, но не оплатили.

Данные анализируют и по итогам дорабатывают приложение. ⟶ Процесс запускается с начала.

Дизайн-процесс — это не только создание красивых картинок, но и продумывание логики и контроль разработки, где сам дизайн — это часть пазла.

​​​​В зависимости от компании некоторые этапы могут быть объединены или упрощены.

Например, если вы работаете в агентстве и нужно сделать приложение для заказчика, скорее всего, вы пройдёте описанный процесс полностью. А если вы работаете в большой компании со своей дизайн-системой, то пропустите подбор референсов, а этап визуального дизайна объедините с проектированием — будете собирать интерфейс из готовых компонентов, как из кубиков Лего.

Целевой сценарий – это один из пользовательских сценариев, без которого приложение будет бесполезным.

Примеры целевых сценариев при заказе такси:
— место подачи машины,
— место назначения,
— время подачи машины,
— выбор тарифа,
— оплата.

Примеры крутых приложений

Когда в каком-то разделе Dropbox нет контента, то появляется так называемый пустой экран, на котором размещена иллюстрация и призыв к действию

ТОП-10 идей UI дизайна мобильных приложений в 2022

Большинство пользователей оценивают приложение в первую очередь по его внешнему виду. Сделать ваш продукт более привлекательным и современным для клиента поможет грамотная работа с дизайном пользовательского интерфейса.

Огромная часть этого процесса отдается изучению дизайн-трендов. Ваша задача отслеживать появление новых тенденций и использовать идеи, которые, как вы считаете, улучшат дизайн вашего приложения.

Большинство концепций пользуются популярностью достаточно недолгое время. Дизайн тренды быстро себя изживают, поэтому заострять внимание на каждом, а тем более применять их все — не совсем рационально. Используйте только то, что будет полезно вашему продукту, ориентируясь на его назначение и сферу применения.

10 трендов мобильного дизайна 2022

Мы собрали топ 10 трендов UI мобильных приложений, которые обещают быть популярными в 2022 году. У вас есть время изучить новые концепции, протестировать их и понять, что из этого поможет улучшить ваш продукт:

• Анимация
• Жесты вместо кнопок
• В стиле 90-х
• Глубина в графике
• Темный режим
• Типографика
• AR и VR
• Градиенты и прозрачные элементы
• Комфортный визуальный контент и минимализм
• Абстрактное искусство

Итак, ниже мы рассмотри каждый из трендов более подробно.

Видеоконтент в последние годы опережает по популярности статичную графику. Посчитать только, сколько времени каждый из нас проводит за просмотром TikTok, YouTube и прочих платформ.

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

С помощью анимации можно выделить важные вещи и расставить акценты. Например, вы можете анимировать кнопки, иконки, переходы, чтобы сделать взаимодействие пользователя с приложением лучше, проще и понятнее.

Анимация поможет подчеркнуть уникальность продукта, повысить конверсии и продажи.

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

Жесты вместо кнопок

Жесты и смахивание экрана — это то, что отличает мобильные устройства от компьютеров и делает их более доступными. Кликать и нажимать кнопки, конечно, удобно, но смахивать пальцем быстрее, да, и просто намного веселее.

Мы ежедневно тратим часы, просматривая и пролистывая десятки приложений, скроллим по экрану и смахиваем элементы. Любое действие равняется легкому касанию одного пальца.

Именно поэтому жесты стали одним из приоритетов для разработчиков. Многие создатели приложений вовсе отказались от использования кнопок. Кнопки создают беспорядок и занимают слишком много места на экране. Жесты и свайпинг как раз помогают упростить интерфейс мобильных приложений. А если к ним вы добавите анимацию из предыдущего пункта, приложение заиграет новыми красками.

Яркий пример — книжные приложения, они обычно используют анимацию, для перелистывания страниц.

В стиле 90-х

Стилистика 90-х за последний год пробралась во все сферы, даже затронула дизайн мобильных приложений. Если сначала появлялись простые вещи вроде ретрофильтров в приложениях для фоторедактирования, то сегодня такие элементы присутствуют в интерфейсах многих digital-продуктов.

Дизайнеры используют ретро шрифты и изображения, в играх наблюдается знакомая графика из популярных приставок 90-х. У старшего поколения это вызывает ностальгию, а молодежь проявляет интерес ко всему винтажному.

Вряд ли этот тренд подойдет любому продукту, но если в вашем приложении уместно использование ретро стиля, обязательно поэкспериментируйте.

Глубина в графике

Плоская и статичная графика может быть более понятной, пока не наскучит пользователям. Людям нравится видеть более живой контент.

Тени и слои в графике придают им 3D-эффект, создают объем и глубину, поэтому люди могут наслаждаться более реалистичными изображениями.

Этот тренд можно использовать по отношению к любым элементам, создавая иерархию объектов на экране и помогая пользователю легче ориентироваться в приложении.

Темный режим

Темный режим (dark mode, ночной режим) — одна из самых популярных тенденций дизайна, которая уже широко используется.

Разработчики предоставляют возможность переключения между стандартным режимом и темным режимом в приложениях. Так пользователи могут выбирать то, что им больше нравится.

Dark mode окрашивает фон в черный/темный цвет и делает шрифты и другие элементы наоборот светлыми/белыми.

Темный режим уже давно доступен в самых популярных приложениях, например, в Facebook. Переключение в dark mode помогает людям снизить нагрузку на глаза и удобнее ориентироваться.

Типографика

Выбор правильного шрифта — безумно важный пункт в дизайне мобильных приложений. Люди обычно сканируют контент в интернете, не вчитываясь в полотна текста. Поэтому стоит использовать шрифт, который будет акцентировать внимание.

Дизайнеры стали смелее и начали использовать необычные шрифты, выходя за рамки привычного. Текст больше не выглядит таким скучным и не теряется на втором плане рядом с другими элементами. Его задача теперь сделать дизайн ярче и оригинальнее.

Правильно подобранные шрифты помогут:

• задать тон и настроение;
• поднять узнаваемость бренда;
• улучшить визуальный контент;
• улучшить читаемость.

Однако, стоит учитывать, что такие решения подойдут далеко не каждому продукту. Для начала определите функцию, которую несет текст в вашем приложении. Если это исключительно дополнительный и информационный ресурс, а фокус перекладывается на графику, не стоит экспериментировать с десятками видов шрифтов. А вот, например, в онлайн-журнале можно поиграть с форматами, сделав верстку более интересной.

Виртуальная реальность и дополненная реальность предоставляют вам невероятную возможность окунуться в другой мир прямо в своем мобильном устройстве. Тренд стал популярным особенно во время карантина, когда люди, сидящие в своих домах, искали альтернативу своим привычным увлечениям.

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

Вы помните те фильтры из Instagram, которые позволили нам размещать разных персонажей в любом месте, просто через приложение и камеру? Тогда вы знаете, как это забавно и интересно. Более того, это может быть не только весело, но и эффективно. Например, IKEA использовала AR, чтобы показать, как мебель будет выглядеть в разных местах в вашей квартире.

Градиенты и прозрачные элементы

Дизайнеры обычно используют градиенты для кнопок и фона приложений. Градиенты выделяют важные части приложения и заставляют людей сосредоточиться на конкретных аспектах.

Прозрачные элементы демонстрируют глубину и привлекают внимание к определенным частям, делая дизайн более понятным и привлекательным.

Вы можете использовать переход от светлой темы к темной, тем самым разделив экран на две логические части. Или же применить градиент к кнопкам, чтобы они гармонично выделялись на экране.

Говоря о прозрачных элементах, невозможно обойти стороной понятие “глассморфизм” или “стекломорфизм”. Идея глассморфизма заключается в смягчении контраста между светлыми и темными объектами. Концепция дизайна использует полупрозрачные фоны с размытием, которые напоминают поверхность матового стекла.

Главные характеристики глассморфизма:

• прозрачность и размытие фона;
• тонкая светлая граница на полупрозрачных объектах;
• многослойность;
• яркие цвета.