Кнопки для сайтов: Кнопки для сайта — 10 примеров красивых и современных эффектов

Кнопка для сайта: виды и способы создания

 

Из этого материала вы узнаете:

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

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

Основные типы кнопок для сайта

Зачем вообще на сайте кнопки? Ответ очевиден: чтобы пользователи по ним кликали! Яркая, заметная и красивая кнопка привлекает внимание намного успешнее, чем маленькая тусклая ссылка. При этом, если интерфейс пестрит различными кнопками, которые ещё и анимированы, он начинает утомлять пользователя, поскольку они конкурируют за его внимание. В результате люди нередко уходят с таких страниц, не понимая, чего от них хотят создатели веб-ресурса.

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

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

[expert]

• Где используются

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

3D-кнопки визуально поднимаются и меняют цвет при клике. Особенно они заметны на контрасте с плоскими кнопками.

2. Плоские кнопки

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

• Где используются

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

3. Переключатель (слайдер)

Предназначен для переключения между двумя или несколькими состояниями.

• Где используются

Обычно – в качестве кнопки «Вкл / Выкл». Полезны такие кнопки и для управления группой связанных элементов при условии, что эта их функция и принадлежность к данной группе ясно отражены в дизайне интерфейса. К подобным элементам предъявляются ещё два требования:

• группа содержит три или более кнопок;
• на каждой из них присутствует пояснительная иконка или текст (либо то и другое).

Иконки уместны там, где пользователь может захотеть отменить свой выбор (к примеру, добавить товару «звёздочку» или снять её), и иными способами это никак не сделать. В приложениях и на сайтах такие кнопки обычно помещают в панель инструментов в качестве переключателя состояний или элемента управления.

4. Контурная кнопка

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

• Где используются

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

5. Плавающая кнопка с выпадающим меню

 

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

• Где используются

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

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

[art-slider ids=»4684, 4718, 4937, 5861, 6272″ ttl=»Читайте другие статьи по теме повышение конверсии сайта»]

Выбор типа кнопки для сайта

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

• Функционал: если кнопка действительно важна, её делают плавающей.
• Величина: зависит от габаритов контейнера, в котором находится, и от количества слоёв глубины на странице.
• Html-код: на сайте кнопки разных видов нежелательно смешивать в одном контейнере (кроме случаев, когда нужно выделить важный элемент).

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

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

• Состояние по умолчанию

В своём обычном состоянии кнопка должна быть похожа на кнопку – это основное требование. В противном случае пользователь будет испытывать недоумение по поводу кликабельности объектов (как, например, в меню настроек Windows 8).

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

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

Кнопка либо приобретает соответствующий вид, либо исчезает вовсе.

У скрытия кнопки с сайта есть свои плюсы:

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

Если оставить кнопку на месте и придать ей соответствующий вид, то:

• Будет показано, что действие возможно, хотя и не в данный момент. Можно разместить подсказку с объяснением, как и когда используется кнопка.
• Интерфейс предсказуем: пользователь привыкает к определённой схеме размещения управляющих элементов и ищет их только там.

Как сделать кнопку для сайта

1. Простая кнопка для сайта

Простейшая кнопка для сайта реализуется HTML-тегами button и input c определённым типом. У этих тегов отсутствует атрибут href, перекидывающий пользователя на указанную страницу. Но можно снабдить их атрибутом onclick – небольшой вставкой javascript’а, в которой прописывается целевая страница:

<input type=″button″ value=″Нажмите здесь!″ onclick=″location.href=′любая ссылка′″>

2. Кнопка с фоновой картинкой

При наличии рисованных кнопок в макете сайта можно реализовать их с помощью обычной ссылки, заключив в неё файл картинки:

<a href=″любая ссылка″ target=″_blank″><img src=″ссылка на изображение″></a>

Для этого вам потребуется:

• Нарисовать пиктограмму (своими руками или посредством генератора кнопок для сайта).
• Загрузить картинку на сервер (например, с помощью файлового менеджера) и прописать ссылку на неё.
• Указать в CSS-файле все необходимые стили.

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

Пример оформления кнопки на CSS:

В разделе “Панель управления” – “Дизайн” – “Редактор / CSS” напишите код вроде следующего:

.site-button {
background-color: #488bfa;
border: 2px solid #ffffff;
color: #ffffff;
padding: 12px 26px;
border-radius: 10px;
font-size: 17px;
}

И не забудьте про HTML-код кнопки:

<a href=″любая ссылка″ class=″site-button″>Нажмите здесь!</a>

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

3. Кнопка на сторонний сайт

Иногда нужно отдавать свою готовую кнопку на сайты пользователям, чтобы они могли её установить у себя. Предоставляйте им полный HTML-код, чтобы они могли его скопировать и без проблем вставить на свой сайт. Такую заготовку под кнопку лучше оборачивать тегом textarea.

Особенности распространенных кнопок для сайта

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

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

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

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

Некоторые считают, что формулировка «Добавить в корзину» более конверсионна, чем «Купить»: первая подразумевает процесс выбора товаров, не требующий принимать решение о покупке прямо сейчас. Возможно, в этом есть доля истины. Вопрос в том, какое действие вы считаете конверсионным. Если это добавление продукта в корзину, то именно так и следует называть кнопку (помня о том, что корзины часто бросают, и что отложить товар – ещё не значит купить и оплатить его). Если конверсией считается оформленный и оплаченный заказ, то не стесняйтесь дать кнопке название «Купить».

Кроме того, ярлык «Добавить в корзину» намекает на приобретение нескольких товарных позиций: сначала их нужно найти и положить в корзину, а затем заполнить все поля формы заказа.

Другой вариант – обойтись без глагола и сократить название кнопки до «В корзину». Не все это одобряют: есть мнение, что призыв к действию неэффективен без глагола. Но вы можете выбрать и такую формулировку.

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

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

Значимость подписи на кнопках заказа сильно преувеличена (не в последнюю очередь экспертами, которые стремятся продвинуть свои обучающие семинары и курсы).

Сегодня онлайн-покупки уже практически никого не удивляют. Наверное, ещё остались жители деревень, затерянных где-то в сибирских лесах, пугающиеся призыва «Купить» и лучше воспринимающие деликатную формулировку «Добавить в корзину», но достоверной статистики по ним нет (отдельные случаи, о которых в интернете рассказывают как о курьёзах, не в счёт).

Теперь выберем цвет кнопки «Купить» на сайте.

С помощью Гугла или Яндекса можно найти статистику по проведённым А/Б тестам, показывающую, что красные кнопки наименее эффективны, зато зелёные работают прекрасно, оранжевые – тоже неплохо. Но есть и противоположная точка зрения. Поэтому не стоит принимать каждое подобное утверждение на веру и срочно переделывать сайт.

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

Это не меньший бред, чем тестировать цвет кнопок на сайте.

Вы действительно считаете, что ваши потенциальные покупатели не кликают на большую синюю кнопку «Купить», контрастную к белому фону, только из-за её цвета, а как только вы перекрасите её в сочный оттенок зелёного, сразу же начнут покупать, потому что ощутят умиротворение, безопасность и доверие?

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

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

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

Кнопка красного цвета менее эффективна, если расположить её по соседству с зелёной. Контрасты – это не всегда хорошо и полезно.

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

При этом монохромные серые кнопки (второстепенные – «Быстрый заказ», «Сравнить», «Добавить в избранное») есть во многих магазинах, это довольно популярная ошибка. Вроде бы дизайнеры стремятся всё сделать правильно и обеспечить достаточный контраст между главной целевой кнопкой и вспомогательными элементами, но забывают о пользовательских привычках, сложившихся за много лет работы с операционными системами: всё, что окрашено серым, будь то чекбокс или ссылка, неактивно и некликабельно.

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

При этом цвет кнопки «Купить» (при условии, что она достаточно крупная, отделена отступами от окружающих объектов и контрастна) не столь важен. Аргументы и контраргументы против различных цветов приводились выше.

Поэтому А/Б тестирования интернет-магазинов показывают противоречивые результаты: где-то повышает конверсию красная кнопка, где-то – зелёная. Зачастую секрет заключается не в самой кнопке, не в товаре и даже не в целевой аудитории, а в дизайне всего интерфейса и том контексте, который окружает кнопку на сайте.

2. «Заказ» или «Быстрый заказ»

Это однозначно полезный элемент, который следует включить в дизайн магазина. Однако и здесь есть нюансы.

Кнопка «Купить в один клик» необходима там, где обычно приобретают единственный товар, а не набирают целый список. Или для дорогих товаров.

Для магазинов, где клиенты обычно берут более одной товарной позиции, в этой кнопке нет смысла: если сделать её слишком заметной и она перебьёт главную кнопку «Купить», может уменьшиться сумма среднего чека (потому что клиенты пойдут сразу оформлять заказ и не продолжат класть товары в корзину), а менеджерам придётся тратить больше времени на консультирование покупателей по телефону.

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

Ещё одна нередкая проблема кнопок моментального заказа – это то, что данные по таким заказам попадают в отдельный список (а не в общий, как при обычной покупке товаров через корзину) либо вообще приходят только в почту менеджерам. Это, по сути, функционал кнопки «Заказать звонок» для сайта и для шоппинга не подходит.

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

Ещё одна распространённая проблема – необходимость каждый раз вбивать своё ФИО и номер телефона при быстром заказе. Данные авторизованных пользователей должны подтягиваться в форму автоматически, чтобы человеку оставалось только подтвердить оформление заказа. Тогда покупка действительно будет быстрой.

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

Целесообразность добавления на сайт кнопки «В корзину» тоже вызывает много вопросов у дизайнеров и веб-мастеров. Ситуация аналогична предыдущей: всё зависит от специфики и ассортимента магазина. Для продуктов, при покупке которых нужно выбрать цвет, размер и другие характеристики, которые невозможно показать в краткой карточке товара на витрине, нет смысла в такой кнопке.

Например, очень странное впечатление будет производить кнопка «Отправить в корзину» в онлайн-магазине одежды: товар кладётся в корзину, но без возможности выбрать для себя нужный размер и расцветку. А если такая опция есть, то без сравнительной таблицы российских и зарубежных размеров и инструкции сложно определить свой размер. Это затрудняет выбор.

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

4. Оформление заказа

В корзине тоже имеются целевые кнопки, и их необходимо рассмотреть.

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

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

Это соответствует общему принципу: не называть одинаково элементы с разным функционалом и назначением.

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

№	Шаг в корзине	Название кнопки
1.	Корзина	Оформить заказ
2.	ФИО, электронная почта, телефон	Укажите адрес доставки
3.	Адрес доставки	Выберите способы доставки и оплаты
4.	Способы оплаты, доставки	Отправить / Завершить заказ
5.	Страница благодарности	Оплата / Перейти к оплате
6.	Страница оплаты (Робокасса и т. п.)

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

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

Что касается подписей на кнопках, принцип здесь тот же: какое действие кнопка инициирует, так и называется. Для более абстрактных формулировок вроде «Далее» рядом даются пояснения, куда конкретно попадёт пользователь, кликнув по кнопке.

В одношаговых корзинах целевые кнопки могут быть двух типов: либо «Перейти к оплате», либо, при наличии отдельной промежуточной «Thank you page», «Отправить заказ».

10 моментов, которые нужно учитывать при создании кнопки для сайта

1. Соответствие фирменному стилю

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

   У вас преобладают плоские цвета на веб-сайте или в приложении? Тогда откажитесь от стеклянных кнопок в стиле Apple. Очертания, оттенки и декоративные приёмы должны соответствовать логотипу и фирменному стилю.

2. Соответствие контексту

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

3. Достаточная контрастность

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

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

4. Закруглять уголки или нет?

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

5. Маскируем остальные элементы

   Второстепенные кнопки, ссылки, текстовый контент и т. п. не должны быть заметнее конверсионной кнопки. Их оформляют в едином стиле и делают менее контрастными. Даже если у контроллеров, бегунков и т. п. одинаковый угол закругления, можно окрасить их в разные цвета (включая фоновый), уменьшить в размере, залить градиентом, придать им цветные обводки, тени или 3D-эффекты.

6. Контуры и обводки

   Многие кнопки на сайтах имеют некое подобие границ или обводки, более или менее заметных. Здесь существует одна простая закономерность: для темных кнопок на светлом фоне делают ещё более тёмную обводку, а для светлых кнопок на тёмном фоне – обводку чуть темнее фонового цвета.

7. Аккуратнее с размытой тенью

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

8. Использование графических символов

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

   Используйте их там, где это разумно: стрелку вправо – для перехода на следующую страницу (или ухода с текущей), стрелку вверх – для кнопки «Вверх» на сайте, стрелку вниз – для раскрытия выпадающего меню.

9. Иерархия элементов

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

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

10. Различные состояния кнопки

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

Часто задаваемые вопросы про кнопки для сайта

Почему кнопка «OK» – совсем не ОК для сайта?

Во многих интерфейсах, особенно в операционных системах компьютеров, присутствуют стандартные кнопки: «Да», «Нет», «Cancel», «ОК» и т. п.

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

Зачем располагать конверсионные кнопки в нижнем правом углу?

На этот вопрос можно ответить, лишь изучив диаграмму Гутенберга.

Страница состоит из четырёх сегментов, по которым движется взгляд читателя. Максимальное внимание пользователь уделяет первому квадрату (верхнему левому), с которого начинает читать страницу, и последнему (нижнему правому). А вот левый нижний квадрат пользователь проскакивает почти не глядя. Очевидно, что для целевой кнопки на сайте лучше всего подходит правый нижний угол.

Надо ли располагать конверсионную кнопку справа в диалоговом окне?

В модальных окнах, содержащих более одной кнопки действия, целевую кнопку («Заказать», «Подтвердить», «ОК», «Купить» и т. д.) действительно лучше помещать в правой части.

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

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

Как сделать целевую кнопку на сайте более заметной?

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

Вот несколько проверенных дизайнерских приёмов визуального выделения элемента интерфейса:

• Высокая насыщенность цвета для целевой кнопки и меньшая – для альтернативной.
• Фоновый цвет для второй, менее важной, кнопки – она сливается с контейнером, в котором находится. Например, так сделана кнопка «Выйти» в Skype.
• Альтернативное действие обозначать не кнопкой, а текстовой ссылкой.
• Альтернативная кнопка прозрачна (и кажется неактивной).

Почему у пиктограмм должен быть прозрачный фон?

Использование иконок – отличный способ сделать интерфейс более удобным и эффективным. Люди воспринимают визуальный паттерн быстрее, чем читают текст, в десятки тысяч раз. Чтобы сделать иконку максимально понятной, помещайте её на прозрачный фон.

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

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

8 типичных ошибок в создании кнопок для сайта

1. Специальная кнопка для сброса

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

2. Крохотные кнопочки

   Не скупитесь и сделайте управляющие элементы нормального размера, чтобы их было видно и чтобы на них чаще нажимали! Особенно это касается кнопок «Заказать» на сайте и «Подписаться на рассылку»

3. Кнопки, сливающиеся с фоном

   Делайте кнопки не только яркими, но и контрастными фону. Это поможет пользователям быстро их обнаружить.

4. Непривычный вид кнопок

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

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

5. Слишком абстрактные или вводящие в заблуждение ярлыки

   «Далее» и «Отправить» – это ещё не все возможные кнопки для сайта. Не каждый ярлык носит название следующего действия, но все они должны чётко описывать, что произойдёт при нажатии: «Подтвердить заказ», «Сохранить изменения в профиле», «Следующий шаг» и т. п. Хорошо добавлять к текстовому названию символы >> и <<, отражающие направление действия.

6. Избыток кнопок

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

7. Нет подписей

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

8. Анимированные кнопки на сайте

   Анимация – не всегда хорошая идея. Мигающие, движущиеся или каким-то ещё образом раздражающие глаз кнопки будут только оттягивать внимание и вызывать ассоциации с первыми сайтами конца 90-х. Анимированная кнопка легко превратит ваш сайт в дилетантскую поделку и образец дурного вкуса.

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

• заметной и яркой;
• понятной;
• правильного размера.

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

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

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

Ищите красивые кнопки CSS? 50 примеров CSS3 кнопок с эффектами и анимацией

Я отобрал некоторые кнопки CSS, которые, на мой взгляд, могут быть использованы в веб-проектах.

Посмотрите на генератор CSS3 кнопок от Sanwebe:

Симпатичная розовая кнопка (не считая небольшого кода jQuery для проигрывания музыки и изменения внутреннего текста) полностью создана на основе CSS3:

Коллекция 3D кнопок, созданная с помощью CSS3:

Отличные социальные кнопки, выполненные с помощью CSS3 и шрифта для иконок:

Анимированные CSS кнопки с фоновыми узорами. Могут не работать в браузерах Firefox 3.6 и IE10:

Еще одни анимированные кнопки, в которых поворот текста при наведении мыши дает по-настоящему привлекательный эффект:

Вот еще один пример круглых кнопок CSS3:

Хорошо выполненные переключатели, созданные с помощью CSS3 и шрифта иконок:

Симпатичная трехмерная кнопка, созданная с помощью CSS3 и шрифтов Google:

Эти кнопки демонстрируют анимации, использующие различные свойства CSS3:

Теперь можно быть абсолютно уверенным, что глянцевые кнопки можно легко создать при помощи CSS3, больше никакого Photoshop:

Удивительно, что можно сделать с помощью псевдоэлементов CSS3 :before и :after. Оцените поразительные трехмерные кнопки:

Пример кнопки-переключателя на CSS3 без использования JavaScript:

Эффект трехмерной переворачивающейся при нажатии кнопки, созданной с помощью CSS3:

Красивые кнопки CSS популярных брендов, использующих иконки bootstrap:

Круглая кнопка с использованием jQuery для придания эффекта капли при нажатии на кнопку:

Переключатель, созданный с помощью CSS3:

Коллекция плоских кнопок CSS на все случаи жизни, без анимации и эффектов:

Более привлекательная версия кнопок общего доступа, но без функционала. По версии разработчика, должны работать в IE7+:

Рождественская CSS кнопка, использующая data:urls – метод для встраивания изображения прямо в документ:

Круглая глянцевая кнопка, созданная с помощью CSS3:

Кнопки используют только символы Unicode, что позволяет использовать текстовые или иконочные шрифты:

Еще один набор трехмерных анимированных CSS кнопок для сайтов. Анимация выполнена с помощью свойств animation и keyframes:

Коллекция металлических CSS3 кнопок, символы на которых были созданы с помощью шрифта pictos с использованием @font-face. Для металлического эффекта были задействованы свойства box-shadow и linear-gradient:

Еще одна коллекция круглых анимированных кнопок на CSS3:

Кнопки используют простые CSS3 свойства, такие как gradients, box-shadows, text-shadows и так далее. Состояние «ожидание» и «активное» также включены в этот набор:

Красивые кнопки CSS:

Эта трехмерная кнопка использует трансформацию perspective. Она работает только в браузерах на основе webkit:

Эти кнопки социальных сетей используют как базовый фон свойства liner-gradient, box-shadow для трехмерного эффекта:

Солидная глянцевая CSS3 кнопка с эффектом тени внизу. Для кнопки используется шрифт под названием Sansita One из коллекции Google:

Несколько простых CSS кнопок:

Еще один набор кнопок социальных сетей. Для создания самих кнопок используются псевдоэлементы :before и :after:

Набор незамысловатых CSS кнопок. Они просты в настройке и использовании. Их можно легко интегрировать с Font-Awesome или другой библиотекой:

Пример простой кнопки в виде фишки для игры в покер. Она может быть также использована как кнопка с эффектом наведения:

Концепт CSS кнопки-ползунка:

Панель администратора (меню или навигация) с использованием CSS3 и фреймворка fontawesome. При переключении на кнопку класс active добавляется с помощью jQuery:

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

Круглая кнопка с вращающейся границей для индикации наведения курсора мыши:

Мягкая кнопка, созданная с помощью CSS3 на основе этого примера:

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

Кнопка с анимацией для отображения состояния загрузки:

Красивые переключатели, которые используют jQuery для переключения класса:

Набор красивых кнопок для сайта CSS. Используются различные свойства для придания трехмерного глянцевого вида:

Кнопки с границами разных цветов:

Обратите внимание на эти великолепные кнопки с эффектом 8 бит, срабатывающем при наведении курсора:

Простые кнопки, использующие иконки из FontAwesome:

Несколько CSS кнопок с иконками из FontAwesome:

Очередной набор чистых кнопок для веб-приложений:

Кнопка-переключатель на основе Bootstrap:

Коллекция анимированных CSS3 кнопок для придания особого колорита вашему сайту:

Коллекция CSS кнопок различных цветов:

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

Данная публикация является переводом статьи «50 CSS3 button examples with effects & animations» , подготовленная редакцией проекта.

Онлайн генератор кнопок для сайта

Roman 16 марта 2021, 17:27

Здравствуйте! Что нужно добавить в код кнопки чтобы выровнять ее по центру блока «страницы»? Или как это сделать? Заранее спасибо!

Сергей 11 февраля 2021, 15:04

Простой и понятный генератор. Очень удобно делать кнопки. Спасибо! А можно ли как-то по мимо ссылки, добавить функцию копки «копировать в буфер обмена» ? Облазил весь интернет, но ни в одном генераторе такой возможности не нашел.

Александр 02 февраля 2021, 23:39

Добрый день.
Интересный генератор кнопки.
А такой вопрос — можно ли как-то средствами CSS сделать тень у кнопки? И, скажем, чтобы при наведении мыши она как-то менялась немножко ещё?

Daruse

Да, спасибо за идею, будет время — добавлю

Евгений 04 июня 2020, 13:46

Здравствуйте!
У Вас очень хороший конструктор!
Но есть один маленький вопрос: я выбираю исходный и конечный цвет текста кнопки абсолютно белый (#ffffff), и при просмотре результата он соответствует задуманному.
Но после установки кода на сайт обнаруживается, что начальный цвет голубой и с подчеркиванием (в итоге нет контраста, и надпись какая-то блёклая), при этом после наведения всё соответствует задуманному.
В чём проблема? Как от неё избавиться?

Daruse

Добрый день! Скинь мне ссылку, где вы добавили кнопку, на мою почту (в подвале есть контакты).

Подчеркивание — да, мой косяк, исправил.

Кнопки | CSS — Примеры

Простая HTML кнопка для сайта

Есть несколько типов input для создания кнопки и тег button [ type=»button | reset | submit» ]. Внешне и функционально они абсолютно одинаковы.

button

<input type="button" value="input"/>
<button type="button">button</button>

Когда использовать тег button?

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

Как сделать кнопку на CSS

Из ссылки, тега span или div можно сделать с помощью CSS очень даже симпатичную кнопку.

Посмотреть описание

<a href="#">кнопка</a>

Создание кнопки: «А нужно ли изменять вид кнопки при наведении или делать кнопку с эффектом нажатия?»

Динамические эффекты реализуются благодаря псевдоклассам:

• :hover — при наведении. С появлением сенсорных экранов необходимость в :hover отпала. Для остальных же нужно как минимум изменение вида курсора мышки, чтобы дать понять, что элемент не является декорацией.
• :active — в момент нажатия кнопки. Когда на странице тут же что-то явно происходит, например, переход по ссылке, загрузка модального окна, появляется значок обработки формы, то :active можно опустить.
• :focus — пока кнопка в фокусе, то есть когда пользователь нажал на кнопку, но ещё не щёлкнул курсором мышки в другое место окна браузера. Без :focus невозможно объединить visibility: hidden; и transition. Если слишком быстро убрать мышку, то элемент повиснет в «половинном» состоянии, например, ссылка будет прозрачна, но по ней можно делать переход.

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

Код кнопки для сайта

Иногда самый простой внешний вид может выглядеть более стильно, чем навороченная с крутыми эффектами кнопка. Взгляните, как она тут [cssdeck.com] смотрится.

Добавить в корзину

<a href="#">кнопка</a>

<a href="#">кнопка</a>

Как у Сбербанка

<a href="#">кнопка</a>

Кнопка с градиентом

Градиенты плохо поддаются анимации, плавной смене цвета фона. Что же делать? Ответ: box-shadow [перейдите по ссылке, там есть суперская форма входа].

Купить

<a href="#">кнопка</a>

А вот всякие перемещения работают на ура.

Забронировать

<a href="#" tabindex="0">кнопка</a>

Довольно популярно разделение кнопки на два цвета

Положить в корзину

<a href="#">кнопка</a>

Красивые кнопки CSS

10 999 р.

<a href="#">кнопка</a>

Как у Google

<a href="#">кнопка</a>

<a href="#" tabindex="0">кнопка</a>

Заказать

<a href="#">Заказать</a>

<a href="#">Установить</a>

Кнопки «Скачать» CSS

Скачать бесплатно первые 30 дней Автор

<a href="#">Скачать
бесплатно первые 30 дней</a>

скачать

<a href="#">Скачать</a>

Стилизация кнопок с помощью CSS

Анимированная кнопка: «свечение текста»

<input type="button" value="Купить">

<input type="button" value="запись">

Стиль кнопок с бликами

Глянцевая кнопка

<a href="#">кнопка</a>

<a href="#">кнопка</a>

Заказать билеты

<a href="#">кнопка</a>

<a href="#" data-twitter>twitter</a>

<a href="#">кнопка</a>

<a href="#" tabindex="0">кнопка</a>

<a href="#">1</a>

Объёмная кнопка CSS

Объёмная

<a href="#">кнопка</a>

кнопка Автор

<a href="#">кнопка</a>

сделать
заказ Автор

<a href="#">Объёмная</a>

положить в корзину

<a href="#">Объёмная</a>

Вдавленная кнопка

Оформить

<a href="#">Заказать</a>

Выпуклая кнопка HTML

<a href="#">Заказать</a>

Круглые CSS кнопки

<a href="#"></a>

+

<a href="#">+</a>

Анимированная кнопка CSS

Анимированное заполнение происходит так (тут нет лишнего кода, связанного с кнопкой). Другие интересные эффекты загрузки можно найти тут [tympanus.net].

<a href="#" tabindex="0"><span></span></a>

<a href="#" tabindex="0"></a>

3d кнопка CSS

<a href="#" tabindex="0">кнопка</a>

Оформление кнопок

Кнопки сайта следует выполнять в едином стиле, чтобы не оставалось сомнений, что если здесь нажать, то произойдёт какое-то действо.

Кнопка с главным действием должна выделяться из общего содержания, быть контрастной. Тут главное не переусердствовать. Так, например, у интернет магазина e5 это приятно для глаза: А тут с оранжевым явный перебор, даже на изображении сложно остановить взгляд:

Именно поэтому у Google второстепенные кнопки сначала плоские, а после наведения мышки обретают объём.

Также нужно победить желание сделать кнопку величиной со слона, чтобы не стать объектом баннерной слепоты.

кнопка » Скрипты для сайтов

07.05.2020 1 568 Form / Codepen

Radio кнопки на CSS

Стилизация radio кнопок для форм на чистом CSS.

11.12.2019 6 584 Animation / Buttons / Codepen

Коллекция css анимаций кнопок

Коллекция css анимаций для кнопок при наведении на них курсора

04.08.2018 2 492 Codepen

Жидкая кнопка

Генератор жидких кнопок на canvas

21.08.2014 7 495 Скрипты / Buttons

Flat кнопки

Готовый комплект из кнопок в стиле flat дизайна. Четыре размера на выбор: small, normal, medium и large.

07.01.2014 4 947 Скрипты / Buttons

Эффект при наведении и шрифт с иконками

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

24.06.2013 4 337 Скрипты / Buttons

Кнопки с эффектами CSS3

Двенадцать иконок с различными CSS3 эффектами, которые можно взять себе на вооружение. Болшинство эффектов будет работать в большинстве современных браузеров.

26.03.2013 2 686 Скрипты / Social Media

Кнопка «Поделиться» через социальные сети

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

29.01.2013 10 027 Скрипты / Buttons

CSS3 кнопки с бликом

CSS3 кнопки для сайта объединяющие в себе свойства box-shadow, border-radius и анимацию для создания эффекта блеска при наведении мышки. Снова замечу, что в старых браузерах должным образом этот эффект не будет.

25.01.2013 4 703 Скрипты / Buttons

CSS3 кнопка с анимацией

Сделаем кнопки с анимацией при наведении мышки на css3. Это аналог кнопок, которые используются на нашем сайте.

14.01.2013 4 431 Скрипты / Form

Красивое оформление кнопок-переключателей

Toggles — это легкий jQuery плагин позволяющий создать простые и красиво оформленные кнопки переключения.

14.12.2012 2 846 Полезно

Сервисы социальных кнопок для сайта

Рассмотрим самые интересные веб-сервисы предоставляющие кнопки популярных социальных сетей, сервисов закладок в «одном флаконе». Не нужно будет ставить для каждой соц. сети их персональный код кнопки, сервисы выдадут вам один код сразу для всех.

04.10.2012 4 422 Скрипты / Buttons

Кнопка покупки на CSS3

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

Красивые кнопки для сайта HTML + CSS

Хотите знать как сделать красивую HMML кнопку для сайта? Тогда вы попали по адресу. В данной статье я представлю вам 24 различных вариантов создания красивых и стильных кнопок для вашего сайта.

Ниже представлены варианты HTML кода кнопок для вашего сайта:

 

Как сделать кнопку на сайте

Кнопка для сайта 1 вариант

Это наиболее простой вариант кнопки с изменением цвета при наведении курсора на кнопку.

Кнопка для сайта 2 вариант

Эта кнопка при наведении на нее визуально вдавливается.

Кнопка для сайта 3 вариант

При наведении кнопка меняет свой цвет и появляются движущиеся рамки. 

Кнопка для сайта 4 вариант

Кнопка для сайта 5 вариант

Здесь представлена кнопка с анимацией полос сверху и снизу при наведении.

Кнопка для сайта 6 вариант

Вариант кнопки с движущейся тенью при наведении.

Кнопка для сайта 7 вариант

Еще одна кнопка с красивым визуальным эффектом при наведении курсора. Движущиеся рамки при наведении.

Кнопка для сайта 8 вариант

Вариант похожий на предыдущий но кнопка имеет другое цветовое исполнение.

Кнопка для сайта 9 вариант

Кнопка с эффектом поворота заливки при наведении.

Кнопка для сайта 10 вариант

Еще один интересный эффект при наведении на кнопку

Кнопка для сайта 11 вариант

Эффект блика на кнопке с использование CSS

Кнопка для сайта 12 вариант

3D кнопка с эффектом разворота по вертикали.

Кнопка для сайта 13 вариант

Кнопка с вертикальным бликом при наведении.

Кнопка для сайта 14 вариант

Изменение цвета кнопки при наведении. Эффект скольжения цвета снизу вверх.

Кнопка для сайта 15 вариант

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

Кнопка для сайта 16 вариант

Ещё одна кнопка с движение тени при наведении.

Редактирование Размеров и геометрии кнопок.

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

Рассмотрим подобный случай на примере первой кнопки.

Вам нужно найти в css коде подобное:

 width: 130px;
  height: 40px;

Это фрагмент кода отвечающий за размер кнопки. Давайте сделаем ее немного шире и длиннее для этого изменим количество пикселей вот так:

 width: 150px;
  height: 60px;

А также можем поменять закругление самой кнопки для этого нужно найти еще вот такой отрывок кода:

 

border-radius: 5px;

и поменять его, допусти на значение 30px 

И вот что у нас получилось

Кнопка для сайта 17 вариант с (закруглением)

Кнопки с необычным дизайном

Кнопка для сайта 18 вариант (купить)

Кнопка купить как в Эльдорадо

Кнопка для сайта 19 вариант (скачать)

Кнопка скачать с эффектом подсвечивания.

Кнопка для сайта 20 вариант (как из стекла)

Кнопка как будто бы сделана из стекла подходит только для цветного фона.

Кнопка для сайта 21 вариант (объемная)

Кнопка для сайта 22 вариант (3D)

Интересный вариант 3D CSS кнопки

Кнопка для сайта 23 вариант

Кнопка с бегущими полосами при наведении

Кнопка для сайта 24 вариант

Css код кнопки с появление еще одной окантовки при наведении курсора

Заклюцение:

Вот только небольшой перечень Html и css кодов кнопок на сайт. 

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

В общем дерзайте. Если будут вопросы пишите в коментариях.

Поделитесь информацией с другими:

Дизайн кнопки для сайта: рекомендации веб-дизайнера

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

Пропорции кнопок для сайта

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

Кроме этого стоит учесть, что отступы сверху и снизу кнопки не должны быть больше отступов слева и справа, но могут быть им равны. Отступы же слева и справа можно делать в два или три раза больше чем отступы сверху и снизу, но не больше.

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

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

На мой взгляд, наиболее удачные пропорции:

• Надпись на кнопке, к примеру: 16px;
• Отступ сверху и снизу: 16px;
• Отступ справа и слева: 16px или по 32px.

Выравнивание текста в кнопке

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

Как выровнять надпись в кнопке по центру?

Для выравнивания надпись зажмите клавишу Shift и выделите два слоя в панели слоев (слой с надписью и слой с фоном). Далее выберите инструмент «Перемещение V» и на верхней панели нажмите по очереди две кнопки «Выравнивание центров по вертикали» и «Выравнивание центров по горизонтали».

Если у вас надпись на кнопке заглавными буквами то все будет отлично, но если первая буква заглавная, а остальные прописные то необходимо надпись отпустить на 1-2 пикселя вниз, проверьте линейкой. Также учтите, что если текст написан как блочный и у вас останется пустое место снизу, сверху или сбоку надпись выровняется не по центру.

Радиус скругления углов

Иногда встречаются кнопки с большим радиусом скругления у всех углов, кнопка в таком случае выглядит на мой взгляд не очень аккуратно. Лучше всего сделать радиус в 2-4px. по всем углам. Или как вариант сделать полностью скругленные углы. Пример показал ниже.

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

Надеюсь, этот небольшой материал по созданию кнопок для сайта будет вам полезен.

Da Button Factory — Бесплатный генератор кнопок CTA

Что случилось со старой «фабрикой Da Button Factory»?

Da Button Factory была приобретена ClickMinded! Инструмент был обновлен и останется бесплатным. Теперь это генератор кнопки с призывом к действию для наших студентов, изучающих цифровой маркетинг, которые учатся писать в блоге, способствующие конверсии.

Мы рекомендуем вам использовать последние версии Chrome, Firefox, Edge или Safari для использования этого инструмента. У вас могут возникнуть проблемы, если вы используете Internet Explorer — в этом случае просто загрузите один из рекомендуемых браузеров.

Как добавить кнопку к веб-сайту, электронной почте или сообщению в социальных сетях

Есть несколько способов сделать это.

Вариант №1: Загрузить файл изображения кнопки

Это самый простой способ. Просто выберите нужный тип файла и нажмите кнопку загрузки.

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

Вариант № 2: реализовать кнопку как HTML + CSS

Da Button Factory также является бесплатным генератором кнопок CSS.Для этого варианта требуется немного больше знаний HTML и CSS, но в результате веб-страница или электронное письмо будут работать быстрее (поскольку нет необходимости загружать изображение).

Для этого создайте элемент HTML, например «div» или «button», напишите копию CTA и назначьте ей класс. В этом примере мы назовем класс my-cta-button.

Затем скопируйте код CSS, предоставленный инструментом в разделе «Встроить», и добавьте его либо в свой файл CSS, либо на страницу с помощью тегов «style».

Вот и все! Теперь вы разработали и реализовали свою собственную кнопку HTML.

Как создавать призывы к действию с высокой конверсией

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

1. Используйте выделяющийся дизайн кнопок. Убедитесь, что между текстом кнопки и фоном, а также между кнопкой и фоном страницы достаточно контраста.
2. Сообщите своим пользователям, что они получают, нажав на ваш CTA. Вместо того, чтобы использовать что-то общее, например «Нажмите здесь», сделайте описательный текст, например «Купить сейчас» или «Загрузить».
3. При написании CTA-копии используйте от первого лица. Лучше использовать «Просмотреть мою учетную запись» вместо «Просмотреть свою учетную запись».
4. Сделайте ваш CTA-текст кратким и по существу. Избегайте создания излишне многословных призывов к действию.
5. Сделайте свое предложение более привлекательным, включив такие термины, как «Сейчас», «Бесплатно» или «Сохранить». Например, «Загрузите СЕЙЧАС», «Получите БЕСПЛАТНУЮ электронную книгу» или «Сэкономьте 10 $».

Ваша очередь

Da Button Factory от ClickMinded — это онлайн-производитель кнопок, который позволяет быстро и бесплатно создавать красивые, высококонвертируемые кнопки CTA для веб-сайтов, почтовых кампаний или сообщений в социальных сетях.

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

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

Дизайн кнопок для веб-сайтов и мобильных приложений

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

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

Дизайн кнопок, которые помогают пользователям с небольшой помощью Justinmind

Загрузите бесплатную версию

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

Основные правила дизайна кнопок

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

1. Сделайте его интерактивным

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

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

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

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

2. Упростите поиск и прогнозирование

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

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

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

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

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

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

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

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

Текст внутри кнопки не нужно ограничивать «ОК» и «Отмена». Фактически, ваше удобство использования улучшится, если отложить эти общие термины в сторону и сосредоточиться на действии, которое выполняет каждая кнопка. Наличие кнопок с надписью «Удалить навсегда» или «Отменить бронирование» может гарантировать, что ваши пользователи понимают каждую кнопку, и даже улучшить удобство использования, уменьшив вероятность ошибок пользователей.

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

4. Размер имеет значение: есть кнопки, на которые люди могут нажимать

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

Размер вашей кнопки особенно важен для мобильного дизайна. Слишком большая кнопка приведет к визуально заряженному экрану, в то время как слишком маленькая кнопка не может быть нажата обычным пальцем.В 2003 году Touch Lab Массачусетского технологического института опубликовала исследование, которое показало, что большинство кончиков пальцев имеют ширину 8–10 мм.

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

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

5. Не используйте кнопку для всего.

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

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

Дизайн кнопок

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

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

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

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

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

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

Дизайн мобильных кнопок в приложениях для Android и iOS

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

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

1. Придерживайтесь основных принципов проектирования пользовательского интерфейса

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

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

Когда «касание» является основным методом ввода для вашего мобильного приложения, принципы материального дизайна Android рекомендуют, чтобы цели касания были не менее 48 x 48 точек на дюйм и не менее 8 точек на дюйм (или более) между ними. Это необходимо для обеспечения сбалансированной плотности информации и удобства использования.

Что касается формы, это действительно зависит от того, для чего вы проектируете. Например, в дизайне пользовательского интерфейса Android плоские и выпуклые кнопки материала должны иметь высоту 36dp, минимальную ширину 88dp и радиус угла 2dp (плоский) / иметь высоту по умолчанию 2dp (поднятый).

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

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

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

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

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

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

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

3. Помогите пользователям расставить приоритеты, устраняя трение на экране.

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

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

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

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

4. Поощряйте пользователей визуальной обратной связью в дизайне кнопок пользовательского интерфейса

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

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

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

Тестирование дизайна кнопок

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

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

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

• Могут ли пользователи найти все основные функции?
• Сколько времени в среднем у них уходит на каждую функцию?
• Понимают ли пользователи, как каждая функция соотносится с другими в важных вопросах?
• Логична ли навигация для пользователей?

Когда дело доходит до тонкой настройки дизайна кнопок, возможно, немногие методы столь же полезны, как A / B-тестирование. Этот вид тестирования, особенно любимый маркетологами для кнопок CTA, заключается в тестировании двух разных версий одной и той же кнопки и сравнении их эффективности.Если ваша команда хочет протестировать множество различных дизайнов кнопок одновременно, многовариантное тестирование может быть более быстрым и практичным вариантом.

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

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

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

UI-набор Material Design обширен и практичен. Наслаждайтесь более чем 170 различными компонентами для использования в прототипах мобильных приложений, включая все кнопки и элементы управления действиями, которые могут вам понадобиться. Каждая кнопка уже имеет базовое взаимодействие, интегрированное в компонент, чтобы сэкономить время, с затенением, которое широко используется в дизайне.

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

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

Этот набор пользовательского интерфейса уже предустановлен в Justinmind, но если хотите, обратите внимание на компоненты библиотеки Web Wireframing.

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

Вы можете узнать больше о наборе пользовательского интерфейса Bootstrap во всей его красе в нашем специальном посте.

Kendo UI kit — это забавный инструмент, который всегда в вашем распоряжении. Поставляется с кнопками всех размеров, как основных, так и дополнительных.Благодаря нескольким вариантам размера создание вашего следующего UX-дизайна будет намного проще и быстрее с Kendo. Не говоря уже о том, что нам просто нравится дизайн кнопок на группе кнопок!

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

Заставьте посетителей нажимать на ваши кнопки

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

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

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

Анатомия идеальной кнопки

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

Анатомия пуговицы

Чего следует избегать при разработке кнопки

Кнопки, не похожие на кнопки

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

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

• Квадратная кнопка с заливкой
• Круглая кнопка с заливкой
• Круглая кнопка с заливкой и тенями
• Кнопка с контуром / призраком

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

Примеры распространенных дизайнов кнопок

Нечеткие или вводящие в заблуждение надписи на кнопках

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

Используйте ярлыки, которые четко объясняют, что делает кнопка, и подтверждают действие, которое пользователь собирается предпринять. Также важно учитывать контекст кнопки и соответствующим образом адаптировать метку.Избегайте меток «да» или «нет» и используйте вместо них описательные метки, такие как «Удалить» или «отменить».

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

Кнопки, которые не отображают свое состояние визуально

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

— Якоб Нильсен

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

Кнопки дизайна, которые имеют такие состояния, как:

• Основное состояние — кнопка интерактивна и готова к использованию
• Активно — Пользователь нажал кнопку
• Hoover — Курсор помещен над интерактивным элементом
• Сфокусирован — Кнопка была выделена с помощью клавиатура
• Выполняется — Действие обрабатывается
• Отключено — Кнопка не интерактивна

Различные состояния кнопок

Неподходящий дизайн кнопок

«Согласованность — один из самых действенных принципов удобства использования: когда все работает одинаково, пользователям не нужно беспокоиться о том, что произойдет.»- Якоб Нильсен

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

Согласованный и несовместимый дизайн кнопок

Использование слишком большого количества кнопок

«Практическое правило для UX: больше возможностей, больше проблем.”

— Скотт Бельски, директор по продуктам

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

Иерархия кнопок и действия

Иерархия кнопок дает пользователям полезный сигнал для определения наиболее важной задачи в системе. Вот наиболее распространенные иерархии дизайна кнопок веб-сайтов и способы их использования, чтобы направлять пользователей.

CTA

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

Общие CTA включают кнопки веб-сайтов, такие как UXPin, на которых есть очень заметная кнопка CTA «Присоединяйтесь бесплатно» с высокой цветовой контрастностью.

Отличная кнопка CTA

Психология эффективной кнопки CTA Копия

Чтобы кнопка с призывом к действию была эффективной, ей нужен не только хороший дизайн, но и копия, которая побуждает к действию.Плохая копия кнопки CTA сбивает с толку, вызывает ошибки и заставляет пользователей отказываться.

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

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

Используйте точный язык : Не допускайте истолкования или неправильного толкования. Не говорите «Удалить», если «Удалить» было бы гораздо лучше.

Используйте язык, подтверждающий действие пользователя : Используйте слова, которые определяют действие, которое пользователь собирается предпринять, например «Опубликовать», а не просто «Отправить». Это устраняет неуверенность и дает пользователю уверенность в своих действиях.

Используйте императивы : Императивы превращают фразы в команды. Они уменьшают количество слов на копии кнопки, облегчая ее чтение. Вместо «Да, создать мою учетную запись» просто используйте «Создать учетную запись».

Основные действия

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

Вторичные действия

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

Разница в визуальной заметности между первичными и вторичными действиями

Третичные действия

Третичные действия — это важные действия, которые пользователям, возможно, не нужно выполнять.Эти действия включают редактирование, добавление новой информации или удаление. Разница между первичными и третичными действиями определяется контекстом, в котором выполняется действие.

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

Рекомендации по стилям, цвету и дизайну кнопок

Форма кнопки

Лучшая практика для формы веб-кнопок — использовать квадратные кнопки или квадратные кнопки с закругленными краями.Эти формы кнопок рекомендуются, потому что пользователи могут легко распознать их как кнопки.

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

Круглые кнопки : это кнопки с закругленными краями.

Круглая пуговица

Кнопки-призраки / линии : это кнопки без сплошной заливки. Их лучше всего использовать для второстепенных действий.

Кнопка линии

Плавающие кнопки действий (FAB) : Эта кнопка используется для основных действий.

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

Кнопки с пиктограммами и ярлыками : Эти кнопки имеют как пиктограмму, так и ярлык.

Значок и кнопка с надписью

Кнопки с пиктограммами : Поскольку эти кнопки не имеют ярлыков, их легко складывать друг с другом.

Значок кнопки

Вы можете использовать заполнение и изменение размера, чтобы сделать кнопки более заметными.Убедитесь, что ваши кнопки достаточно большие, чтобы их могли нажимать мобильные пользователи.

Цветовые палитры

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

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

Язык цвета

Размещение кнопок и макет страницы

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

Что касается кнопок основных действий для веб-сайтов, то пока еще не решено, как лучше всего разместить их. Вариант A — это когда кнопка основного действия идет первой, а в варианте B — последней.Лучше всего спросить себя, что пользователь ожидает увидеть первым в вашем конкретном контексте.

Размещение кнопок

Дизайн кнопок с лучшими инструментами пользовательского интерфейса

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

Дизайн кнопок веб-сайта: ваше руководство по CSS

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

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

Интересуетесь дизайном кнопок веб-сайта? Не знаете, как (или где) начать? Мы вас прикрыли.

Хорошо vs.Плохой дизайн кнопок

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

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

Хороший дизайн кнопок

• Clear: Текст и цвета кнопок должны быть четкими, четкими и понятными.Тенденции веб-дизайна за последние несколько лет склонились к дизайну плоских кнопок, так что это безопасный стиль, который стоит попробовать. Избегайте сложных, причудливых кнопок, которые могут отвлекать читателей.
• Краткий: Минимальный текст на кнопках — идеальный вариант. Одно слово — это цель, самое большее — два слова. Любое другое становится громоздким и запутанным. Если у вас возникли проблемы с сокращением текста кнопки, сделайте шаг назад и спросите себя: «Что я хочу, чтобы читатель сделал на странице прямо сейчас?» Первое слово, которое приходит на ум, вероятно, будет глаголом.После этого добавьте наречие «время» для простого и лаконичного текста кнопки.
• Контекстный: Куда ведет кнопка? Что оно делает? Запутанные кнопки не нажимаются. Если у вас есть кнопка с надписью «купить сейчас», она должна вести на страницу, где пользователь может ввести данные своей карты, а не на другую страницу, описывающую продукт, который они хотят купить.

Плохой дизайн кнопок

• Не отвечает: В веб-дизайне мобильные возможности доминируют.Скорее всего, вы будете создавать кнопки на настольном компьютере, поэтому вам придется вручную дважды проверять правильность отображения кнопок и на мобильных устройствах. Если вы не сделаете этого шага, ваши кнопки могут быть слишком большими или слишком маленькими для экрана мобильного устройства, что может существенно повлиять на ваш рейтинг кликов. К счастью, у большинства инструментов CMS есть кнопка переключения, которая дает вам предварительный просмотр элементов вашей веб-страницы на нескольких типах экранов, чтобы вы могли соответствующим образом настроить дизайн кнопок.
• Без цвета: Яркие жирные кнопки отлично подходят для CTA, потому что они направляют взгляд посетителя к ключевым элементам на странице.Помните, что ваша веб-страница — это путешествие, и кнопки, которые вы размещаете на ней, должны действовать как карта. Без полноцветных кнопок вашим читателям может быть сложно пройти по странице и конвертировать.
• Неуместны: Аналогичным образом, неправильно расположенные кнопки также могут сбить с толку посетителя. Если ваши кнопки не расположены в области, которая заставляет читателя узнать больше или совершить покупку, одинокая кнопка в середине абзаца не поможет, а может усугубить ситуацию. Делайте вещи проще, добавляя кнопки только там, где вам нужно, чтобы посетитель предпринял действия.Вот некоторые примеры этих областей: рядом с разделом функций и преимуществ, в заголовке страницы и внизу страницы.

Идеи дизайна кнопок

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

Vecteezy

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

Дизайнер также добавил небольшие значки для улучшения контекста — например, кнопка «Воспроизвести видео» имеет небольшой символ «Воспроизвести», а кнопка поиска имеет увеличительное стекло.

Freepik

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

Здесь главное — контекст; в то время как слова на кнопках не умаляют их воздействия, текст является лишь одной из трех контекстных подсказок на каждой кнопке.Умный.

Как создать кнопку веб-сайта

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

Ваш лучший выбор для строительства? Дизайн кнопок в CSS (каскадные таблицы стилей). CSS — это инструмент, который определяет и описывает, как элементы отображаются в HTML.Используя редактор CSS, вы можете настроить каждый аспект своей веб-страницы, от верхних и нижних колонтитулов до боковых панелей и кнопок.

Вы можете добавить условия CSS на любой веб-сайт, но разные инструменты требуют разного уровня знаний. Если вы только начинаете, WordPress — беспроигрышный вариант: платформа упрощает доступ, добавление и настройку настроек CSS, а также создание новых кнопок. Вот как.

Шаг 1: Перейдите в панель управления WordPress и нажмите Внешний вид> Настроить.

Источник изображения

Шаг 2: Затем перейдите в нижнюю часть левой боковой панели и щелкните Additional CSS .

Источник изображения

Откроется страница редактора CSS, где вы можете ввести любой собственный код CSS.

Источник изображения

Итак, что вы должны добавить, чтобы создать отличные кнопки? Это зависит от того, что вы ищете.Давайте рассмотрим, как изменить свойства кнопки.

Дизайн кнопок CSS

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

См. Кнопку CSS на веб-сайте Pen от Кристины Перриконе (@hubspot) на CodePen.

Цветные пуговицы

Используйте свойство background-color, чтобы изменить цвет фона вашей кнопки.

См. Цветные кнопки пера Кристины Перриконе (@hubspot) на CodePen.

Закругленные углы

Квадратные углы не всегда идеальны. Используйте свойство border-radius, чтобы изменить радиус границы для закругления углов кнопок — чем больше количество пикселей (или процент), тем более округляются углы.

См. Закругленные углы пера Кристины Перриконе (@hubspot) на CodePen.

Цветные бордюры

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

См. Цветные границы пера Кристины Перриконе (@hubspot) на CodePen.

Кнопки с возможностью подвешивания

Используйте селектор : hover , чтобы изменить стиль кнопки, когда пользователи наводят на нее указатель мыши. Используйте свойство transition-duration, чтобы изменить способ работы эффекта наведения.

См. Кнопки перо с возможностью перемещения от Кристины Перриконе (@hubspot) на CodePen.

Пуговицы тени

Используйте свойство box-shadow, чтобы добавить тени к вашей кнопке.Обратите внимание, что HTML немного изменился, чтобы отобразить тень за кнопкой.

См. Кнопки тени пера Кристины Перриконе (@hubspot) на CodePen.

Отключенные кнопки

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

См. «Кнопки с отключенным пером» Кристины Перриконе (@hubspot) на CodePen.

Создание кнопок для веб-сайтов

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

1. Hubspot CMS

HubSpot CMS — это универсальный магазин для всего, что вам нужно для создания отличных веб-сайтов. Приобретая ежемесячную подписку, вы получаете доступ к разработке сайтов, которые соответствуют вашим потребностям и привлекают интерес посетителей. Вы можете расширить свою усердную работу, подключив свой сайт к маркетинговым решениям, таким как Marketing Hub от HubSpot, чтобы убедиться, что ваш дизайн со временем будет успешным.Выбирайте из множества готовых шаблонов кнопок и стилей, чтобы придать своему сайту идеальный вид.

2. Wix

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

Бесплатные кнопки веб-сайта

3. WordPress

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

4. Лучший генератор кнопок CSS

Best CSS Button Generator — это бесплатный инструмент, который позволяет настраивать внешний вид кнопок вашего веб-сайта. Выберите все, от точного оттенка зеленого в цветовой палитре вашего бренда до тени за текстом на кнопке.Когда вы закончите проектировать. Просто нажмите кнопку «Получить код», чтобы скопировать и вставить свой код CSS в поле «Настроить дополнительный CSS» на своем веб-сайте.

5. Генератор кнопок CSS

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

Нижняя строка кнопки

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

Кнопки — важный элемент фона; индивидуальный, ясный, лаконичный и контекстный выбор дизайна кнопок может помочь оформить и произвести впечатление на ваш сайт для успеха.

Примечание редактора: этот пост был первоначально опубликован в мае 2020 года и был обновлен для полноты.

Дизайн кнопок для Интернета — Руководство и примеры на 2020 год

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

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

Почему кнопки важны в UX?

По данным Якоба Нильсена и Nielsen Norman Group, пользователи читают примерно 20-28% веб-страницы при поиске информации, а Nielsen считает, что 20% более вероятны. И эксперты прогнозируют, что в наши дни продолжительность нашего внимания даже короче, чем у золотой рыбки — около 8,25 секунды.

Итак, где кнопки вписываются в это уравнение?

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

Веб-кнопки за годы

Как мы знаем, веб-дизайн сильно изменился за десятилетия. Загроможденные страницы с текстом и изображениями, анимированные гифки «в стадии разработки» и навигация по i-frame ушли в прошлое.Хотите прогуляться во времени? Взгляните на это ностальгическое путешествие по прошлому Интернета.

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

Когда плоский дизайн стал популярным в веб-мире в 2012 и 2013 годах, кнопки начали терять закругленные углы, тени и градиенты.Смартфоны, такие как Android и iPhone, также начали подбирать тенденции плоского дизайна.

К 2015 году плоский дизайн все еще имел место, но веб-дизайнеры начали возвращаться к тому, чтобы «делать кнопки похожими на кнопки», используя тени или градиенты, чтобы они выглядели «кликабельными». По состоянию на 2019 год мы все еще на этой арене.

Хотите узнать больше об эволюции веб-кнопок? Посмотрите этот график с примерами из Dribbble.

Разработка полезных состояний кнопок

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

Дизайн кнопки в ее различных состояниях так же важен, как и ее внешний вид.

Учитывать состояния кнопок, например :

Активные или отключенные кнопки

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

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

Кнопки с фокусировкой

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

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

Кнопки состояния наведения

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

Выбранные кнопки

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

Кнопки, выбранные в качестве ползунков

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

Рекомендации по дизайну веб-кнопок

Дизайн — это лишь часть того, что делает кнопку хорошей кнопкой в ​​Интернете. И действительно, в отношении дизайна не так много правил, если он доступен, согласован и работает для ваших пользователей. Но прошли те времена, когда текст «щелкнул здесь» и кнопкам не хватало единообразного стиля и подхода. Учтите эти рекомендации при разработке веб-кнопок в 2020 году.

Соответствуйте своему дизайну и задокументируйте его

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

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

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

Кнопки также можно интерпретировать как текстовые ссылки. Опять же, выбор способа отображения и функции текстовых ссылок также должен быть отражен в вашем руководстве по стилю.

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

Не полагайтесь только на значки как на кнопки

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

По словам Авроры Харли из Nielsen Norman Group, «понимание значка пользователем основано на предыдущем опыте. Из-за отсутствия стандартного использования для большинства значков текстовые метки необходимы для передачи значения и уменьшения двусмысленности.”

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

Используйте четкую и доступную копию

Легкая для понимания копия кнопки не означает, что вы должны воскресить «нажмите здесь». Доступные ссылки должны, прежде всего, описывать, куда ведет ссылка. Например, если кнопка ведет к загружаемой форме, копия в кнопке должна отражать это.

Короче говоря, глаголы — например, «Отправить», «Отправить», «Начать работу» — лучше всего подходят для кнопок с действием.

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

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

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

При разработке

учитывайте размеры (и досягаемость) кнопок.

Знаете ли вы, что средняя человеческая мужская рука имеет длину 7,6 дюйма и размах 3,5 дюйма? Может быть, нет, но вы можете захотеть узнать, почему это важно.

Размер кнопок — и место их размещения на экранах смартфонов и мобильных устройств — во многом влияет на UX.

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

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

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

Доступность важна и для кнопок

Создавая что-либо для аудитории, делайте это доступным.Дизайн для аудитории — это дизайн для всех, поэтому доступность так важна, когда вы вносите изменения и обновления в свой дизайн и кнопки в 2020 году.

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

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

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

Измерьте влияние ваших кнопок

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

Но как именно можно эффективно протестировать кнопки на своем веб-сайте?

Лучший способ проверить кнопки, особенно в CTA, — это A / B-тестирование. A / B-тестирование позволяет настроить два подхода к призыву к действию и проверить эффективность каждого, чтобы увидеть, какие варианты лучше всего подходят реальным людям.

Бесплатные инструменты, такие как Google Analytics или Диспетчер тегов Google, можно быстро и легко настроить для отслеживания обеих версий вашего CTA или кнопки для достижения наилучших результатов.

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

Кнопки эффективны при правильном использовании

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

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

Иконки веб-кнопок — бесплатная загрузка в векторном формате, PNG, SVG, GIF

Иконки веб-кнопок — бесплатные векторные загрузки, PNG, SVG, GIF

Иконки

Фото

Музыка

Иллюстрации

Поиск

Интернет

+ Коллекция

Кнопки PlayStation

+ Коллекция

Кнопки PlayStation

+ Коллекция

Интернет

+ Коллекция

Интернет

+ Коллекция

Кнопки PlayStation

+ Коллекция

Кнопки PlayStation

+ Коллекция

Интернет

+ Коллекция

Веб-камера

+ Коллекция

Интернет

+ Коллекция

Веб-камера

+ Коллекция

Кнопки PlayStation

+ Коллекция

Кнопки PlayStation

+ Коллекция

Веб-парсер

+ Коллекция

Веб-камера

+ Коллекция

Веб-справка

+ Коллекция

Интернет-реклама

+ Коллекция

Веб-аналитика

+ Коллекция

Веб-дизайн

+ Коллекция

Интернет

+ Коллекция

Интернет

+ Коллекция

Веб-камера

+ Коллекция

Веб-аналитика

+ Коллекция

Веб-дизайн

+ Коллекция

Кнопки PlayStation

+ Коллекция

Кнопки PlayStation

+ Коллекция

Веб-парсер

+ Коллекция

Диван с пуговицами

+ Коллекция

Веб-камера

+ Коллекция

Веб-справка

+ Коллекция

Интернет-реклама

+ Коллекция

Веб-аналитика

+ Коллекция

Веб-дизайн

+ Коллекция

Диван с пуговицами

+ Коллекция

Веб-щит

+ Коллекция

Веб-справка

+ Коллекция

Интернет-реклама

+ Коллекция

Веб-аналитика

+ Коллекция

Веб-дизайн

+ Коллекция

Веб-парсер

+ Коллекция

Диван с пуговицами

+ Коллекция

Веб-справка

+ Коллекция

Интернет-реклама

+ Коллекция

Смелый веб-браузер

+ Коллекция

Веб-камера

+ Коллекция

Веб-аналитика

+ Коллекция

Веб-дизайн

+ Коллекция

Веб-камера

+ Коллекция

Диван с пуговицами

+ Коллекция

Смелый веб-браузер

+ Коллекция

Веб-поиск Google

+ Коллекция

Веб-щит

+ Коллекция

Диван с пуговицами

+ Коллекция

Веб-поиск Google

+ Коллекция

Веб-парсер

+ Коллекция

Смелый веб-браузер

+ Коллекция

Веб-справка

+ Коллекция

Интернет-реклама

+ Коллекция

Веб-дизайн

+ Коллекция

Веб-доступность

+ Коллекция

Типы кнопок UX и передовые методы

Хотя они могут остаться незамеченными при правильной реализации, кнопки являются жизненно важным элементом в создании положительного и продуктивного взаимодействия с пользователем.По сути, кнопки UX — это стилизованные ссылки, которые привлекают внимание пользователя и помогают им двигаться в определенном направлении. Кнопки могут связывать нас с другими страницами или выполнять такие действия, как отправка формы или совершение покупки. Они часто используются как призывы к действию (CTA), которые мы хотим, чтобы наши пользователи выполняли на нашем веб-сайте.

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

Общие типы кнопок UX

Кнопки

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

«Лучший способ обозначить кнопку — использовать визуальные подсказки.”

Текстовые кнопки

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

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

Обведенные кнопки (часто называемые «призрачными» кнопками) — это шаг вперед по сложности и важности по сравнению с текстовой кнопкой в ​​дизайне кнопок.Обычно они обозначают важные действия, но не основное действие на странице. Обведенные кнопки должны быть именно такими: контур без заливки, окружающий текст, указывающий на действие.

Пуговицы приподнятые

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

Кнопки переключения

Кнопки переключения

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

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

Согласно Google, «кнопка с плавающим действием (FAB) выполняет основное или наиболее распространенное действие на экране.Он появляется перед всем содержимым экрана, обычно в форме круга со значком в центре ». FAB должен выполнять конструктивное действие, такое как создание нового элемента или демонстрация элемента на экране.

Вот пример кнопок с плавающим действием в Material Design (через Material Design)

Лучшие практики кнопки UX

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

Размер

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

Хорошее практическое правило приходит к нам из MIT Touch Lab. Исследования Touch Lab показывают, что создание кнопки размером минимум 10 x 10 мм — отличное место для начала. Имейте в виду, что с появлением отзывчивого веба стало более важно думать о том, как будет изменять размер кнопки и процентную ширину кнопок.

Цвет

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

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

Имейте в виду, что кнопка не является объектом с одним состоянием. Это мультигосударственный. Убедитесь, что вы учитываете состояния наведения / касания и активные состояния кнопки.Имейте в виду, что эти состояния должны обеспечивать достаточный контраст, чтобы люди могли четко идентифицировать их как отличные от состояния по умолчанию.

«Сделать пуговицу размером не менее 10 мм x 10 мм — отличное место для начала».

Форма

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

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

Связано: вашей команде необходимо сделать пользовательские исследования привычкой

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

Размещение

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

Микроскопия

Микрокопия кнопки

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

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

По теме: Хорошая копия UX не обязательно должна быть короткой

В последней версии InVision Studio упростилось создание и соблюдение передовых методов работы с кнопками UX.Сделав понравившуюся кнопку, превратите ее в компонент. Тогда у вас будут простые для повторного использования элементы, которые вы сможете использовать в своем проекте. Каждый раз, когда вы обновляете компонент, все остальные экземпляры наследуют изменения автоматически. Вы также можете настроить каждый экземпляр компонента с переопределениями. Более того, ваши компоненты могут быть статичными или адаптивными, в зависимости от ваших потребностей.