Плавающая кнопка призыва к действию — легкий, элегантный, динамичный, быстрый и эффективный помощник, направленный на поддержку основной навигации и привлечение пользователей. Будучи всего лишь небольшим круглым элементом, который перемещается вместе с пользователем, независимо парящим над всей дизайн-конструкцией и, как правило, придерживающимся правой стороны, он способен расширить функциональность каждого экрана, а также сделать программу удобнее.
Как предполагают спецификации Google, кнопка должна нести конструктивный тонус и обеспечивать быстрый доступ к важным инструментам. Этот элемент должен быть простым и радовать глаз, содержать интуитивную и понятную графику, живой и яркий дизайн, но при этом избегать деструктивных функций. Мы собрали небольшую коллекцию свежих мобильных концепций пользовательского интерфейса, которые освоили эту новую тенденцию.
Редизайн Instagram Material
Этот дизайн содержит небольшую круглую кнопку с тонкой тенью, окрашенную в соответствующем темно-синем тоне. Она обеспечивает быстрый доступ к фотографиям, а также предоставляет владельцам дополнительный функционал. Сопровождает большинство экранов.
Android & Wear App Ecosystem
Дизайнер Стефан Кастро использует круглую плавающую кнопку, которая благодаря красному тону резко контрастирует с содержанием. Она открывает пять крошечных иконок с подсказками, также имеющих яркую расцветку, располагающихся снизу вверх.
Magnet.me
Здесь используется тот же прием, что и в предыдущем примере. Во-первых, это просто обычная круглая кнопка, прилипающая к нижней части страницы. Когда пользователь нажимает ее, она плавно раскрывает три другие иконки, размещаются вертикально друг за другом.
Coloring UI
Дизайнер Лоис Ян демонстрирует отличную работу по выбору цветовой палитры для данного элемента. Интерфейс сайта довольно тяжелый по содержанию. Яркий сплошной красный фон в сочетании с тонкими тенями отделяет иконку от потока информации, ненавязчиво привлекая внимание.
Drooling by Henrique Ferreira
Здесь плавающая кнопка подкрепляется наложенным элегантным полупрозрачным экраном. Экран необходим для привлечения внимания к иконкам и заголовкам, так как основа приложения заполнена большими сочными изображениями. Крошечное отклонение от траектории добавляет в дизайн изюминку.
Плавающие кнопки Add Media
Кнопка действия O-образной формы присутствует на нижней части страницы и включает в себя четыре CTA, расположенных по кругу. Из-за этого они быстро доступны. Каждая иконка имеет относительно огромный размер, яркий цвет, и острый вразумительный символ.
Daily UI 010
Здесь кнопка связана с большой боковой панелью, которая вытекает из правой стороны и слегка смещает содержание влево. Связанная с социальными медиа, она включает в себя все популярные порталы: Pinterest, Twitter, Facebook, Google и др.
Приложение Алекса Рябушко
Кнопка действия и ее СТА сконструированы в отличном плоском стиле и в одном цвете. Однако hover-статус в жизнерадостном оранжевом цвете по умолчанию меняется на синий. Огромные глифы внутри кругов интуитивно понятны и легко читаются. Элемент предлагает пользователям визуальные подсказки для быстрого достижения целей.
Material design app PSD template (от Даниэля Де Сантиса)
UI создан в лучших традициях современных спецификаций Google. Классическая плавающая кнопка вызывает большую панель, которая занимает почти весь экран и охватывает действия, необходимые для работы в разделе «Входящие».
Mobile UI (от Smiley)
Художник демонстрирует многочисленные функциональные экранные концепции. Как видите, почти каждая страница имеет свою кнопку действия. Последняя вызывает небольшую, но достаточно высокую панель, которая находится слева и занимает около пятнадцати процентов пространства.
Плавающая кнопка действия от Тайлера Берри
Этот вариант отличается от большей части примеров, перечисленных в нашей коллекции. Он не только имеют сочный колорит и прекрасный тени, но и раскрывают иконки в линию в верхней части интерфейса.
Плавающие кнопки действий от Giulio «bart172» Smedile
Хотя большинство кнопок в этом дизайне похожи на другие такие же, они подключены к клавиатуре стерлингов. Автор получает максимальную отдачу от этого крошечного плавающего помощника. Он также обеспечивает плавный переходный эффект между двумя состояниями.
UX Exploration
В этом дизайне плавающая кнопка демонстрирует набор СТА, расположенных в ряд. Это занимает всю нижнюю часть экрана. Двухцветная окраска, твердые монохромные полотна, отточенные с пиксельной точностью глифы и тени создают классную эстетику.
Пользовательский интерфейс для большого пальца (от Йохема ван дер Вира)
Концепция этого дизайна – использование плавающей кнопки действий, похожей на большинство. Она придерживается правой стороны, имеет простой вид и сразу бросается в глаза. В некоторых случаях, кнопка идет рука об руку с миниатюрной версией логотипа.
Floating Magic Button
Эти плавающие кнопки минималистские в отношении функциональности. Они используются только для предоставления пользователям быстрого доступа к рабочему пространству, где можно создавать свои книги. Дизайн соответствует стандартам и отвечает настроению приложения.
theScore Android
Здесь кнопка с СТА выглядит элегантно, сложно и утонченно. Линейный стиль в паре с красивой двухцветной гаммой, где синий преобладает, создает выдающуюся эстетику, а также преобразует действия в точки фокуса.
FAB for User Engagement
Разработчик использует кнопку действия, дизайн которой мягко перекликается с верхней панелью навигации. Она направлена на то, чтобы заинтересовать пользователей и помочь им чувствовать себя комфортно в рамках всего проекта. Кнопка перекликается со всплывающим окном в правом нижнем углу и захватывает весь экран.
Alternacare
Автор данного дизайн скрывает под плавающей кнопкой действия фильтры, позволяющие пользователям разобраться в избыточной информации и достигнуть цели в течение нескольких секунд. Благодаря смелому виду и яркому цвету, кнопка не сочетается с содержанием и сразу бросается в глаза.
Swipii App
Концепция Swipii App основывается на нескольких свежих решениях. Плавающая кнопка является одним из них. Она хорошо служит своей цели, что облегчает жизнь пользователю. Кнопка располагается в углу каждой страницы и вызывает всплывающую страницу с QR-кодом.
Перетекающая кнопка действий дизайнера Шу Макино
В этом дизайне короткий анимированный GIF демонстрирует стандартный рабочий процесс плавающей кнопки действий. Он силен своими плавными переходами и включает в себя семь элементов элегантной формы, которые появляются один за другим и придерживаются правой стороны.
И в заключение…
Плавающие кнопки действий могут легко превратиться в необходимые элементы интерфейса. Это элегантный и довольно простой способ улучшить его. Обеспечивая пользователям быстрого доступа к жизненно важным функциям мобильных приложений, они попадают прямо в точку, и способны сделать использование приложения быстрым, эффективным и продуктивным.
