Как правильно создавать понятные и гармоничные кнопки

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

В уроке разбираем основные правила оформления кнопок в веб-дизайне. Учимся выбирать размер и начертание текста, рассчитывать внутренние отступы, работать со скруглениями и Auto Layout, выстраивать иерархию нескольких кнопок и сохранять единую систему на всём сайте.

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

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

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

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

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

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

На первых этапах можно пользоваться ориентировочной формулой. Горизонтальные отступы слева и справа составляют примерно 220–260% от кегля текста, а вертикальные сверху и снизу — около 110–120%.

Например, при размере текста 18 px горизонтальные отступы могут находиться примерно в диапазоне 40–50 px, а вертикальные — около 20–24 px. Полученные значения не нужно воспринимать как строгую математику: их можно округлять и корректировать визуально.

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

Гораздо удобнее выделить текст и создать Auto Layout через Shift + A, после чего задать значение заливки Fill, цвет текста и расстояния от текста до границ кнопки Padding. Тогда кнопка автоматически реагирует на изменение надписи, а все внутренние расстояния остаются под контролем.

Если фон кнопки яркий, а тонкий текст начинает немного теряться, его можно сделать плотнее. Например, перейти с Regular на Medium.

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

Самый простой вариант — кнопка с прямыми углами. Если хочется слегка смягчить форму, можно использовать небольшое скругление около 3–5 px.

Для более выраженного скругления ориентиром могут служить примерно 15–25% от высоты кнопки. Например, при высоте около 73px радиус порядка 10–20px будет сохранять ощущение прямоугольной кнопки, но сделает её визуально мягче.

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

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

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

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

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

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

Допустимо, если ширина кнопки зависит от длины текста: «Добавить в корзину» будет шире, чем «Подробнее». 

Но можно сделать обе кнопки одинаковой ширины — ошибки в этом тоже нет. Выбор зависит от композиции конкретного блока.

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

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

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

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

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

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

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

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

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

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

Перейти к следующему уроку