Топ 5 трендов дизайна мобильных приложений в 2015 году

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

1. Интерактивные прототипы с анимацией

Концепция анимации переходов в стиле material design Концепция анимации переходов в стиле Material Design сделана в студии stfalcon.com

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

Инструменты, которые имитируют нативный движек с помощью HTML и JS. Самые популярные среди них:

  • InvisionApp
  • Framer.js
  • Atomic

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

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

Другие инструменты, которые используют средства системы:

  • Form
  • Pixate
  • Noodl
  • JustInMind

Эти инструменты хороши, если вам нужно разработать дизайн с нестандартными поведениями или же реакцией на какой-либо жест пользователя. С такими инструментами, как Origami и Form можно создавать совершенно сумасшедший и сложный дизайн мобильного приложения.

Примеры интерактивных прототипов можно найти в специальном разделе на Dribbble.

2. Карточки

Google задает много трендов. Один из них — карточки, как способ организации информации на экране. Сами карточки появились довольно давно, но теперь они набирают популярности благодаря material design. Их можно встретить как в приложениях для iPhone и iPad, так и Android, и web. Карточки подходять для отображения:

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

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

3. Плавающая кнопка действия

Плавающая кнопка действия

Еще один тренд пришел вместе с material design — плавающая кнопка действия (float action button). Суть в том, что она не является частью навигационой панели или других панелей на экране, а существует сама по себе и отвечает за главное действие пользователя на текущем экране. Её расположение может меняться, но за счет круглой формы, кнопка вписывается в любое место. Для такой кнопки характерно выделение цветом, дабы создать дополнительный акцент или привлечь внимание пользователя. ПКД встречаются в почтовых клиентах, заметках и списках и других приложения с функциями создания контента.

Пример из гайдлайнов Material Design Пример из гайдлайнов Material Design

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

4. Визуальная непрерывность

Пример визуальной неприрывности

Очень интересный эффект стал популярен с появлением Material Design. Его также можно встретить и в iOS. Что же представляет собой этот эффект? Это когда часть информации, например, картинка переходит из одного экрана в другой без скрытия. Меняется контент вокруг, а она остается практически неизменной. Очень хороший пример со списком музыкальных альбомов, которые выстроены сеткой. Так, при выборе одного альбома, его обложка не исчезает, а перемещается в новое место, в то время как появляется подробная информация об альбоме. Другой пример с iOS. При открытии приложения, первый экран, как бы, возникает из иконки. А если выйти обратно на домашний экран, то приложение свернется в иконку.

5. Дизайн для смарт-часов

Android Wear Clock App Android Wear Clock App

Apple watch Taasky creating Apple watch Taasky creating

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

Мы, как современная студия, конечно же, следим за всеми трендами в мире дизайна мобильных приложений и стараемся применять лучшие практики в своих проектах. Если вам нужно красивое, удобное и современное приложение для iOS и Android, не стесняйтесь и обязательно обращайтесь к нам. Мы вместе зададим новый тренд в индустрии дизайна мобильных приложений!

Об авторе

Дизайнер
Олег работал в студии в 2011-2016 годах и за это время успел поучаствовать во множестве проектов в качестве UI/UX дизайнера.

Похожие статьи

Вернуться к списку записей К списку записей