Содержание
Дизайн кнопки сайта — PT-Blog.ru
Сегодня речь пойдет о дизайне кнопок для веб-сайта. Как спроектировать кнопку, которую пользователь захочет нажать?
Хотя кнопки и являются одними из самых маленьких по размеру элементов дизайна, они являются важнейшей его частью. Как еще можно общаться с пользователем? Каким еще образом пользователь сможет оставлять о себе информацию, производить какие-либо действия на сайте? Только с помощью кнопки или ее производных.
Если вспомнить ранние этапы развития флет-дизайна, то главной проблемой для пользователей, сталкивающихся с такими сайтами, была сложность в отличии интерактивных элементов от остальных.
Кнопка должна выглядеть осязаемой
Пользователи должны не только видеть кнопки на сайте, но иметь желание их нажать. В то время, как почти любой размер кнопки на экране монитора является кликабельным, размеры и отступы от кнопки на экране девайса имеют жизненно важное значение.
Размер кончика пальца среднего пользователя равен 8-10 мм в поперечнике. Это значит, что минимально допустимый размер кнопки должен составлять минимум 10х10 мм.
Вот несколько приемов, как сделать кнопку осязаемой:
- Используйте небольшую тень снизу кнопки, чтобы сделать ее более объемной;
- Увеличенный отступ от кнопки выделяет ее среди других элементов;
- Используйте ховеры для придания кнопке дополнительного объема и выделения.
Цвет очень важен
Тема выбора цвета кнопки достойна отдельной статьи. Но в общих чертах, правильным является использование отдельного цвета для кнопок сайта, который больше не используется ни в каких других элементах.
Цвет кнопки должен быть ярким, привлекающим внимание. По этой причине многие дизайнеры используют желтый, голубой или зеленый цвета при дизайне кнопок. Их легко заметить и выделить из всего остального дизайна.
Чтобы кнопка действительно выделялась, используйте цвет, являющийся комплементарным к основному цвету дизайна (цвет, расположенный на противоположной стороне цветового круга).
Размер кнопки имеет еще большее значение
Сделайте ее большой!
Как было сказано выше, кнопка должна выделяться, «возвышаться» над всем дизайном, чтобы пользователю захотелось ее нажать.
Но вместе с тем, при выборе размера кнопки, есть и свои сложности. Существует очень тонкая грань между оптимально большой кнопкой и слишком большой. Такое бывает, когда размер кнопки не совпадает с масштабом элементов всего дизайна.
Если кнопка – это все, что вы видите на сайте, скорее всего она слишком большая.
Размещение кнопки – ключевой фактор
Где именно на сайте должна располагаться кнопка? Существует ли место на макете, при размещении на котором кнопки, она соберет больше кликов?
В большинстве случаев, расположение кнопки зависит от контента сайта.
- В конце формы;
- Справа от призыва к действию;
- В нижней части страницы или экрана;
- Расположена под сообщением.
Сосредоточьтесь на контрасте
Как и во всем веб-дизайне, в проектировании кнопок, контраст также имеет огромное значение.
Вот, о чем необходимо помнить при проектировании кнопки:
- Цвет
- Размер
- Размер элементов
- Форма, сочетающаяся с фоном
- Прозрачность или анимация
- Тени или градиенты
Используйте стандартные формы
Когда дело касается кнопок, существует только две формы, которые вы должны рассмотреть:
- Окружность. Данная форма стала популярна благодаря стилю Material Design.
- Прямоугольник. Эту форму кнопок необходимо использовать в подавляющем большинстве проектов, кроме моментов, когда вы решили использовать окружность. Любой современный пользователь понимает, что означает этот яркий прямоугольник в середине экрана.
Подскажите пользователю, что нужно сделать
Каждая кнопка должна содержать текстовую инструкцию, которая говорит пользователю, за что именно отвечает данная кнопка.
Примеры:
- Нажмите здесь
- Создать аккаунт
- Попробуйте бесплатно
- Добавить в корзину
- Прочитать подробнее
Добавьте кнопкам визуальной значимости
В веб-дизайне кнопки должны выглядеть как кнопки! Никакие больше элементы не должны иметь той же формы, размера или цвета как кнопки. Кнопки должны выделять на фоне любого другого элемента.
Заключение
Вы начали переосмысливать ваш способ дизайна кнопок?
Вы считаете, что сможете спроектировать кнопки, которые привлекут больше кликов?
Попробуйте использовать некоторые из этих советов, и вы увидите как изменить в лучшую сторону показатели веб-аналитики вашего сайта.
Лучшие бесплатные сайты для создания кнопок CSS и PNG
Страницы для создать кнопки CSS поможет нам создать кнопки, которые мы собираемся включить на нашу веб-страницу по своему вкусу, предоставив для этого коды CSS и HTML. Таким образом, нам нужно будет только вставить код на наш сайт, чтобы получить кнопку, без необходимости загружать изображения.
С другой стороны, PNG кнопки обычно используются для компьютерных программ или мобильных приложений, хотя их также можно включать на страницы или в блог. Следовательно, по той или иной причине, если нам нужно создать кнопки CSS и PNG, мы можем прибегнуть к некоторым из следующих веб-страниц.
Веб-порталы для создания кнопок
Da Button Factory, самый популярный
Это один из самых популярных и наиболее рекомендуемых при создании кнопок. Он характеризуется возможностью создания их как изображения, чтобы иметь возможность экспортировать их в такие широко распространенные форматы, как PNG, JPG, ICO и GIF . Он также предлагает возможность встраивания их на нашу страницу или копирования кода CSS. Кнопки создаются легко, за несколько шагов и без необходимости писать какую-либо строку кода. Когда дело доходит до настройки нашей кнопки, мы можем изменить текст, шрифт, размер и цвет, которые мы собираемся использовать , а также стиль кнопки и цвета фона. Также у нас будет возможность наносить границы, тени и применять некоторые эффекты. Возможно, его внешний вид может быть менее интуитивным, чем другие варианты, хотя его использование можно изучить за несколько минут.
Da Button Factory предлагает все свои инструменты бесплатно, поэтому, если нам нужно создавать и настраивать кнопки, просто получить доступ к своему веб-сайту .
Генератор кнопок CSS3, простой и эффективный для настройки кнопок
На этой платформе мы можем создавать собственные настраиваемые кнопки CSS3 простым и эффективным способом. На этой странице есть несколько предварительно разработанных элементов, поэтому мы можем использовать их, если они совместимы с нашими потребностями, хотя мы также можем создавать свои собственные. Благодаря этому инструменту мы можем настроить как текст, так и фон, тень или другие аспекты нашей кнопки. После того, как наши дизайны созданы, страница предлагает нам CSS и HTML Коды , поэтому нам нужно будет только скопировать и вставить его на нашу веб-страницу. Чтобы создать нашу кнопку, мы будем использовать четыре панели управления, чтобы отрегулировать стиль нашей кнопки, а также границу, градиент фона, тень поля и текст и таким образом получить наилучшие результаты. Жалко, что он на английском языке, хотя это не должно быть большим препятствием и что он не включает возможность ввода значков на кнопки.
Если вы хотите использовать генератор кнопок CSS3 для создания кнопок, вы можете сделать это бесплатно, открыв их веб-сайт Честного ЗНАКа .
Генератор кнопок Bootstrap, настраивайте и добавляйте значки к вашим кнопкам
Благодаря этой онлайн-платформе мы сможем без труда создавать кнопки запуска, поскольку она будет отвечать за создание необходимого HTML-кода, поэтому нам нужно только скопировать и вставить его на наш веб-сайт. Таким образом, нам не нужно будет запоминать правильный синтаксис для создания кнопок, и мы сосредоточимся на выборе деталей и инструментов, которые он предлагает нам для настройки нашей кнопки. Среди его вариантов мы можем выберите от 4 размеров до 6 возможных цветов , а также тип кнопки, ее ширина и статус. В нем есть область, где вы можете предварительно просмотреть окончательный результат, а также возможность добавляем иконки к нашим кнопкам .
Использование Bootstrap Button Generator бесплатно, и нам нужно только получить доступ к своему веб-сайту для создания наших дизайнов.
Генератор кнопок CSS, совместимый со всеми стилями фреймворка
Эта веб-страница для создания кнопок отличается большой простотой, что не противоречит широким возможностям создания, с помощью которых мы можем быстро получить Кнопки CSS . На этой платформе мы можем создавать различные поля для создания наших дизайнов, с возможностью настройки размера, границы, шрифта, затенения и других разделов. Он также предлагает нам широкий выбор стилей кнопок, некоторые даже с 3D вид . С помощью этого генератора кнопок мы можем создавать разные стили для всех видов фреймворков , даже если мы хотим создать наш сайт полностью с нуля. Как и в предыдущем случае, страница на английском языке, но она не предлагает никаких особых сложностей и не предлагает возможности добавления значков внутри кнопок и возможности их экспорта в PNG.
Чтобы начать создавать наши кнопки с помощью генератора кнопок CSS бесплатно, просто введите свой сайт . Как только наша кнопка будет создана, нам нужно будет только скопировать и вставить код, который она предоставляет нам на нашей странице.
Генератор кнопок, простой и со множеством стилей создания
Эта платформа, с которой мы можем создать кнопки CSS , позволяет нам создавать наши творения с нуля или использовать некоторые из его различных предопределенных дизайнов, чтобы мы могли использовать то, что лучше всего соответствует нашим потребностям. В нем есть множество стилей для создания ярких кнопок, которые мы можем настроить по своему вкусу. У нас будут варианты изменить границу, текст, размер, тень поля и текст . Кроме того, у нас будет несколько вариантов цвета, возможность добавления прозрачности и градиент. По завершении нажмите Получить код, чтобы сгенерировать наш код, скопировать и вставить его на наш веб-сайт. К сожалению, у нас также нет возможности добавлять значки внутри кнопок, и нам придется довольствоваться только текстом.
Получайте удовольствие от создания кнопок CSS с помощью генератора кнопок. Это совершенно бесплатно, поэтому вам нужно только посетите веб-сайт .
Оптимизатор кнопок, помогает нам выбрать правильное место для кнопки
Эта веб-страница позволяет нам создавать кнопки, которые мы можем экспорт в PNG или мы можем получить соответствующий Код CSS копировать и вставлять на нашем сайте, основываясь на простых HTML-параметрах для их разработки. В отличие от других подобных веб-сайтов, здесь вы предоставите нам информацию, чтобы мы могли выбрать правильное место для размещения кнопки действия. Когда дело доходит до настройки кнопки, у вас есть большое разнообразие цветов выбирать из. Мы также можем выбрать шрифт текста, границы, размер и детали цветов. Кроме того, можно изменять тени текста и поля по своему вкусу.
Инструменты, входящие в состав Button Optimizer, совершенно бесплатны, поэтому, если вам нужно создать и настроить кнопки, попробуйте его зайти на их сайт .
ImageFu, быстро экспортируйте свои кнопки в PNG
Перед нами веб-страница, которая предлагает онлайн-инструменты для создания дизайна кнопок и экспортировать их в формат PNG быстро, а также позволяет включать несколько строк текста, с помощью которых можно настроить их интерьер. Он также имеет WYSIWYG для настройки текста на значке, а также формы и размера. Он также позволяет добавлять границы и тени. Мы можем создавать наши кнопки без предварительной регистрации и создаем столько значков, сколько захотим. Напротив, у вас есть возможность добавлять к ним только текст, но не иконки.
Выбор использования ImageFu может быть хорошим вариантом для создания наших кнопок бесплатно. Если вы хотите попробовать, вам просто нужно ввести его веб-сайт Честного ЗНАКа .
Генератор кода кнопки Twitter Bootstrap, самый простой
Эта страница отличается исключительной простотой создания кнопок, так как не имеет параметров настройки . Вот почему он предназначен для тех пользователей, которые хотят сделать простую кнопку без особой помпы. В нем есть инструменты для создания нашей кнопки в традиционных цветах, а также у нас будет возможность размещение иконок на созданных кнопках , что не слишком часто встречается на сайтах такого стиля. На странице есть возможность выбрать элемент управления кнопки, а также его размер и тип кнопки.
Без сомнения, Twitter Генератор кода кнопок Bootstrap — хороший вариант для создания ваших кнопок, если вы не слишком требовательны к его созданию или вам нравится идея поместить в него значок. Если да, не сомневайтесь и войти на их сайт и создавайте свои проекты бесплатно.
Дизайн кнопки для сайта: рекомендации веб-дизайнера
Разрабатывая дизайн сайта, лендинга или интерфейса нам приходится создавать множество различных элементов, одним из которых являются кнопки. Вроде это один из простейших элементов интерфейса но, к сожалению, при его разработке совершаются некоторые ошибки. В этой статье постараюсь дать рекомендации по устранению этих недочетов в дизайне кнопок для сайта.
Пропорции кнопок для сайта
Одна из наиболее частых ошибок в кнопках это нарушение пропорций отступов внутри кнопки от надписи. Необходимо чтобы отступы сверху и снизу до надписи были равны. Справа и слева расстояние также должно быть одинаковым.
Кроме этого стоит учесть, что отступы сверху и снизу кнопки не должны быть больше отступов слева и справа, но могут быть им равны. Отступы же слева и справа можно делать в два или три раза больше чем отступы сверху и снизу, но не больше.
Отступы сверху и снизу не должны быть больше размера кегля надписи более чем в два раза.
Не стоит также зажимать надпись, делая небольшие отступы. Во-первых, по такой кнопке на сайте будет неудобно кликать мышкой или пальцем на смартфоне. Во-вторых, тяжело читается текст на такой кнопке.
На мой взгляд, наиболее удачные пропорции:
- Надпись на кнопке, к примеру: 16px;
- Отступ сверху и снизу: 16px;
- Отступ справа и слева: 16px или по 32px.
Выравнивание текста в кнопке
Еще одна достаточно распространенная ошибка, это когда надпись выравнивается не по центру кнопки, а находится ближе к одной из ее сторон. Набросал пример, хоть и грубо конечно, зато думаю, будет понятно, что когда надпись не по центру кнопка смотрится небрежно.
Как выровнять надпись в кнопке по центру?
Для выравнивания надпись зажмите клавишу Shift и выделите два слоя в панели слоев (слой с надписью и слой с фоном). Далее выберите инструмент «Перемещение V» и на верхней панели нажмите по очереди две кнопки «Выравнивание центров по вертикали» и «Выравнивание центров по горизонтали».
Если у вас надпись на кнопке заглавными буквами то все будет отлично, но если первая буква заглавная, а остальные прописные то необходимо надпись отпустить на 1-2 пикселя вниз, проверьте линейкой. Также учтите, что если текст написан как блочный и у вас останется пустое место снизу, сверху или сбоку надпись выровняется не по центру.
Радиус скругления углов
Иногда встречаются кнопки с большим радиусом скругления у всех углов, кнопка в таком случае выглядит на мой взгляд не очень аккуратно. Лучше всего сделать радиус в 2-4px. по всем углам. Или как вариант сделать полностью скругленные углы. Пример показал ниже.
Также бывают и другие нюансы, например, плохое сочетание цвета фона кнопки и надписи. Что в свою очередь приводит к плохой читабельности.
Надеюсь, этот небольшой материал по созданию кнопок для сайта будет вам полезен.
как разместить 3 кнопки в нижней части веб-сайта?
Я смог поставить только одну кнопку, но теперь я хочу добавить еще 2 кнопки слева от первой.
Я попробовал, но все кнопки появились на той же позиции «bottom right», что и я использую blogger, поэтому я должен поместить код HTML и CSS на одну страницу.
#ul_top_hypers li {
display: inline;
position: fixed;
bottom: 0px;
right: 0px;
max-width: 35%;
max-height: 35%;
margin-bottom: 15px;
margin-left: 5px;
margin-right: 5px;
}<ul>
<li><a href="tel:01027884476"><img src="img 1" /></a></li>
<li><a href="https://m.me/baha2.IT"><img src="img 2" /></a></li>
<li><a href="https://wa.me/201027884476"><img src="img 3" /></a></li>
</ul>Это мой сайт, если это поможет: здесь .
javascript
html
css
blogger
Поделиться
Источник
Joker Begin
14 октября 2019 в 13:54
2 ответа
- Кнопки в нижней части UITableView
Я хочу создать кнопки в нижней части UITableView. Как на этой картинке (кнопки форматирования): http://i.stack.imgur.com/pFgWP.jpg Должен ли я Добавить кнопки внутри пользовательского UITableViewCell и использовать эту пользовательскую ячейку? Можно ли создать UIButton с таким стилем?
- Как я могу разместить две кнопки рядом с изображением в нижней части кнопки?
Как я могу разместить две кнопки рядом с изображением в нижней части кнопки? <LinearLayout android:layout_width=match_parent android:layout_height=wrap_content android:orientation=horizontal > <Button android:id=@+id/a_button android:layout_width=wrap_content android:layout_height=35dp…
0
Поскольку шаблон по умолчанию использовал FIXED позицию для этой кнопки, я предлагаю удалить FIXED позицию из li и получить ее вместо ul .
#ul_top_hypers{
position: fixed;
bottom: 0px;
right: 0px;
}
#ul_top_hypers li{
display: inline;
max-width:35%;
max-height:35%;
margin-bottom:15px;
margin-left:5px;
margin-right:5px;
}<ul>
<li><a href="tel:01027884476"> <img src="img 1"> </a></li>
<li><a href="https://m.me/baha2.IT"> <img src="img 2"> </a></li>
<li><a href="https://wa.me/201027884476"> <img src="img 3"> </a></li>
</ul>Поделиться
Ali Sheikhpour
14 октября 2019 в 13:58
0
Каждый раз помните о том, что мы хотим делать и чего нам не хватает. Проверьте свой код, что «ul»-это наш основной набор, а «li»-наше подмножество. Когда вы зафиксируете позицию для подмножества, оно расположит все подмножество в одной позиции, потому что их позиция right/left/bottom/top одинакова. Таким образом, мы должны зафиксировать положение на нашей основной комплект не подмножество.
Код обновления будет похож на этот.
#ul_top_hypers { position: fixed; bottom: 0px; right: 0px; } #ul_top_hypers li { display: inline; max-width: 35%; max-height: 35%; margin-bottom: 15px; margin-left: 5px; margin-right: 5px; }<ul> <li><a href="tel:01027884476"><img src="img 1" /></a></li> <li><a href="https://m.me/baha2.IT"><img src="img 2" /></a></li> <li><a href="https://wa.me/201027884476"><img src="img 3" /></a></li> </ul>
Поделиться
Sayedur Rahman14 октября 2019 в 14:27
Похожие вопросы:
Выровняйте кнопки в нижней части макета
я хочу выровнять две кнопки в нижней части экрана следующим образом. я попробовал xml, данный в этом подобном вопросе , но нет luck.how, чтобы сделать это ? подобный этому — это должно быть без…
Пространство в нижней части сайта
ссылка: [удалено автором] У меня есть место в нижней части сайта (~15px). Firebug и инструменты разработчика Chrome показывают, что там ничего нет… Какой элемент вызывает это? Обновление: я…
Поместите кнопки в нижней части экрана с фоном в BlackBerry
Я работал над тем, чтобы получить фоновое изображение в моем приложении, а также расположить четыре кнопки в нижней части экрана к изображению. Ниже я показываю код, который я использовал для его…
Кнопки в нижней части UITableView
Я хочу создать кнопки в нижней части UITableView. Как на этой картинке (кнопки форматирования): http://i.stack.imgur.com/pFgWP.jpg Должен ли я Добавить кнопки внутри пользовательского…
Как я могу разместить две кнопки рядом с изображением в нижней части кнопки?
Как я могу разместить две кнопки рядом с изображением в нижней части кнопки? <LinearLayout android:layout_width=match_parent android:layout_height=wrap_content android:orientation=horizontal >…
Как выровнять изображения в нижней части сайта
Я хочу выровнять изображения, как показано в ссылке выровненные изображения в нижней части веб-сайта. Я просто имею в виду, что хочу разместить много обложек dvd-дисков с фильмами в нижней части…
Как разместить текст в нижней части изображения?
Как разместить текст над изображением так, чтобы он проходил по нижней части изображения? т.е. <div class=i_have_an_image> <h3>I appear on top of the image, but aligned along the…
Swift 3: получить расстояние от кнопки до нижней части экрана
Я хочу получить расстояние от кнопки до нижней части экрана в Swift 3. Я вижу правильное значение в раскадровке, когда смотрю на расстояние (клавиша alt), но, к сожалению, я не могу вычислить его…
Размещение баннера в нижней части веб-сайта, подталкивающего все элементы вверх
Я пытаюсь добавить компонент JavaScript, который должен быть добавлен и работать на различных сайтах. Мой код добавляет прямоугольник в нижней части сайта, используя div с position:fixed. На…
flutter,как разместить кнопку в нижней части изображения?
Я создаю кнопку над изображением и хочу, чтобы кнопка находилась в нижней части изображения Widget buildBody() { return Stack( children: <Widget> [ Image( image: new…
Применение прозрачных кнопок в дизайнах web сайтов
Современный веб-дизайн сконцентрирован на контенте, интерфейс-удобствах – с акцентом на достижение целей. Контурный дизайн кнопок сейчас в моде. По внешнему виду это полые внутри, кликабельные элементы без заливки, т.е. прозрачные (иногда полупрозрачные) кнопки. Прозрачные кнопки (ghost buttons) ожидаемо будут в трендах последующие года. Популярностью кнопки-призраки обязаны плоскому дизайну и минималистичной направленности веба. Активное применение призрачных кнопок началось с популяризацией фул-скрин бэкграундов и полупрозрачных фонов. С позиции веб-разработки, такой растущий интерес объяснить можно расширением возможностей HTML5/ CSS3 для их создания. Неизбитый тренд привлекает внимание посетителей, а эффект новизны можно использовать для реализации самых оригинальных идей.
Прозрачные кнопки в веб-дизайне. Особенности
Призрачные кнопки легко вписывается в различные интерфейсы — без особых проблем с контрастом по отношению к фону, графическим объектам, цветам палитры и др. элементам. Применяя их в дизайне, важно:
- Грамотно подобрать бэкграунды (фото, текстуры, паттерны…) и максимально использовать их ключевые преимущества
- Добиться заметности кнопок: необходим цветовой контраст & эффект, который обозначит кликабельность
- Удобно расположить, распределив пространство экрана и структурировав информацию
- Придать кнопкам эстетичный вид
- Позаботится о хорошей читабельности подписей
С целью повышения заметности, контурные кнопки делают большего размера или размещают «в центре внимания». Аналогично укрупнению контент-блоков в минимализме, это можно считать частью тенденции к простоте, с чистым дизайном и удобством пользования (UX). Для надписей на кнопках хорошо подходят легкие начертания какого-либо шрифта из серии Sans serif. Прозрачная кнопка, не замечаемая пользователями, может ухудшать UX и юзабилити. Надо сразу признать: кнопки-призраки подойдут не каждому сайту. Но если вы решили удивить своих посетителей модным дизайном — поаккуратнее с выбором фото-бэкграунда /фоновой картинки /полупрозрачности окна-врезки (плашки) и цвета контура или подписи призрачной кнопки. Вспомните регулировку экрана: от монохромного (черно-белого) – до насыщенного цветного. Удачное цветосочетание с контурными веб-элементами складывается из этих же контрастов: светлого с темным, насыщенного цветом с монохромным.
Публика желает, чтобы ее удивляли чем-то привычным. В контексте web дизайна это означает – не забывать о существовании рамок «привычного» пользователю
Пока новомодный внешний стиль не всем привычен, в большинстве случаев, не лишним будут «напоминание о нажимабельности» хорошо вписавшегося в дизайн прозрачного элемента. Например, интерактивным микровзаимодействием на основе изменений цвета, размеров, формы; эффектами при заливке (плавность, направленность, флип-трансформации и т.д.), обводкой контура, анимацией текста или иконки на кнопке.
Alemans Design
Пример продуманного дизайна и умелого применения современных трендов на сайте-портфолио. При оформлении страниц с призрачными кнопками оставлено место для креатива (видео, иллюстрации и т.д.). Очевидно, что контурные кнопки итальянский дизайнер проектировал, руководствуясь идеей создания внешнего стиля. В разделе дизайнерского портфолио, они активно участвуют в создании равновесия и гармонии, в том числе посредством интерактивных микровзаимодействий. Hover-эффект с появлением цветных полупрозрачных фонов и автоматически применяемый для центрального блока галереи, обеспечивает общий баланс композиции, цвета и восприятия контента. Цветовой фильтр позволяет дизайнеру красиво представить различные работы.
Roidna
Пример современного дизайна сайта, использующего технологии: HTML5, CSS3, Responsive Design; популярные тренды: плоский дизайн, Fullscreen, красивая графика с элементами геометрии. Интуитивно понятный интерфейс с несколькими меню и грамотной логической структурой. Система навигации позволяет начать путешествие по сайту с контурной кнопки и пользоваться кнопками-стрелками клавиатуры. Применение тренда для адаптивного сайта дало очевидные преимущества – чистый дизайн с минимумом цветов и удобными для сенсорного экрана кнопками.
We are Heckford
Иногда для поддержания чистоты дизайна, гармонии и баланса лучше лишний раз не использовать цвета, пусть даже существующей палитры. Речь о модных кнопках: когда нет проблем с их заметностью (пр. белый цвет на зеленом фоне), то совсем не обязательна заливка со сменой цвета контура/надписи. Вообще, контраст можно поддерживать не только цветом. А для обозначения кликабельности кнопки, легкий визуальный эффект тут вполне уместен.
Iconpr
При таком смешении цветов фона, желтый оттенок «оживляет» яркие разноцветные детали первого экрана. Это позволяет акцентировать внимание посетителя на наиболее важном, а колоритное изображение слайдера внушает оптимизм и радость. Разноцветная мишура, мелкие элементы и крошки, приходящие в движение с началом параллакс-скроллинга, не так сильно уменьшают заметность контура кнопки на бэкграунде с сочными оттенками. Также, хороший контраст для призрачной кнопки может создавать ландшафтное окружение. Здесь для элементов белого цвета, применяется эффект плавного уменьшения яркости (при прокрутке).
Cher Ami
Даже самые утонченные эффекты могут привлекать пользовательское внимание. Супер-минимализм сайта подчеркнут дизайном призрачных кнопок с эффектами прорисовки контура (при загрузке главной страницы) и сворачивания в линию (по наведению).
Campus Bubble
Персидский зелёный (persian green) и светло-апельсиновый – основные цвета палитры начальной страницы, используемые для фонового видео с контурными кнопками. Очень удачное цветосочетание – как для привлечения внимания, так и для создания дружелюбной атмосферы. Желто-оранжевые янтарные оттенки, побуждая к активности, мобилизуют на выполнение задачи – помогают сконцентрироваться, запомнить материал, способствует творческой работе и т.д. Любой оттенок бирюзового составляют зеленый и голубой – цвета, которые считаются улучшающими умственную деятельность. Campus Bubble — сайт разработчика эффективных технологий обучения студентов и для дизайна подходят такие стимулирующие и психологические тенденции цветов.
Phoenix-M
С прозрачным дизайном кнопок на главной, любое изменение масштаба страницы не вредит положительному отображению интерактивного анимационного эффекта. А эффект их плавной заливки при наведении курсора и потере фокуса, красиво сочетается с 3D ротацией объекта.
Контурные элементы в дизайне веб-страниц
Постоянно развивающиеся мобильные технологии диктуют для всего веб-дизайн сообщества свои правила. Пользователи тачскрин устройств, сталкиваясь с проблемами, напоминают о своих пожеланиях к дизайну и качеству сайтов. Так, появилась необходимость приспосабливать веб-интерфейсы под Retina экраны. Стиль дизайна с контурной графикой – это, всего лишь попытка адаптироваться к меняющимся условиям. Хотите насытить сайт микроэлементами и видите, как они теряются среди прочего содержимого? Дополнительные грани контуров (при достаточном контрасте) сделают их заметнее. Простота обнаружения четкой графики, на подсознательном уровне, снимает различные тревоги неуверенного пользователя.
Marqana
Интерактивные эффекты кнопок и ультратонких иконок на фоне видео. Это сразу привлекает внимание. Рубленый шрифт хорош для «пестрых» бэкграундов, с межстрочным интервалом легче воспринимается фраза, а выделение цветом задает визуальную иерархию по Z- принципу. Целевая страница точно передает суть деятельности фирмы, тут же предлагая связаться со специалистом (GET QUOTE).
Theme Fuse
Шикарный дизайн первого экрана целевой страницы с зелено-оранжевыми контрастами при подсветке иконок выпадающего меню. Прозрачная кнопка на шаг приближает к продажам. Ряд контурных иконок (фильтр каталога шаблонов) нужен для второго шага, с одновременным микроперемещением вниз. И можно считать, что красивый текстурный фон выполнил свою основную задачу — портфолио-раздел теперь запомнится посетителю.
Themes Kingdom
Веб-сайт с портфолио WordPress шаблонов. Плоский дизайн с сочными цветами, призрачными кнопками и элементами контурной графики.
C. A. Pauwels
Для эффектного дизайна с призрачными кнопками и контурной графикой из ультратонких линий, использованы действительно контрастные фото-бэкграунды и яркие, насыщенные цвета фонов.
Rowing Dock
Известно, что продающий текст надо иллюстрировать. Благодаря тематичным фотографиям слайдера, контурным рисункам и надписи на кнопке «VIEW PRICING DETAILS» — сразу становится понятен смысл предлагаемого сервиса. А необычайная выразительность фотоснимков и интерактивные анимационные эффекты графических элементов, создают впечатление реальности.
Агентство «нового поколения» не упускает свой шанс произвести впечатление на потенциального клиента с помощью яркого и выразительного дизайна. Прозрачный дизайн для кнопок и других элементов управления / навигации, выбран не случайно. Контурная графика выглядит достойно при самых различных цветовых вариациях бэкграунда, а геометричость фона делает ее еще заметнее.
Evolve Wealth
Призрачные кнопки на сайте бренда, продукта или сервиса при достаточном свободном пространстве выглядят стильно и современно. Многие финансовые и бизнес сайты не смогли бы похвастаться такой легкостью дизайна, которую имеет Evolve Wealth.
Rays Restaurants
Сайт ресторанной тематики, демонстрируя элегантность интерьеров своих кафе, сам должен быть не менее стильным и подчеркивать имидж компании. В дизайне используются фоновые фото с эффектом осветления. Прозрачные кнопки и навигационные элементы не врезаются в детали изображения и не перетягивают внимание на себя, а их легкие интерактивные эффекты отлично дополняют друг друга.
The Cooking Academy
При нескольких видах кнопок в дизайне – «призрачные» могут выполнять второстепенные действия: перемещать по логическим областям страницы или эффектно переворачивать контент-блоки (Vertical Flip).
World Backup Day
На сайте компании «Всемирный День Бэкапа», проводится активная агитация за резервное копирование. Устрашающую статистику потерь визуально подкрепляет анимация контурных изображений файлов с их исчезновениями. Не менее символичен анимационный эффект всепоглощающего вихря из файлов (при загрузке страницы).
LITTLE FLYERS
Уменьшающийся с прокруткой липкий плавающий header, плавающий заголовок с кнопками в одном блоке… Контурные элементы (иконки, кнопки) вписываются в эту концепцию экономии места на сайте. Плавная заливка ghost-кнопок компенсирует их призрачную малозаметность. Эффект не только для красоты и контраста — реализуется схема Z-паттерна (Z принцип быстрого просмотра) с максимальным привлечением внимания к кнопке с призывом к действию.
Креативные дизайнерские решения
Раньше постоянно среди веб-мастеров звучала мысль: не хочется, лишний раз, пачкать дизайн сайта кнопками. Но ситуация меняется и сегодня этому тренду особенно рады приверженцы чистоты, минимализма и креатива. В арсенале возможностей, у дизайнера проекта с контурными кнопками могут быть:
- Ретушь фотографий с желаемым оттенком или любые методы коррекции – вроде тонирования цветом
- Различные виды обработки и стилизации изображений с применением визуальных эффектов — вроде размытия по краям или мягкого боке (bokeh)
- Дизайн самих кнопок можно разнообразить легкой анимацией или с помощью интерактивных микровзаимодействий
Для бэкграунда обычно используются: слой 50% -го затемнения общего фона, абстрактный / естественный пейзаж или фото обстановки, классический темный стилизованный фон, сочные цвета и насыщенные оттенки (Flat дизайн), текстуры. Можно комбинировать изображения с видео, различным образом изменять внешний вид кнопки, а эффект анимации применять, как при наведении, так и с потерей фокуса курсора мыши и т.д.
Prosto Super
Сайту-портфолио, представляющему проекты вроде мобильного приложения для Газпрома, необходимы: серьезный подход и нотка креатива. Динамичный и эффектный дизайн начинается с анимации предзагрузки страницы захвата (и др. страниц), выполненной в темных тонах с акцентным жёлто зеленым цветом. Дизайнер сайта «Просто супер» для привлечения внимания использовал: красивый прелоадер, живую и динамичную картинку с переходом к брендовой видео-рекламе, анимированные призрачные кнопки призыва к действию. Такой лендинг эффективен для крупных компаний, рекламирующих отдельные проекты.
Nizuka
Всем своим видом, дизайнерское портфолио выражает воплощение элегантности, стиля и красоты. Для этого использованы плавные анимационные эффекты: для элементов управления слайдером (стрелки), подчеркивания пунктов меню, обводка контура кнопок. Затемнения и наложение цвета нужны для более красочного представления web-проектов портфолио, а белому тексту с прозрачными кнопками такой фон дает необходимый контраст.
La pierre qui tourne
Отличительной чертой этого оригинального дизайна является еще и плавные эффекты при наведении: горизонтальные перемещения текста заголовков, анимационное подчеркивание пунктов меню/ заголовков, заливка цветом контурных кнопок и кнопок-миниатюр (с изображениями персонажей).
FNSZ
Ультратонкие прозрачные кнопки с эффектом исчезновения контура и различимые лишь по осветленному фону. На размытом фото-бэграунде, кнопка с таким дизайном, действительно напоминает призрак.
Harbr
В этом дизайне практикуется отход от привычных стандартов. Знакомая конструкция рубрик в новом виде: пространство экрана разделено пополам – слева анонсы постов, справа изображения-превью в натуральную величину (вместо миниатюр). Кликабельность обозначена контурной кнопкой, с эффектом плавного уменьшения яркости цвета при наведении.
Visage
Изумрудный со всеми его оттенками особенно хорош в сочетаниях с белым цветом, при этом освежающие свойства цвета отлично проявляют себя и на черном фоне. Такое же, стимулирующее воздействие может оказывать только оранжевый. В оформлении, лаконичного по виду сайта visage.co, использованы тона светлого изумрудного и насыщенного оранжевого. Эмоционально, такой дизайн легко воспринимается, вызывает интерес и вдохновляет на решение поставленных целей.
Urban Influence
Элегантный и утонченный вид создается каждым элементом сайта, будь то логотип, формы полей или рисуемые фигуры в анимационных эффектах. Прозрачным дизайном кнопок, дизайнер всего лишь поддержал общую идею. Оригинальное решение: эффектное осветление фона с видео при наведении курсора мыши на призрачную кнопку.
Сайт французского дизайнера интерьеров имеет лаконичный и компактный вид. Для подобного рода веб-ресурсов крайне важна вовлеченность их посетителей, что требует грамотного оформления первого экрана. В дизайне использованы: брендированный прелоадер загрузки, широкоформатные фотографии с затемнением общего фона по краям, полупрозрачные плашки для заголовков, ненавязчивые эффекты для пунктов меню (при наведении) и для призрачной кнопки (при потере фокуса курсором).
Space Junk
Там, где разместить призрачную кнопку не позволяет фон, в дизайн добавлены полупрозрачные окна-врезки (плашки). Общий стиль создается тонкими линиями, которые также используются для контуров кнопок и эффекта подчеркивания их подписей.
Braastad
Жирный шрифт подписи, стрелка и изящный интерактивный эффект помогают призрачной кнопке не затеряться на динамичной картинке фонового видео.
Adam Hartwig
Сайт веб-дизайнера и разработчика из Кембриджа, специализирующегося на создании интерактивных эффектов для планшетов. Это оригинальное дизайнерское портфолио, щедро дополнено интерактивом, анимацией и красивыми иллюстрациями. Внешний вид эффектов и прозрачность кнопки образуют стильный дизайн главной страницы.
Cappen
У креативного агентсва новый дизайн сайта на HTML5 с великолепной графикой и в духе современных трендов: плоский стиль, адаптивность (хорошо оптимизирован под сенсорные экраны), полноэкранные фото. Легкие анимационные и интерактивные эффекты начинаются уже со страницы предзагрузки. У каждой страницы-портфолио есть свой уникальный стильный бекграунд с красивыми призрачными кнопками на его фоне.
Призрачные CTA-кнопки (кнопки призыва к действию)
Несмотря на возражения скептиков, тренд начинает проникать в онлайн-торговлю. Контурные кнопки могут стать эффективным элементом в информационной архитектуре продающего сайта. Подходящий контекст применения: главная страница, первый экран и свободное пространство без иных кнопок. Но заменить ими все остальные кнопки – не самая лучшая идея, да и не всегда требуется их «изящность» и «элегантность». Ghost Buttons нужно превратить в конкурентное преимущество своего бренда, например:
- Кнопки-призраки с призывами к действию прямым обращением («Заказать», «Отложить») способны оказывать положительное влияние на конверсию и продажи
- Легко оформлять сайт с кнопками нужной длины, улучшая пользовательский интерфейс, за счёт коротких информативных фраз-заголовков — чётко обозначающих контекст выполняемых действий
- Даже с небольшим укрупнением кнопок, дизайн сайта может стать более эргономичным
- Выгодно использовать легкость зонирования пространства на странице для уменьшения времени обнаружения кнопки-призыва
- Отвести пользовательское внимание на окружение, подчеркивающее стильность продукта/товара — в некоторых случаях, это может быть оправдано
- Задействовать потенциал интерактивных эффектов. Выбрать тот, который будет стимулировать конверсию
Помимо дизайна самих кнопок, важно грамотно использовать возможности фоновых изображений. Бэкграунд тоже помогает направить взгляд пользователя к цели. С помощью фона сайта можно:
- Подчеркнуть важность отдельных его элементов
- Подбором площади использования, избежать конфликта с остальными элементами
- Визуально расширить сайт и разделить его содержимое на логические разделы
Полноэкранное фоновое видео – фактор, повышающий эффективность использования контурных кнопок с призывом к действию
Storq
В этом e-commerce дизайне, призрачные СТА-кнопки хорошо вписываются в его минималистичный стиль. Смена надписей на призрачной кнопке: «Выберите размер», «Добавить в корзину», «Добавлено» извещает пользователя о выполнении желаемого действия.
Suit Supply
Suit Supply — онлайн ритейлер мужских костюмов. Его адаптивный дизайн с минималистичной разметкой, в сочетании с высококачественными фотографиями, позволяют элегантно представить товар. Ради удобства просмотра на устройствах с меньшими экранами убираются или минимизируются продуктовые фильтры. Эффектная главная страница с призрачными кнопками, промо-видео в лендингах, коллекции и лукбуки листаемые курсором стимулируют покупательский интерес.
Eye Heart World
В черно-белой палитре, оранжевый цвет служит маркером визуального разделения элементов, разграничения информационных разделов, разделения блоков страницы надвое и контрастного окрашивания CTA-кнопок. Во вторичной навигации ярким плоским цветом выделяются активные элементы:
- НotSpot (активные точки)
- Сдвоенные кнопки листания вперед / назад
- Контурные кнопки с эффектом 100%-й заливки
Выручка от продаж недорогих товаров и сумок идет на благотворительность. Цветовое решение уместно, т.к. оранжевый не является «символом роскоши» и стимулирует к активности, а призыв CTA – к безотлагательности действия.
Misha Nonoo
Онлайн-магазину, продающему горстку вещей, вряд ли нужны тяжелая графика и расширенный функционал. Минималистичный стиль для сайта магазина стильной одежды, это наиболее подходящее решение в этом случае. В дизайне с тонкими линиями призрачные кнопки выглядят естественно и вполне уместны для главной, лукбука или представления коллекций.
Baxter of California
Baxter of California, это пример современного адаптивного интернет-магазина с чистым и минималистичным Flat дизайном. Оптимизированный для сенсорного ввода пользовательский интерфейc начинается с уникального меню навигации.
Разделы представлены крупными изображениями товара, привлекая внимание и упрощая процесс его подбора. При прокрутке и наведении они заменяются на не менее заметные контурные кнопки с мини-описаниями. Хороший минимал-стиль, с крупными подзаголовками и кнопками-призраками, выражен в дизайне каждой страницы — будь то карточка товара, процесс его оформления или даже 404-я ошибка.
Humanz Studioz
Команда небольшой веб-студии, предлагает бесплатно воспользоваться своими разработками. Через содержание полноэкранных изображений и фотографий с эффектом размытия, они передают свой позитив и открытость. Лаконичный дизайн вполне соответствует этому настрою. Округлые контурные кнопки сайта удачно подходят для размещения достаточно длинных СТА призывов. Их контрастный белый цвет позволяет поиграть с градиентами фона, а сочно-зеленая заливка уже наверняка сделает примечательными.
Kommadrei
Дизайнер, доказывая эффективность плоского стиля, применяет его на своем продающем сайте. К чему сложные трёхмерные иконки с трудностями их быстрого восприятия, когда нужные функции могут выполнять простые изображения, похожие на иконки. Красивые контурные кнопки — еще одна примечательная особенность этого небольшого продающего сайта-портфолио.
Enjoy Aiia
Пример удобного интерфейса и красивого дизайна сайта на HTML5, ориентированного на продвижение своего эксклюзивного товара. Призрачные кнопки с функционалом GET QUOTE (оформление заявки) переносят пользователя к полям ввода.
Isadora Design
У креативного веб агентства шикарный сайт в стиле Flat, с иллюстрированными анимациями на страницах и крутым прелоадером их загрузки. Эффектные призрачные кнопки используются на всех этапах конверсионного пути, подчеркивая весомость коммерческого предложения.
В заключение
Визуально освобождая пространство, призрачные кнопки не только способствуют лучшему восприятию информации, но и создают условия для расширения дизайнерского репертуара. Анимационные возможности контурных элементов это вообще большое поле для приложения фантазии.
Укрупнения, контраст и красивый эффект подойдут для кнопки-призыва, а c ненавязчивыми прозрачными кнопками в стиле «Minimal» можно улучшать пользовательский интерфейс. Например, реализуя перемещение на другой экран или открывая более «щедрые» контент-описания на странице. Применение призрачных кнопок на сайте лучше планировать заранее с тем, чтобы гарантированно получить рабочий дизайн и хороший вид.
Строим сайт вокруг кнопки
Есть люди, согласные на всё, лишь бы на их сайте нажимали единственную кнопку. Их сайт нужно строить вокруг главной кнопки.
Главная кнопка
Справедливый вопрос: что это за кнопка такая? И почему она важна для клиентов?
Представьте сайт кредитной организации. Директору от сайта нужны заявки на кредит. Менеджеры успешно превращают заявки в выданные кредиты. Благополучие кредитной организации зависит от количества клиентов, значит компании нужно всеми силами увеличивать количество заявок с сайта. Теперь понятно, насколько кнопка заявки на сайте важна для руководителя?
Все компоненты сайта, включая дизайн и эргономику, должны работать на главную кнопку.
Эта кнопка объясняет затраты на сайт: компания инвестировала в кнопку и в то, что люди будут её нажимать. Такая точка зрения переворачивает роль веб-дизайна с ног на голову. Посудите сами: важен ли владельцу внешний вид сайта, интересно ли ему победить в конкурсе выдающихся сайтов, если он всё поставил на кнопку? Мой ответ: нет. Кнопка как козырной туз — кроет всё, подчиняет себе остальные аспекты. Получается, что все компоненты сайта, включая дизайн и эргономику, должны работать на главную кнопку.
Много ли компаний нуждаются в кнопке? Очень и очень много. Так много, что странно видеть интернет в том виде, какой он сейчас. Большинству компаний нужно строить сайт вокруг кнопки, а не заниматься изобразительным искусством.
Без задачи нет кнопки
Какой бы аспект сайтостроения мы ни затрагивали, постоянно возвращаемся к проблематике задач. Базисом сайта выступает только задача сайта и ничто иное. У клиента всегда есть цели, которые он стремится достичь. Даже если клиент отрицает их наличие, они всё равно существуют. Люди ничего не делают без причины. Кнопка на сайте появится только если в техническом задании сформулирована функция кнопки. Вроде бы просто и логично, но на практике у главной кнопки больше причин не быть на сайте, чем быть. Я считаю, что корень этой проблемы в увлечении рисованием. Веб-дизайнеры зациклены на рисовании, а клиентам нравятся яркие картинки; какие уж тут кнопки…
Делать сайт не сформулировав его задач — как строить дом без плана.
Правильный мотив для веб-дизайнера — помочь клиенту в достижении его целей. Не сделать самый красивый сайт, не переубедить, не запудрить мозги. А постараться наилучшим образом решить бизнес-задачу. Почему же тогда новые сайты так редко бывают полезными для заказчиков? Потому что клиенты неохотно озвучивают истинные мотивы, а веб-студии не ищут лишнюю работу. Один постеснялся, другой поленился: освоили бюджет и разбежались. Когда клиент формулирует задачу и настаивает на её выполнении, у разработчиков нет другого выхода, как только дать клиенту то, что он требует.
Делать сайт не учитывая задач — это как строить дом без плана. Нельзя делать без понимания что делаешь. Дело не в том, что сайт получится плохой. А в том, что он получится бесполезный. Затратный и милый глазу — победитель Рейтинга Рунета, но абсолютно бесполезный для заказчика. Существует заблуждение, что красиво нарисованный и хорошо сделанный сайт «продаёт» сам по себе. А ещё существует заблуждение, что сайты должны быть необычными. И первое, и второе — мифы.
Сайт с кнопкой
Все вы прекрасно знаете самый популярный сайт с кнопкой. Он делает своё дело, понятен любому и им пользуются миллиарды человек. Это Google. На google.com есть поле для ввода запроса и кнопка. Главная кнопка Google так здорово работает, что самая богатая корпорация не решается её переделывать.
Рядовой корпоративный сайт не сделать таким лаконичным как Google. Трудно представить сайт компании без описания услуг, рассказа о компании, блога компетенции. По гугловски обойтись одной кнопкой на белом экране не получится. Да и не надо: крайности нам ни к чему. Я не призываю отдать на заклание индивидуальный дизайн, многостраничность и всё остальное так любимое клиентами. Я предлагаю строить сайт вокруг главной кнопки, если таковая подразумевается.
Сайт вокруг кнопки — это сайт, задача которого побудить посетителей кнопку нажать.
Сайт вокруг кнопки — это сайт, задача которого побудить посетителей кнопку нажать. Простая на первый взгляд задача, которая достигается кропотливым умственным трудом. Вы глубоко заблуждаетесь, если считаете внешне простые сайты простыми в изготовлении. Самое трудное в нашей профессии делать сайты, где с первого взгляда понятно что делать. За кажущейся простотой скрывается настоящий дизайн, это слово произошло от английского design — проектировать, чертить, задумать. Дизайн означает вовсе не рисование.
Дизайн сайта с кнопкой, как абсолюта лаконичности и информативности, потребует многократно больше усилий, чем рисование wow-макетов. Почти всё, что вызывает слюноотделение на Behance, нежизнеспособно на практике. Если приглядеться к большинству зрелищных макетов Behance, можно обнаружить вопиющие эргономические недочёты. Но кому какое дело до этого, когда картинки такие красивые! Главная кнопка этого не простит, а значит, веб-студии придётся в 5 раз больше подумать как завязать структурные эталоны с модным визуалом.
Политика ReConcept
Нам, как и любой думающей веб-студии, приходится преодолевать сопротивление среды. Когда клиент настаивает на бессмысленном зрелищном сайте, не ставит иных задач, он получит свою «конфету». Но настоящими клиентами мы считаем людей, думающих о сайте как об инвестиции. Мы предпочитаем работать на результат. А результат можно оценить только поставив конкретную задачу.
Сайты вокруг кнопки решают бизнес-задачи. Эффективность такого сайта осязаема, конверсия поддаётся оценке, а результативность модернизируема. Красивые картинки умеют делать многие веб-студии. Беда для любителей зрелищ в том, что выживают жизнеспособные продукты и сайт с главной кнопкой — один из фаворитов.
Вам нужен сайт, который делает заявки? Напишите нам!
Принципы правильного создания кнопок для сайта
От автора: сегодня существуют тысячи способов проектирования и создания кнопок для сайта, и вам нужно потратить совсем немного времени на просмотр работ на 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!
Смотреть видео
Дизайн кнопок веб-сайта: ваше руководство по CSS
Каждый аспект вашего веб-сайта имеет значение. Мы рассмотрели некоторые из самых важных моментов, от создания форм и дизайна заголовков до показателей трафика, которые отслеживают, кто направляется на ваш сайт, как долго они остаются и возвращаются ли они. Детали. Выбор цвета и компоновка имеет значение. Простота и обтекаемый дизайн — приоритет. Но есть также компонент, на который часто упускают из виду, который не выделяется, когда все сделано хорошо, но может отвлечь внимание, когда он не попадает в цель: кнопки.Когда пользователи формируют общее впечатление о вашем веб-сайте через 50 миллисекунд после того, как они приходят, вы не можете позволить себе иметь что-то неуместное, включая случайную кнопку.
Кнопки на вашем сайте — это больше, чем просто витрина; они являются важными элементами дизайна, которые помогают рассказать историю вашего бренда и направить посетителей ближе к вашим продуктам или услугам.
Хотите узнать о дизайне кнопок на веб-сайте? Не знаете, как (или где) начать? Мы вас прикрыли.
Хорошо vs.Плохой дизайн кнопок
Не существует абсолютно правильного или неправильного способа создать кнопку для веб-сайта. Опытные разработчики знают, что для успешного достижения цели можно нарушить практически любое правило. Однако есть несколько передовых методов, которые помогут вам разрабатывать кнопки без излишних проб и ошибок.
Ниже мы описали несколько хороших и плохих приемов дизайна кнопок, чтобы дать вам ускоренный курс по созданию привлекательных кнопок, которые понравятся профессионалам.
Хороший дизайн кнопок
- Ясно: Текст и цвета кнопок должны быть четкими, четкими и понятными.Тенденции веб-дизайна за последние несколько лет склонились к дизайну плоских кнопок, так что это безопасный стиль, который стоит попробовать. Избегайте сложных, причудливых кнопок, которые могут отвлекать читателей.
- Краткий: Минимальный текст на кнопках — идеальный вариант. Одно слово — это цель, самое большее — два слова. Любое другое становится громоздким и запутанным. Если у вас возникли проблемы с сокращением текста кнопки, сделайте шаг назад и спросите себя: «Что я хочу, чтобы читатель сделал на странице прямо сейчас?» Первое слово, которое приходит на ум, вероятно, будет глаголом.После этого добавьте наречие времени для простого и лаконичного текста кнопки.
- Контекстный: Куда ведет кнопка? Что оно делает? Запутанные кнопки не нажимаются. Если у вас есть кнопка с надписью «купить сейчас», она должна вести на страницу, где пользователь может ввести данные своей карты, а не на другую страницу, описывающую продукт, который они хотят купить.
Плохой дизайн кнопки
- Не отвечает: В веб-дизайне мобильные возможности доминируют.Скорее всего, вы будете создавать кнопки на настольном компьютере, поэтому вам придется вручную дважды проверять, правильно ли отображаются кнопки и на мобильных устройствах. Если вы не сделаете этого шага, ваши кнопки могут быть слишком большими или слишком маленькими для экрана мобильного устройства, что может существенно повлиять на ваш рейтинг кликов. К счастью, у большинства инструментов CMS есть кнопка переключения, которая дает вам предварительный просмотр элементов вашей веб-страницы на нескольких типах экранов, чтобы вы могли соответствующим образом настроить дизайн кнопок.
- Без цвета: Яркие жирные кнопки отлично подходят для CTA, потому что они направляют взгляд посетителя к ключевым элементам на странице.Помните, что ваша веб-страница — это путешествие, и кнопки, которые вы размещаете на ней, должны действовать как карта. Без полноцветных кнопок вашим читателям может быть сложно пройти по странице и конвертировать.
- Неуместны: Неуместные кнопки также могут сбить с толку посетителя. Если ваши кнопки не расположены в области, которая заставляет читателя узнать больше или совершить покупку, одинокая кнопка в середине абзаца не поможет, а может усугубить ситуацию. Делайте вещи проще, добавляя кнопки только там, где вам нужно, чтобы посетитель предпринял действия.Вот некоторые примеры этих областей: рядом с разделом функций и преимуществ, в заголовке страницы и внизу страницы.
Идеи дизайна кнопок
Прежде чем вы начнете создавать собственную кнопку, стоит взглянуть на несколько бесплатных шаблонов, чтобы понять, что там есть, что подходит вашему стилю и что больше всего подходит для вашего веб-сайта.
Vecteezy
Эти бесплатные кнопки просты, понятны и ярко окрашены, что позволяет пользователям легко находить то, что они ищут, и нажимать на них.
Дизайнер также добавил маленькие значки для улучшения контекста — например, кнопка «Воспроизвести видео» имеет небольшой символ «Воспроизвести», а кнопка поиска имеет увеличительное стекло.
Freepik
Эти кнопки от Freepik немного более креативны, но определенно привлекают внимание. Использование двухцветных цветов помогает привлечь внимание пользователей, а добавление значков позволяет посетителям легко найти то, что они ищут.
Здесь главное — контекст; в то время как слова на кнопках не умаляют их воздействия, текст является лишь одной из трех контекстных подсказок на каждой кнопке.Умный.
Как создать кнопку веб-сайта
Что делать, если вы хотите создать свою собственную кнопку? Хотя основные кнопки служат своей цели, вы также можете копнуть глубже и добавить интересные эффекты — все, от кнопок, меняющих цвет при наведении на них, до кнопок с тенями, отключенных кнопок или групп кнопок.
Ваш лучший выбор для строительства? Дизайн кнопок в CSS (каскадные таблицы стилей). CSS — это инструмент, который определяет и описывает, как элементы отображаются в HTML.Используя редактор CSS, вы можете настроить каждый аспект своей веб-страницы, от верхних и нижних колонтитулов до боковых панелей и кнопок.
Вы можете добавить условия CSS на любой веб-сайт, но разные инструменты требуют разного уровня знаний. Если вы только начинаете, WordPress — беспроигрышный вариант: платформа упрощает доступ, добавление и настройку настроек CSS, а также создание новых кнопок. Вот как.
Шаг 1: Перейдите в панель управления WordPress и нажмите Внешний вид> Настроить.
Источник изображения
Шаг 2: Затем перейдите в нижнюю часть левой боковой панели и щелкните Additional CSS .
Источник изображения
Откроется страница редактора CSS, где вы можете ввести любой собственный код CSS.
Источник изображения
Итак, что вы должны добавить, чтобы создать отличные кнопки? Это зависит от того, что вы ищете.Давайте рассмотрим, как изменить свойства кнопки.
Дизайн кнопок CSS
Этот код создает простую синюю кнопку, которую могут нажимать пользователи. Вы заметите, что есть строка HTML, которая заставляет этот код работать. В этом разделе мы обсудим способы использования CSS и HTML для редактирования и настройки этой кнопки на основе ваших предпочтений дизайна кнопки.
См. Кнопку CSS на веб-сайте Pen от Кристины Перриконе (@hubspot) на CodePen.
Цветные пуговицы
Используйте свойство background-color, чтобы изменить цвет фона вашей кнопки.
См. Цветные кнопки пера Кристины Перриконе (@hubspot) на CodePen.
Закругленные углы
Квадратные углы не всегда идеальны. Используйте свойство border-radius, чтобы изменить радиус границы для закругления углов кнопок — чем больше количество пикселей (или процент), тем более округляются углы.
См. Закругленные углы пера Кристины Перриконе (@hubspot) на CodePen.
Цветные бордюры
Используйте свойство border, чтобы придать кнопкам цветные границы с белым фоном.
См. Цветные границы пера Кристины Перриконе (@hubspot) на CodePen.
Кнопки с возможностью подвешивания
Используйте селектор : hover , чтобы изменить стиль кнопки, когда пользователи наводят на нее указатель мыши. Используйте свойство transition-duration, чтобы изменить принцип работы эффекта наведения.
См. «Кнопки с перемещением ручки» Кристины Перриконе (@hubspot) на CodePen.
Пуговицы тени
Используйте свойство box-shadow, чтобы добавить тени к вашей кнопке.Обратите внимание, что HTML немного изменился, чтобы отобразить тень за кнопкой.
См. Кнопки тени пера Кристины Перриконе (@hubspot) на CodePen.
Отключенные кнопки
В некоторых случаях может потребоваться отключить кнопки. Используйте свойство непрозрачности, чтобы добавить прозрачности к вашей кнопке, которая создает «отключенный» вид. Вы также можете добавить свойство курсора со значением не разрешено отображать «знак запрета парковки» при наведении указателя мыши на кнопку. Обратите внимание, что HTML немного изменился, чтобы отобразить отключенные функции этой кнопки.
См. «Кнопки с отключенным пером» Кристины Перриконе (@hubspot) на CodePen.
Создание кнопок для веб-сайтов
Иногда получить помощь проще, чем создать кнопку с нуля. Учитывая огромное количество кнопок на вашем веб-сайте, а также необходимость в единообразии стиля и формы, стоит подумать о масштабируемых инструментах, которые позволят вам упростить создание кнопок и выполнять итерацию вашего сайта по мере его роста. Некоторые из лучших настраиваемых функций, которые следует искать в генераторе кнопок, будь то платный или бесплатный, — это цвет, размер, граница, фон и текст.Эти функции дадут вам контроль, необходимый для создания идеальных кнопок веб-сайта.
1. Hubspot CMS
HubSpot CMS — это универсальный магазин для всего, что вам нужно для создания отличных веб-сайтов. Приобретая ежемесячную подписку, вы получаете доступ к разработке сайтов, которые соответствуют вашим потребностям и привлекают интерес посетителей. Вы можете расширить свою усердную работу, подключив свой сайт к маркетинговым решениям, таким как Marketing Hub от HubSpot, чтобы убедиться, что ваш дизайн со временем будет успешным.Выберите из множества готовых шаблонов и стилей кнопок, чтобы ваш сайт выглядел идеально.
2. Wix
Wix — это платная платформа CMS, которая упрощает веб-дизайн благодаря красивым и интуитивно понятным функциям и функциям сайта. Хотя у вас нет полной настройки кнопок с Wix, это хорошая отправная точка, если вам нужны четкие контекстные параметры, которые работают прямо из коробки.
Бесплатные кнопки веб-сайта
3. WordPress
Кодировать CSS в WordPress легко, и платформа веб-сайта также поставляется с множеством шаблонов и плагинов.Хотя настраиваемые кнопки в WordPress требуют дополнительной работы, стоит подумать, знакомы ли вы с базовым программированием. Поскольку WordPress является открытым исходным кодом, вы можете использовать его бесплатно или можете приобрести тарифный план WordPress для более конкретной функциональности.
4. Лучший генератор кнопок CSS
Best CSS Button Generator — это бесплатный инструмент, который позволяет настраивать внешний вид кнопок вашего веб-сайта. Выберите все, от точного оттенка зеленого в цветовой палитре вашего бренда до тени за текстом на кнопке.Когда вы закончите проектировать. Просто нажмите кнопку «Получить код», чтобы скопировать и вставить свой CSS-код в поле «Настроить дополнительный CSS» на своем веб-сайте.
5. Генератор кнопок CSS
Еще одна платформа с аналогичным названием, CSS Button Generator — это бесплатный простой инструмент для создания красивых кнопок с призывом к действию. В нем есть все основные функции, которые должны быть у создателя кнопок, но что делает его уникальным, так это возможность настройки «зависания». Это означает, что когда вы используете CSS Button Generator, ваши кнопки будут иметь динамическую функциональность профессионально созданных сайтов.
Нижняя строка кнопки
Первые впечатления имеют значение. По прибытии пользователи практически мгновенно формируют общее мнение о вашем сайте, поэтому стоит убедиться, что все аспекты вашего сайта работают вместе.
Кнопки — важный элемент фона; Индивидуальный, ясный, лаконичный и контекстный выбор дизайна кнопок может помочь оформить и произвести впечатление на ваш сайт для успеха.
Примечание редактора: этот пост был первоначально опубликован в мае 2020 года и был обновлен для полноты.
HTML Button Type — Как добавить кнопки на ваш веб-сайт
Кнопки — неотъемлемая часть веб-сайтов. Они нужны вам для различных функций, от отправки информации и получения доступа к дополнительному контенту до ссылок на различные части веб-страницы и других веб-сайтов.
HTML дает вам несколько способов добавления кнопок на ваш веб-сайт — с помощью тега кнопки, ссылки привязки и типов ввода button и submit .
В этой статье я расскажу вам о 4 из этих методов, чтобы вы могли с комфортом начать добавлять кнопки на свои веб-сайты.
Как добавить кнопки на свой веб-сайт с помощью тега кнопки
Тег кнопки — это один из самых простых способов добавить кнопки на ваши веб-сайты. Чтобы использовать его, все, что вам нужно сделать, это поместить текст, который должна иметь кнопка, прямо между открывающим и закрывающим тегами, например:
Я поместил кнопку в центре по горизонтали и вертикали, используя свойства flexbox, margin и height:
body {
цвет фона: # 8d8d8d;
дисплей: гибкий;
align-items: center;
justify-content: center;
маржа: 0 авто;
высота: 100вх;
}
По мере продвижения вперед все на странице будет центрировано с помощью этого CSS.
Чтобы сделать эту кнопку активной, вам нужно добавить JavaScript. В приведенном ниже фрагменте кода с помощью встроенного JavaScript я заставляю кнопку отображать окно предупреждения в браузере при каждом нажатии:
Как добавлять кнопки на свои сайты с помощью тега привязки
Вы также можете добавлять кнопки на свои веб-сайты с помощью тега привязки. Тег привязки в основном используется для добавления ссылок на ваши веб-сайты, но вы можете стилизовать его с помощью CSS, чтобы он выглядел как настоящая кнопка.
Преимущество этого подхода в том, что вы можете ссылаться на страницу без какого-либо JavaScript.
В приведенном ниже примере я делаю кнопку с тегом привязки и связываю ее с официальным сайтом freeCodeCamp:
Изучите кодирование бесплатно
Похоже на ссылку в браузере:
Вы можете сделать его похожим на кнопку с некоторым CSS, удалив подчеркивание и цвет текста по умолчанию, установив цвет фона и цвет переднего плана с помощью свойств цвета и добавив отступ и радиус границы:
a {
текстовое оформление: нет;
граница: 0.2px solid # 000;
цвет: # 000;
фон: # e6e4e4;
отступ: 5 пикселей;
радиус границы: 1px;
}
Все, что я сделал в CSS, — это попытаться имитировать внешний вид кнопок по умолчанию в HTML.
Тег привязки теперь выглядит так:
Как добавить кнопки на свои веб-сайты с помощью типа ввода
Кнопка
Вы также можете добавить кнопки на свой веб-сайт с типом ввода кнопки. Он ведет себя точно так же, как тег кнопки.
Входной тег — это пустой элемент, то есть у него нет закрывающего тега. Так как же отобразить текст на кнопке? Вы делаете это с помощью атрибута value!
Как добавить кнопки на свои сайты с типом ввода
Отправить
Обычно вы используете тип ввода submit внутри элемента формы, чтобы данные, заполненные пользователем, отправлялись при нажатии кнопки.
Как и тип ввода кнопки, это пустой элемент, поэтому вам нужен атрибут значения, чтобы сообщить пользователю, о чем кнопка.
Разница между кнопкой типа ввода и представлением типа ввода заключается в том, что при использовании типа кнопки отправки в форме данные передаются без каких-либо манипуляций с помощью JavaScript.
Но кнопка типа ввода, с другой стороны, требует некоторых манипуляций с помощью JavaScript для работы.Поэтому, когда вы используете кнопку типа ввода внутри элемента формы, данные не отправляются автоматически при нажатии.
Мини-проект
: как создать кнопку с неоновым светом с помощью HTML и CSS
Кнопка неонового света — это дизайнерская тенденция, которая вызывает фурор, потому что она красива. Используя то, что вы узнали из этой статьи, вы можете создать его с тегом кнопки и небольшим количеством CSS.
Во-первых, вы должны изменить стили кнопки по умолчанию:
кнопка {
цвет фона: # 000;
граница: .5px сплошной малиновый;
радиус границы: 10 пикселей;
цвет: #fff;
отступ: 8 пикселей;
}
Пока кнопка выглядит так:
Для реализации эффекта неонового света можно использовать свойство box-shadow . Он допускает несколько значений, которые будут способствовать созданию эффекта неонового света.
кнопка {
цвет фона: # 000;
граница: .5px сплошной малиновый;
радиус границы: 10 пикселей;
цвет: #fff;
отступ: 8 пикселей;
box-shadow: 0 0 30px 0 малиновый,
0 0 30px 0 малиновый,
0 0 10px 0 малиновая вставка;
}
В поле тени свойство:
- первое значение представляет смещение по оси x
- второе значение представляет смещение по оси y
- третье значение представляет радиус размытия
- четвертое значение представляет радиус распространения
- пятое значение — это цвет, который будет применяться к тени
Мне нужны были только радиус и цвет распространения, поэтому я установил другие значения на ноль.Затем я применил последнее значение тени блока к внутренней части кнопки, прикрепив к нему вставку .
На кнопке появился неоновый свет:
Заключение
В этой статье показано несколько способов добавления кнопок на веб-сайт.
В HTML и CSS всегда есть несколько способов сделать одно и то же — это одна из причин, по которой вы можете добавлять кнопки на веб-сайт даже с помощью тега привязки.
Вы даже можете заставить кнопку вести себя как ссылка, обернув тег привязки вокруг кнопки.
Вы также можете добавлять кнопки практически с любыми другими тегами, такими как div, span и даже с тегом p. Но вам следует избегать этого для доступности, чтобы не навредить SEO вашего сайта. В конце концов, вы также должны облегчить жизнь поисковым роботам.
Спасибо за чтение, продолжайте кодировать.
Дизайн кнопок для Интернета — Руководство и примеры на 2020 год
Кнопки в Интернете являются неотъемлемой частью взаимодействия с пользователем. Их цель — побудить человека по ту сторону экрана к конверсии и действиям.Но когда они не реализованы должным образом — ни в дизайне, ни в тексте — они могут вообще не привлекать внимания.
Как профессионалу в области пользовательского опыта (UX) важно знать, как лучше всего разрабатывать кнопки для Интернета в 2020 году. Понимание важных аспектов дизайна пользовательского интерфейса может помочь сохранить эффективность стратегии использования кнопок и обеспечить требуемые результаты.
Почему кнопки важны в UX?
По данным Якоба Нильсена и Nielsen Norman Group, пользователи читают примерно 20-28% веб-страницы при поиске информации, а Nielsen считает, что 20% более вероятны.И эксперты прогнозируют, что в наши дни продолжительность нашего внимания даже короче, чем у золотой рыбки — около 8,25 секунды.
Итак, где кнопки вписываются в это уравнение?
Кнопки можно найти везде, от веб-сайтов до приложений. Они проводят нас через путешествия и направляют нас к следующим шагам, которые нам нужны. Но поскольку наше внимание продолжает увеличиваться и уменьшаться в зависимости от устройств, которые мы используем, или информации, которую мы ищем, как никогда важно создавать кнопки, которые соответствуют ожиданиям пользователей.
Веб-кнопок по годам
Как мы знаем, веб-дизайн сильно изменился за десятилетия. Загроможденные страницы с текстом и изображениями, анимированные гифки «в стадии разработки» и навигация по i-frame ушли в прошлое. Хотите прогуляться во времени? Взгляните на это ностальгическое путешествие по прошлому Интернета.
Как и Интернет в целом, веб-кнопки также изменили свое лицо и стиль. Серые кнопки с градиентами и закругленными краями господствовали почти десять лет назад благодаря смартфонам, таким как Apple iPhone, доминирующим в мире дизайна.
Когда плоский дизайн стал популярным в веб-мире в 2012 и 2013 годах, кнопки начали терять закругленные углы, тени и градиенты. Смартфоны, такие как Android и iPhone, также начали подбирать тенденции плоского дизайна.
К 2015 году плоский дизайн все еще имел место, но веб-дизайнеры начали возвращаться к тому, чтобы «делать кнопки похожими на кнопки», используя тени или градиенты, чтобы они выглядели «кликабельными». По состоянию на 2019 год мы все еще на этой арене.
Хотите узнать больше об эволюции веб-кнопок? Посмотрите этот график с примерами из Dribbble.
Разработка полезных состояний кнопок
Согласно UX Planet, кнопки со сплошной заливкой и тенями являются наиболее понятными для пользователей, потому что размерность легче понять как кнопку, которую можно нажимать. Но это не единственное правило, которое следует учитывать.
Дизайн кнопки в ее различных состояниях так же важен, как и ее внешний вид.
Учитывать состояния кнопок, например :
Активные или отключенные кнопки
В идеале активные и отключенные кнопки должны выглядеть как кнопки, то есть они должны отличаться по цвету и стилю от другой информации вокруг них, например, текстовых полей.Активные кнопки, в частности, должны соответствовать цветовому контрасту, быть видимыми и легко читаемыми, а также иметь возможность нажимать или нажимать.
С другой стороны, отключенные кнопки должны быть затенены серым цветом, менее заметными, чем активная кнопка, чтобы пользователи знали, что кнопку нельзя нажимать или использовать.
Кнопки с фокусом
Кнопки фокусировки — важные функции для обеспечения доступности, особенно вспомогательные устройства или навигация с помощью клавиатуры. Хотя браузеры обычно предлагают стили для кнопок по умолчанию, некоторые разработчики удаляют эту функцию для согласования со стилями и цветами бренда.Часто кнопка фокуса включает контур или свечение, чтобы пользователи знали, что кнопка активна или может использоваться.
Но, убрав фокус, вы запрещаете пользователям понимать функцию кнопки. Цветовой контраст и контуры важны и должны быть легко различимы для всех зрячих пользователей, независимо от способностей зрения.
Кнопки состояния наведения
Кнопки также должны иметь состояние наведения, когда курсор, клавиатура или вспомогательный инструмент находятся над кнопкой.Это означает, что кнопка не только активна, но и активна. Изменения цвета, анимация или изменение текста могут быть полезны при наведении курсора.
Выбранные кнопки
Выбранные активные кнопки (нажатие или нажатие) должны иметь другой стиль, чем когда они статичны на странице. Это можно сделать с помощью анимации или простой смены цвета. Опять же, имея в виду доступность, цветовой контраст должен быть очевидным и понятным для всех пользователей.
Выбранные кнопки как ползунки
Некоторые активные кнопки могут использоваться в качестве переключателей или ползунков, что позволяет пользователю легко просматривать до и после эффекта выбора для пользователя.Однако кнопки как ползунки должны быть соответствующим образом помечены текстом, поскольку цвета не всегда являются четким признаком статуса.
Рекомендации по дизайну веб-кнопок
Дизайн — это лишь часть того, что делает кнопку хорошей кнопкой в Интернете. И действительно, в отношении дизайна не так много правил, если он доступен, согласован и работает для ваших пользователей. Но прошли те времена, когда текст «щелкните здесь» и кнопкам не хватало единообразного стиля и подхода. Учтите эти рекомендации при разработке веб-кнопок в 2020 году.
Соответствуйте своему дизайну и задокументируйте его
Часть руководства по стилю вашего бренда должна включать не только голос и тон вашего контента, но и не только использование вашей цветовой палитры и логотипа. Интерактивные веб-элементы, такие как кнопки, также должны быть обрисованы в общих чертах, и ваша команда должна выбрать последовательный подход.
Также следует указать, когда будут использоваться кнопки разных цветов. Например, если у вас есть кнопки подтверждения и отмены рядом друг с другом, они оба одного цвета или один более заметный цвет, например красный? Меняют ли кнопки форму в зависимости от их использования? Например, кнопки приближения к навигации могут отличаться от кнопки формы.
Аналогичным образом, если ваши кнопки имеют какую-либо анимацию, например статусы загрузки или состояния, вы захотите запечатлеть, как они выглядят и как они устроены.
Кнопки также можно интерпретировать как текстовые ссылки. Опять же, выбор способа отображения и функции текстовых ссылок также должен быть отражен в вашем руководстве по стилю.
После того, как вы выбрали предпочитаемый стиль кнопки, четко задокументируйте его в своем руководстве по стилю бренда, чтобы все члены команды и заинтересованные стороны понимали ограничения их дизайна и использования.
Не полагайтесь только на значки как на кнопки
Иконки могут быть отличными, если они являются частью принципов вашего бренда. При правильном использовании они могут быть четкими и преодолевать языковые барьеры. Однако будьте осмотрительны в использовании значков.
По словам Авроры Харли из Nielsen Norman Group, «понимание значка пользователем основано на предыдущем опыте. Из-за отсутствия стандартного использования для большинства значков текстовые метки необходимы для передачи значения и уменьшения двусмысленности.”
Исследование пользовательского опыта показывает, что даже гамбургер-меню (или мобильные меню) не так хорошо знакомы всем пользователям, как можно было бы предположить. Вместо этого пометка гамбургер-меню словом «меню» делает его более понятным и простым в использовании.
Используйте четкую и доступную копию
Легкая для понимания копия кнопки не означает, что вы должны воскресить «нажмите здесь». Доступные ссылки должны, прежде всего, описывать, куда ведет ссылка. Например, если кнопка ведет к загружаемой форме, копия в кнопке должна отражать это.
Короче говоря, глаголы — например, «Отправить», «Отправить», «Начать работу» — лучше всего подходят для кнопок с действием.
Также важно, чтобы кнопки не становились слишком многословными, особенно для адаптивного дизайна. По мере того, как кнопки начинают сворачиваться на небольших экранах, подробный текст кнопки может быть неправильно перенесен и испортить взаимодействие с пользователем.
Терминология, которую вы используете для кнопок, также зависит от контекста, в котором она появляется. Кнопка отправки формы на экране должна четко указывать, что происходит, когда форма заполняется.То же самое касается запросов на прием, бронирования или обращения в компанию.
Важно использовать язык, понятный вашим пользователям. Люди обладают различными способностями к чтению и предпочитают язык, поэтому чем более прямой и ясный язык вы используете, тем легче будет всем его понять.
При разработке
учитывайте размеры (и досягаемость) кнопок.
Знаете ли вы, что средняя человеческая мужская рука имеет длину 7,6 дюйма и размах 3,5 дюйма? Может быть, нет, но вы можете захотеть узнать, почему это важно.
Размер кнопок — и место их попадания на экраны смартфонов и мобильных устройств — во многом влияет на UX.
- Если кнопка находится слишком далеко от одной стороны экрана, пользователь не сможет дотянуться до нее большим пальцем
- Если кнопка слишком мала, ее может быть трудно нажать большим или более толстым пальцем.
- Плохая контрастность может затруднить просмотр кнопок и, следовательно, затруднить эффективное нажатие на них на мобильных устройствах
Поскольку при прокрутке экранов мобильных устройств люди чаще всего полагаются на большие пальцы, это взаимодействие известно как «зона большого пальца».«Хотя кнопки часто можно нажимать или нажимать, они также могут быть ползунками, карточками, каруселями и т. Д.
При просмотре пользовательского интерфейса веб-сайта или приложения на устройствах обращайте внимание на положение, размер и функциональность кнопок для левшей и правшей. Фактически, пользовательское тестирование вашей концепции перед запуском даст вам лучшее представление о том, как она работает на мобильных устройствах.
Доступность имеет значение и для кнопок
Создавая что-либо для аудитории, делайте это доступным.Дизайн для аудитории означает проектирование для всех, поэтому доступность так важна, когда вы вносите изменения и обновления в свой дизайн и кнопки в 2020 году.
Помните о цветовом контрасте, размере и толщине шрифта, а также о расстоянии при разработке любого элемента цифрового интерфейса, включая кнопки. Трудночитаемый шрифт, цвета, которые слишком близки к расшифровке, и интервалы, которые скапливают слова и буквы вместе, могут затруднить работу людей с нарушениями зрения, трудностями чтения, когнитивными или другими нарушениями.
Пустое пространство вокруг кнопок также может помочь странице выглядеть менее загруженной и подавляющей для тех, кто пытается понять следующий логический шаг. Избегайте загромождения изображений и текста и доставляйте контент, который должен знать пользователь, а не то, что, по вашему мнению, он должен.
Помните: меньше значит больше, когда вы создаете эффективные, инклюзивные кнопки, которые работают, особенно если эта кнопка является вашим призывом к действию (CTA). На каждой странице вашего сайта должен быть хотя бы один CTA, но добавление слишком большого количества может снизить срочность и побудить пользователей сделать следующий логический шаг.
Измерьте влияние кнопок
Вы создали свои кнопки. Ваши концепции и макеты дизайна готовы поделиться с вашей командой и, в идеале, с группой пользователей, которые могут помочь продвинуть ваш проект вперед.
Но как именно можно эффективно протестировать кнопки на своем веб-сайте?
Лучший способ проверить кнопки, особенно в CTA, — это A / B-тестирование. A / B-тестирование позволяет настроить два подхода к призыву к действию и проверить эффективность каждого, чтобы увидеть, какие варианты лучше всего подходят реальным людям.
Бесплатные инструменты, такие как Google Analytics или Google Tag Manager, можно быстро и легко настроить для отслеживания обеих версий вашего CTA или кнопки для достижения наилучших результатов.
Heatmapping с помощью таких инструментов, как Hotjar или CrazyEgg, может дать вам представление о проценте кликов и интересе к прокрутке. При ограниченном времени работы на вашем сайте тепловые карты могут отслеживать тысячи кликов по различным другим элементам, таким как навигация, текстовые ссылки, нижние колонтитулы и многое другое.
Кнопки эффективны при правильном использовании
Текстовые ссылки имеют ограниченный вес, поэтому кнопки выполняют большую часть работы по взаимодействию с пользователем, помогая людям ориентироваться в процессе, добираться до своей корзины покупок или переходить к вашему бизнесу.
Но, задокументировав последовательные правила и принципы дизайна для кнопок и сосредоточив внимание на единообразном, инклюзивном опыте для пользователей с любым уровнем подготовки и на всех устройствах, вы улучшите процесс конверсии, который приведет к успеху.
Все, что вам нужно знать о кнопках на веб-сайтах
Дженнифер Гейл — женщина, которая любит кнопки. Кнопки веб-сайта, если быть точным. Как автор веб-материалов, я немного узнал о кнопках. По крайней мере, я так думал.
В моем чате с Дженнифер я узнал, что делает кнопку хорошей, что писать на кнопках и как использовать кнопки, чтобы заставить ваш сайт продавать больше товаров.
Дженнифер — эксперт по цифровому маркетингу, специализирующаяся на членских сайтах, последовательностях электронной почты и целевых страницах. Кроме того, она является основательницей Fit ‘N Fifty Plus, а также является тренером по лидерству для руководителей в сфере здравоохранения.
Кейт: Дженнифер, почему ты любишь пуговицы?
Дженнифер: Кнопки имеют огромное значение для веб-сайта. Без кнопок ваши клиенты не смогут нажать, чтобы купить, забронировать номер или связаться с вами. Кнопки веб-сайта часто упускаются из виду как часть пользовательского опыта.Это мелочи, но они так много значат для веб-сайтов людей. Деньги делаются в кнопках.
Катя: Что вы пишете на кнопках? Я использую формулу «Я хочу», которую узнала от Кейт Тун.
Дженнифер: Да, это хороший подход. Идея состоит в том, чтобы завершить предложение «Я хочу…», чтобы вы могли иметь:
- посмотреть, как это работает
- заказать звонок
- попробовать бесплатно
Краткие глаголы, такие как получить, изучить, увидеть и присоединиться, хороши . «Покажи мне, как» тоже хорошо работает.
Ненавижу слово «подчиняться». Его часто используют для подписки на рассылку новостей. Такая упущенная возможность. Это может быть «получить мою бесплатную загрузку» или «присоединиться к VIP-списку», что более убедительно.
Кейт: На кнопке должно быть четко указано, куда направляется покупатель, когда он нажимает на нее.
Дженнифер: Да, текст кнопки должен объяснять, что будет дальше. Кнопка похожа на закрытую дверь. Людям не нравится открывать дверь, когда они не знают, что за ней. Люди обеспокоены или не уверены в том, что будет дальше.Например, если вы предлагаете бесплатную пробную версию, люди беспокоятся о необходимости предоставлять данные кредитной карты. Вы могли бы прояснить, что в кнопке не требуется никакой кредитной информации, чтобы противостоять этому возражению.
Кейт: Я очень довольна кнопками, когда пишу страницы веб-сайтов — может у вас слишком много кнопок?
Дженнифер: На большинстве сайтов не хватает кнопок. Оставлять его внизу страницы рискованно, потому что не каждый браузер делает это там. Наличие сильных кнопок на вашем веб-сайте дает людям возможность двигаться дальше.И чем глубже они проникают на ваш сайт, тем больше вероятность, что они купят, или подпишутся на код скидки, или загрузят вашу бесплатную услугу.
Кейт: Что вы посоветуете по дизайну кнопок?
Кнопка должна быть яркой с использованием акцентного цвета, чтобы привлекать внимание. Вы можете дать людям возможность выбора, разместив две кнопки рядом. Одна кнопка дает больше информации, а другая — вариант «купить сейчас». Это дает людям, которые не уверены, возможность узнать больше и убедиться. Вы делаете кнопку покупки более яркой, чтобы стимулировать нажатие на более желаемое действие.Например, вы предпочтете нажать кнопку «Купить сейчас», чем «узнать больше». Один из них — это кнопка призыва к действию, другой — кнопка призыва к значению.
Кейт: Что еще нужно учесть людям в отношении кнопок?
Подумайте, куда кнопка направляет вашу аудиторию. Кнопка ведет их в нужное место? Нажимали ли они все кнопки на своем сайте, чтобы попасть туда, куда нужно? Теперь у людей есть ожидания относительно функциональности сайтов, особенно электронной коммерции. Они ожидают хорошего процесса продаж в Интернете, поэтому вы должны делать это с помощью кнопок.Упрощает добавление товаров в корзину, удаление их, оформление заказа и оплату.
Кейт: Стоит ли тестировать кнопки? Я слышал, что изменение цвета может увеличить количество кликов.
Да, тестирование — единственный способ узнать, работают ли ваши кнопки. Проверьте цвета и фразы, и вы увидите огромные различия. Это может быть так же просто, как использовать один цвет в течение месяца, а другой — в течение второго месяца. То, что работает для одной аудитории, может не работать для другой. Таким образом, вы не можете копировать то, что работает на других сайтах.Единственный способ узнать, что работает для вашего целевого рынка, — это протестировать. Если вы можете, тесты теплового картографирования будут полезны, чтобы увидеть, как люди перемещаются по вашему сайту и где они застревают или запутываются.
Кейт: Как вы побуждаете людей нажимать на кнопку? Какие-нибудь советы?
Если дать кнопке место, чтобы она выделялась, — хорошее начало. Ваш текст, ведущий к кнопке, тоже имеет значение. Отзыв рядом с кнопкой — отличная идея. Подумайте о возможных возражениях и противодействуйте этим аргументам.Например, вы можете рассказать о том, насколько доступным, легким или быстрым является процесс. Я уделяю много времени созданию кнопок — около получаса на каждую кнопку — это так важно.
Вы хотите уменьшить колебания, не позволяйте людям откладывать. Если он ясен и убедителен, вы даете повод щелкнуть (или коснуться), чтобы продолжить. Сделайте так, чтобы их было легко увидеть, и нажимайте кнопки. Кнопки на мобильном телефоне должны легко нажиматься. Если они слишком маленькие для мобильных устройств, а сайт не реагирует на запросы, люди не смогут нажимать на них, и они исчезнут, значит, вы их потеряли.Не заставляйте их усердно искать нужную информацию.
Кейт: А как насчет кнопок на страницах продаж, как они работают?
Страница продаж — это отдельная страница, поэтому вы не хотите, чтобы люди уходили прочь. Итак, вам нужно использовать кнопки стратегически. Кнопки помогают направлять клиентов в нужные разделы страницы. Это дает людям возможность быстро перейти к нужной информации на странице продаж. Большинство людей хотят знать цену, поэтому имейте кнопки, которые переводят их прямо к таблице цен.На страницах продаж вы размещаете кнопки с преимуществами. Вы можете использовать дефицит на страницах продаж, чтобы побудить людей щелкнуть сейчас. Например, если ваш курс скоро закрывается или предлагает скидку пораньше, кнопки могут выделить те убедительные элементы, которые побуждают людей не думать об этом — сейчас самое время покупать. Не заставляйте их прокручивать страницу вниз, чтобы зарегистрироваться, кнопки должны быть разбросаны по всей странице продаж.
Кейт: Какие примеры правильного использования кнопок?
Магазин канцелярских товаров Милиграм хорошо использует кнопки.Вступительный текст убедителен, а текст кнопки продуман. Но они могли бы использовать более насыщенный цвет для своих кнопок, чтобы сделать их ярче на странице.
Эми Портерфилд хорошо использует кнопки. Она пишет от первого лица и использует непринужденный язык, который находит отклик у ее клиентов. Темный цвет хорошо контрастирует, притягивая взгляд.
У Basecamp хорошие кнопки, они используют социальное доказательство в тексте рядом с кнопкой, чтобы дать людям уверенность в том, что они находятся в правильной компании.Они используют комбинацию гиперссылок для тех, кто хочет получить больше информации, но ярко-желтая кнопка поощряет испытания (желаемое действие).
Вот тот, который Дженнифер создала для своего клиента Equine Care Clinic.
На странице бесплатных подарков каждая кнопка напоминает покупателям, что они получают.
Спасибо, Дженнифер, за советы по пуговицам. Надеюсь, вы нашли это ценным.
Хотите связаться с Дженнифер?
Ее веб-сайт — Pink Hat Digital или свяжитесь с ней через LinkedIn.
Как создать эффективные кнопки CTA для вашего веб-сайта
Какие элементы делают веб-сайт привлекательным? Привлекательный дизайн? Убедительный контент? Удобная навигация? Да, эти элементы имеют решающее значение, когда речь идет о веб-сайте, который люди захотят постоянно посещать и на котором проводят время. Однако еще один важный, но часто упускаемый из виду компонент — это хорошо продуманные кнопки призыва к действию (CTA). Кнопки CTA — это то, что мотивирует посетителей совершить действие на вашем сайте, поэтому они должны быть интересными и визуально привлекательными.Они могут быть небольшими, но они влияют на ваш бизнес по-разному.
Что такое кнопки призыва к действию?
Кнопки с призывом к действию служат для различных целей веб-сайта, но их основная функция — побудить посетителей вашего веб-сайта что-то сделать (вдохновить на конкретное действие). Вы уже видели их раньше: «Нажмите, чтобы загрузить», «Отправить», «Свяжитесь с нами»… список можно продолжать и продолжать. Эти призывы к действию довольно распространены и могут легко потеряться в беспорядке, будучи такими же, как почти любой другой веб-сайт.Чтобы люди заметили и начали действовать, ваши кнопки с призывом к действию должны выделяться на вашей странице и среди других, которые ваши посетители, несомненно, увидят и на других веб-сайтах.
Еще одна особенность кнопок CTA — это то, что они всего лишь кнопки . Если вы хотите, чтобы люди обратили внимание на призывы к действию на вашем веб-сайте, они должны выделяться! Если на вашей странице есть только выделенный текст с надписью «Нажмите здесь», это не вызовет большого количества трафика. С другой стороны, создание кнопки CTA выделяется и привлекает читателя.
Нет единственного способа создать кнопку CTA для веб-сайта, на самом деле все наоборот! Будьте изобретательны и оригинальны в своих призывах к действию. Вся цель призывов к действию — привлечь внимание вашего веб-посетителя, заинтересовать его и побудить его совершить действие на вашем веб-сайте (например, отправить контактную форму, загрузить электронную книгу или посетить определенную страницу). Вы должны создавать свои кнопки вместе с посетителями и с учетом действия, которое вы хотите, чтобы они выполняли.Скоро вы увидите, что чем больше у вас будет продвинутых, привлекательных и интересных кнопок с призывом к действию, тем больше будет достигнутых целей в Google Analytics.
Как гласит старая пословица, «презентация — ключ к успеху »! Человеческий глаз способен обнаруживать отклонения в пределах общего рисунка, а также остеклять объекты, которые все выглядят одинаково. Сделайте ваши кнопки CTA очевидными и разместите их в фокусе вашей веб-страницы, чтобы увеличить вероятность действия посетителей.
Советы по созданию лучших кнопок CTA для вашего веб-сайта
Если вы хотите, чтобы внедрила или изменила дизайн призыва к действию на своем веб-сайте, вы, вероятно, задаетесь вопросом, с чего начать.
Ниже приведены 4 обязательных элемента при создании новой кнопки с призывом к действию:
1. Используйте ориентированные на действие глаголы от второго лица
Здесь текст, который вы используете, инструктирует посетителей что-то делать.Использование таких слов, как «Откройте для себя», «Запрос», «Загрузить» и «Узнать», предоставляет посетителям простое, но описательное действие, которое нужно предпринять, чтобы перейти к следующему шагу. Это ваш шанс использовать творческие глаголы! Исследования показали, что чем сложнее кнопка, тем больше вероятность, что ваш посетитель нажмет на нее. Итак, вы захотите использовать что-то еще, кроме «Щелкните здесь», чтобы побудить к немедленным действиям.
2. Составьте четкое ценностное предложение
Перед тем, как нажать любую кнопку с призывом к действию, любой посетитель веб-сайта может взвесить ценность того, что он получает в обмен на то, что вы позволите ему сказать ему, что делать.Таким образом, вы хотите убедиться, что в вашем призыве к действию четко указаны преимущества продолжения. Как только этот критерий будет соблюден, посетитель должен иметь лучшее представление о том, чего ожидать в будущем. Будьте на связи с посетителем вашего веб-сайта и используйте текст вроде «Бесплатная загрузка» или «Бесплатная 30-дневная подписка». Чем честнее вы будете в своих призывах к действию, тем комфортнее будет вашим посетителям в вашей компании.
3. Создайте чувство срочности
В современном быстро меняющемся мире, управляемом технологиями, люди постоянно выполняют несколько задач, и их легко отвлечь.Пункты, которые привлекают их внимание, постоянно добавляются в их списки дел. Тем не менее, как только призыв к действию вызвал интерес у посетителя, он должен создать представление о том, что они должны действовать немедленно, чтобы действие не было сохранено и забыто. Добавление к призыву «Поторопитесь», «Ограниченное время», «Сейчас» или «Сегодня» может создать ощущение срочности и побудить посетителей оставаться сосредоточенными и действовать немедленно.
4. Обеспечьте согласованность между CTA и целевой страницей
Вся цель призывов к действию — заинтересовать посетителей настолько, чтобы они заставили щелкнуть мышью на фактическую страницу продукта, услуги и т. Д.что продвигается. Таким образом, целевая страница, на которую ссылается CTA, должна предоставлять больше информации, но в том же тоне, что и CTA. Это устранит любую путаницу, которая может возникнуть при переходе с одной страницы на другую. Важно, чтобы любые переходы были как можно более плавными.
В заключение
Дизайн, качественный контент, SEO и множество других аспектов требуют большого внимания, чтобы создать веб-сайт, который будет привлекать и привлекать посетителей.Тем не менее, понятно, что кнопки CTA можно упустить. Тем не менее, следование приведенным выше рекомендациям и более глубокое размышление о кнопках CTA может действительно повлиять на повышение производительности веб-сайта. В конце концов, ваши эффективные кнопки CTA — это то, что вдохновит ваших посетителей на действия и взаимодействие с вашим малым бизнесом! Вы не можете позволить себе упустить эти возможности.
Что такое кнопка обратной связи на веб-сайте?
Кнопка обратной связи с веб-сайтом
— это вкладка или значок, который используется для сбора отзывов от посетителей и клиентов в Интернете, пока они находятся на вашем веб-сайте.Эти кнопки обычно расположены сбоку или внизу веб-страницы, чтобы посетителю было легко их найти. Чтобы отправить отзыв, посетители нажимают кнопку обратной связи, и появляется онлайн-форма обратной связи.
Чтобы понять реальную ценность кнопки обратной связи на веб-сайте , неплохо узнать, как они работают и какие преимущества они могут предложить вашему бизнесу. Давайте взглянем.
Что делает кнопка обратной связи на веб-сайте?
Прежде всего, важно помнить о том, что существует два разных метода создания форм обратной связи на веб-сайте: активный подход и пассивный подход. Активные формы обратной связи — это формы, инициированные компанией, которые появляются на странице. Они часто запускаются на основе бизнес-правил, которые определяет маркетолог (например, когда клиент достигает определенной цели на веб-сайте или когда посетитель покидает страницу). В качестве альтернативы есть форм пассивной обратной связи . Эти формы отличаются от активных форм тем, что они инициируются пользователем и отображаются на веб-сайте в виде кнопки обратной связи веб-сайта .
Кнопки обратной связи с веб-сайтом могут быть размещены на любой странице веб-сайта и с помощью некоторых инструментов, а также в различных положениях, например.грамм. вверху справа, слева или внизу. Фактически, размещение его на всех веб-страницах никогда не повредит, поскольку это дает клиенту возможность предоставить обратную связь, когда он захочет.
Примечание: плавающие кнопки или кнопки обратной связи, которые всегда видны на экране, как правило, имеют лучший коэффициент конверсии с точки зрения объемов обратной связи.
Как только посетитель нажимает на одну из этих кнопок обратной связи, появляется форма обратной связи, например, в виде наложения (в модальном окне) или в виде формы, вставляемой сбоку или снизу экрана.Часто форма очень проста по своей природе, содержание формы пассивной обратной связи может состоять всего из 2–3 вопросов, которые предназначены для оценки удобства использования страницы. Вот пример:
Источник: MailShop
Чтобы узнать больше о создании онлайн-форм обратной связи, прочтите эту статью.
Каковы преимущества кнопки обратной связи на веб-сайте?
Использование кнопки обратной связи для сбора информации о клиентах дает множество преимуществ.Вот наш список главных преимуществ:
- Наличие кнопки дает понять, что ваша компания приветствует обратную связь и, следовательно, ценит мнение своих клиентов.
- Легко доступен для посетителей, так как почти всегда виден. Им не нужно искать, чтобы оставить отзыв.
- Может быть размещен на любой странице вашего сайта и в различных позициях в зависимости от дизайна вашего сайта.
- Удерживает клиентов на цифровом пути. Другими словами, кнопка обратной связи может отвлечь клиентов от предоставления обратной связи через традиционные каналы, такие как колл-центры.
- Информация, полученная с помощью кнопок обратной связи веб-сайта, может быть использована для повышения удобства использования вашего веб-сайта и повышения качества обслуживания клиентов.
- Защищает порталы социальных сетей от отрицательных отзывов.
Наш совет?
Теперь, когда вы знакомы с длинным списком преимуществ, связанных с использованием кнопки обратной связи на веб-сайте, не стоит недооценивать себя. Хотя наличие этих кнопок может помочь вам получить отличное представление об удобстве использования страницы, объединение их с активными формами обратной связи может сделать программу обратной связи еще более действенной.Благодаря активным формам обратной связи вы существенно освобождаете место для таких вещей, как «моментальная» обратная связь. Например, когда клиент собирается покинуть ваш веб-сайт или бросить корзину. Все это, безусловно, ключевые идеи для улучшения общего качества обслуживания клиентов.
Многие маркетологи склонны сосредотачиваться на интерфейсе и сборе отзывов, когда только начинают, однако настоящая проблема заключается в шагах, которые вы предпринимаете для анализа и извлечения информации из этих данных, поэтому не останавливайтесь на сборе.
Заинтересованы во внедрении кнопки обратной связи с веб-сайтом на своем веб-сайте? Хотите узнать, какие преимущества дает обратная связь в Интернете? Зарегистрируйтесь здесь и получите бесплатный код. Вы будете готовы к работе всего за несколько минут!
Шесть правил, которым необходимо следовать
Добавление кнопок на ваш сайт является абсолютной необходимостью. Они не только помогают пользователям взаимодействовать с вашим сайтом, но и побуждают их проводить на нем больше времени.В некоторых случаях кажется, что кнопки не играют большой роли, но поиск для них подходящего места может действительно повысить продажи и сделать работу с пользователем более приятной.
Продолжайте читать об этой теме в этой статье, созданной командой Amelia (лучший плагин бронирования для WordPress).
Основы создания кнопки
Как и в большинстве других дизайнерских работ, существует набор правил, которые необходимо соблюдать независимо от того, какой тип кнопки вы хотите создать.Все персонализированные кнопки должны соответствовать этим основным правилам, а стиль создаваемой кнопки должен соответствовать ее назначению на странице.
Прежде всего, кнопки должны направлять на себя внимание пользователя. Таким образом, кнопки часто сопровождаются заявлением с призывом к действию, побуждающим пользователя щелкнуть его. Но нельзя полагаться только на призыв к действию, чтобы соблазнить пользователя, а традиционные правила дизайна не выделят ваши кнопки среди остальных, поэтому вам придется проявить творческий подход.
Это краткое руководство, которое поможет вам понять кнопки и перечислит шесть различных правил, которые обеспечат успех ваших кнопок.
Типы кнопок
Кнопки
бывают разных типов, потому что их можно использовать для разных целей. Их можно разместить в любом месте интерфейса веб-сайта, и для достижения наилучшего эффекта вам необходимо выбрать наиболее подходящий тип кнопки для вашего сайта. Чтобы сделать пуговицы своими руками, выберите один из следующих типов:
Текст
Это, наверное, самый распространенный тип кнопок. Они выглядят как простые выделенные блоки текста. В дизайне кнопок текстовые кнопки не очень эффективны, потому что они недостаточно подчеркнуты, но их можно использовать, когда это именно тот эффект, который желают получить.
Призрак
Кнопки
Ghost также называют кнопками с контуром, и их немного сложнее создать. Обычно они используются для менее важных действий по сравнению с текстовыми кнопками, предназначенными для основных действий. Процесс разработки кнопки для фантомного типа немного сложнее, чем в случае текстовой кнопки.
Поднятый
Поднятые кнопки также известны как содержащиеся кнопки, и их можно распознать по прямоугольной форме, имеющей трехмерный эффект.Трехмерный эффект достигается за счет использования тени под ним. Это делает его более похожим на реальную кнопку, поэтому нажатие на нее более интуитивно.
Переключить
Тип кнопки-переключателя используется теми, кто хочет сгруппировать несколько действий в одной единственной кнопке или продемонстрировать ряд настроек.
В первом случае пользователь нажимает кнопку и выбирает только один вариант за раз. Каждый раз, когда выбран один вариант, второй вариант не может быть добавлен.Если щелкнуть другой вариант, первый будет автоматически отменен.
В последнем случае кнопка переключения позволяет активировать или деактивировать различные настройки.
Плавающий
Плавающие кнопки действий часто называют FAB. Они используются для общих действий в интерфейсе. Обычно они размещаются очень заметно, над содержимым. В большинстве случаев они имеют круглую форму, но это не обязательно.
В дизайне кнопок очень важно выбрать правильный тип, потому что от него будет зависеть, насколько легко интерфейс можно использовать на мобильном телефоне, ПК, планшете и т. Д.Например, использование текстовой кнопки не так удобно для пальцев, как использование приподнятой кнопки для мобильных пользователей, но на ПК это будет нормально. Аргументы для каждого типа кнопки многочисленны, поэтому не торопитесь, чтобы сделать соответствующий выбор.
Цвет и контраст
Психология цвета играет огромную роль в дизайне кнопок. Каждый цвет может тем или иным образом влиять на человека. Вам нужно будет дифференцировать кнопки вашего веб-сайта в зависимости от их назначения. Вы должны помнить как о психологии цвета, так и о эстетических принципах.
Мы рекомендуем стилизовать их следующим образом:
- Основные действия — однотонный, высококонтрастный
- Дополнительные действия — прозрачный цвет, сплошной контур
- Третичные действия — подчеркнутый текст
Каждый цвет имеет свою силу. Посмотрите логотипы крупнейших брендов, и вы поймете их роль. Красный обычно ассоциируется со страстью, голодом или энергией. Желтый или другие тусклые цвета идеально подходят для кнопок, ведущих на информативные страницы.Зеленый или синий подходят для кнопок, которые указывают на положительное действие (например, пожертвовать).
Шесть золотых правил
1. Сохраняйте традиционность
Не слишком увлекайтесь формами. Кнопки по-прежнему должны выглядеть как кнопки. В противном случае посетители вашего сайта могут запутаться и избежать размещенного вами элемента необычной формы. Когда дело доходит до формы, старайтесь придерживаться традиций.
В дизайне кнопок нужно учитывать основные принципы.Например, если на вашем веб-сайте есть квадратные элементы, используйте тот же шаблон для кнопок. Если ваш веб-сайт более округлый, закруглите края прямоугольника с кнопками или используйте кнопки с кружками.
Независимо от того, какую форму вы выберете, убедитесь, что она заметна и привлекает внимание пользователя. После того, как вы выберете форму, сохраните ее во всем интерфейсе, иначе вы не получите эстетического эффекта.
Кроме того, пользователь будет ознакомлен с формой кнопки и будет искать дополнительные сведения по мере использования интерфейса.
2. Сделать их видимыми
Нет смысла создавать кнопку, если она не выделяется из остальных элементов. Кнопка, которая ничем не выделяется, будет полностью проигнорирована пользователями. Постарайтесь разместить его на видном месте, так, чтобы посетители могли легко его заметить.
Поставьте себя на место посетителя: какую часть веб-сайта вы видите в первую очередь, когда заходите на нее? Это то место, где вы хотите, чтобы ваша кнопка была.Обычное размещение — один из наиболее важных аспектов дизайна кнопок, поэтому не упускайте его из виду.
Используйте белое пространство и контрастные цвета, чтобы также подчеркнуть присутствие кнопки.
3. Обозначьте их
Невозможно создать кнопку, не пометив ее. В противном случае люди не будут знать, что с этим делать, даже если вам, возможно, объяснят это в тексте вашей копии. Добавление четкой надписи к созданной вами кнопке позволит пользователям узнать, чего ожидать, когда они нажмут на нее.
Минимальный размер шрифта, который вы должны использовать для кнопок, составляет 16 пикселей. Все, что меньше этого, недостаточно видно. Учтите это и при разработке формы кнопки. Кроме того, оставьте вокруг этикетки достаточно свободного места, чтобы кнопка выглядела хорошо.
4. Размер их
Как упоминалось выше, нельзя включать ярлыки размером менее 16 пикселей. Это должно дать вам представление о том, насколько большими должны быть кнопки на странице. Вы можете использовать размер, чтобы установить приоритет.В дизайне кнопок наибольшее значение имеет самая большая кнопка, и на нее легче всего нажимать.
Кнопки меньшего размера относятся к менее важным действиям. Используйте MIT Touch Lab как инструмент, который может помочь вам в этом процессе. Размер, который они рекомендуют, составляет 10 мм x 10 мм, но вы можете поиграть с ним в зависимости от доступного места на вашем интерфейсе.
5. Не используйте слишком много
Не следует размещать на сайте много кнопок, даже если это может показаться заманчивым.Многие мобильные приложения и интерфейсы веб-сайтов включают в себя дюжину кнопок на одной странице. Это не заставит пользователей нажимать на них. Вместо этого они могут заставить пользователей уйти в одно мгновение, потому что интерфейс слишком загружен.
Одна кнопка на странице — это цель, к которой вы должны стремиться. Может, двое, если будет абсолютно необходимо.
6. Добавить отзыв
Когда кнопка нажата, сделайте что-нибудь, что позволит пользователю узнать, что действие было отмечено. В противном случае они могут чрезмерно нажать кнопку, и приложение или веб-сайт могут вылететь из строя.Взаимодействие должно быть таким же хорошим, как и внешний вид кнопки. Вы можете заставить кнопку менять цвет или издавать звук при нажатии.
Завершение мыслей о дизайне кнопок
Надеюсь, советы, которые вы нашли в этой статье, будут вам полезны. Дизайн кнопок не так прост, как думают. Хорошая идея — потратить время на изучение призывов к действию и их влияния на пользователей.
Вы будете удивлены, насколько такой маленький элемент может иметь большое значение в долгосрочной перспективе.Собирая кнопки вместе, помните об этих двух словах: узнаваемость и ясность. Это качества, которыми должны обладать все кнопки интерфейса.
Если вам понравилось читать эту статью о дизайне кнопок, вам стоит почитать эту о плохих веб-сайтах.
Мы также писали о нескольких связанных темах, таких как современный веб-дизайн, дизайн макета, визуальный дизайн, лучшая страница 404, тенденции веб-дизайна, темный фон, макеты веб-сайтов и анимация загрузки.
.