Руководство по дизайну кнопок на сайте WordPress

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

дизайн кнопок на WordPress

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

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

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

1. Убедитесь, что кнопки отлично сочетаются с веб-сайтом и брендингом

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

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

2. Придерживайтесь установленных соглашений о дизайне

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

Установленные соглашения

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

дизайн кнопок на WordPress

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

дизайн кнопок на WordPress

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

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

Смотрите также:

Много интересной информации в разделе Уроки WordPress.

3. Используйте метки

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

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

дизайн кнопок на WordPress

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

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

4. Размер и интервал кнопок

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

Важно создать кнопки таким образом, чтобы:

а) сделать их пригодными для использования,

b) предотвращать случайное использование посетителем неправильной информации.

Когда дело касается размера, необходимо учитывать, что средний человеческий кончик пальца составляет 16-20 мм. Это примерно 45 — 57 пикселей. Чтобы учесть это, Apple рекомендует использовать размер кнопки не менее 44 х 44 пикселя.

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

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

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

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

6. Позиция Кнопка видна

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

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

дизайн кнопок на WordPress

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

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

7. Контрастность

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

Общие инструменты для создания контраста:

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

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

дизайн кнопок на WordPress
Звучит странно, но это проверенная и отлично работающая техника среди веб-дизайнеров.

Как создавать кнопки в WordPress

Сейчас, когда вы знаете, как должны выглядеть кнопки, возникает вопрос: как их создать на веб-сайте? Новый редактор Gutenberg делает это просто.

1. Создайте блок-элемент

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

дизайн кнопок на WordPress

Нажмите, чтобы добавить ее на страницу.

2. Изменить текст и назначение кнопки

После щелчка WordPress открывает это меню.

дизайн кнопок на WordPress

У вас есть следующие варианты:

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

3. Отредактируйте дизайн

Можно без труда настроить цвет кнопки и текста всего за пару кликов.

дизайн кнопок на WordPress

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

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

И это все — самый простой метод добавить кнопку в WordPress.

Добавить комментарий

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