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

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

 

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

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

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

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

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

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

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

[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-х. Анимированная кнопка легко превратит ваш сайт в дилетантскую поделку и образец дурного вкуса.

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

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

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

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

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

Кнопки | htmlbook.ru

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

Кнопку на веб-странице можно создать двумя способами — с помощью тега <input> и тега <button>.

Рассмотрим вначале добавление кнопки через <input> и его синтаксис.

<input type="button" атрибуты>

Атрибуты кнопки перечислены в табл. 1.

Табл. 1. Атрибуты кнопок

Атрибут	Описание
name	Имя кнопки, предназначено для того, чтобы обработчик формы мог его идентифицировать.
value	Значение кнопки и одновременно надпись на ней.

Создание кнопки показано в примере 1.

Пример 1. Добавление кнопки

HTML5IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Кнопка</title>
 </head>
 <body> 
  <form>
   <p><input type="button" value=" Нажми меня нежно "></p>
  </form>
 </body>
</html>

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

Рис. 1. Вид кнопки

Второй способ создания кнопки основан на использовании тега <button>. Он по своему действию напоминает результат, получаемый с помощью тега <input>. Но в отличие от него предлагает расширенные возможности по созданию кнопок. Например, на подобной кнопке можно размещать любые элементы HTML включая изображения и таблицы. На рис. 2 показаны разные виды кнопок, полученные с помощью <button>.

Рис. 2. Кнопки, созданные с помощью <button>

Синтаксис создания такой кнопки следующий.

<button атрибуты>Надпись на кнопке</button>

Атрибуты перечислены в табл. 1, но в отличие от кнопки <input> атрибут value определяет только отправляемое на сервер значение, а не надпись на кнопке. Если требуется вывести на кнопке изображение, то тег <img> добавляется внутрь <button>, как показано в примере 2.

Пример 2. Рисунок на кнопке

HTML5IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Кнопка</title>
 </head>
 <body> 
  <form>
   <p><button>Кнопка с текстом</button> 
   <button>
    <img src="images/umbrella.gif" alt=""> 
    Кнопка с рисунком
   </button></p>
  </form>
 </body>
</html>

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

Кнопка Submit

Для отправки данных на сервер предназначена специальная кнопка Submit. Её вид ничем не отличается от обычных кнопок, но при нажатии на нее происходит выполнение серверной программы, указанной атрибутом action тега <form>. Эта программа, называемая еще обработчиком формы, получает данные, введенные пользователем в полях формы, производит с ними необходимые манипуляции, после чего возвращает результат в виде HTML-документа. Что именно делает обработчик, зависит от автора сайта, например, подобная технология применяется при создании опросов, форумов, тестов и многих других вещей.

Синтаксис создания кнопки Submit зависит от используемого тега <input> или <button>.

<input type="submit" атрибуты>
<button type="submit">Надпись на кнопке</button>

Атрибуты те же, что и у рядовых кнопок (пример 3).

Пример 3. Отправка данных на сервер

HTML5IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Кнопка</title>
 </head>
 <body> 
  <form>
   <p><input name="login"></p>
   <p><input type="submit"></p>
  </form>
 </body>
</html>
 

Атрибут name для этого типа кнопки можно не писать. Если не указать значение value, то браузер автоматически добавит текст, он различается в зависимости от браузера. Так, Firefox пишет «Отправить запрос», IE — «Подача запроса», Opera и Chrome — «Отправить». Сам текст надписи никак на функционал кнопки не влияет.

Кнопка Reset

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

Синтаксис создания указанной кнопки прост и похож на другие кнопки.

<input type="reset" атрибуты>
<button type="reset">Надпись на кнопке</button>

В примере 4 показана форма с одним текстовым полем, которое уже содержит предварительно введённый текст с помощью атрибута value тега <input>. После изменения текста и нажатия на кнопку «Очистить», значение поля будет восстановлено и в нём снова появится надпись «Введите текст».

Пример 4. Кнопка для очистки формы

HTML5IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Кнопка</title>
 </head>
 <body> 
  <form>
   <p><input value="Введите текст"></p>
   <p><input type="submit" value="Отправить">
      <input type="reset" value="Очистить"></p>
  </form>
 </body>
</html>
 

Значение кнопки Reset никогда не пересылается на сервер. Если надпись на кнопке опустить, иными словами, не задавать атрибут value, на кнопке по умолчанию будет добавлен текст «Очистить».

При нажатии кнопки «новый сайт» на странице SharePoint Online «Последующие сайты» создавать сайты команд не разрешается. — SharePoint

• 09/12/2021
• Чтение занимает 2 мин

• Применяется к:

  SharePoint Online

Были ли сведения на этой странице полезными?

Оцените свои впечатления

Да Нет

Хотите оставить дополнительный отзыв?

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

Отправить

В этой статье

Проблема

При нажатии нового сайта на странице Последующие сайты в Microsoft Office SharePoint Online вы получите следующее сообщение об ошибке:

Вы не можете создавать сайты команд на https://yourdomain.sharepoint.com/ сайте .

Примечание

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

Решение

Чтобы устранить эту проблему, администратор должен предоставить разрешения Create Subsites пользователям, которым требуется разрешение на использование ссылки «новый сайт».

Примечание

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

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

1. Войдите в центр администрирования SharePoint, а затем нажмите параметры.

2. В параметре Начните сайт просмотрите URL-адрес, указанный в поле Create sites. Например, это может быть значение, где https://contoso.sharepoint.com contoso — это доменное имя, используемого для организации.

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

1. Щелкните значок передач для меню

   Tools и нажмите параметры сайта.

2. Выберите Разрешения для сайта.

3. На ленте щелкните Уровни разрешений и нажмите кнопку Добавить уровень разрешений.

4. Введите имя для уровня разрешений, а затем в разделе Разрешения на сайт выберите поле Создать подсеть.

5. Нажмите кнопку Создать.

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

1. Щелкните значок передач для меню Tools и нажмите параметры сайта.

2. Щелкните разрешения сайта и нажмите кнопку Создать группу.

3. Укайте имя группы, а затем в разделе Дать групповое разрешение этому сайту выберите поле рядом с именем созданного вами нового уровня разрешений.

   Примечание

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

4. Щелкните Создать.

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

Дополнительные сведения

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

Остались вопросы? Перейдите SharePoint Community.

Принципы правильного создания кнопок для сайта

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

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

Очень легко и просто взять заранее заданные «пользовательские интерфейсы PSD», которые бесплатно выложила какая-то щедрая душа (и, несомненно, содержащие кнопки, навеянные духом Apple’а). Но почему не потратить минуту на размышления, подходит ли упомянутый стиль кнопок к контексту вашего замысла, и решить, возможно ли создать что-то более оригинальное?
Повторять чьи-то кнопки удобно, так экономится время, но невредно и потратить минуту на более детальное понимание замысла и структуры своих (или чужих) кнопок. Как создан их дизайн? Подходят ли они к интерфейсу/контексту/торговой марке? Есть ли возможность создать что-то уникальное? Достаточно ли выделяются мои кнопки? Нужны ли мне основные, второстепенные, третьестепенные кнопки? Достаточно ли они отличаются друг от друга? Симпатично ли смотрятся?! (Почему нет, все мы хотим создавать классные штучки, правильно?!).

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

Веб-дизайн. Быстрый старт

Изучите курс и узнайте, как создать дизайн и протопип сайта в Figma

Узнать подробнее

1. Подгонка под бренд

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

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

2. Подгонка под контекстуальный стиль

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

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

3. Убедитесь, что кнопки достаточно контрастны

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

4. Рассмотрите закругленные или фигурные кнопки

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

5. Уберите выделение второстепенных элементов пользовательского интерфейса

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

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

Веб-дизайн. Быстрый старт

Изучите курс и узнайте, как создать дизайн и протопип сайта в Figma

Узнать подробнее

6. Согласующиеся по цвету края/границы

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

7. Поаккуратнее с размытыми тенями

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

8. Немного иконографии внесет свой вклад в юзабилити

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

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

9. Обдумайте главные, второстепенные и третьестепенные стили

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

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

10. Всегда делайте состояния обратной связи

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

Заключение статьи по созданию кнопок для сайта

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

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

Автор: Pete Orme

Источник: //webdesign.tutsplus.com/

Редакция: Команда webformyself.

Веб-дизайн. Быстрый старт

Изучите курс и узнайте, как создать дизайн и протопип сайта в Figma

Узнать подробнее

Веб-дизайн. Быстрый старт

Изучите курс и узнайте, как создать дизайн и протопип сайта в Figma!

Смотреть видео

Верстка кнопок на сайте

Вы здесь: Главная — HTML — HTML 5 — Верстка кнопок на сайте

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

Кнопки внутри формы

Тег input

Вставляются тегом input, c типом submit – что означает кнопку для отправки формы.

<input type="submit" value="Отправить">

Тег button

Вставляет на сайт кликабельную кнопку, работающую, в любом месте сайта.

Тег button по сравнению с input, располагает большими возможностями, внутри него можно вставлять любой контент (текст, изображения).

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

Теги input и button могут обрабатываться скриптом, например при событии клика.

<button type="button">Нажми меня!</button>

Пример верстки кнопок внутри формы

Button

See the Pen CSS3 responsive form by porsake (@porsake) on CodePen.

Input

See the Pen Responsive Form by porsake (@porsake) on CodePen.

Кнопки-ссылки

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

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

Пример верстки кнопки ссылки #1

HTML

<a href="#">Купить</a>

CSS

Тег a по умолчанию является строчным элементом, если не задать ему display: inline-block, то к нему не применятся отступы, рамки и другие стили.

body {
  background-color: #951a46; /* цвет фона всей страницы */
  font-family: Roboto, sans-serif; /* семейство шрифта */
}

.button {
  display: inline-block; /* строчно-блочный */
  margin: 100px 400px; /* отступы от края браузера */
  padding: 20px 60px; /* расстояние от текста до края кнопки */
  background-color: #e44b9b; /* цвет кнопки */
  box-shadow: 0px 6px #f7f8e8; /* задана тень */
  border-radius: 5px; /* скругление углов */
  font-size: 27px; /* размер шрифта */
  text-transform: uppercase; /* трансформировать в заглавные буквы */
  text-decoration: none; /* не подчеркивать ссылку */
  transition: 0.2s; /* плавный ховер эффект */
  color: #f7f8e8; /* цвет текста на кнопке */
}

.button:hover {
  background-color: #949a9a; /* замена цвета кнопки при наведении */
}

Скриншот

Пример верстки кнопки ссылки #2

HTML

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

CSS

body {
  background-color: #3cc395;
}

.button {
  display: inline-block;
  margin: 100px 400px;
  color: #fff;
  font-family: BebasNeue;
  font-size: 160%;
  font-weight: bold;
  text-transform: uppercase;
  background-color: transparent;
  border-radius: 13px;
  border: 3px solid #fff;
  padding: 6px 20px;
}

Скриншот

• Создано 24.04.2019 10:33:30
• Михаил Русаков

Предыдущая статья Следующая статья

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

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

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

1. Кнопка:
   <a href=»https://myrusakov.ru» target=»_blank»><img src=»https://myrusakov.ru/images/button.gif» alt=»Как создать свой сайт» /></a>

   Она выглядит вот так:

2. Текстовая ссылка:
   <a href=»https://myrusakov.ru» target=»_blank»>Как создать свой сайт</a>

   Она выглядит вот так: Как создать свой сайт

3. BB-код ссылки для форумов (например, можете поставить её в подписи):
   [URL=»https://myrusakov.ru»]Как создать свой сайт[/URL]

Дизайн кнопок веб-сайта: 7 примеров, которые меняют

Опубликовано: 2021-07-20

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

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

Что делает кнопку веб-сайта с высокой конверсией?

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

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

Вот некоторые из наиболее распространенных характеристик и элементов дизайна, которые делают кнопки веб-сайтов с высокой конверсией.

1. Кнопка выглядит интерактивной, и все кнопки выглядят как кнопки.
2. Кнопка контрастирует с фоном
3. Кнопка появляется в логическом или ожидаемом месте
4. Кнопка связана с четким и информативным призывом к действию, и пользователи легко понимают, что делает кнопка.
5. Размер кнопки подходит для платформы.
6. Кнопка не загромождена другими элементами или функциями на экране.

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

10 дизайнов кнопок на веб-сайтах, которые преобразуются

Evernote

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

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

понедельник

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

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

Брукс Бегущий

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

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

Sentiment.io

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

Почему это работает : ярко-красный цвет, который компания Sentiment выбрала для этой кнопки с призывом к действию, хорошо контрастирует с белым фоном и не позволяет посетителям этой страницы пропустить. Нам также нравится, как фраза «Более 1000 просмотров и подсчет» может вызвать FOMO (страх упустить) и стимулировать взаимодействие с пользователем. Используемый здесь призыв к действию также информативен и убедителен — пользователи точно знают, что они получат, нажав на кнопку.

Демио

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

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

Zendesk

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

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

Spotify

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

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

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

Резюме

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

Ищите красивые кнопки 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»

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

Кнопки являются фундаментальным компонентом любого дизайна 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 (приподнятую).

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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», напишите копию с призывом к действию и назначьте ей класс. В этом примере мы назовем класс my-cta-button.

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

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

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

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

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

Ваша очередь

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

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

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

Как создать собственную веб-кнопку | Small Business

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

Щелкните шар Windows. Введите «Paint» в поле поиска и нажмите «Paint» в списке результатов.

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

Измените размер изображения, если необходимо, используя инструмент «Изменить размер» Paint.Щелкните вкладку «Главная», затем значок изменения размера на панели изображений и нажмите «Изменить размер в пикселях». Установите флажок «Сохранить соотношение сторон», если у него нет флажка. Введите новую ширину изображения в поле ввода «По горизонтали», если вам нужно, чтобы изображение было определенной ширины, или введите новую высоту изображения в поле «По вертикали». Paint автоматически поддерживает правильное пропорциональное соотношение между высотой и шириной изображения, чтобы оно не выглядело искаженным.

Нажмите кнопку «Paint», затем «Сохранить как» и выберите «JPEG» в качестве формата файла.

Введите имя изображения в поле «Имя файла» и нажмите кнопку «Сохранить».

Щелкните сферу Windows и введите «Блокнот» в поле поиска. Щелкните Блокнот в списке результатов.

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

Прокрутите вниз до раздела веб-страницы, где вы хотите добавить кнопку «Интернет».

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

Например, следующий код веб-кнопки указывает браузеру пользователя загрузить и отобразить файл JPEG Buttonimage.jpg, который имеет ширину 800 пикселей и высоту 100 пикселей:.Если пользователь щелкнет это изображение, браузер загрузит веб-страницу по URL-адресу myweb.com. Если браузер не может отобразить JPEG, вместо этого он покажет текст «Щелкните для выгодных покупок».

Нажмите «Ctrl-S», чтобы сохранить вашу работу.

Ссылки

Ресурсы

Советы

• Если в вашей компании нет художника-графика, воспользуйтесь онлайн-сервисом, например CoolText, Button Maker или Da Button Factory, чтобы создать для вас изображения веб-кнопок. Эти сайты проведут вас через процесс выбора нужного типа кнопки; его размер, форма и цвет; плюс формат и внешний вид текста кнопки.

Предупреждения

• Избегайте использования изображений, которые вы найдете в Интернете, в качестве веб-кнопок, если у вас нет явного письменного разрешения от правообладателя изображения. Вы также можете избежать проблем с нарушением авторских прав, используя изображения из Open Clip Art Library. Эти изображения находятся под лицензией Creative Commons Public Domain Dedication, и вы можете использовать их любым удобным для вас способом.

Writer Bio

Аллен Бетеа пишет статьи по программированию, веб-дизайну, операционным системам и компьютерному оборудованию с 2002 года.Он имеет степень бакалавра наук UNC-Chapel Hill и степень AAS в области офисных технологий, машиностроения / черчения и интернет-технологий. Аллен имеет обширный опыт работы с настольным и системным программным обеспечением для операционных систем Windows и Linux.

Взгляд на кнопки регистрации в веб-дизайне

Создание информационного / контент-ориентированного веб-сайта (например, портфолио или блога) намного проще, чем создание веб-сайта, на котором мы имеем дело с зарегистрированными пользователями .Целью веб-сайтов, которые поддерживают учетные записи пользователей (например, Amazon.com или Gmail), является не только выделение их избранных товаров и услуг, но также преобразование посетителей в зарегистрированных пользователей.

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

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

Преобразование посетителей в пользователей

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

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

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

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

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

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

Просмотр некоторых кнопок регистрации

Давайте посмотрим на несколько реальных примеров хороших кнопок регистрации.

Liveresto

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

EECI

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

InstantLoop

InstantLoop показывает кнопку регистрации с текстом призыва к действию «Попробуйте сейчас». Кнопка огромна и расположена на видном месте в области заголовка.

Vegas Uncork’d

У

Vegas Uncork’d есть огромный баннер в формате Flash, который начинает воспроизводить броское вступление к сайту, которое превращается в интерактивное слайд-шоу на основе JavaScript с информацией о событиях, чтобы пользователи знали, о чем этот сайт.В верхней части веб-страницы есть кнопка с надписью «Подпишитесь на обновления» для быстрого доступа после того, как посетитель ознакомится с сайтом и будет готов стать пользователем.

Buysellads

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

Фитбит

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

Дополнительные примеры кнопок регистрации

Командаправить

Playintraffik

Барамаил

Notableapp

Betterblogger

Мини-эскадрилья

Championsound

Shakeitphoto

Стеклянные кубики

Приложение Kiwi

Hispaloto

HelpSpot

Solidshops

Xpelo

Myows

Myvoxtopia

Myzeo

Onehub

Ооизит

Упростите это

Проращиватель

Сторенвый

Briterevolution

Логодек

Связанное содержимое

10 распространенных ошибок при создании кнопок веб-сайта | by Trista liu

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

Иногда дизайнеры допускают несколько ошибок при создании веб-кнопок. Вот 10 распространенных ошибок, когда дизайнеры UI / UX создают кнопки для веб-сайтов.

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

Сделайте кнопки БОЛЬШИМИ! Когда вы создаете кнопки веб-сайта, вы должны убедиться, что люди могут видеть кнопки «заказать сейчас», если вы действительно хотите, чтобы они нажимали на них.

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

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

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

Лучшие материалы для дизайна UI / UX бесплатно

ЗАГРУЗИТЬ

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

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

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

Если пользователям требуется щелкнуть кнопку, им следует сообщить функции кнопки перед тем, как щелкнуть ее. Звучит очевидно, не правда ли? Не для всех:

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

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

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

Чтобы узнать больше:

The Ultimate Guide — Разница между удобством использования и пользовательским опытом

Что можно и чего нельзя делать при ориентированном на пользователя дизайне

Четыре основных ошибки UX и способы их эффективного предотвращения

13 Последние и Лучшие дизайны кнопок, которые нельзя пропустить в 2018 году

Кнопки

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

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

ОК! Вот 13 последних и лучших практик кнопок, которые вы не можете пропустить в 2018 году.И надеюсь, что они могут вас как-то вдохновить:

1. FAB Microinteraction

* Дизайнер: Маюр Кширсагар

* Основные моменты: Очень крутая плавающая кнопка навигации и хорошо продуманный дизайн навигации по кругу

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

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

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

2. Интерактивный дизайн кнопок ввода

* Дизайнер ： Knarik & Robert

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

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

* Что вы можете узнать:

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

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

3. Микровзаимодействие для кнопки печати

* Дизайнер: Quovantis

* Основные моменты: используйте «кнопку + анимацию», чтобы более наглядно показать функции кнопок.

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

* Что вы можете узнать:

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

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

4. Микровзаимодействие

* Дизайнер ： Альваро Сечилла

* Основные моменты: эффектные эффекты наведения для кнопок

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

* Что вы можете узнать:

Оптимизируйте дизайн кнопок с богатыми эффектами наведения или взаимодействия

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

5. Кнопка / загрузчик динамической загрузки

* Дизайнер: ali said

* Особенности: идеальное сочетание кнопок загрузки и индикаторов выполнения

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

* Что вы можете узнать:

Улучшите дизайн кнопок загрузки с помощью правильной анимации загрузки

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

6. Анимация скользящей кнопки

* Дизайнер: Serhad iletir

* Основные моменты: умная скользящая кнопка и цветовой градиент

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

* Что вы можете узнать:

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

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

7.Microinteraction 04

* Дизайнер: Alvaro Secilla

* Основные моменты: материализуйте кнопку CTA в сочетании функций и функций кнопок

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

* Что вы можете узнать:

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

8. Чехлы для кнопок сенсорного экрана

* Дизайнер: Халил Ханна

* Основные моменты : Упростите дизайн кнопок с помощью изменения цвета, значков и фоновых фотографий

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

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

* Что вы можете узнать:

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

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

9. Poodle Switch

* Дизайнер: Ванесса Браун

* Выделение: симпатичная скользящая кнопка и творческие переходы между 2D и 3D эффектами

Poodle Switch показывает симпатичные скользящие кнопки с великолепными визуальными эффектами. Кнопка со значком милого пуделя трансформируется из 2D в 3D в процессе скольжения от одного конца к другому. А вместе с изменением текстовой метки кнопок, весь дизайн становится действительно интуитивно понятным, чтобы пользователи четко знали функции этой кнопки.

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

* Что вы можете узнать:

Улучшите дизайн кнопок веб / мобильных приложений с помощью 3D / 2D и эффектов скольжения

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

10. Меню

* Дизайнер: Олег Фролов

* Особенности: Уникальный переключатель / кнопки меню

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

* Что вы можете узнать:

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

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

11. Может ли кто-нибудь нажать на нее

* Дизайнер: Мехди Махдлоо

* Основные моменты: очень заманчивая микрокопия

Может кто-нибудь нажать, это эмоциональный дизайн кнопки.Микрокопия кнопки гласит: «Может ли кто-нибудь ее нажать? Пожалуйста … »Это очень остроумный и увлекательный дизайнерский прием. Прочитав эту копию, я просто не могу удержаться от нажатия на нее, хотя я не знаю, для чего используется эта кнопка. А ты?

* Что вы можете узнать:

Добавьте привлекательную микрокопию на свой веб-сайт / кнопки мобильного приложения

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

12. Элементы пользовательского интерфейса

* Дизайнер: Мэтт Бонини

* основные моменты: отличное сочетание кнопок-призраков и плоских кнопок

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

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

* Что вы можете узнать:

Улучшите дизайн своего веб-сайта / приложения с помощью кнопок-призраков и плоских кнопок

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

13. Реалистичные кнопки

* Дизайнер: Тоби Сантасо

* Основные моменты: реалистичные кнопки и крутой светящийся эффект

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

* Что вы можете узнать:

Добавьте реалистичные кнопки, чтобы усилить ощущение знакомства

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

Mockplus поможет вам легко и быстро создать и протестировать дизайн кнопок веб / мобильных приложений

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

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

Step1. Создавайте различные кнопки с разными компонентами кнопок

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

* Используйте компоненты «Button» для создания основных кнопок, например кнопки CTA

* Используйте компоненты «Icon Button» для создания кнопок с иконками

* Используйте «Icon and Label» компоненты для создания кнопок со значками и метками

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

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

Шаг 2. Добавьте кнопки со специальными фоновыми фотографиями с помощью компонентов «Изображение»

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

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

Шаг 3. Добавьте заманчивую микрокопию с компонентами «Этикетка» и «Текстовая область»

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

Шаг 4. Сохранение, повторное использование и совместное использование стилей кнопок с помощью «Component Style»

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

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

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

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

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

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

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

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

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

Заключение

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

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

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

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

Тенденции кнопок веб-сайтов в веб-дизайне

Вы можете подумать, кого волнуют тенденции кнопок? Но на самом деле кнопки — это большое дело и, что более важно, шлюз для взаимодействия посетителей с вашим сайтом.Так что идти в ногу с тенденциями и создавать стильные кнопки — важные элементы, которые следует учитывать при разработке и обновлении вашего веб-сайта. Я собрал много часов просмотра тенденций на веб-сайтах и ​​предоставил вам несколько стилей, которые помогут вам оставаться в курсе последних событий. Моя коллекция основана на наблюдениях, но могу поспорить, что в 2015 году вы будете видеть все больше и больше этих тенденций.

---

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

Призрачные кнопки говорите? Звучит интересно… Что ж, кнопки-призраки сейчас в моде.Не так давно я просматривал веб-страницы в поисках вдохновения и был шокирован тем, что на всех сайтах использовались эти большие прозрачные кнопки, на которые можно было нажимать. Это довольно изящный вид, но при размещении в нужном месте с текстом нужного размера он выглядит совсем не так, как ваш типичный стиль кнопок. Кнопки-призраки — отличный способ отобразить кнопку прямо у вас на лице, но не слишком сильно. Можно поспорить, что эта тенденция в дизайне сохранится и в 2015 году.

Веб-восходящее устройство

фитбит

Площадь

---

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

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

Прыжок

Общественный колледж округа Неошо

---

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

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

Монитор кампании

Дрибббокс

Xero

---

Кнопки изображений

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

Агентство HLK

фитбит

airbnb

---

Кнопки со значками

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

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