Современные тренды в дизайне мобильных интерфейсов

Светлый дизайн

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

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

Одна гарнитура шрифта для всего

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

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

Модули и блоки — без линеек

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

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

Цифры в центре внимания

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

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

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

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

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

Небольшая палитра цветов

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

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

Многослойный интерфейс

Раньше интерфейсы проектировались по принципам скевоморфизма. Предполагалось, что дизайн повторяет форму реально существующего объекта (например, календарь на компьютере выглядел как настольный бумажный календарь, все иконки выполнялись в 3D). Сейчас — с популярностью плоского дизайна — можно заметить отход этого принципа на второй план, ведь появилась возможность изображать глубину другими способами. Главным образом — используя слои. Это помогает создать ощущение глубины и размеров, создать осязаемый объект.

Настоящий плоский дизайн рискует оказаться «слишком плоским», и грань тонка: как пользователю ориентироваться в плоском приложении и пользоваться им, если он привык к объёмному 3D? Решение есть — слои. Слои помогают накладывать один объект на другой, выстраивать отношения между элементами и выделять самое важное.

Прозрачные кнопки

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

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

Жесты

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

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

Движение

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

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

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

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

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

Дизайнерские стандарты — лучшее решение

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

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

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

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

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