Дизайн мобильного приложения не стоит на месте, а стремительно развивается. Смартфоны вошли в нашу жизнь достаточно давно и плотно заняли её часть. Огромное количество приложений появляется каждый день, предлагая нам новые возможности использования своих смартфонов. Дабы отличаться от конкурентов, дизайнеры придумывают новые фишки в дизайне. Самые интересные и успешные впоследствии стают трендами. В этой статье мы опишем тренды современного дизайна мобильных приложений.
1. Интерактивные прототипы с анимацией
Концепция анимации переходов в стиле 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
В таких приложениях она чаще всего находится в правом нижнем углу либо закреплена над верхней панелью навигации.
4. Визуальная непрерывность
Очень интересный эффект стал популярен с появлением Material Design. Его также можно встретить и в iOS. Что же представляет собой этот эффект? Это когда часть информации, например, картинка переходит из одного экрана в другой без скрытия. Меняется контент вокруг, а она остается практически неизменной. Очень хороший пример со списком музыкальных альбомов, которые выстроены сеткой. Так, при выборе одного альбома, его обложка не исчезает, а перемещается в новое место, в то время как появляется подробная информация об альбоме. Другой пример с iOS. При открытии приложения, первый экран, как бы, возникает из иконки. А если выйти обратно на домашний экран, то приложение свернется в иконку.
5. Дизайн для смарт-часов
Android Wear Clock App
Apple watch Taasky creating
Носимые гаджеты стремительно развиваются и у дизайнеров всё больше и больше идей для их интерфейсов. В первую очередь — для смарт-часов. Конечно, операционные системы смарт-часов пока не позволяют развернуться, но каждая новая концепция хоть и далека от реальности, но всё же задает новые тренды и делает дизайн мобильного приложения современным. Наличие круглых, квадратных, прямоугольных и вытянутых экранов часов будоражит умы дизайнеров и подталкивает к самым безумным идеям для приложений.
Мы, как современная студия, конечно же, следим за всеми трендами в мире дизайна мобильных приложений и стараемся применять лучшие практики в своих проектах. Если вам нужно красивое, удобное и современное приложение для iOS и Android, не стесняйтесь и обязательно обращайтесь к нам. Мы вместе зададим новый тренд в индустрии дизайна мобильных приложений!
