Как сделать кнопку «Заказать обратный звонок. Материальный дизайн: Почему плавающая кнопка действия — не лучшая практика в UX дизайне

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

В статье будут следующие части:

Для чего нужна эта кнопка?

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

Польза для посетителей

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

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

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

Польза для сайта

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

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

Простая кнопка наверх для сайта html

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

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

Достоинства:

• Простота и легкость настройки;
• Не нужна поддержка библиотек и скриптов.

Недостатки:

• Кнопка видна постоянно, даже когда посетитель находится в самом верху страницы;
• Перемещение вверх происходит не плавно, а мгновенно, рывком.

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

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

< a href = "#" title = "Вернуться наверх" class = "buttonup" > < img src = "путь к картинке/картинка.png" > < / a >

Buttonup { width:88px; height:118px; position:fixed; bottom:20px; right:50px; }

Buttonup { width : 88px ; height : 118px ; position : fixed ; bottom : 20px ; right : 50px ;

Этот код отвечает за положение кнопки, редактируя цифры, вы можете его изменить. Как только вы сохраните файл, кнопка начнет действовать. Параметр width ставьте равным ширине картинки, bottom – отступ от нижнего края экрана, right – от правого края экрана.

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

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

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

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

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

1. Подключение библиотеки jQuery

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

Для подключения библиотеки jQuery, вам нужно прописать в разделе вашего сайта следующую строку:

2. Подключение скрипта, выводящего кнопку

Код скрипта можно вставить двумя способами:

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

Первый вариант проще, второй, на мой взгляд, удобнее.

jQuery(document).ready(function($){ $(""+ "..png) 0 0 no-repeat; }" + ".scrollTop:hover{ background-position:0 -133px;}" +"").appendTo("body"); var speed = 550, $scrollTop = $("").appendTo("body"); $scrollTop.click(function(e){ e.preventDefault(); $("html:not(:animated),body:not(:animated)").animate({ scrollTop: 0}, speed); }); //появление function show_scrollTop(){ ($(window).scrollTop() > 330) ? $scrollTop.fadeIn(700) : $scrollTop.fadeOut(700); } $(window).scroll(function(){ show_scrollTop(); }); show_scrollTop(); });

jQuery (document ) . ready (function ($ ) { $ ("" + ".scrollTop{ display:none; z-index:9999; position:fixed;" + "bottom:20px; left:90%; width:88px; height:125px;" + "background:url(https://сайт/img/arrow.png) 0 0 no-repeat; }" + ".scrollTop:hover{ background-position:0 -133px;}" + "" ) . appendTo ("body" ) ; speed = 550 , $ scrollTop = $ ("" ) . appendTo ("body" ) ; $ scrollTop . click (function (e ) { e . preventDefault () ; $ ("html:not(:animated),body:not(:animated)" ) . animate ({ scrollTop : 0 } , speed ) ; } ) ; //появление function show_scrollTop () { ($ (window ) . scrollTop () > 330 ) ? $ scrollTop . fadeIn (700 ) : $ scrollTop . fadeOut (700 ) ; $ (window ) . scroll (function () { show_scrollTop () ; } ) ; show_scrollTop () ; } ) ;

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

Я назвал файл buttonup.js. Для его подключения в заголовке сайта прописываем вот такую строчку:

Вместо «путь к файлу» прописываете адрес, где лежит ваш файл со скриптом.

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

Плагин кнопки wordpress, который называется Floating button добавит на ваш сайт такую плавающую кнопку.

Установка плагина

Плагин устанавливается также как и любой другой: переходим в раздел «Плагины» — «Добавить новый». Затем, в строку поиска вбиваем Floating button и устанавливаем его.

Настройка

После установки, справа в консоле управления вашим сайтом на вордпресс появляется дополнительная вкладка Floating button:

Нажимаем её и начинаем настраивать плавающую кнопку:

1. Button state — включение и выключение отображения кнопки;

2. Settings source — эта настройка отвечает за дальнейший функционал плагина. Если выбрать «Local settings», то функционал будет весьма ограничен, поэтому рекомендуется выбрать второй вариант «Settings from probtn.com»;

3. Теперь нужно зарегистрироваться на сайте разработчиков плагина — это не займёт много времени, зато функционал кнопки wordpress значительно расширится.

Регистрация на сайте разработчиков

Переходим на страницу https://admin.probtn.com/login/new и заполняем адрес электронной почты, имя и пароль и нажимаем кнопку «Create»:

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

После регистрации и входа на сайт мы видим следующую страницу:

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

Начнём с создания, поэтому нажимаем «Create Floating Button». Сначала указываем название кнопки:

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

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

Завершаем первоначальную настройку нажатием кнопки «Submit».

Указываем действие, после нажатие на плавающую кнопку и продолжаем настройку плагина

После создания, наша кнопочка отображается в консоле слева:

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

Или указываем опрос, который можно создать по клику на ссылку «Create survey»:

Сохраняем все сделанные изменения на каждом шаге. Установленная на сайте плавающая кнопка может выглядеть так:

А при нажатии на неё появляется следующее всплывающее окно:

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

п.с. если вам нужна помощь по настройке или установке — пишите свои вопросы в комментарии. Помощь бесплатна!

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

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

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

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

Настройка окна виджета — Вы можете выбрать 2 варианта показа виджета: Вариант «Окно» и «На весь экран». Так же, выбрать цветовую схему и изменить надпись на виджете. Мы рекомендуем использовать информацию о скидках и акциях, что бы мотивировать клиента оставлять номер для связи.

Виджет обратного звонка «На весь экран»

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

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

Разрешать несколько звонков для клиента — может ли один и тот-же клиент звонить Вам несколько раз? ДА/НЕТ Клиент определяется по браузеру.

Изменить время «Мы перезвоним вам за … сек» — Вы можете изменить время, за которое обещаете позвонить клиенту в большую или меньшую сторону.

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

Принимать звонки из СНГ и Европы — Если Вы работаете только на Российском рынке, мы рекомендуем не включать эту функцию. Если Вам нужны клиенты из других стран, то включайте. Для остальных стран (кроме России), за одну минуту разговора будет списываться: Украина — 3 минуты, Казахстан — 2 минуты, Беларусь — 4 минуты, все другие страны — 5 минут.

Имя виджета для отчетов — Если вы используйте несколько виджетов на одном домене.

Появиться сообщение. Обращаем внимание, что код на сайте обновлять не нужно!

Настройка виджета завершена

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

Виджет в личном кабинете

Теперь нужно установить код виджета на Ваш сайт.

Материальный Дизайн - это язык дизайна, введенный Google год назад, представляющий из себя смелую попытку компании создания объединенного пользовательского опыта на всех устройствах и платформах. Это отмечено смелыми цветами, либеральным, но принципиальным использованием теней для обозначения уровней UI и плавную анимацию, которая обеспечивает довольно хороший опыт взаимодействия в Android (и некоторых приложениях Google на iOS).

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

FABs (Floating action button), согласно Google, это круглые кнопки, которые парят над UI и «используются для способствования действию». Они выступают в качестве кнопки призыва к действию, предназначенных для выполнения того действия, которое пользователи производят на этом экране чаще всего.

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

Эффект погружения исходит из опыта

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

Один пример – новое фото приложение от Google.

Фото приложение открывается в виде галереи с плавающей кнопкой поиска. Но дело в том, что когда я открываю фото приложение, я просто хочу… посмотреть свои фотографии. Таким образом, плавающая кнопка поиска отвлекает пользователя от погружения в просмотр фотографий, который является основной целью приложения. Представленный, умный поиск – уникальная функция фото приложения Google. Но значит ли это что ему нужно дать высший уровень, постоянного FAB в приложении? (Я думаю нет.)
Как ни странно, Google со мной согласен. На странице Материального Дизайна посвященной FABs Google объясняет, что «не каждый экран нуждается в плавающей командной кнопке».
И затем добавляет, что “основное действие это коснуться изображения в галерее, в этом случае кнопка не нужна.

Они выделяются, и стоят на пути.

Это может показаться другой стороной медали, но есть другое, более важное свойство FАB стоящее на пути его полезности. Занимая место на экране, FAB фактически блокирует контент.

Ну да ладно, FAB же это просто маленькая круглая кнопочка, да? Сколько контента она может заблокировать?
Если вы посмотрите на скриншот фото приложения, то поймете, что поисковая FAB блокируют приблизительно 50 процентов уменьшенного изображения – безусловно достаточно чтобы закрыть пару лиц. Это по сути создает необходимость в одной дополнительной прокрутке, на каждое четвертое уменьшенное изображение последнего ряда на экране. И это еще не самое плохое.

FAB блокирует кнопку «Favorites» и дату.

Пользователь Dumazy разместил пост на Graphic Design Stack Exchange о проблеме, с которой он столкнулся, когда FAB заблокировал звездочку «избранного», а также время на экране его приложения. Это иллюстрирует проблему всех приложений со списковым представлением, и это становится особенно проблематичным, когда последний пункт в списке не может прокручиваться дальше вверх. Это означает, что целая колонка, должна быть принесена в жертву (меняя местоположение звездочки, и т.д.), чтобы предоставить надлежащее удобство использования экрана.

Следовательно, FAB занимает намного больше пространства на экране, чем предлагает его размер.

Способствование действию скорее всего так часто не используется.

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

FAB фактически это и делает – в теории. Но что, если «Способствование действию» не используется так часто?

Возьмите, например, приложение Google Gmail.

FAB Gmail приложения - это кнопка создания, которая предполагает, что основное действие пользователей - это создание письма.

Но так ли это?

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

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

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

Хотим ли мы FAB? Вычеркнуть предыдущее – нужен ли он нам вообще?

Конечно, не все применения FAB ухудшают опыт использования Материальных приложений. Есть некоторые яркие примеры FABs, которые имеют смысл, и которые улучшают UX этих приложений.

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

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

Учтите также, что скриншоты выше рассказывают только часть истории: при фактическом использовании, FABs остаются на месте, даже когда пользователь использует прокрутку (большую часть времени). Как Google неоднократно подчеркивал в Материальном Дизайне, — дизайн движения так же важен как дизайн UI.

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

Итак, поскольку у нас почти нет примеров хорошей реализации FAB, то напрашивается вопрос: нужны ли они?

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

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

FAB, таким образом, философия дизайна (или по крайней мере выбор дизайна), которая подчиняет оптимальное потребление содержания совершению действия. И мы должны спросить себя: необходим ли такой компромисс? Хотим ли мы вообще идти на такой компромисс?

Когда FABs большую часть времени приводит к ухудшению UX, когда трудно выяснить единственное наиболее используемое действие в рамках приложения, и когда приходится находить окольные пути (когда FAB исчезает при прокрутке или накладывается на другие элементы при пролистывании) я сказал бы, что ответ — нет.

Материальный Дизайн Google, довольно хороший объединенный, принципиальный язык дизайна, но FAB далеко не самое в нем лучшее.

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

Как предполагают спецификации 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 демонстрирует стандартный рабочий процесс плавающей кнопки действий. Он силен своими плавными переходами и включает в себя семь элементов элегантной формы, которые появляются один за другим и придерживаются правой стороны.

И в заключение…

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