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

24.01.1985 alexxlab

Содержание

Виджет Кнопка — добавьте кнопки на свой сайт! (2022 год)

Добавьте привлекательные кнопки на свой сайт с помощью

Попробовать демо

Изучите все возможности

Почему мне стоит выбрать Elfsight?

Подтолкните свою аудиторию к действию

Увеличьте количество продаж на вашем сайте

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

Подтолкните аудиторию к целевому действию

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

Увеличьте количество подписчиков

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

вебсайтов поддерживается

часов вложено в разработку

1 минута

чтобы начать использование

счастливых клиентов

Станьте одним из 1,078,753 клиентов Elfsight Apps

Создайте свой первый виджет Elfsight Кнопка бесплатно.

Создать виджет

В чем уникальность Elfsight Кнопка?

ДЕЙСТВИЯ

Все и даже больше для создания вашей кнопки

С новым виджетом Button достичь своих целей стало просто как никогда. И для этого мы разработали различные варианты действий, которые могут быть выполнены после того, как пользователь нажмет вашу кнопку. Так, вы можете перенаправить пользователей на другой сайт или страницу. Если вам нужна кнопка “Позвонить”, добавьте к ней номер телефона или имя пользователя Skype, и вызов начнется сразу после нажатия кнопки. Также есть возможность отправить пользователей на ваши аккаунты в Facebook, Instagram, Pinterest, TikTok или Twitter. При нажатии на кнопку также может открыться чат в WhatsApp, Telegram или Skype. Кроме того, вы можете получать сообщения на email, добавив свой адрес к кнопке.

ЭЛЕМЕНТЫ КНОПКИ

Направляйте посетителей к действию

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

РАСКЛАДКА

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

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

СТИЛИ

Выберите готовую цветовую схему или создайте собственное решение

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

Примеры использования

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

Посмотреть в действии

Активное демо

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

Попробовать сейчас

Чем виджеты Elfsight отличаются от других?

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

Легко управляемый онлайн-редактор

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

Опытная команда Elfsight

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

Впечатляющий сервис приложений Elfsight

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

Что говорят наши клиенты ❤️

I really like this app. I will go on using it and I will have it also on my new websites. Installation is a breeze and the support team will do everything and even more to help you.

Cool Button App – Simple to design and stuffed full of very useful design and admin features. The customer service team is great and when I have questions or issues they are always here.

Excellent app. I’ve got it just the way I want it on my site. Customer service team was competent and quick.

Brilliant customer service! We needed some personalization and they fully helped us with it. And it looks nice on our site! Highly recommended!

Amazing work guys! Uncomplicated features, clean design and no issue with loading speed or SEO. Thanks for that.

I am a web designer and this great Button widget is a part of most of my website projects. I am amazed by the help, added features and various design customization.

Часто задаваемые вопросы

Что такое виджет «Кнопка»?

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

Как получить установочный код виджета?

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

Как я могу встроить Button на любой сайт?

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

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

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

Сочетается ли ваш виджет с моим конструктором сайтов или CMS?

Да. Приложения Elfsight совместимы с 99% популярных конструкторов сайтов. Проверьте список ниже: Adobe Muse, BigCommerce, Blogger, Drupal, Facebook Page, Elementor, Joomla, jQuery, Jumpseller, iFrame, Magento, HTML, ModX, OpenCart, Shopify, Squarespace, Webflow, Webnode, Weebly, Wix, WordPress, WooCommerce, Google Sites

Я могу изменить цвета виджета?

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

Станьте одним из 1,078,753 клиентов Elfsight Apps

Откройте для себя еще более 80 эффективных приложений от Elfsight! Банковская карта не требуется. Никаких рисков!

Начать

Получите скидку 20% прямо сейчас!

More Apps

Общайтесь с посетителями сайта нон-стоп

Создавайте всплывающие окна для сайта и повышайте продажи

Дизайн кнопок для сайта — руководство по кнопкам в веб дизайне

Автор: Site Elite

≈ 3 мин.

3425 91

Оглавление

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

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

Придай форму

Объединение текста и изображения. Как подружить картинку с текстом

Кнопка на сайте — это цифровой аналог клавиши на клавиатуре. Сделай так, чтобы люди идентифицировали его как кнопку:

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

Продумай элементы

Используй базовые значения сетки, чтобы определить:

Радиус закругления кнопки в углах
Размер тени
Безопасное пространство (расстояние от кнопки до других элементов страницы)
Внутренний отступ (расстояние от края кнопки до надписи на ней)
Стиль оформления, цвет, градиент
Характеристики шрифта для метки

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

Выравнивай иконки

Типографика в веб-дизайне: 5 терминов, 3 жаргонизма, 3 главные ошибки

Рассматриваем 5 основных терминов типографики в веб-дизайне ▪ Знакомимся со сленгом профессиональных дизайнеров сайтов ▪ Разбираем 3 главные ошибки, которые совершают новички.

Как правильно выравнивать иконки внутри кнопки:

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

Отцентрируй

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

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

Определи размер

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

Минимально допустимые размеры:

Для веб-кнопок и других интерактивных элементов на устройстве с курсором — 32×32 pt
Для мобильных кнопок и прочих элементов на мобильном устройстве — 44×44 pt (оптимально — около 50 pt)

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

Сбалансируй края

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

Подбери эффекты

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

Пользователь и интерфейс. Как эффективно использовать анимацию

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

Автор: Site Elite Все статьи автора

Давайте дружить!

744 1 352

Please enable JavaScript to view the comments powered by Disqus.

Дизайн кнопок. Все, что вы хотели узнать

Советы

Стиль кнопок, цвет, состояние и их расположение на странице

Читайте наc в Telegram

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

Смотреть канал

Станьте email-рокером 🤘

Пройдите бесплатный курс и запустите свою первую рассылку

Подробнее

Мы перевели статью UX-специалиста компании Windmill Тараса Бакусевича. Он раскрывает основные принципы дизайна кнопок и показывает на примерах, как с их помощью построить эффективную коммуникацию с пользователями.

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

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

Кнопки и ссылки. В чём разница

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

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

Вид кнопки. О чем он говорит пользователю

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

Всего существует 6 состояний кнопки:

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

Возможные формы, размеры и цвета кнопок

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

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

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

«Правильную» кнопку не всегда нужно выделять

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

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

Делайте кнопки похожими на кнопки

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

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

Придерживайтесь единого стиля

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

Задумывайтесь о размерах кнопок

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

Для интерактивных элементов на большинстве платформ подойдут размеры от 48×48 dp. Dp (Density-independent Pixels) — абстрактная единица измерения размера, которая позволяет элементам выглядеть одинаково в различных разрешениях. Обычные пиксели (px) на разных экранах могут отображаться по разному.

Подробнее о разнице между dp и px

Для кнопок с иконками лучше убедиться, что интерактивная часть будет больше, чем сама иконка (кнопка Edit на примере выше). Это применимо не только для смартфонов или планшетов, но и для web-страниц, где указатель — компьютерная мышь.

Делайте дизайн доступным

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

Дизайнерам лучше тесно взаимодействовать с командой разработчиков, чтобы убедиться, что кнопки работают с экранным считывающим устройством. Это встроенное в ОС приложение, которое помогает людям с нарушениями зрения считывать информацию с экранов. Роль «кнопка» должна использоваться для всех интерактивных элементов, которые отвечают на действия пользователя. Атрибут role=”button” превратит элемент в кнопку для любого экранного считывающего устройства.

Рассмотрите не только касания, но и жестовое взаимодействие пользователя с интерфейсом

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

Хорошее название для кнопки поможет пользователю совершить нужное действие

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

Хорошее название кнопки предлагает пользователю совершить какое-либо действие. Лучше использовать глаголы и отображать на кнопке то, что она делает. Как будто кнопка спрашивает пользователя — «Хотите (Добавить в корзину)?» или «Хотите (Подтвердить заказ)?»

Лучше избегать слов «Да», «Нет» или общих слов — например, «Подтвердить/Отправить».

OК/Отмена or Отмена/OК? Любой вариант подходит

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

Действие «OK» в начале соответствует привычному порядку прочтения для большой части людей – слева направо. У Windows кнопка OK идёт сначала.
«OK» в конце улучшает концентрацию и восприятие – пользователи лучше оценивают все варианты перед тем, как принять решение. Также такой порядок помогает избежать ошибок. У продуктов Apple кнопка OK стоит второй.

Избегайте неактивных кнопок

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

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

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

1. Различайте кнопки и ссылки. У них разное предназначение. Их схожесть в интерфейсе будет путать пользователя.

2. Продумайте варианты состояния кнопок. Активна ли она, будет ли подсвечиваться при наведении? Поймёт ли пользователь, что кнопка сработала? – это те вопросы, на которые стоит ответить заранее.

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

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

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

6. Применяйте стандарты при проектировании элементов. Таким образом пользователю не нужно сильно задумываться над взаимодействием и терять время (и нервы).

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

8. Сделайте достаточно большие кнопки. Лучший вариант – от 48х48 dp, что обеспечит в реальных параметрах оптимальный размер – 9 мм.

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

10. Придумайте понятное название для кнопки. В таком случае пользователи будут исполнять указанное там действие.

11. Не беспокойтесь о порядке размещения кнопок «Оk» и «Отмена». В любом случае они будут работать одинаково.

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

Другие материалы по теме

СВЕЖИЕ СТАТЬИ

Другие материалы из этой рубрики

Не пропускайте новые статьи

Подписывайтесь на соцсети

Делимся новостями и свежими статьями, рассказываем о новинках сервиса

Статьи почтой

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

Оставляя свой email, я принимаю Политику конфиденциальности

Наш юрист будет ругаться, если вы не примете 🙁

✓

Спасибо, ждите письмо.

Проверяйте почту — письмо придет в течение 5 минут (обычно мгновенно).

Как запустить email-маркетинг с нуля?

В бесплатном курсе «Rock-email» мы за 15 писем расскажем, как настроить email-маркетинг в компании. В конце каждого письма даем отбитые татуировки об email ⚡️

*Вместе с курсом вы будете получать рассылку блога Unisender

Оставляя свой email, я принимаю Политику конфиденциальности

Наш юрист будет ругаться, если вы не примете 🙁

Как создать кнопку: 7 советов, чтобы на нее кликнули

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

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

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

1. Использование слов-побудителей

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

Получается, что, кнопки без глаголов, типа:

• Подписка на рассылку;
• Загрузка описания;
• Дополнительная информация.

… Станут более действенными, когда будет добавлен глагол…

• Подписаться на рассылку;
• Скачать описание;
• Узнать больше.

2. Ваша кнопка соответствует тесту «WYLTIWLT» (Would You Like То? I Would Like То)

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

• Хотели бы вы [текст на кнопке]? (Would You Like То?)
• Я хотел бы [текст кнопки] (I Would Like То).

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

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

Такой метод был предложен Джонатаном Ричардсом, который создал эту аббревиатуру: WYLTIWLT.

3. Я или Вы: от первого или от второго лица?

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

Кнопку c местоимением от 1 лица («Создать мою учетную запись») нажимали на 24% посетителей больше, чем на кнопку c местоимением от 2 лица («Создать вашу учетную запись»). Разработчики говорят o том, что надписи в кнопке c местоимением от 1 лица работают лучше, так как они говорят за посетителя, совершающего действие, то есть, от человека, который держит мышь или нажимает на экран.

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

4. Используйте цвета, которые контрастируют c другими элементами

Наши глаза беспрерывно сканируют пространство, ища элементы, на которых взгляд останавливается. Все, что создает контраст c окружением, автоматически привлекает внимание. Такое явление заложено в основе природы нашего зрения и мозга, называется это эффектом Фон Ресторфа.

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

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

5. Сделайте кнопку большого размера

Актуально для пользователей смартфонов и планшетов. Пользователю должна быть предоставлена возможность комфортно нажимать на кнопку, как co смартфона, так и c планшета. Следовательно, размер кнопки должен быть соответствующим человеческому пальцу. Компания Apple рекомендует минимальный размер кнопок 44×44 пикселей, но исследования компании МIT Touch Lab показывают, что в среднем размер указательного пальца составляет (если перевести на пиксели) 45×57.

Это связано c тем, что кончик пальца имеет не округлую, а овальную форму. А большой палец несколько больше. Если предполагается, что кнопку будет нажиматься большим пальцем (если, к примеру, она будет располагаться в нижней части приложения для планшета), ее можно сделать шире: 45×72 пикселей.

6. Уменьшите уровень вовлечения («Начать шоппинг» вместо «Купить сейчас»)

Ряд действий ведет к взятию на себя бо́льших обязательств, чем другие. Так же и с кнопками – некоторые из них означают больше обязательств. Они могут вызывать разные психологические реакции и доставлять больше беспокойства. Если кнопка-действие побуждает посетителя потерять время или деньги, то он c меньшей вероятностью кликнет по ней. Протестированы языки кнопок для двух «Начать тест» и «Прочитать обзор». Вторая кнопка получила на 124% больше кликов.

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

7. Создавайте кнопки на основе кода, а не графики

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

У графических кнопок есть ряд проблем.

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

Кнопки на основе кода подобных проблем не создают. Можно создавать отличные кнопки с помощью НTML и СSS, и поэтому нет ни одного весомого довода, почему лучше делать графические кнопки. Кнопки, созданные на основе НTML или СSS, иногда называют «пуленепробиваемые», потому что они отображаются везде, в том числе и в email.

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

Нажатие кнопки

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

Шпаргалки UI дизайнера: создание кнопок – Сей-Хай

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

Итак, в этой статье мы рассмотрим:

Кнопки действия
Общие стили кнопок
Выбор цвета и стиля кнопки
Состояния кнопок и обратная связь
Надпись кнопки
Сенсорные цели
Размещение кнопок
Кнопка доски почета
Заключительные мысли

1. Кнопки действия

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

1. Кнопки призыва к действию (CTA/C2A)

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

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

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

2. Первичное действие

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

Кнопка первичного действия.

Для кнопок этого типа я использую простые прямоугольные кнопки с округлыми краями.

3. Вторичное действие

Вторичные кнопки – это кнопка «Назад» возле первичной кнопки «Далее». Или кнопка «Отмена» возле кнопки «Подтвердить». Вторичные кнопки – это альтернатива первичного действия, которое мы предоставляем пользователям.

Два варианта вторичных действий рядом с первичными.

Для данных кнопок рекомендуется использовать контурные кнопки или текстовые ссылки.

4. Третичное действие

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

Третичные кнопки в разных формах.

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

2. Общие стили кнопок

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

Сплошные кнопки

Все просто, сплошные кнопки – это кнопки со сплошной заливкой.

Сплошная кнопка.

Контурные и призрачные кнопки

Контурные кнопки – это кнопки без заливки. Несмотря на то, что они часто используются взаимозаменяемо, контурные кнопки обычно светлого цвета (с темным контуром и текстом), а кнопки-призраки – темного цвета (со светлым контуром и текстом).

Контурная кнопка (слева) и призрачная кнопка (справа).

Закругленные кнопки

Закругленные кнопки – это кнопки, у которых радиус углов максимально скруглен.

Закругленная кнопка.

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

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

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

Кнопка FAB.

Текстовая ссылка

Текстовые ссылки – это очень простой тип кнопок. Есть несколько способов показать, что надпись является ссылкой. Это может быть цвет, подчеркивание, положение ссылки, или просто сам текст (например, «Читать дальше»).

Оформление текстовых ссылок.

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

Кнопка “значок с надписью”

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

Кнопка “значок с надписью”

Самое сложное в работе с такими кнопками – найти правильное соотношение иконки и шрифта.

Вариант 1: размер иконки соответствует высоте заглавных букв.
Вариант 2: размер иконки намного больше высоты строки.

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

Кнопка-значок

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

Кнопки-значки в разных стилях.

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

Иконка рядом с текстовой ссылкой

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

Кнопки ссылки с иконками.

3. Выбор цвета и стиля кнопки

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

1. Цвет

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

Разноцветные кнопки.

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

Кнопки «Удалить», «Просмотреть предупреждения», «Сохранить» и «Еще».

Например, зеленая кнопка «Удалить» собьет с толку любого пользователя, как и красная «Сохранить».

2. Закругление углов

Закругление углов, а именно свойство border-radius – это то, что придает кнопкам индивидуальность. Кнопки с острыми краями выглядят более серьезно, а с закруглением более непринужденно.

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

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

3. Тень

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

Кнопки с разными настройками тени.

4. Стиль надписи

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

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

Вот несколько простых способов сделать шрифт читабельным:

Лучше использовать заглавные буквы в начале каждого предложения или капитализировать начальные буквы всех слов в предложении, чем делать все буквы заглавными. (Хотя Material Design использует кнопки со всеми заглавными буквами).
Убедитесь, что цвет надписи выделяется на фоне кнопки. В этом поможет этот инструмент.
Выбирая шрифт убедитесь, что он разборчивый и достаточно большой. Также шрифт должен быть средней плотности.

5. Вертикальный отступ

Размер кнопки играет большую роль в доступности интерфейса. Большинство неопытных дизайнеров скажут что-то вроде «Кнопки должны иметь высоту 36 пикселей». Это не лучшее решение, особенно для веб-дизайна. Всегда нужно учитывать высоту строки используемого вами шрифта и добавлять к нему единицу измерения. Например: «Надпись моей кнопки имеет высоту строки 20 пикселей, а отступ по вертикали 8 пикселей».

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

Спросите зачем? Существует две причины:

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

6. Горизонтальный отступ

Первый вариант:

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

Кнопки, ширина которых определяется сеткой.

Второй вариант:

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

Кнопки, ширина которых определяется отступом и длиной надписи.

4. Состояния кнопок и обратная связь

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

1. Активное и неактивное состояние

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

Активная и неактивная кнопка.

2. Hover & hover off (навести курсор/убрать курсор)

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

Кнопка, реагирующая на наведение курсора.

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

3. Фокус внимания

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

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

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

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

4. Нажатие кнопки

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

Кнопка, демонстрирующая состояние нажатия.

5. Нажатая кнопка

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

Кнопка, демонстрирующая состояние нажатой.

5. Надпись кнопки

1. Использование глаголов

Большинство кнопок содержат глаголы для указания того, что кнопка будет делать, например, «Сохранить», «Опубликовать», «Редактировать». Хотя «Назад» и «Далее» не являются глаголами, в контексте интерфейса они работают одинаково. Мне нравится использовать структуру “глагол” + “существительное”. Так действие звучит более инструктивно, например, «Сохранить сообщение», «Следующий шаг» и так далее.

2. Шрифт

Вы также должны решить, какой вариант шрифта использовать. Вот некоторые общие рекомендации:

Все буквы заглавные, например, «СЛЕДУЮЩИЙ РАЗДЕЛ». Я использую их для более профессиональных платформ.
Капитализация начальных букв всех слов в предложении, например, «Следующий Раздел». Я стараюсь ее не использовать, так как текст становится трудночитаемым. Что касается тона, это нечто среднее между профессиональным и разговорным тоном.
Капитализация начальной буквы только первого слова в предложении, например, «Следующий раздел». Я использую ее для более дружественных или разговорных платформ.
Все буквы строчные, например, «следующий раздел». Я очень редко использую надписи со строчными буквами. Наверное, это самый неофициальный выбор из существующих.

3. Последовательность

При выборе надписей для кнопок убедитесь, что вы сохраняете последовательность. Вот несколько вещей, которые следует сделать в начале проекта:

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

6. Сенсорные цели

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

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

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

Размер кнопки для сенсорного экрана

Исследование MIT Touch Lab показало, что часть пальца, используемая для прикосновения к экрану, составляет 8–10 мм, поэтому минимальный целевой размер должен быть 10 мм или больше.

Итак, какого размера нужно делать кнопки? Вот что говорят эксперты:

Material Design считает, что цель касания должна быть 48dp x 48dp с 8dp между точками касания.

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

Спорное положение первичной кнопки

Если бы вы располагали 2 кнопки рядом, на какой стороне находилась бы первичная кнопка?

Две позиции для первичных и вторичных кнопок.

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

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

8. Кнопка доски почета

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

Кнопка Material Design SystemКнопка изображения от Material Design.

Ни один разговор о кнопках не будет полным без упоминания Material Design. Их работа над кнопками и то, как они взаимодействуют с другими компонентами в системе, заслуживает внимания.

Просмотрите их раздел о кнопках здесь.

А также информацию о плавающих кнопках действий можно просмотреть тут.

9. Заключительные мысли

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

Источник: UXDesign

Как сделать кнопку на сайте ссылкой – подробное описание на SeoKlub

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

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

Кнопка, созданная в каком либо графическом редакторе, например Photoshop – это обычная картинка, сохранённая в одном из графических форматов используемых в web-технологиях: GIF, JPEG или PNG, а следовательно на вставку таких картинок распространяются и все правила вставки изображений в HTML. Не буду тратить время, а сразу приведу пример вставки изображений для кнопки.

1. <img src=”files/img/img.jpg” width=”200″ height=”67″>

Поясню, графический файл (картинка кнопка), имеет следующие параметры: имя img.jpg, ширина 200 пикселей, высота 67 пикселей, путь до этого файла (лежит на сайте) files/img/img.jpg.

Второй важный момент – это создание ссылки. В примере 2, приведен код текстовой ссылки, которая ведет на главную страницу моего сайта http://www. seoklub.ru/

2. <a href=”http://www.seoklub.ru”>http://www.seoklub.ru/</a>

Естественно в якоре ссылки вы можете указать любой нужный Вам текст. А теперь наша задача совместить в коде web-страницы вставку картинки и в качестве якоря ссылки указать не текст а картинку (графический файл) в данном случае это будет наша с Вами кнопка (графический файл img.jpg).

3. <a href=”http://www.seoklub.ru/” target=”_blank”>
<img src=”files/img/img.jpg” alt=”Главная страница”
width=”200″ height=”67″ border=”0″></a>

Теперь сделаем относительную ссылку (относительная ссылка – это ссылка работающая в пределах одного сайта).

4. <a href=”articles.html” target=”_blank”>
<img src=”files/img/stat.jpg” alt=”Статьи сайта seoklub.ru”
width=”200″ height=”67″ border=”0″></a>

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

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

Есть вот такой интересный сервис – dabuttonfactory.com. Этот сервис абсолютно бесплатный. Там можно выбрать разные дизайны кнопочек и сделать на них нужные надписи. Я покажу процесс создания кнопочки на примере.

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

Первое поле TEXT – вводим здесь текст, который должен быть на кнопке. Например, я ввожу НОВОСТИ. Изменения сразу видны в центре экрана.

Выбираем шрифт Font. Выбираем Sans – serif, Bold – Жирный, Italic – курсив. Отметьте галочкой то, что нужно. Я оставляю Bold, галочку с Italic снимаю.

Size размер шрифта. Плюсиком или минусом можно увеличивать или уменьшать. Я остановилась на 17.

Color – цвет шрифта. Если кликнуть по этому окошку, можно выбрать на палитре нужный цвет. Я оставляю белый. Чтобы палитра свернулась после того, как Вы выбрали нужный цвет, кликните в любую область экрана или нажмите кнопку Escape.

Text Shadow – тень у текста. Distance – расстояние от текста до тени, Color – цвет тени. Пробуйте. Вы будете видеть результат.

Output type – Формат готового варианта. Нам нужна картинка Image, пусть будет в формате jpeg.

Переходим к правой части экрана. Button Type – возможные варианты – круглая, квадратная и с закругленными углами. Я оставила круглую.

Background – фон кнопки. Можно выбрать моноцвет, то есть один цвет, два цвета, градиент – перелив от одного цвета к другому. Соответственно, цвета выбрать рядом. Поэкспериментируйте. Я выбрал градиент от желтого к оранжевому.

Border – граница кнопки, обводка другими словами. Если поставить тут галочку, то нужно выбрать размер границы и цвет. Я этот параметр не включаю.

Shadow – тень кнопки. Также нужно выбрать цвет тени и расстояние от кнопки до тени. Делайте как больше нравится. Я делаю без тени.

Size – размер кнопки. Variable – варьируется в зависимости от длины текста на кнопке. Можно задать интервалы, которые должны быть вокруг текста. Я выбираю Fixed – фиксированный размер (то есть независимо от длинны текста). И задаю ширину – 150 и высоту 50.

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

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

Расширенный поиск Запросить дизайн

[ Векторы ] Наборы плоских кнопок дизайна веб-сайта (ai, eps 1.55MB)

All-free-download.com

[ Векторы ] Дизайн интерфейса сайта в классическом стиле (ai, eps 1. 32MB)

All-free-download.com

[Векторы] Иллюстрация кнопок сайта в современном горизонтальном стиле (ai, eps 564.57KB)

All-free-download.com

[ Векторы ] глянцевый набор веб-кнопок (ai, eps 1.43MB)

All-free-download.com

[ Векторы ] рекламные кнопки набор иллюстраций в красном и черном (ai, eps 1.43MB)

All-free-download.com

[ Векторы ] Поисковые кнопки с набором дизайнов различной формы (ai, eps 2.22MB)

All-free-download. com

[ Векторы ] Кнопка веб-страницы устанавливает блестящий красочный орнамент (ai, eps 4.28MB)

All-free-download.com

[ Векторы ] pikkie Pret Painting для школьных элементов сельского хозяйства ( .ai .eps 2.88MB )

All-free-download.com

[ Векторы ] Иллюстрация кнопок веб-сайта в современном пластиковом стиле (ai, eps 1.04MB)

All-free-download.com

[Векторы] дизайн набора цифровых кнопок с блестящими красными значками (ai, eps 2.60MB)

All-free-download. com

[ Векторы ] горизонтальные кнопки веб-страницы задают дизайн с пользовательским интерфейсом (ai, eps 1.53MB)

All-free-download.com

[Векторы] наборы кнопок пользовательского интерфейса с горизонтальными вкладками (ai, eps 1,023.60KB)

All-free-download.com

[ Векторы ] Шаблоны кнопок веб-страниц красочные плоские горизонтальные округлые формы (ai, eps 2.60MB)

All-free-download.com

[ Векторы ] элементы дизайна кнопок пользовательского интерфейса веб-сайта (ai, eps 1.33MB)

All-free-download. com

[ Векторы ] элементы дизайна десятизначных кнопок в стиле круглого стекла (ai, eps 4.19МБ)

All-free-download.com

[ Векторы ] значки кнопок веб-страницы блестящие многоцветные круги (ai, eps 3.92MB)

All-free-download.com

[ Векторы ] Дизайн кнопок электронной коммерции на зеленом фоне (ai, eps 3.81MB)

All-free-download.com

[ Векторы ] векторный дизайн кнопок веб-сайта различной формы (ai, eps 2.97 МБ)

All-free-download.com

[ Векторы ] Дизайн кнопок веб-сайта с горизонтальными формами (ai, eps 1. 34MB)

All-free-download.com

[ Векторы ] Дизайн горизонтальных кнопок сайта в классическом стиле (ai, eps 1.13MB)

All-free-download.com

кнопки кнопки веб-сайт редактируемые редактируемые кнопки редактируемый веб-сайт для веб-сайта бесплатный веб-сайт скачать бесплатно кнопки векторов для веб-сайтов бесплатные бесплатные иконки кнопка бесплатная векторная графика для веб-сайта

[Векторы] Дизайн кнопок регистрации с цветными горизонтальными вкладками (ai, eps 813.97KB)

All-free-download.com

[ Векторы ] Дизайн интерфейса входа в систему с блестящими закругленными кнопками (ai, eps 1. 61MB)

All-free-download.com

[Векторы] Дизайн цифровых кнопок с блестящим черным фоном (ai, eps 4.15MB)

All-free-download.com

[Векторы] Дизайн кнопок веб-сайта с блестящими цветными вкладками (ai, eps 1.81MB)

All-free-download.com

[ Векторы ] аудио кнопки векторная иллюстрация с розовым фоном (ai, eps 2.40MB)

All-free-download.com

Загрузка дополнительных элементов, пожалуйста, подождите…

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

Критерий поиска:

Тип поиска:

Совпадение с любымСовпадение со всеми

Искать в:

ВекторыИконкиФотоШрифтыШаблоны сайтовPSD

Лицензия:

Все лицензииРазрешить коммерческое использование

Результат сортировки:

Сначала лучшее совпадениеСначала новыеСначала много загрузокСначала меньше загрузок

Дом
Лицензии
Срок
Конфиденциальность
О
Связаться с

Основные типы кнопок в пользовательском интерфейсе | by tubik

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Размер

Размер — один из основных способов проинформировать пользователей о важности элемента макета и построить иерархию компонентов. Привлекательная и эффективная кнопка призыва к действию должна быть достаточно большой, чтобы ее можно было быстро найти, но не слишком большой, чтобы не испортить структуру макета. Лидеры рынка часто дают рекомендации по правильному размеру кнопок в своих рекомендациях. Например, Apple говорит, что CTA в мобильном интерфейсе должны быть не менее 44Х44 пикселей, а Microsoft рекомендует 34Х26 пикселей. Если вы разрабатываете дизайн для мобильных устройств, требования к различным типам кнопок могут быть довольно строгими, поэтому внимательно изучите рекомендации, чтобы свести к минимуму риски отклонения приложения из-за плохого дизайна пользовательского интерфейса.

Цвет

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

Форма

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

Расположение

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

Копия

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

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

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

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

Рекомендации по дизайну заголовков веб-сайтов
Глоссарий UI/UX Design: элементы навигации
Призыв к вниманию. Мощный дизайн кнопки CTA
7 советов по улучшению взаимодействия с мобильными устройствами
Не спешите: советы по созданию пользовательских интерфейсов, экономящих усилия
Визуальная иерархия: эффективная организация содержимого пользовательского интерфейса
Гештальт-теория для дизайна UX: принцип близости
Гештальт-теория для эффективного UX: принцип подобия
UX-дизайн: как сделать веб-интерфейс сканируемым08

3 03 написано Марина Яланска для Блог Tubik
Добро пожаловать, чтобы проверить дизайн и искусство Tubik через:
Tubik Website
Dribbble
Behance
Tubik Arts

The Ultimate Website Button Design Guide to Get More Clicks

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

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

Различные типы кнопок для веб-сайтов
Важность дизайна кнопок
Эффекты размещения кнопок
Как правильно использовать текст кнопки
Психология кнопок на вашем сайте
Дизайн мобильных кнопок
Чего следует избегать при разработке кнопок
Как проверить эффективность дизайна ваших кнопок

Какие типы кнопок можно использовать на веб-сайте?

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

1. Кнопки добавления в корзину

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

2. Кнопки загрузки

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

3. Кнопки подписки

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

4. Кнопки «Подробнее» или «Узнать больше»

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

Хотя недавние исследования показывают, что было бы лучше, если бы текст кнопки был более прямым, поэтому вместо простого «узнать больше» может быть лучше включить больше контекста о том, что пользователь должен узнать, т.е. «Узнать больше о…».

5. Кнопки регистрации

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

6. Кнопки «Поделиться»

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

7. Кнопки контактов

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

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

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

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

1. Кнопки должны выглядеть как кнопки

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

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

2. Психология цвета

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

Пример из практики Dmix. После теста вариантов A/B на главной странице призыва к действию Dmix обнаружил, что когда кнопка была красной, а не зеленой, коэффициент конверсии увеличился на 34%.
A/B-тест Hubspot, аналогичный тесту Dmix, также сравнивал зеленые и красные кнопки. Из 2000 посещений страницы красная кнопка получила на 21% больше кликов, чем зеленая кнопка призыва к действию.

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

3. Доступность кнопок

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

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

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

4. Использование значков

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

5. Размер не всегда имеет значение

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

Как размещение кнопок может повысить CTR?

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

1. Кнопки в верхней части страницы

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

2. Иерархия кнопок

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

3. Несколько кнопок

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

Если вы используете несколько кнопок в одном и том же разделе, иногда это может привести к тому, что пользователь пойдет по неверному пути, что может расстроить потенциального клиента, и вы можете потерять интерес или продажу. Иногда следовать K.I.S.S, Keep It Simple Stupid — лучший путь вперед.

Преобразование копии кнопки

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

2. Триггеры

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

3. Срочность

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

4. Креативность

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

Психология кнопки

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

1. Цвет

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

2. Копирование

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

3. Форма

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

4. Эффекты состояния

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

Некоторые важные состояния кнопок, которые необходимо учитывать:

Активно: при нажатии кнопки
Наведение: когда пользователь наводит курсор на кнопку
В фокусе: когда пользователь нажимает кнопку
не могу нажать на кнопку

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

Разработка кнопок для мобильного дизайна

Поскольку использование мобильных устройств обогнало настольные компьютеры, важность проектирования, ориентированного на мобильные устройства, резко возросла. В большинстве отраслей вам нужно больше сосредоточиться на мобильном дизайне, чем на настольном. Поэтому ваша кнопка должна выглядеть привлекательно на мобильных устройствах. С мобильными ограничениями, такими как ограниченное пространство, легко поставить под угрозу ваш UX, ошибки обычно делаются из-за дизайна вашего пользовательского интерфейса (UI). Отсутствие визуальной обратной связи, неотзывчивые кнопки и скрытые кнопки — все это способствует ошибкам, допущенным в плохом мобильном дизайне UI/UX. Таким образом, при разработке призывов к действию для мобильных устройств необходимо сосредоточиться на следующих ключевых моментах:

1. Согласованность

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

2. Размер

Размер — важный фактор, который следует учитывать при разработке дизайна кнопок на мобильных устройствах, поскольку пользователям приходится «нажимать» на них. У Apple, Android и Google есть конкретные рекомендации по размеру ваших сенсорных целей, это 48dp x48dp с некоторым отступом между кнопкой и копией кнопки не менее 8dp.

3. Отступы

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

4. Форма

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

5. Размещение

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

Чего следует ИЗБЕГАТЬ при разработке кнопок для веб-сайта?

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

Неопределенность
Нет визуальной обратной связи
Несовместимость
Кнопки, которые не похожи на кнопки
Неправильная иерарха
. также дискредитирует ваш веб-сайт в рейтингах доступности в тесте Google Lighthouse. Нечеткий текст кнопки может привести к тому, что ваши пользователи либо проигнорируют кнопку, либо предпримут неправильное действие, что отрицательно скажется на вашем бизнесе.
Тем не менее, благодаря четкой маркировке текста кнопки и точному указанию пользователя ваш UX выиграет, и ваши пользователи будут в лучшем положении.
2. Визуальная обратная связь
С помощью визуальной обратной связи изменение состояния кнопки зависит от предпринятого или предстоящего действия. Например, если ваш пользователь вводит данные карты, но не заполняет форму, кнопки для оформления заказа или покупки должны быть в «отключенном» состоянии до тех пор, пока все поля не будут успешно заполнены. Это отключенное состояние можно отобразить с помощью визуальных средств, чтобы показать, что его нельзя щелкнуть, например, добавить прозрачность или показать отключенный курсор при наведении. Наличие отличной кнопки означает, что ваши пользователи могут получать визуальную обратную связь на протяжении всего процесса, состояния кнопок следующие:
- Первичный — Когда кнопка готова к использованию
- Активный — Состояние после нажатия кнопки или ее «активации»
- Наведение — При наведении курсора на кнопку должен произойти эффект
- Сфокусированный — Когда клавиатура фокусируется на кнопке или находится в состоянии нажатия
- Отключено — если кнопка в данный момент не интерактивна
3.
Несоответствие
Дизайн кнопок должен быть одинаковым на всем веб-сайте, одинаковым по дизайну, форме, размеру, стилю , цвет и многое другое. Это помогает пользователям понять, что является кнопкой, а что нет, помогает вашему брендингу, устраняет ошибки и делает пользовательский интерфейс более привлекательным. Даже при разработке дизайна для мобильных устройств важно соблюдать последовательность, чтобы пользователи знали, что является кнопкой, а что нет.
4. Кнопки, которые не выглядят как кнопки
Как упоминалось ранее, если ваши кнопки не будут выглядеть как кнопки, ваши пользователи останутся в замешательстве и, вероятно, покинут ваш сайт, если они не смогут действовать. Совершение действий на веб-сайте, будь то контакт, звонок, покупка или что-то еще, для чего предназначена кнопка, является основной задачей и целью вашего веб-сайта. Многие дизайнеры поддаются проблеме чрезмерного творчества с дизайном своих кнопок, это может быть контрпродуктивным и влиять на UX. Вы никогда не должны жертвовать своим UX ради своего пользовательского интерфейса, потому что, в конце концов, то, как ваши пользователи воспринимают и используют ваш сайт, является наиболее важным аспектом.
5. Неправильная или неудобная иерархия
Ваш UX следует определенному маршруту, с того момента, как ваш пользователь получает доступ к вашему веб-сайту, он находится на пути, конечным результатом является покупка продукта, заполнение формы, подписка или что-то еще на вашем веб-сайте. путешествие заканчивается в. Чтобы получить результат, пользователи должны нажать кнопку, однако, если они не размещены явно на «нормальных» позициях, то ваш сайт с меньшей вероятностью выполнит свою задачу. Под «нормальными» позициями мы подразумеваем обычные позиции, в которых пользователи ожидают, что кнопки будут находиться, например, в правом верхнем углу панели навигации.
6. Слишком много кнопок
Имея слишком много кнопок на своем веб-сайте, вы, вероятно, перегрузите своих пользователей и приведете их в неправильное место или полностью оттолкнете их от вашего веб-сайта. Меньший выбор может означать больше действий, слишком большой выбор может привести к нерешительности, запоздалым действиям и бездействию, также известному как Парадокс выбора. На каждом этапе вашего веб-сайта вы должны думать, какое самое важное действие вы хотите, чтобы ваши пользователи выполняли, и расставлять приоритеты.
Как проверить эффективность дизайна кнопок?
Здорово научиться создавать эффективные и конвертирующие кнопки, однако самое главное — протестировать их. Без тестирования ваших кнопок может быть трудно понять, успешны ли они или могут ли они быть более успешными. К счастью, есть 3 метода проверки эффективности кнопок призыва к действию.
1. Навигационный тест
2. A/B вариационный тест
3. Тепловые карты
1. Навигационный тест
При проектировании кнопок важно помнить о некоторых ключевых вопросах, которые помогут вам с размещением кнопок и типом кнопок нужно и куда это должно привести пользователя. Тестирование навигации обычно происходит на уровне макета веб-дизайна, чтобы помочь вам визуально увидеть, как ваш пользователь будет перемещаться по вашему веб-сайту и как доставить его туда, куда вы хотите. Важный шаг при создании макета, который поможет вам разработать наиболее эффективные кнопки, — это задать себе несколько вопросов, таких как:
- Это логическая навигация?
- Могут ли пользователи найти основные услуги/функции?
- Понимает ли пользователь свой выбор?
- Будет ли пользователь знать, что делать дальше?
Есть много вопросов, которые вы можете выделить и использовать в качестве руководства для навигации по вашему веб-сайту. Навигационный тест — важный шаг, но его следует провести до разработки веб-сайта.
2. Сплит-тестирование вариантов A/B
Когда ваш веб-сайт уже запущен и вы получаете трафик, вы можете приступить к тонкой настройке дизайна для его дальнейшей оптимизации и улучшения UX. Как вы можете это сделать? Просто изменив одну функцию, и это может быть что угодно, от кнопок до шрифта, цветов и многого другого, и увидеть эффекты после вашего изменения, отслеживая свою аналитику, чтобы увидеть, заметили ли вы какие-либо улучшения или недостатки.
Вы можете использовать A/B-тестирование для тестирования разных типов одной и той же кнопки, просто изменив цвет, визуальный эффект или копию, чтобы увидеть, как ваши пользователи реагируют на это. Отслеживание эффективности в течение определенного периода времени и определение того, какая кнопка имеет лучший CTR, может помочь вам понять, какой дизайн работает лучше всего.
3. Тепловые карты
Тепловые карты могут служить ключевым индикатором популярности вашей кнопки. Вы можете визуально увидеть, нажимают ли вашу кнопку, просматривают или видят. Как и в случае с A/B-тестированием, вы можете изменить расположение кнопки и ее дизайн, а также увидеть все положительные моменты на тепловой карте, чтобы отслеживать успехи и неудачи. Тепловые карты могут показать много преимуществ благодаря размещению кнопок, визуально видя путь вашего пользователя и то, как изменение положения кнопки может улучшить его. Программное обеспечение, такое как Smartlook, можно использовать для демонстрации вашего пользовательского опыта и навигации по вашему веб-сайту.
Что взять с собой?
Если вы добрались до конца нашей статьи, поздравляем, это исчерпывающий текст, который подробно объясняет важность дизайна кнопок для веб-сайтов и, при правильном использовании, может помочь вам увеличить количество кликов, которые получают ваши кнопки. . Итак, что вы можете вынести из этой статьи?
1. Различные типы кнопок на сайте.
2. Психология кнопок важна.
3. Дизайн для вашей аудитории обязателен.
4. Как избежать типичных ошибок проектирования.
5. Отображение различных состояний кнопок.
6. Важность кнопок для мобильного дизайна.
7. Как протестировать дизайн кнопок и оптимизировать их?
Просмотры сообщений: 418
13 новейших и лучших дизайнов кнопок, которые нельзя пропустить в 2018 году
Кнопки, как один из важнейших элементов дизайна пользовательского интерфейса, могут не только эффективно направлять пользователей через веб-сайт/мобильное приложение, но и побуждать их нажимать на них, чтобы улучшить продажи. Вот почему, чтобы выделить свои кнопки, дизайнеры UX/UI должны уделять большое внимание дизайну кнопок и читать многочисленные статьи, в которых анализируются и делятся принципами, секретами и способами установки размера, положения, формы, цвета и других факторов.
Однако для опытных профессионалов таких статей/руководств уже недостаточно для создания отличной и полезной кнопки. Вам действительно нужны новые подсказки, идеи или вдохновение, чтобы сделать уникальную и отличительную кнопку для ваших веб-приложений и мобильных приложений?
ОК! Вот 13 последних и лучших практик с кнопками , которые вы не должны пропустить в 2018 году. Надеюсь, они смогут вас как-то вдохновить:
1. FAB Microinteraction
*Дизайнер: Mayur Kshirsagar
*Важно: Очень крутая плавающая кнопка навигации и продуманный дизайн круговой навигации
В FAB используется очень крутая плавающая кнопка, которая привлекает внимание пользователей и расширяет функции веб-приложения/мобильного приложения. Хорошо продуманная круговая навигация также очень привлекательна и полезна для ваших пользователей, она позволяет им легко выбирать и переключаться на другие части этого веб/мобильного приложения. В целом, весь этот дизайн кнопки действительно креативен, интересен и может создать очень приятный пользовательский опыт.
*Что вы можете узнать:
Добавьте плавающие кнопки навигации, чтобы привлечь внимание пользователей и улучшить взаимодействие с пользователем. функции веб-сайта/мобильного приложения и настроить особый способ расширения меню, параметров или функций на основе взаимодействия пользователей с этими плавающими кнопками. Таким образом, такие плавающие кнопки могут быть действительно интересными, привлекательными и впечатляющими для пользователей.
Кроме того, вы также можете узнать еще секретов о том, как с легкостью создавать превосходные плавающие кнопки.
2. Интерактивный дизайн кнопки ввода. пользователи не могут сопротивляться взаимодействию с.
После того, как пользователи вводят электронную почту, им нужно сдвинуть белую кнопку, чтобы запустить небольшой бумажный самолетик. Чем дальше будет сдвинута маленькая белая кнопка, тем выше взлетит белая бумага. Такие дизайнерские стратегии действительно интересны и привлекательны.
*Что вы можете узнать:
Добавьте интеллектуальные взаимодействия, игры и динамические эффекты, чтобы сделать вашу кнопку превосходной
Когда вы пытаетесь создать превосходный дизайн кнопки, вы можете добавить такие интеллектуальные взаимодействия, игры и динамические эффекты чтобы сделать вашу кнопку интересной и неотразимой. Чем интереснее и привлекательнее ваша кнопка, тем больше шансов, что пользователи нажмут на нее, и вы увеличите количество разговоров.
3. Микровзаимодействие для кнопки печати
*Дизайнер: Quovantis
*Важно: используйте функцию «кнопка + анимация», чтобы более наглядно показать функции кнопок печатается. Микровзаимодействие для кнопки печати — это действительно яркий способ показать, как работает функция этой «кнопки печати», и эффективный способ помочь пользователям убить время, пока им приходится ждать печати большого количества файлов. В целом, это отлично подходит для улучшения пользовательского опыта.
*Что вы можете узнать:
Добавляйте к кнопкам яркую анимацию на основе различных меток кнопок, функций и сценариев
В дизайн кнопок вы можете включить несколько забавных или гламурных анимаций, чтобы сделать ваши кнопки привлекательными и выдающийся на основе различных сценариев кнопок.
4. Микроинтерактивность
*Дизайнер：Alvaro Secilla
*Важно: Привлекательные эффекты наведения для кнопок
В микровзаимодействии используются очень привлекательные эффекты наведения. Когда пользователи перемещаются над кнопкой CTA или пересекают ее, границы этой кнопки начинают ритмично дрожать. Как только пользователь уберет курсор мыши, эффект наведения немедленно прекратится, как будто его никогда не было раньше. Такие дизайны действительно интересны и привлекают внимание. Они могут быть очень полезны, чтобы побудить пользователей щелкнуть мышью и перейти к следующему этапу, например к покупке продукта, чтению более подробной информации или заполнению контактной информации и т. д.
*Что вы можете узнать:
Оптимизируйте дизайн кнопок с помощью богатых эффектов наведения или взаимодействия
В веб-дизайн или дизайн приложения вы можете добавлять различные эффекты наведения или взаимодействия для оптимизации дизайна кнопок. Например, вы можете добавить некоторые изменения цветов, теней, форм, текстов, непрозрачности, рамок и анимации кнопки, чтобы сделать ее более привлекательной для пользователей. Вы также можете научиться легко и быстро создавать эффекты наведения с легкостью.
5. Динамическая кнопка загрузки/загрузчик
*Дизайнер: Али Саид загрузка файла будет показана автоматически. Динамический помогает уменьшить разочарование пользователей, пока они ждут загрузки контента. И это действительно мило и впечатляюще.
*Что вы можете узнать:
Улучшите дизайн кнопок загрузки с помощью правильной анимации загрузки
Кнопки загрузки являются обычной частью веб-приложений или мобильных приложений. Анимации загрузки, такие как динамические индикаторы выполнения , эффективно снижают негативные эмоции пользователей во время ожидания. Таким образом, идеальное сочетание кнопок загрузки и анимации загрузки, несомненно, приведет к гораздо более великолепным эффектам.
6. Анимация скользящей кнопки
*Дизайнер: Серхад Илетир
*Важно: Умная скользящая кнопка и цветовой градиент
В этом дизайне скользящей кнопки, когда щелкает мышь, кнопка автоматически перемещается туда. Это креативно и ярко. А цветовые градиенты также делают весь дизайн кнопок более красивым и модным. Все эти методы дизайна действительно эффективны, чтобы привлечь внимание пользователя и заставить его щелкнуть мышью.
*Что вы можете узнать:
Улучшение скользящих кнопок с изменением цвета, непрозрачности, формы и многих других визуальных свойств
Кнопка-переключатель — один из самых популярных типов кнопок среди дизайнеров. И вы можете попытаться улучшить свои скользящие кнопки, изменив цвет, непрозрачность, формы, закругленные углы и другие факторы. Эти изменения будут очень эффективны для увеличения кликабельности веб-сайта или приложения.
7. Микроинтерактивность 04
*Дизайнер: Альваро Сесилла
*Основные моменты: материализовать кнопку CTA в сочетании функций кнопки
Microinteraction 04 придает кнопке CTA материализованный вид, динамичный скейтборд вместе с надписью «изучайте новые трюки», что позволяет пользователям более интуитивно и ясно понимать функции и функции этой кнопки. И такие дизайнерские стратегии действительно вдохновляют и достойны подражания в вашем дизайне.
*Что вы можете узнать:
Создайте материализованный вид кнопок, чтобы их было легче понять
8. Чехлы для сенсорных кнопок
*Дизайнер: Khalil Hanna
*Важно: Упрощение дизайна кнопок за счет изменения цвета, значков и фоновых фотографий
На первый взгляд, эта серия дизайнов кнопок выглядит красиво просто и понятно. Однако, когда эти кнопки разработаны в сочетании с изменением значков, цветов и фоновых фотографий, они также могут оказаться интуитивно понятными и изменчивыми. И такие конструкции будут очень полезны для пользователей, чтобы они легко узнавали и использовали эти кнопки.
Кроме того, упрощенный стиль дизайна также эффективен для уменьшения помех от ненужных отвлекающих факторов и позволяет пользователям сосредоточиться на функциях этих кнопок/веб-сайтов/приложений. При необходимости вы также можете изучить , как легко упростить прототип или конструкцию.
*Что вы можете узнать:
Оптимизируйте свой сайт/приложение с помощью упрощенного, но не скучного дизайна кнопок минималистичный, но никогда не скучный дизайн кнопок для привлечения большего числа пользователей.
9. Переключатель Poodle
*Дизайнер: Vanessa Brown
*Изюминка: милая скользящая кнопка и креативные переходы между 2D- и 3D-эффектами
Poodle Switch показывает симпатичные скользящие кнопки с визуальными эффектами. Кнопка с симпатичным значком пуделя трансформируется между 2D и 3D в процессе скольжения с одного конца на другой. А вместе с изменением текстовой метки кнопок весь дизайн становится действительно интуитивно понятным, чтобы пользователи могли четко знать функции этой кнопки.
Кроме того, бело-розовая цветовая гамма эффективно привлекает пользователей, которые любят очаровательных собак, кошек и домашних животных.
*Что вы можете узнать:
Улучшите дизайн кнопок вашего веб/мобильного приложения с помощью 3D/2D и скользящих эффектов проекты веб-сайтов также могут быть крутыми, чистыми, простыми и привлекательными, если вы добавите соответствующие 2D / 3D / скользящие эффекты и тексты. Визуальные эффекты таких кнопок тоже будут великолепны.
10. Меню
*Дизайнер: Олег Фролов
*Важно: Уникальный переключатель/кнопки меню
В отличие от некоторых обычных кнопок навигации/меню, которые показывают опции с раскрывающимся списком, 708 В меню используется переключатель меню, который позволяет пользователям переключать различные параметры. И этот эффект наверняка впечатлит пользователей и подарит им довольно интересный опыт.
*Что вы можете узнать:
Сделайте кнопки меню/навигации привлекательными, используя уникальные способы расширения/переключения параметров.
Подобно круговой навигации, упомянутой выше, этот переключатель меню в этом дизайне также действительно хорош, и его стоит попробовать в вашем дизайне. Конечно, лучше создать свой собственный уникальный способ предоставления опций меню, чтобы продемонстрировать свое творчество. Это действительно работает для пользователей.
11. Может ли кто-нибудь нажать
*Дизайнер: Мехди Махдлоо
*Важно: Очень заманчивая микрокопия
Может ли кто-нибудь нажать на нее? Это эмоциональный дизайн кнопки. На микрокопии кнопки написано: «Кто-нибудь может ее нажать? Пожалуйста…» Это очень остроумный и соблазнительный дизайнерский прием. Прочитав эту копию, я просто не могу не нажать на нее, хотя и не знаю, для чего эта кнопка. А ты?
*Что вы можете узнать:
Добавьте привлекательную микрокопию на свой веб-сайт/кнопки мобильного приложения
Когда вы пытаетесь создать креативную кнопку, не забудьте выбрать и добавить привлекательную микрокопию для вашей кнопки в соответствии с ее особенностями и функциями. Это действительно эффективно для установления эмоциональной связи с пользователями и поощрения их кликов.

12. Элементы UI
*Дизайнер: Matt Bonini
*Основные моменты: отличная комбинация кнопок призраков и плоских кнопок
Ui Element и плоские пуговицы. Когда плоская кнопка используется вместе с кнопкой-призраком, плоская кнопка будет более привлекательной. И макет всего веб-сайта / мобильного приложения будет затронут, когда будет использоваться много контрастных кнопок.
Поэтому попробуйте использовать в своем дизайне как плоские, так и призрачные кнопки, чтобы определить важность и иерархические отношения этих кнопок.
*Что вы можете узнать:
Улучшите дизайн вашего веб-сайта/приложения с помощью кнопок-призраков и плоских кнопок
Создание контраста с изменением цветов, теней, размеров и других визуальных свойств сделает дизайн ваших кнопок совершенно другим .
13. Реалистичные кнопки
* Дизайнер: Тоби Сантасо
* Особенности: Реалистичные кнопки и крутой эффект свечения
Реалистичные кнопки используют реалистичный стиль дизайна, добавляя три реальных кнопки с классным эффектом свечения. И эти кнопки настолько похожи на реальные кнопки различных электронных приборов, что люди, конечно же, не могут не нажимать на них. Таким образом, создание таких реалистичных кнопок — очень хорошая идея для повышения кликабельности веб-сайта/мобильного приложения.
*Что вы можете узнать:
Добавьте реалистичные кнопки, чтобы усилить ощущение знакомства
Это 13 примеров лучших практик дизайна кнопок, которые идеально сочетаются с взаимодействиями, анимацией, значками, индикаторами выполнения, фоновыми фотографиями, небольшими играми и другими привлекательными элементами. . Надеюсь, они вдохновят вас на создание собственных кнопок.
Mockplus поможет вам легко и быстро создать и протестировать дизайн кнопки веб-приложения или мобильного приложения
Независимо от того, какой тип кнопок вы пытаетесь разработать, будь то кнопки CTA, кнопки навигации/меню, кнопки ввода или что-то другое , он должен быть естественной частью веб-приложения или мобильного приложения и должен быть там протестирован. И вам обязательно понадобится инструмент для прототипирования, который поможет вам эффективно создавать и тестировать дизайн кнопок, а также весь прототип веб-приложения или мобильного приложения.
Однако проблема в том, что вы просто не знаете, какой инструмент прототипирования подойдет вам лучше всего? Не волнуйся! Mockplus , более простой и быстрый инструмент для создания прототипов с мощными функциями, станет вашим лучшим выбором для тестирования и улучшения дизайна кнопок веб-сайта/мобильного приложения:
Шаг 1. Создавайте различные кнопки с различными компонентами кнопок
Каждому веб-сайту/мобильному приложению требуется множество кнопок с различным внешним видом, формой и стилем. Это, безусловно, потребует, чтобы используемый инструмент прототипирования мог предложить пользователям больше опций или функций для создания всех необходимых типов кнопок для оптимизации их дизайна интерфейса. Mockplus предлагает дизайнерам различные компоненты кнопок:
* Используйте компоненты «Кнопка» для создания основных кнопок, таких как кнопки CTA
* Используйте компоненты «Кнопка со значком» для создания кнопок со значками
* Используйте компоненты «Значок и метка» для создания кнопок со значками и метками
Кроме того, вы также можете легко установить цвета, границы, комментарии и фон этих компонентов кнопки, чтобы сделать их изменчивыми и привлекательными.
Кроме того, Mockplus предлагает мощную библиотеку иконок с более чем 3000 векторных иконок, которые позволят вам поиграть с гораздо большим количеством вариантов дизайна.
Шаг 2. Добавьте кнопки со специальными фоновыми фотографиями с помощью компонента «Изображение»
Нужно добавить несколько хорошо обработанных фоновых фотографий, чтобы создать уникальный дизайн для ваших кнопок? В Mockplus вы можете легко использовать компоненты «Кнопка» и «Изображение» вместе для достижения этой цели.
Кроме того, если вам нужно создавать кнопки со специальными фоновыми фотографиями в пакетном режиме, вы можете использовать Repeater для быстрого и простого создания таких кнопок.
Шаг 3. Добавьте привлекательный микротекст с помощью компонентов «Ярлык» и «Текстовая область»
Привлекательный микротекст играет важную роль в привлечении внимания пользователей и привлечении их к клику. С Mockplus вы можете легко добавлять компоненты «Ярлык» и «Текстовая область», чтобы настроить идеальные тексты для дизайна кнопок.
Шаг 4. Сохраняйте, повторно используйте и делитесь стилями кнопок с помощью «Стиля компонента»
В дизайне веб-сайтов/мобильных приложений дизайнеры обычно повторно используют стили разных кнопок. Это не только экономит драгоценное время дизайнеров, но и позволяет им создавать более качественные мировоззрение. В Mockplus вы можете использовать « Component Style », чтобы свободно сохранять, повторно использовать и делиться стилями кнопок одним щелчком мыши.
Шаг 5. Добавьте интеллектуальные взаимодействия, чтобы сделать ваши кнопки динамичными и привлекательными
Mockplus предлагает множество богатых и интеллектуальных вариантов взаимодействия для создания действительно отзывчивых и привлекательных кнопок. Например, вы можете попробовать добавить эффекты наведения, загрузки и клика простым перетаскиванием.
Кроме того, Mockplus предоставляет функцию Interaction State , которая может помочь дизайнерам добавлять эффекты наведения для своих кнопок. Это тоже стоит попробовать.
Шаг 6. 8 способов протестировать дизайн кнопки и поделиться им
Mockplus предлагает 8 способов протестировать дизайн кнопки и поделиться им. Они чрезвычайно полезны для дизайнеров, которые хотят получать отзывы от других дизайнеров/пользователей и улучшать свои проекты.
Шаг 7. Используйте другие функции, чтобы легко и быстро создать и протестировать прототип веб-приложения или мобильного приложения.
Управление командой недавно выпущенных версий Team и Enterprise Edition и т. д. проекты, Mockplus легко удовлетворит все ваши потребности.
Резюме
Таким образом, как важный элемент мобильного/веб-приложения, кнопки также могут быть сложными, даже если они могут выглядеть очень простыми и незамысловатыми. Вот почему опытный UX/UI-дизайнер всегда должен пытаться создавать разные кнопки разными способами, основываясь на разных функциях, сценариях и многом другом.
Например, если вы хотите создать кнопки CTA, чтобы привлечь внимание пользователей и побудить их щелкнуть, вы должны попытаться изменить цвета, формы, метки и положение кнопок, чтобы сделать их очевидными и привлекательными.
Однако, когда дело доходит до дизайна меню/кнопки навигации , лучше использовать прогрессивные методы раскрытия или плавающие эффекты, чтобы сделать их простыми и полезными. И последнее, но не менее важное: когда вы разрабатываете кнопки ввода, для лучшего взаимодействия с пользователями было бы неплохо объединить кнопки с некоторыми анимациями загрузки или связанными элементами, чтобы обеспечить более приятное взаимодействие с пользователем.
Короче говоря, мы надеемся, что эти 13 лучших и самых креативных методов дизайна кнопок вдохновят вас на создание собственных замечательных дизайнов кнопок.
Дизайны, темы, шаблоны и графические элементы для веб-сайтов, загружаемые на Dribbble
View Nexudus — Система дизайна
Nexudus — система проектирования
Посмотреть приложение Nexudus — система
Приложение Nexudus — Система
Просмотреть библиотеку дизайна — арбуз
Библиотека дизайна — Арбуз
Просмотр Justuno — система веб-дизайна
Justuno — система веб-дизайна
View Connect & Play — набор иллюстраций
Connect & Play — набор иллюстраций
View Multiply — руководство по стилю
Умножение — руководство по стилю
Посмотреть 🐣 целевую страницу с креативным контентом 🐣
🐣 целевая страница с креативным контентом 🐣
Посмотреть Dataman
Датаман
Просмотр компонентов пользовательского интерфейса — система дизайна
Компоненты пользовательского интерфейса — система проектирования
Посмотреть кнопки Figma
Кнопки Figma
902:30
Посмотреть 3D-меню
3D-меню
Посмотреть Шпицы
Шпицы
View Midjourney (ИИ для преобразования текста в изображение)
Midjourney (ИИ для преобразования текста в изображение)
Посмотреть веб-сайт makemepulse — Награды за микровзаимодействия
Веб-сайт makemepulse — Награды за микровзаимодействия
Посмотреть БЛОККЕТЕН
БЛОККЕТЕН
» data-ad-data=»» data-boost-id=»» data-is-boost-fallback=»»>
Посмотреть демо-страницу запроса
Запрос демонстрационной страницы
Посмотреть 🌟 Элементы пользовательского интерфейса банка
🌟 Элементы банковского интерфейса
902:30
Просмотр компонентов пользовательского интерфейса Темная тема
Компоненты пользовательского интерфейса Темная тема
Вид ✨ Элементы пользовательского интерфейса – Поля ввода – Выпадающие списки – Кнопки
✨ Элементы пользовательского интерфейса — поля ввода — выпадающие списки — кнопки
902:30
Посмотреть ДОМАШНЮЮ СТРАНИЦУ X-RAY CONSULTING WEB UI DESIGN
X-RAY CONSULTING ДОМАШНЯЯ СТРАНИЦА ДИЗАЙНА ВЕБ-ИНТЕРФЕЙСА
Просмотреть целевую страницу продукта — игровая приставка
Целевая страница продукта — игровая консоль
902:30
Посмотреть открытку
Открытка
Просмотр компонента входов | Светлая часть 😃🔥
Компонент входов | Световая часть 😃🔥
902:30
Просмотр радиокнопок в UI UX Design (советы)
Радиокнопки в дизайне пользовательского интерфейса (советы)
Зарегистрируйтесь, чтобы продолжить или войдите в систему
Идет загрузка еще…
Лучший дизайн кнопок для веб-сайтов, который вы не можете пропустить – создание своего веб-сайта
Одним из наиболее распространенных элементов пользовательского интерфейса является кнопка. Они позволяют пользователям взаимодействовать с системой и предпринимать действия, позволяя им делать выбор. Формы, домашние страницы веб-сайтов, диалоговые окна и панели инструментов имеют кнопки.
Крайне важно различать кнопки и ссылки. Дизайн кнопки веб-сайта используется для направления посетителей на другие страницы, а ссылки используются для направления зрителей на другие страницы, когда вы хотите, чтобы они предприняли какие-либо действия (отправить, отменить, удалить) (обо мне, подробнее).
Пользователи с большей вероятностью выполнят действие, которое вы от них хотите, если ваши кнопки хорошо оформлены. Этот пост покажет вам, как сделать привлекательные кнопки, которые люди захотят нажимать на вашем сайте.
Идеи дизайна кнопки веб-сайта
Мы подробно описали некоторые отличные и ужасные методы дизайна веб-кнопок ниже, чтобы дать вам ускоренный курс по созданию привлекательных кнопок, как у экспертов.
1. Хороший дизайн кнопок веб-сайта
• Четкость: Текст и цвета кнопок должны быть четкими, четкими и легко читаемыми. В последние годы дизайн с плоскими кнопками стал популярной тенденцией веб-дизайна, так что это безопасный стиль, который стоит попробовать. Избегайте использования замысловатых ярких кнопок, которые могут отвлечь читателей.
• Краткий: На кнопках идеально использовать минимальный текст. Идея состоит в том, чтобы использовать только одно или два слова. Больше становится неудобным и вызывающим недоумение. Сделайте передышку и спросите себя: «Что я хочу, чтобы читатель сделал прямо сейчас на странице?» Первое слово, которое приходит на ум, почти наверняка глагол. Для короткой и лаконичной формулировки кнопки добавьте после нее наречие времени.
• Контекстный: Какова функция кнопки? Что именно он делает? Кнопки, которые трудно понять, не нажимаются. Если у вас есть кнопка «Купить сейчас», посетитель должен перейти на страницу, где он может ввести данные своей кредитной карты, а не на страницу, где обсуждаются товары, которые он хочет купить.
2. Плохой дизайн кнопки веб-сайта
• Неотзывчивость: Когда дело доходит до веб-дизайна, мобильные устройства превыше всего. Поскольку вы почти наверняка будете разрабатывать свои кнопки на настольном компьютере, вам нужно будет вручную дважды проверить, работают ли они и на мобильных устройствах. Если вы пропустите этот шаг, дизайн вашей веб-кнопки может быть слишком большим или слишком маленьким для мобильного устройства, что повлияет на ваш рейтинг кликов. К счастью, большинство решений CMS предоставляют кнопку-переключатель, которая позволяет вам предварительно просматривать элементы вашей веб-страницы на нескольких типах экранов, что позволяет вам соответствующим образом изменять дизайн кнопок.
• Без цвета: Яркие жирные кнопки хорошо работают в качестве призывов к действию, поскольку они привлекают внимание посетителя к важным аспектам страницы. Имейте в виду, что ваш веб-сайт — это путешествие, и кнопки, которые вы на нем устанавливаете, должны служить картой. Ваши читатели могут столкнуться с трудностями при просмотре страницы и конвертации, если вы не используете полноцветные кнопки.
• Смещено: По аналогичному вопросу посетителей могут смутить неуместные кнопки. Одинокая кнопка в середине абзаца не поможет и может даже усугубить ситуацию, если ваши кнопки не размещены в месте, побуждающем читателя узнать больше или совершить покупку. Добавляйте кнопки именно там, где вы требуете от посетителя действий, чтобы все было просто. Рядом с разделом функций и преимуществ, в заголовке и внизу страницы есть несколько экземпляров этих мест.
Дизайн кнопки веб-сайта Вдохновение
Изображение взято с веб-сайта пользователя Strikingly
самый смысл для вашего сайта.
1. Упростите себе задачу
Все сводится к старой пословице в области дизайна: «Будь проще, глупее» (или глупее, если хочешь). Дизайн кнопок сайта не исключение. Дизайн кнопки не должен быть чрезвычайно сложным. Он должен быть самоочевидным и практичным. Другие тенденции в дизайне кнопок веб-сайтов могут помешать этому, что может снизить коэффициент конверсии вашего веб-сайта. Так что, думая об идеях дизайна кнопок, имейте это в виду — и не переусердствуйте. Кнопка должна выглядеть как кнопка. Вот и все.
2. Убедитесь, что контраста много
Это почти так же важно, как наличие различимой кнопки, чтобы убедиться, что она видна. Поскольку у кнопок не было достаточно контраста, чтобы их можно было сразу различить, стили кнопок-призраков поверх графики быстро исчезали. Пользователи не смогли найти их сразу.
Кнопки с низкой контрастностью не должны быть скрыты. Сделайте их яркими, используя много цвета и пространственного контраста, чтобы выделить их среди других элементов на экране. Оставьте достаточно места вокруг кнопок, чтобы они могли дышать. Это облегчает пользователям обнаружение и распознавание кнопок как объектов, на которые можно щелкнуть, и позволяет физически легче нажимать на них, не выбирая случайно не ту кнопку.
3. Используйте цвет
Изображение взято с веб-сайта пользователя Strikingly
Вы когда-нибудь замечали, сколько красных или оранжевых кнопок? Поскольку яркие цвета привлекают внимание к этим элементам и побуждают к действию, они используются таким образом. Цвет также является популярным методом дизайна кнопок веб-сайтов в наши дни. Цвет может помочь потребителям соединиться с дизайном различными способами, от ярких оттенков до кнопок с простыми градиентами.
4. Создайте микрокопию, которая вызывает предвкушение
Не допускайте этой ошибки: слова «Нажмите здесь» написаны на кнопке. (Разве это не звучит как спам?) Микроскопия дизайна кнопки должна дать пользователю четкое представление о том, что произойдет, когда он нажмет на нее. Сообщите пользователям, что они получат дальше. Это может быть так же просто, как нажать «Отправить», чтобы ввести информацию, или щелкнуть ссылку «Подробнее», или просмотреть видео. Сообщите пользователям, что происходит в микрокопии, независимо от того, что это такое. Эта информация может помочь в укреплении доверия пользователей и повышении конверсии за счет действий/взаимодействий, которые люди находят привлекательными.
5. Используйте тонкую анимацию для привлечения аудитории
Веб-сайты все чаще используют две кнопки рядом друг с другом в дизайне кнопок. Один наполненный, а другой призрачный. Оба имеют движение наведения, которое привлекает внимание к двум интерактивным опциям. Использование анимации может помочь привлечь внимание к дизайну кнопок веб-сайта и, возможно, побудить людей нажимать на них. Анимации при наведении на кнопки стали частым поведением пользователей, и они служат прямым сигналом для пользователей, что они должны быть вовлечены. Только не переусердствуйте. Кнопки, которые крутятся, крутятся и мигают, скорее раздражают, чем приносят пользу.
6. Увеличить достаточно, чтобы нажать
Изображение взято с веб-сайта пользователя Strikingly
Кнопки должны иметь активную (нажимаемую) область диаметром не менее 10 миллиметров, но всегда допустимо больше. Этот совет исходит из исследования Touch Lab Массачусетского технологического института, в котором изучался размер подушечек пальцев по отношению к сенсорным устройствам. Давайте поместим это в контекст. На физической клавиатуре компьютера типичный размер клавиши составляет 15 на 15 миллиметров. Это отличная цель. (Просто имейте в виду, что при разной ширине экрана ваша кнопка исчезнет на маленьких устройствах.) Если вам необходимо использовать маленькие кнопки, попробуйте сделать для них большой радиус щелчка. Если пользователь пропустит сами кнопки, вокруг них все равно будет достаточно места для выполнения предполагаемого действия. (Посетители вашего сайта это оценят.)
7. Используйте стиль, с которым вы уже знакомы
Каждый знаком с несколькими типами дизайна кнопок веб-сайтов. Воспользуйтесь одним из них.
Закрашенная прямоугольная кнопка с квадратными углами и текстом внутри
Закрашенная прямоугольная кнопка с закругленными краями и текстом внутри
Прямоугольная кнопка с заливкой и заметной тенью (вверху)
Прямоугольная призрачная кнопка
8. Разместите в предсказанном месте
Изображение взято с веб-сайта пользователя Strikingly
Кнопки должны не только отображаться и работать должным образом, но они также должны быть размещены в месте, где люди будут их искать.
Сюда входит размещение кнопки за основным заголовком или блоком контента на главных страницах. Кнопки обычно выровнены по тексту или по центру экрана.
Кнопки отображают следующие входные данные в формах. В некоторых формах с одним вводом кнопка в той же строке, что и поле ввода, выравнивается справа от поля ввода.
Кнопки CTA для общего использования отображаются точно под содержимым, к которому они относятся.
Кнопки воспроизведения или запуска видео или игры часто располагаются в центре экрана предварительного просмотра.
Кнопки электронной коммерции или корзины обычно находятся в правом верхнем углу.
9. Не забывайте оставлять отзывы
Отвечает ли дизайн кнопки веб-сайта вашим действиям? Убедитесь, что дизайн интерфейса кнопки имеет очевидную петлю обратной связи. Дайте визуальный или словесный индикатор того, что кнопка выполнила свою задачу. Некоторые кнопки занимают больше времени, чем другие. Если новая страница загружается, кнопки, которые подключаются к другой странице или веб-сайту, например, обеспечивают обратную связь о том, что кнопка сработала. Если информация заполнена правильно, кнопка отправки формы может отображать на экране сообщение «спасибо».
10. Используйте кнопки намеренно
Когда кнопок слишком много, начинается хаос. Где уместны кнопки, используйте их. Не делайте дизайн слишком громоздким, разбрасывая кнопки повсюду. Пользователи не будут уверены, куда нажимать и что важнее всего. Чтобы использовать с целями веб-сайта, сохраните кнопки. Они должны направлять посетителей к наиболее важным частям вашего общего дизайна.
Как сделать привлекательный дизайн кнопки веб-сайта?
Хотите сделать кнопку на сайте, но не знаете как? Вы покрыты Поразительно. Вы можете разработать кнопки электронной коммерции с помощью Strikingly, которые понравятся вашим клиентам и побудят их покупать ваши товары. Стоит отметить, что вы можете изменить опцию «Купить сейчас» на «Забронировать сейчас». Индивидуальный стиль кнопки и параметры выравнивания были расширены! Чтобы выделить кнопку, увеличьте ее или измените цвет. Вы также можете изменить шрифт кнопки в теме вашего сайта. Чтобы создать или изменить кнопки на вашем веб-сайте Strikingly Нажмите «СТИЛИ» в редакторе вашего сайта. Появится панель стилей, содержащая заголовки и элементы навигации, разделы и кнопки, как показано ниже.
Изображение взято с веб-сайта Strikingly
Заключение
Кнопка веб-сайта — это компонент, который превращает призыв к действию в результат. Рассмотрите каждый аспект этого дизайна, от цвета до функции и микротекста. Протестируйте дизайн кнопки веб-сайта, чтобы убедиться, что ваш интерфейс имеет наиболее функциональную версию. Если у вас есть рабочая кнопка, не поддавайтесь моде и меняйте дизайн. Когда дело доходит до кнопок, функциональность всегда должна быть на первом месте.