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

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

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

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

Кнопка должна выглядеть осязаемой.

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

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

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

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

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

Цвет очень важен.

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

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

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

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

Размер кнопки имеет еще большее значение.

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

Сделайте ее большой!

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

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

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

Размещение кнопки – ключевой фактор.

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

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

В большинстве случаев, расположение кнопки зависит от контента сайта.

  • В конце формы;
  • Справа от призыва к действию;
  • В нижней части страницы или экрана;
  • Расположена под сообщением.

Сосредоточьтесь на контрасте.

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

Как и во всем веб-дизайне, в проектировании кнопок, контраст также имеет огромное значение.

Вот, о чем необходимо помнить при проектировании кнопки:

  • Цвет
  • Размер
  • Размер элементов
  • Форма, сочетающаяся с фоном
  • Прозрачность или анимация
  • Тени или градиенты

Используйте стандартные формы.

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

Когда дело касается кнопок, существует только две формы, которые вы должны рассмотреть:

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

Подскажите пользователю, что нужно сделать

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

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

Примеры:

  • Нажмите здесь
  • Создать аккаунт
  • Попробуйте бесплатно
  • Добавить в корзину
  • Прочитать подробнее

Добавьте кнопкам визуальной значимости.

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

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

Заключение.

Вы начали переосмысливать ваш способ дизайна кнопок?

Вы считает, что сможете спроектировать кнопки, которые привлекут больше кликов?

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



Подпишитесь на обновления блога!

Будьте всегда в курсе новостей

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