WebValley Studio

WebValley Studio

Кнопки в дизайне интерфейсов: полный гайд

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

РАССЧИТАТЬ СТОИМОСТЬ

Главная
→
Статьи
→
Дизайн кнопок на сайтах, в мобильных приложениях, веб интерфейсах

Роль кнопок в пользовательском опыте

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

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

Для чего нужны кнопки в интерфейсе

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

Как определить правильное назначение кнопки

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

Задайте себе вопросы:

Какую проблему пользователя решает эта кнопка?
Что произойдёт после нажатия?
Это действие обратимо или нет?
Насколько критично это действие для пользователя?
Как часто пользователь будет нажимать эту кнопку?

Ответы на эти вопросы помогут грамотно спроектировать кнопку и избежать ошибок.

Одна и та же кнопка, в зависимости от контекста, может быть разной. Например, кнопка «Удалить» может выполнять разные функции:

Удаление черновика письма;
Удаление фотографии из галереи;
Удаление аккаунта;
Удаление товара из корзины;
Удаление пользователя администратором.

Выполнение разных функций влияет на логику, расположение и визуал кнопки.

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

Одна кнопка — разная реализация. Контекст определяет всё: от цвета до количества шагов подтверждения.

За какие действия пользователя отвечает кнопка

Кнопка — это интерактивный элемент, при клике или касании которого происходит действие. Основные типы действий, за которые отвечает кнопка:

Выполнение операций

Сохранить;
Удалить;
Загрузить, скачать.

Пример кнопки «Сохранить» в интерфейсе: кнопка сохранения изображения расположена на каждом пине

Навигация

Перейти на другую страницу;
Вернуться назад;
Открыть раздел;
Перейти к оформлению.

Ярко-оранжевая кнопка «Оформить заказ» выполняет роль навигации в интернет-магазине, и она же является главным действием, побуждающим продолжить покупку

Коммуникация

Отправить данные (формы, сообщения);
Позвонить;
Поделиться контентом;
Подписаться на рассылку.

Пример кнопки с функцией коммуникации. Проект WebValley Studio

Управление состоянием

Включить / выключить функцию;
Развернуть / свернуть блок;
Запустить / остановить процесс;
Добавить в избранное.

Текстовая кнопка-ссылка внизу страницы разворачивает блок с большим количеством карточек

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

Текст в кнопке: слова, которые заставляют действовать

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

Глаголы действия в тексте кнопки

Текст кнопки должен отвечать на три вопроса пользователя одновременно:

Что произойдёт?
Что я получу?
Безопасно ли это действие?

Размытые формулировки вроде «Отправить», «OK» или «Кликните здесь» создают неопределённость. Конкретные глаголы действия, ориентированные на результат, работают значительно лучше. Используйте глагол действия в начале текста, например: «Купить программу», «Скачать прайс-лист», «Начать бесплатный период», «Забронировать столик». Этот приём даёт чёткое представление о результате.

Пример хорошего и плохого текста в кнопке

Пример хорошего и неоднозначного текста в кнопке

Почему важно использовать глагол в тексте кнопки:

Ясность призыва — сразу понятно, что от пользователя ожидается конкретное действие.
Быстрое восприятие — при сканировании страницы взгляд сначала цепляется за глагол, а затем за само действие.
Психологическая мотивация — глагол импульсивно запускает в мозгу пользователя установку на выполнение.
Рост конверсии — исследования показывают, что кнопки с активными глаголами кликают чаще, по сравнению с нейтральными «Отправить» или «Далее».

Длинный текст в кнопке — плохо

Избегайте длинных фраз в кнопке. Такой текст плохо воспринимается, его сложно адаптировать под мобилку, кнопки выглядят тяжело. Старайтесь уложиться в 2−3 слова. Будьте конкретными и краткими. Длинные фразы снижают кликабельность.

Краткость текста в кнопке важна по нескольким причинам:

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

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

Пишите просто и понятно, не используя технические термины

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

Простые глаголы действия «Купить», «Скачать», «Подписаться» дают мгновенный сигнал, что нужно сделать, и помогают пользователю.

Пример понятного простого текста в кнопке в сравнении с научным сложным термином

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

Текст «Нейроалгоритм оптимизации» звучит научно, но непонятно, ассоциируется с псевдонаучным нейромаркетингом или модными словечками

Простой и понятный текст помогает компании адаптироваться под разные сегменты.
Чем проще текст, тем шире покрытие аудитории: и профи, и новички поймут призыв.

Будьте конкретны

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

Слишком абстрактно

«Продолжить» — непонятно, что и зачем.
Оптимально:
«Перейти к оплате» — ясно и компактно.

Избыточно

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

Подчеркните выгоду или цель

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

Формула сильной CTA-кнопки: глагол + конкретная выгода. Такой призыв снижает неопределённость, даёт конкретику, повышает доверие, улучшая опыт и конверсию.

Каким должен быть цвет кнопок

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

Контраст — основа видимости

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

Минимальное соотношение контрастности по стандарту WCAG 2.1:

Уровень AA: 4.5:1 для обычного текста, 3:1 для крупного;
Уровень AAA: 7:1 для обычного текста, 4.5:1 для крупного.

_________________
WCAG (Web Content Accessibility Guidelines) — это международные стандарты по обеспечению доступности веб-контента для людей с инвалидностью. Они помогают сделать сайты, приложения и цифровые продукты удобными для использования людьми с нарушениями зрения, слуха, моторики и когнитивных способностей.

Примеры плохого и хорошего контраста в кнопке

WAVE (WebAIM) — онлайн-сервис для выявления ошибок в контрастности (и не только)

Иерархия цвета

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

На примере видно, как при помощи цвета кнопок расставлены приоритеты: в группе кнопок, рядом с заголовком, главная кнопка выделена ярким оранжевым цветом и чётко считывается, второстепенная — менее подсвечена. В меню также явно видно, что один из разделов подсвечен, как приоритетный в группе

Разрабатывая веб-интерфейс, создайте такую систему, где цвет чётко указывает на важность:

Первичные действия (Primary) — самый яркий и насыщенный фирменный цвет.
Вторичные действия (Secondary) — нейтральный или менее насыщенный цвет.
Третичные действия (Tertiary) — минимальная цветовая акцентность.

Пример, как правильно строить иерархию кнопок при помощи цвета

Слишком много цветов

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

Почему это проблема:

Отсутствует визуальная иерархия. Когда все кнопки яркие и разноцветные, ни одна из них не выделяется. Мозг получает противоречивые сигналы: всё важно = ничего не важно.

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

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

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

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

Антипаттерн: разные цвета для одинаковых действий. Пользователь не может сформировать паттерн узнавания

Антипаттерн: конфликт семантики. Почему-то опасное действие — зелёное, положительное — красное. Цвета противоречат смыслу действий

Один экран = одна яркая кнопка = одно главное действие
Меньше цветов = больше ясности = быстрее решение задачи

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

Один цвет для кнопок

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

Почему это плохо:

Отсутствует визуальная иерархия. Если «Купить сейчас» и «Отмена» выглядят одинаково, пользователь не получает визуальных подсказок о том, какое действие ведёт к цели, а какое — возвращает назад.

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

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

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

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

Ещё один пример потери фокуса на целевом действии: все кнопки на экране одинаковые, нет понимания, что важно, а что второстепенно

Когда один цвет кнопок может сработать

Есть ситуации, где монохромная группа кнопок оправдана:

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

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

Группы выбора вариантов
Радиокнопки, чекбоксы, кнопки размеров товара — где пользователь выбирает один из равнозначных вариантов.

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

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

Как решить проблему без добавления цветов

Если вы хотите сохранить сдержанную палитру, создавайте иерархию через вариации одного цвета и стили:

Вариант 1: Разные стили одного цвета
Один цвет, но три уровня визуального веса:

Вариант 2: Насыщенность и яркость
Градация интенсивности создаёт иерархию в рамках одного цвета:

Вариант 3: Размер и вес
Типографика создаёт приоритеты:

«Оформить заказ» — крупная, жирная типографика. «Продолжить покупки» — средняя, обычная. «Назад» — мелкая, облегчённая

Когда нужен второй цвет для кнопки

Есть случаи, когда одного цвета недостаточно с точки зрения юзабилити и безопасности:

1. Деструктивные действия
Кнопки «Удалить», «Отменить подписку», «Закрыть аккаунт» должны быть красными. Это универсальный паттерн, который защищает от ошибок.

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

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

Важно соблюдать баланс:

Плохо: Все кнопки одинаковые = нет ориентиров;
Плохо: Все кнопки разные = визуальный хаос;
Хорошо: 2−3 цвета + вариации стилей = чёткая иерархия.

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

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

Семантические цвета для типов действий

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

Устоявшиеся цветовые ассоциации:

Зелёный — подтверждение, успех, продолжение. Ассоциируется с безопасностью и позитивным результатом. Используется для действий: «Сохранить», «Отправить», «Подтвердить».

Красный — деструктивные действия, предупреждение. Заставляет дважды подумать перед действием. Действия: «Удалить», «Отменить».

Синий — нейтральные действия, информация, навигация. Внушает доверие и стабильность. Универсальный цвет для большинства CTA.

Жёлтый или оранжевый — внимание, призыв к действию. Создаёт ощущение срочности и возможности. Используется для кнопок: «Попробовать бесплатно», «Скидка».

Серый — нейтральные или недоступные действия. Минимальная эмоциональная нагрузка. Используется для вторичных кнопок, отключённых состояний.

Пример семантических цветов в дизайн-системе проекта

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

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

Основные проблемы:

Конфликт с семантическими цветами
Интерфейсы используют устоявшуюся цветовую семантику:

Красный — опасность, ошибка, удаление;
Зелёный — успех, подтверждение, безопасно;
Синий — нейтральное действие, информация;
Оранжевый или жёлтый — предупреждение, внимание.

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

Все кнопки красные: пользователь колеблется: «Это же красный, точно ли безопасно»?

Реальные деструктивные действия теряют различимость:

Ещё один пример, где красный конфликтует с семантикой, а ещё он так активен, что отвлекает от основного действия: кнопка купить становится не такой заметной на фоне остальных кричащих красных кнопок.

Проблемы доступности (WCAG)
Многие фирменные цвета не проходят требования контрастности WCAG AA (4.5:1) или AAA (7:1) с белым текстом. Если ваш бренд — яркий неон или пастельный оттенок, белый текст на такой кнопке будет нечитаемым, особенно для людей с нарушениями зрения.

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

Красного так много в одном экране, что он как будто кричит, кнопка здесь воспринимается как агрессивное действие, а не СТА

Потеря функциональной иерархии
Если все кнопки одного фирменного цвета, вы не можете создать визуальную разницу между главным действием (primary), второстепенным действием (secondary) и третичным действием (tertiary).

В примере — «Заказать», «Купить», «Наличие», «В избранное» — все фирменные бордовые. Где приоритет?

Ограничение палитры состояний
Кнопкам нужны состояния: hover, active, disabled, focus, чтобы пользователь понимал, что это интерактивная кнопка, с которой можно взаимодействовать, а не просто цветная плашка. Если вы привязаны к одному фирменному цвету, создать читаемую систему оттенков сложно. Вы быстро теряете фирменность или все состояния сливаются.

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

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

А тут показан пример дизайн-системы с использованием разных оттенков

Условия, при которых брендовый цвет подходит и работает для кнопок:

1. Цвет изначально подходит для UI
Некоторые бренды намеренно выбирают UI-friendly цвета. Эти цвета сразу разрабатывались с учётом интерфейсов.

Figma — яркие, но не агрессивные цвета (красный, фиолетовый, синий, зелёный), идеальные для UI-инструментов

2. У вас есть расширенная брендовая палитра

Умные бренды создают не один цвет, а систему:

Material Design (Google)
Эталонная система: каждый цвет имеет 14 оттенков: от 50 (самый светлый) до 900 (самый тёмный), плюс акцентные варианты. Прописанные правила контрастности.

_________________
Эталонная система палитры Material Design: каждый цвет имеет 14 оттенков с числовыми значениями от 50 до 900. Оттенки варьируются от 50 (самый светлый) до 900 (самый тёмный). Основные оттенки идут с шагом 100 (100, 200, …, 900), плюс светлый оттенок 50.

Material Design Color

Uber
Чёрно-белая основа + акцентный цвет для каждого сервиса (Uber — чёрный, Ubereats — зелёный), с градациями для каждого.

Uber Brand Color

Airbnb — Rausch
Не просто коралловый цвет, а целая палитра с градациями от светлого до тёмного, плюс дополнительные цвета (Babu — зелёный, Arches — персиковый, Hof — жёлтый) для разных контекстов.

Airbnb Brand Color

3. Вы адаптируете цвет для UI-контекста

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

Яндекс
Фирменный красный (#FC3F1D) слишком активен для интерфейсов. В сервисах используют смягчённые варианты (#FF0000; #FFCC00 — для Такси, приглушённый красный для Маркета), плюс система из жёлтых оттенков.

Яндекс Brand Color

Wildberries
Фиолетовый (#CB11AB) из логотипа адаптирован: в приложении используют менее насыщенный (#D01F9A) для элементов управления, светло-фиолетовые фоны, яркий — для акций и скидок.

Wildberries Brand Color

Как правильно интегрировать бренд в UI

Интеграция брендовых цветов в интерфейс — это баланс между узнаваемостью и функциональностью. Бренд — это не только цвет. Идентичность бренда складывается из множества элементов: типографики, форм, tone of voice, логотипа. Цвет — лишь один из инструментов. Не нужно заливать им весь интерфейс, чтобы продукт ассоциировался с компанией.

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

Логотип;
Заголовки H1 (опционально);
Иконки навигации;
Декоративные элементы.

UI-оптимизированный цвет:

Кнопки;
Ссылки;
Формы;
Индикаторы состояний.

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

МТС
Ярко-красный (#E30611) из брендинга модифицирован: в приложении используют (#D32F2F) для основных элементов, розовые оттенки для фонов, чистый красный — только для логотипа и главных CTA.

Семантика важнее бренда
Деструктивные и системные действия ВСЕГДА должны быть семантическими. Добавьте в UI-kit системные цвета, привычные для пользователя.

Семантические цвета:
«Сохранить изменения» — нейтральный синий;
«Удалить аккаунт» — семантический красный (не брендовый!);
«Успешно отправлено» — универсальный зелёный.

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

Ответьте на эти вопросы:

Контраст с белым текстом ≥ 4.5:1 (WCAG AA)?
Цвет не конфликтует с семантическими значениями (не красный для позитивных действий)?
Можете создать 4−5 оттенков для состояний (hover, active, disabled, focused)?
Цвет не вызывает визуальной усталости при многократном использовании?
Есть возможность комбинировать с нейтральными цветами для иерархии?

Если хотя бы на один вопрос вы ответили «нет» — используйте адаптированную версию или отдельную UI-палитру.

Бренд — это эмоция и узнаваемость.
UI — это функция и доступность.
Успешный продукт находит баланс между ними.

Не стоит жертвовать юзабилити ради 100% следования цветовым принципам бренда. Даже у самых строгих брендов (Apple, Google) UI-цвета адаптированы для интерфейсов, а не слепо скопированы с логотипа. Пользователь приходит решить задачу, а не любоваться вашим фирменным стилем. Если кнопка нечитаема или сбивает с толку — никакая брендовость не спасёт продукт.

Пример диаграммы всех ролей цвета Material Design, включая дополнительные роли

Размеры кнопок

Размер кнопки влияет на восприятие и поведение пользователя. Он зависит от назначения кнопки, размера экрана, плотности информации, платформы и других принципов.

Принципы градации кнопок по размеру

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

Визуальный вес

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

Маркетплейс Яндекса: На экране большое количество разнообразных кнопок (основных, второстепенных, кнопок-ссылок, тегов и плашек — кликабельно почти всё). За счёт визуальной иерархии размеров (и цвета в данном случае) пользователю легко отличить главное действие, вторичное и другие, менее важные

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

На чистой странице с минималистичным дизайном большая кнопка, наоборот, усилит фокус на CTA:

Сравним пример 1 и 2: в обоих случаях кнопка выглядит хорошо, имеет достаточный контраст, но во втором варианте, за счёт размера, кнопка быстрее привлекает к себе внимание

Хороший баланс между кнопками и окружающими их элементами: все части интерфейса пропорциональны

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

Иерархия

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

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

Размеры кнопок для важности действий:

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

Область касания текстовой кнопки должна быть минимум 44 рх

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

Лёгкость взаимодействия

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

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

Адаптивность под разные устройства

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

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

Классификации размеров кнопок

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

Размеры кнопок классифицируются по нескольким системам:

По размерной сетке (Size)
Каждой кнопке присваивается идентификатор размера в зависимости от её высоты:

Extra Small (XS) — высота 32−40 px;
Small (S) — высота 44−46 px;
Medium (M) — высота 48−54 px;
Large (L) — высота 56−64 px;
Extra Large (XL) — высота 66−72 px.

Градация кнопок по размеру

По назначению
В зависимости от назначения их делят на:

Primary buttons (основная) — обычно Medium или Large (48−64 px);
Secondary buttons (вторичная) — Medium (48−54 px);
Tertiary / Ghost buttons (третичная) — Small или Medium (48−44 px);
Icon buttons (кнопка-иконка) — 24−44 px (квадратные);

По контексту использования

Кнопки в панели инструментов — 32−44 px;
Кнопки в формах — 48−54 px;
Кнопки призывов — 46−64 px;
Текстовые кнопки — соответствуют высоте строки текста (но не ниже 32−44 рх).

По минимальным требованиям касания

Мобильные устройства: минимум 44×44 px (iOS) или 48×48 px (Material Design);
Десктоп: минимум 32×32 px для кликабельной области.

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

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

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

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

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

Закон Фиттса и размеры кнопок

Закон Фиттса (1954) — математическая модель, которая предсказывает время, необходимое для наведения на цель:

Время = a + b x log₂(Расстояние/Размер + 1)

Простыми словами: чем больше и ближе объект, тем быстрее на него можно нажать.

Применение закона Фиттса к кнопкам:

1. Размер имеет значение
Большие кнопки можно быстрее и точнее нажать, чем маленькие, которые требуют больше времени и концентрации. Если действие важное — делайте кнопку крупнее.

2. Расположение критично
Углы экрана — большие цели (курсор упирается в край), а края экрана — легче достичь, чем центра. Близкие кнопки к курсору нажимаются быстрее.

3. Расстояние между элементами
Оптимальное расстояние между кнопками: 8−16 px. Слишком близко — возможны случайные клики на соседние кнопки, слишком далеко — долгое перемещение курсора.

Для мобильных устройств закон Фиттса работает иначе:

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

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

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

Минимальный размер кнопки

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

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

Рекомендации по минимальному размеру кнопок в интерфейсе отталкиваются от стандартов платформ:

Для iOS: минимум 44×44 px;
Для Android: минимум 48×48 px;
Для десктопных кнопок ориентируйтесь на 32−44 px в высоту и ширину области касания.

Рекомендации по минимальному размеру кнопок в интерфейсе

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

Как сочетать размерную и цветовую иерархии кнопок

Размер и цвет работают вместе, усиливая визуальную иерархию. Основные принципы их сочетания:

1. Первичная кнопка (Primary)

Размер: Large/Medium;
Цвет: Яркий, акцентный (brand color);
Заливка: Полная (filled);
Контрастность: Максимальная.

2. Вторичная кнопка (Secondary)

Размер: Medium/Small;
Цвет: Нейтральный или менее насыщенный;
Заливка: Обводка (outline) или приглушённая заливка.

3. Третичная кнопка (Tertiary)

Размер: Small;
Цвет: Тонкий, низкий контраст;
Заливка: Только текст (ghost / text button).

Правила сочетания размера и цвета в дизайне кнопок:

Отсутствие конфликта
Большая кнопка + блеклый цвет = противоречие
Большая кнопка + яркий цвет = согласованность

Усиленный сигнал
Главная кнопка = большая + яркая
Второстепенная = меньше + спокойнее

Один акцент
На экране должна быть только одна кнопка с максимальной визуальной силой (большой размер + яркий цвет).

В этом примере нет акцентной выделенной кнопки и непонятно, какое из двух действий главное, а какое — второстепенное

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

Внутренние отступы в кнопках

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

Какими должны быть отступы в кнопке:

Нужен баланс в соотношении отступов и размеров шрифта: чем больше шрифт, тем больше padding.

Вертикальный padding (верх и низ) примерно 50−75% от размера шрифта.
Горизонтальный padding (лево и право) обычно в 1,5−2 раза больше вертикального.

В этом примере размер текста 16 рх, его текстовый контейнер — 20 рх. Вертикальный отступ в этом случае должен быть минимум 10 рх, а лучше — больше, у нас 16 рх. Горизонтальный отступ задаём в два раза больше — 32 рх.

2. Соблюдайте минимальный размер области касания.
Высота кнопки (padding + line-height) должна быть ≥ 44 px.

Пример: если шрифт 14 px, то вертикальный отступ (padding) равен примерно 12 px, а итоговая высота кнопки будет где-то 40 pх. Такую кнопку лучше увеличить до 44−48 px

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

4. Адаптивность.

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

Кнопка в мобильной версии должна быть во всю ширину экрана. А вот деструктивное необратимое действие можно оставить как есть. Это допустимое исключение, как ещё одна мера предосторожности

Для компактных кнопок (иконка + текст) снижайте padding, но не опускайтесь ниже 8 px по вертикали и 12 px по горизонтали.

Базовый размер padding:
Для маленьких кнопок (Small): padding равен 8−12 px;
Для средних кнопок (Medium): padding равен 12−24 px;
Для больших кнопок (Large): padding равен 16−32 px.

Базовый padding

Пространство между кнопками

Основные принципы выбора расстояний между кнопками:

1. Модульная сетка
Обычно берётся базовый шаг 8 px. Тогда отступы между элементами будут 8 px, 16 px, 24 px и т. д. Это упрощает поддержку единой системы размеров и выстраивает гармонию в интерфейсе.

2. Минимальный отступ
Отступы между кнопками должны быть не меньше 8 px, чтобы кнопки не слипались и их было удобно нажимать.

3. Оптимальный отступ для разных типов кнопок
Между основными (primary) и второстепенными (secondary) кнопками чаще всего используют отступ равный 16 px, чтобы визуально разделить важность действий. Между группой однотипных кнопок достаточно оставить отступ 8 px.

4. Адаптивность
На мобильных экранах нужно увеличить отступ до 12−16 px для удобства касания.

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

5. Визуальный баланс
Слишком большие отступы создают разрежённость, мелкие — эффект тисков. Оптимально оставить значения, которые смотрятся органично в контексте остальной сетки — 1−2 базовых шага.

Рекомендации по расстояниям:

Мобильные устройства:

Минимум между кнопками: 8 px;
Рекомендуемое: 12−16 px;
Для критических действий: 24 px;
Вертикальный стек кнопок: 16 px между ними.

Десктоп:

Минимум: 8 px;
Стандартное: 12−16 px для кнопок в ряд;
Между группами: 24−32 px.

Специальные случаи:

Противоположные действия («Сохранить» и «Удалить»): максимальное расстояние, в разных зонах;
Первичная + вторичная кнопки: 12−16 px;
Кнопки в toolbar: 8−12 px.

Стили кнопок

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

Пример стилей некоторых кнопок в дизайн-системе

Визуальная иерархия стилей

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

Стили кнопок по назначению:

Primary (основная) — кнопка имеет большой размер и часто сплошную заливку цветом — обычно это основной цвет бренда. Используется для главного целевого действия на странице.

Secondary (вторичная) — менее акцентная, но всё ещё чётко читаемая. Используется для дополнительных второстепенных действий.

Tertiary (третичная) — минимальное оформление, текстовая кнопка.

Danger / Destructive — опасные действия (удаление).

Icon button — кнопка-иконка без текста.

Стили кнопок по назначению

От места кнопки в иерархии будут зависеть её визуальные характеристики:

Filled (заполненная) — самый заметный и акцентный стиль. Это кнопка с заливкой.

Outlined (обведённая) — кнопка с обводкой по контуру. Менее акцентная, чем заполненная, но всё ещё чётко читаемая. Используется для дополнительных второстепенных действий.

Text (текстовая) — только текст, иногда с подчёркиванием или изменением цвета при наведении. Создаёт ощущение лёгкости и ненавязчивости. Используется для текстовых ссылок.

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

Floating Action Button (FAB) — круглая кнопка, обычно с иконкой, парящая над интерфейсом. Характерна для виджетов и мобильных приложений. Применяется для главного действия в мобильном приложении — добавить, создать, написать.

Стили кнопок по визуальной иерархии

Дополнительная стилизация внешнего вида кнопок:

Форма кнопок

Прямоугольные с закруглёнными углами — универсальный стандарт, дружелюбный и современный;
Строго прямоугольные — формальный, корпоративный стиль;
Сильно скруглённые (pill-shaped) — игривый, дружелюбный характер;
Круглые — для иконочных кнопок и FAB.

Стили кнопок по форме

Тени и глубина

Плоский дизайн (flat) — минималистичный, современный;
С тенью (elevated) — создаёт ощущение физичности, выделяет кнопку;
Неоморфизм — мягкие тени, имитация выдавливания или вдавливания (используйте осторожно — могут быть проблемы с доступностью).

Пример использования плоских кнопок в дизайне

Пример использования объёмных кнопок с тенью

Neumorphism.io — это сайт, на котором вы можете самостоятельно покрутить настройки и подобрать нужный вариант для вашего дизайна

Иерархия через стиль: как правильно оформить кнопку в зависимости от её важности

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

Контраст цвета и наполнения в кнопке

Primary: яркий фон, контрастный фону текст, чтобы кнопка выделялась на фоне остального контента.
Secondary: нейтральный или полупрозрачный фон, более приглушённый цвет обводки и текста.
Tertiary: обычно без заливки, просто текст или тонкая линия, чтобы не конкурировать с основными CTA.

Градация размеров и формы кнопок

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

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

На примере карточки квиза с сайта «Печи 100Градусов», показываем, как правильно оформить группу кнопок. Проект WebValley Studio

Расположение и группировка

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

Типографика в иерархии кнопок

Primary: жирный (bold) или полужирный шрифт, размер ~16−18 px.
Secondary и tertiary: нормальная насыщенность и чуть меньший размер.

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

Иконки и графические элементы в иерархии кнопок

Primary: иконка может усиливать смысл (тематический знак, например, «корзина» в интернет-магазине, «стрелка вправо» для функции продолжить), но не загромождать.

Secondary / tertiary: как правило, без иконок или с простыми стрелками с тонкой обводкой.

Мобильная адаптация кнопок при построении иерархии

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

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

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

Консистентность

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

Консистентность в дизайне означает:

1. Визуальное единство

Постоянные цвета для каждого типа кнопок;
Фиксированные размеры (высота, внутренние отступы, ширина);
Одинаковое скругление углов;
Единообразная типографика (кегль, насыщенность, регистр букв).

2. Единство поведения

Идентичные состояния: наведение, нажатие, фокус, неактивность;
Одинаковые переходы и микроанимации;
Ожидаемая реакция на действия пользователя.

3. Логическое единство

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

4. Текстовое единство

Единый стиль общения: не «Удалить» здесь и «Стереть» там, а одно слово повсюду;
Схожие формулировки для аналогичных действий.

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

Чтобы соблюсти консистентность в дизайне:

Определите 3−4 стиля кнопок для вашей дизайн-системы и используйте их последовательно во всём продукте;
Используйте одинаковые отступы, радиусы скругления и размеры;
Определите состояния: default, hover, active, disabled, loading;
Документируйте, когда какую кнопку использовать;
Применяйте одну иерархию во всех интерфейсах в рамках продукта.

Пример таблицы соответствия:

Поведение и состояния кнопок

Состояние кнопки — это текущее положение или режим, в котором находится кнопка, в зависимости от взаимодействия пользователя с ней. Основные состояния:

Default (обычное) — кнопка в спокойном состоянии, без взаимодействия;
Hover (наведение) — курсор мыши находится на кнопке;
Active или Pressed (нажатие) — кнопка в момент клика;
Focus (фокус) — кнопка получила фокус (например, нажатием кнопки Tab);
Disabled (неактивное) — кнопка заблокирована и недоступна для нажатия.

Состояния меняются динамически в зависимости от действий пользователя.

У одной кнопки может быть только один стиль и несколько состояний.

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

Основные состояния кнопки

Есть пять основных состояний кнопки, которые должны быть в базовом комплекте компонента Button: default, hover, active, disabled, focus.

Default (Normal) — базовое состояние или кнопка по умолчанию

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

Hover — состояние при наведении

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

Active — нажатое состояние

Визуальная реакция на удержание или клик. Чаще всего кнопка утоплена: меняется цвет фона, уменьшается тень, сдвигается вниз на 1−2 px.

Disabled — неактивное (отключённое) состояние кнопки

Это состояние нужно, когда кнопка недоступна для взаимодействия. Часто используется в формах или квизах, где нельзя нажать кнопку, не выполнив все нужные действия. Цвет фона и текста должны быть менее насыщенными, бледными, hover и active-эффекты отключаются, курсор — not-allowed (не работает).

Focus — фокусировка клавиатурой

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

Дополнительные состояния кнопок

Помимо основных, есть частные случаи состояния кнопок:

Loading — загрузка

Опциональное состояние, когда происходит асинхронная операция. Вместо текста появляется спиннер. Hover, active и нажатия не работают.

Примеры анимации эффекта загрузки

Selected — выбор

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

Состояние Selected в чекбоксах

Selected часто применяется в навигации.

Состояние Selected в табах (вкладках)

По оформлению кнопка похожа на все остальные кнопки в наборе, но имеет:

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

Расположение кнопок: основные правила

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

Принцип естественного потока

Пользователи читают контент по определённым паттернам:

F-паттерн — на текстовых страницах взгляд движется слева направо, затем вниз и снова слева направо, формируя букву F.

Z-паттерн — на страницах с минимальным текстом взгляд скользит зигзагом: левый верхний угол → правый верхний → левый нижний → правый нижний.

Три варианта расположения кнопок по системе Z-паттерна

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

Следуйте логике чтения

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

В западных культурах кнопки располагают справа

В культурах Ближнего Востока и некоторых азиатских — кнопки слева

Вертикальный поток в формах

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

Вертикальный поток в формах

Располагайте кнопку отправки в конце естественного потока прокрутки — внизу форм.

Влияние контекста на размещение кнопки

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

Кнопка «Удалить» может восприниматься совершенно по-разному, в зависимости от окружения:

1. В системе визуальной иерархии

В правом углу диалога — воспринимается как подтверждающее действие;
Рядом с элементом списка — локальное действие над этим элементом;
В шапке страницы — глобальное действие.

2. В зависимости от окружающего контента

Кнопка после текста «Вы уверены?» требует осознанного решения;
Та же кнопка в списке рутинных действий кликается автоматически;
Рядом с предупреждением красного цвета она вызывает тревогу.

3. В зависимости от последовательности действий

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

4. Пространственные ожидания

Пользователи формируют ментальные модели:
Справа внизу — «Продолжить / Подтвердить»;
Слева — «Назад / Отмена»;
Рядом с каждым элементом — «Действие с элементом».

5. По типу группировки с другими элементами

В группе с другими кнопками — одно из равных действий;
Изолированно — единственное важное действие;
На панеле инструментов — инструмент, а не финальное решение.

6. В зависимости от момента появления

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

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

Близость к контенту

Размещайте кнопку рядом с контентом, к которому она относится. Кнопка «Купить» должна быть возле описания товара, «Отправить комментарий» — под полем ввода.

Кнопка должна быть рядом с контентом

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

Расположите самую важную кнопку справа

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

Почему именно справа:

Направление чтения и сканирования
В культурах с письменностью слева направо (латиница, кириллица) пользователи естественно сканируют контент по F-паттерну или Z-паттерну. Взгляд движется слева направо и останавливается в правом конце строки — именно там внимание наиболее сконцентрировано.

Метафора диалога и прогресса

Правая позиция символизирует движение вперёд:

Слева — отмена, возврат назад (негативное/нейтральное);
Справа — подтверждение, следующий шаг (позитивное/целевое).

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

Консистентность с платформенными стандартами
Все основные дизайн-системы помещают главную кнопку справа:

Windows: [Отмена] [OK];
macOS: [Отмена] [Сохранить];
Material Design: вторичная слева, первичная справа;
iOS: Cancel слева, Done / Save справа.

Правая позиция = движение вперёд = прогресс = целевое действие.

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

Исключения из правила

Есть ситуации, когда правило размещения кнопки справа можно нарушить:

Культуры с письменностью справа налево
Для арабского, иврита, фарси — логика зеркально противоположна. Главная кнопка должна быть слева.

Одиночные кнопки
Если кнопка единственная на экране, её можно расположить по центру, растянуть на всю ширину или расположить слева.

Одиночная кнопка по центру экрана

Одиночная кнопка на всю ширину экрана

Одиночная кнопка справа

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

Но это спорная практика — лучше использовать двухэтапное подтверждение.

Учитывайте эргономику мобильных устройств

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

Зоны досягаемости большого пальца
При одноручном хвате (49−67% пользователей) экран делится на зоны:

Зелёная зона (легко доступна) — нижняя часть экрана, центр;
Жёлтая зона (требует усилий) — верхняя треть, дальние углы;
Красная зона (недоступна) — противоположный верхний угол.

Размещайте кнопку в зоне лёгкого доступа.

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

Средняя ширина пальца — 11 мм (40−48 px);
Минимальный размер кнопки — 44×44 px (рекомендация Apple и Google);
Слишком маленькие кнопки — промахи, фрустрация, отказ от действия.

Проблема верхнего размещения

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

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

Особенности платформы
Следуйте конвенциям целевой платформы:

Windows / Web: первичная кнопка обычно справа;
macOS / iOS: деструктивные действия часто размещаются сверху, подтверждающие — снизу;

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

Android: следует Material Design — первичная кнопка справа;

Логика чтения заложена на уровне привычек. Работайте с ней, а не против неё.

Как понять, какая кнопка должна быть главной

Главная кнопка — это действие, которое соответствует основной цели пользователя на данном экране. Проанализируйте все варианты действий и выберите то, которое будет самым полезным.

Рассмотрим действия пользователей в банковском приложении. Кнопки «Оплатить счёт», «Отправить деньги» и «Перевести» выполняют важные функции, но приводят к списанию средств со счёта — то есть не увеличивают финансовые возможности клиента.

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

Ценность для пользователя не всегда равна выгоде для бизнеса. Распространённая ошибка: выделять действие, выгодное компании, а не пользователю.

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

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

Почему порядок критичен:

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

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

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

Скорость принятия решений
Правильный порядок кнопок ускоряет выполнение задачи на 15−30% за счёт снижения когнитивной нагрузки. Пользователь действует на автопилоте, не отвлекаясь на анализ расположения.

Снижение стресса и повышение уверенности
Когда интерфейс ведёт себя предсказуемо, пользователь чувствует себя компетентным. Когда порядок хаотичен — возникает тревога: «А точно ли я нажал правильную кнопку»?

Универсальные правила порядка расположения кнопок

Правило 1: Хронологический порядок (для навигации)
Кнопки следуют естественному течению времени и процесса:
Прошлое слева → Будущее справа.

Правило 2: Приоритет действий (для модальных окон)
Отказ / Выход слева → Подтверждение / Действие справа.

Правило 3: Безопасность прежде всего (для деструктивных действий)
Безопасный выход слева → Опасное действие справа (но менее заметное визуально!).

Почему это работает:

1. Правая позиция = привычка продолжения.
Пользователь автоматически тянется к правой кнопке, но…

2. Визуальная иерархия останавливает.
Приглушённый цвет заставляет на секунду задуматься: «Точно ли я хочу это сделать»?

3. Двойная защита

Позиция: справа, куда тянется рука;
Визуал: менее заметная — заставляет прочитать текст.

Правило 4: Вертикальное расположение (для мобильных)
На мобильных устройствах порядок сверху вниз:

Особые случаи:

Три и более кнопки
Для трёх кнопок применяйте порядок по степени риска:
[Деструктивное] [Нейтральное] [Конструктивное].

Или выносите деструктивное действие отдельно:
[Удалить] [Отмена] [Сохранить]

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

Алфавитный;
По популярности;
По логике процесса.

Но визуально они должны быть одинаковыми.

Кнопки программ на сайте авиатуров

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

Здесь «Отмена» = вернуться к работе = безопасное действие = справа.

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

Анимации и микровзаимодействия в кнопках

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

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

Основные типы анимаций для кнопок:

1. Состояния наведения (Hover)

Показывает, что элемент интерактивен;
Изменение цвета, тени или масштаба;
Длительность: 150−200ms.

Наведи сюда

2. Нажатие (Click / Press)

Эффект вдавливания (scale down);
Ripple-эффект (волна от точки клика);
Мгновенная реакция: 100−150 ms.

Нажми сюда

3. Состояния загрузки

Спиннер или индикатор прогресса;
Показывает, что действие обрабатывается;
Предотвращает повторные клики.

Загрузить

4. Успех / Ошибка

Изменение цвета + иконка (галочка или крестик);
Краткая анимация появления: 200−300 ms;
Подтверждает результат действия.

Отправить

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

Принципы хороших анимаций:

Быстрые — 200−400 ms максимум;
Осмысленные — каждая анимация имеет цель;
Деликатные — не отвлекают от контента;
Отключаемые — уважают «prefers-reduced-motion»;

__________________
prefers-reduced-motion — это CSS-медиа запрос, позволяющий адаптировать интерфейс сайта для пользователей, которые в настройках ОС включили режим уменьшения движений (анимаций, параллакса). Это ключевой инструмент веб-доступности (a11y), помогающий людям, испытывающим головокружение или дискомфорт от активной динамики на экране.

Предсказуемые — соответствуют ожиданиям пользователя.

Когда НЕ стоит использовать анимации:

Если они замедляют работу;
Если отвлекают от основной задачи;
Если анимация длится больше 500 ms без необходимости;
Если пользователь отключил анимации в настройках системы.

Отключённые кнопки

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

Отключённая кнопка в форме: активизируется после заполнения всех полей

Распространённые UX-проблемы, вызванные отключёнными кнопками

Неправильная реализация disabled-состояния может вызвать недоумение: пользователь видит кнопку, но не понимает, почему не может ей воспользоваться, и что нужно сделать для её активации.

Проблемы, связанные с неактивными кнопками:

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

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

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

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

Прерванный сценарий
Когда кнопка не активна в критический момент (например, «Оформить заказ»), пользователь может не завершить задачу и просто уйти, не разобравшись в проблеме.

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

Подсказка над неактивной кнопкой помогает пользователю сориентироваться

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

В каких случаях использование отключённых кнопок оправданно

Обоснованные случаи применения:

1. Незавершённая форма
Когда пользователь ещё не заполнил все обязательные поля. Кнопка «Отправить» остаётся отключённой до полного заполнения.

2. Предотвращение повторной отправки
После клика на кнопку «Оплатить» или «Отправить заказ» — временное отключение предотвращает дублирование действия.

3. Недоступность функции в текущем контексте

Кнопка «Вставить» в редакторе, когда буфер обмена пуст;
«Отменить» / «Повторить» при отсутствии истории действий;
«Далее» в пошаговом процессе, пока текущий шаг не завершён.

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

5. Загрузка данных
Временное отключение элементов управления во время обработки запроса.

Что важно учесть при использовании отключённых кнопок:

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

Избегайте отключённого состояния кнопки, если можно заменить его на информационное сообщение после клика.

Альтернативы отключённым кнопкам

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

Скрыть кнопку

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

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

Добавить всплывающую подсказку

Отображайте рядом с кнопкой текст или иконку с пояснением условий, необходимых для активации функции (например, «Заполните все обязательные поля»). Используйте индикаторы (например, «2 из 3 шагов выполнено»), чтобы пользователь понимал, насколько близок к цели.

Выбрать более эффективный способ коммуникации с пользователями

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

Заполненные поля подсвечены зелёной обводкой + иконкой

Полностью отказаться от неактивных кнопок

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

Частые ошибки при проектировании кнопок

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

Один стиль для разных по значимости действий

Использование одинакового визуального стиля для кнопок с разной степенью важности действий нарушает принцип визуальной иерархии и может привести к:

Случайным ошибкам пользователей — могут нажать «Удалить» вместо «Отменить»;
Когнитивной нагрузке — пользователю приходится читать текст каждой кнопки;
Плохому UX — отсутствие визуальных подсказок о приоритете действий.

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

Отсутствие фидбека при взаимодействии

Отсутствие обратной связи при взаимодействии с кнопкой нарушает один из фундаментальных принципов юзабилити и создаёт серьёзные проблемы:

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

Как следствие:

Множественная отправка форм;
Двойные платежи;
Фрустрация пользователей;
Снижение конверсии.

Фидбэк должен быть быстрым (< 100 мс) согласно принципам юзабилити Nielsen Norman Group (фундаментальные правила проектирования пользовательских интерфейсов, сформулированные Якобом Нильсеном. Они направлены на создание интуитивно понятных, эффективных и удобных цифровых продуктов, минимизируя ошибки пользователей, и повышая их удовлетворённость).

Кнопки, которые выглядят как ссылки, и наоборот

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

Почему это ошибка:

1. Разное назначение элементов:

Кнопки — выполняют действия (отправить, сохранить, удалить);
Ссылки — осуществляют навигацию (переход на другую страницу).

2. Проблемы для пользователей:

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

3. Технические отличия:

Ссылка: подчёркнутый текст, цвет акцента;
Кнопка: фон, границы, padding, объёмность.

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

Кнопка → действие внутри приложения;
Ссылка → навигация, переход;

Визуально они должны чётко различаться.

Пример интерфейса, где нет различий между ссылками и кнопкой

Текстовые кнопки допустимы для второстепенных действий, но должны иметь отличия от ссылок (нет подчёркивания, другой контекст).

Непонятный или формальный текст

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

Почему это ошибка:

Когнитивная нагрузка

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

Текст кнопки должен отвечать на вопрос: «Что именно произойдет, когда я нажму»?

Слишком яркие или резкие цвета без причины

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

Почему это ошибка:

1. Проблемы восприятия:

Визуальный шум — отвлекает от контента;
Усталость глаз — особенно при длительной работе;
Плохая читаемость — низкий контраст текста на ярком фоне;
Нарушение иерархии — все кнопки кричат о внимании одновременно.

2. Проблемы доступности:

Нарушение стандартов WCAG (Web Content Accessibility Guidelines);
Проблемы для людей с дальтонизмом;
Светочувствительность и мигрени;
Затруднения для возрастных пользователей.

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

Это обновлённый вариант интерфейса, где к основному акцентному цвету подобрали более приглушённый и спокойный оттенок

Цвет должен усиливать коммуникацию, а не создавать визуальный хаос.

Когда яркие цвета оправданы:

Детские приложения;
Креативные дизайнерские проекты;
Акцентная кнопка на нейтральном фоне (одна!);
Соответствие бренду.

Слишком много стилей кнопок без единой системы

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

Причины возникновения:

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

Неправильное или случайное расположение кнопок

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

Основные проблемы:

1. Нарушение ментальных моделей
Пользователи формируют ожидания на основе опыта:

Подтверждение справа, отмена слева;
Главное действие на видном месте;
Деструктивные действия — отдельно от безопасных.

2. Увеличение количества ошибок

Пользователь нажимает «Удалить» вместо «Сохранить», потому что кнопки поменяли местами;
Кликает на вторичное действие, думая, что это основное;
Не может найти нужную кнопку, потому что она в неожиданном месте.

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

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

4. Проблемы доступности

Мобильные устройства — кнопки в зоне недосягаемости большого пальца;
Навигация с клавиатуры — логичный порядок tab-переходов;
Люди с моторными нарушениями — мелкие кнопки далеко друг от друга.

5. Потеря конверсии в критических точках (оформление заказа, регистрация, оплата)

Пользователь не находит кнопку «Продолжить»;
Случайно отменяет действие;
Уходит из-за фрустрации.

Правила кнопок

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

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

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

Ключевые причины:

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

2. Предсказуемость интерфейса
Люди имеют устоявшиеся ментальные модели: объёмные элементы с чёткими границами — интерактивны. Нарушение этих ожиданий приводит к ошибкам и фрустрации.

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

4. Доступность
Чёткие визуальные границы помогают людям с нарушениями зрения, когнитивными особенностями или использующим вспомогательные технологии.

Кнопку на этом экране не каждый увидит сразу, а может и вообще не увидит

Дифференцируйте кнопки и ссылки

Почему важно различать кнопки и ссылки:

Кнопки и ссылки — это разные инструменты для разных задач. Их визуальное смешение создаёт путаницу и ухудшает пользовательский опыт.

Функциональные различия:

Кнопки — для действий:

Отправка формы;
Открытие модального окна;
Запуск процесса (сохранить, удалить, купить);
Изменение состояния интерфейса.

Ссылки — для навигации:

Переход на другую страницу;
Переход к разделу на текущей странице;
Открытие внешнего ресурса.

Выделяйте основные кнопки

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

Зачем это делать:

1. Снижение когнитивной нагрузки
Когда на экране несколько кнопок («Сохранить», «Отмена», «Удалить», «Экспорт»), пользователь не должен тратить время на анализ, какое действие главное. Яркая первичная кнопка мгновенно показывает оптимальный путь.

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

3. Снижение количества ошибок
Если кнопки «Удалить» и «Сохранить» выглядят одинаково, риск случайного удаления данных возрастает. Выделение безопасного основного действия защищает от деструктивных операций.

4. Поддержка бизнес-целей
Основная кнопка обычно соответствует целевому действию («Купить», «Зарегистрироваться», «Подписаться»). Её визуальное доминирование увеличивает конверсию.

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

В этих примерах нет понимания, какая кнопка главная, а какая второстепенная

Правило: Одна главная кнопка на экран. Если всё выделено — ничего не выделено.

Выбирайте простые и понятные подписи

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

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

1. Устранение неопределённости
Пользователь должен точно знать, что произойдёт после клика. Неясные подписи («ОК», «Продолжить», «Отправить») заставляют гадать и создают тревожность, особенно перед важными действиями.

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

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

4. Предотвращение ошибок
Размытая подпись может привести к нежелательным действиям. «Удалить аккаунт навсегда» лучше, чем просто «Удалить» — это осознанный выбор.

5. Доступность

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

6. Локализация и мультиязычность
Простые подписи легче переводить, они занимают меньше места (критично для немецкого или финского языков, так как в них длина текста больше, чем в других языках).

Пример правильных подписей в кнопках

Подписи не должны быть слишком мелкими

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

Почему подписи в кнопках не должны быть слишком мелкими:

1. Физиология восприятия
Человеческий глаз имеет ограничения в различении мелких деталей, особенно:

На расстоянии (десктоп-мониторы обычно в 50−70 см от глаз);
При движении (сканирование страницы взглядом);
В периферийном зрении (когда кнопка не в фокусе).
Мелкий текст требует фокусировки и напряжения глаз.

2. Доступность для людей с нарушениями зрения

Пожилые пользователи (возрастные изменения зрения);
Люди с миопией, дальнозоркостью, астигматизмом;
Пользователи с частичной потерей зрения;
Ситуативные ограничения (усталость глаз, яркий свет).

По стандартам WCAG минимальный размер текста — 16 px (для обычного текста), для кнопок рекомендуется 14−16 px или больше.

3. Мобильные устройства
На смартфонах мелкий текст особенно проблематичен:

Маленький экран;
Использование на ходу, в транспорте (вибрация);
Яркий солнечный свет снижает контрастность;
Сенсорное управление требует крупных элементов.

4. Скорость чтения и принятия решений
Мелкий текст читается медленнее. Пользователь должен:

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

5. Психологический аспект
Мелкий текст воспринимается как:

Неважный, второстепенный;
Мелкий шрифт ассоциируется с уловками (как в договорах);
Создаёт ощущение ненадёжности интерфейса.

6. Ошибки и промахи
Когда текст трудно прочитать:

Пользователь может нажать не ту кнопку;
Пропустить важную информацию;
Отказаться от действия из-за неуверенности.

Рекомендации по размерам:

Десктоп:

Минимум: 14 px;
Оптимально: 16−18 px;
Крупные первичные кнопки: 18−20 px.

Мобильные:

Минимум: 16 px;
Оптимально: 18−20 px.

Специальные случаи:

Критичные действия (оплата, удаление): крупнее;
Кнопки с иконками: текст может быть чуть меньше, но не менее 14px;
Третичные кнопки: не менее минимального порога.

Факторы, влияющие на читаемость:

Размер — не единственный параметр, влияющий на читаемость. Учитывайте:

Контрастность (соотношение текста и фона);
Начертание шрифта (слишком тонкие шрифты хуже читаются);
Межбуквенное расстояние (letter-spacing);
Высота строки (для многострочных кнопок);
Жирность (medium, semibold лучше, чем light, regular).

Не заменяйте текстовые кнопки иконками

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

Почему:

1. Иконки не универсальны
Одна и та же иконка может означать разное:

Иконка корзины 🗑️ — Удалить? Переместить в корзину? Очистить?
Иконка крестик ✖️ — Закрыть окно? Отменить? Удалить элемент?
Иконка 3 полоски ☰ — Меню? Список? Настройки?
Иконка файла со стрелкой 📤 — Отправить? Экспортировать? Поделиться? Выгрузить?

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

2. Культурные и контекстные различия
Иконки воспринимаются по-разному:

В разных странах — символы могут иметь иные значения;
В разных возрастных группах — молодёжь и пожилые;
В разных профессиональных областях;
Новички и опытные пользователи.

3. Нагрузка на память
Иконки требуют:

Изучения при первом использовании;
Запоминания для последующего использования;
Распознавания каждый раз заново.

4. Доступность
Иконки без текста создают барьеры для:

Скринридеров — нужен alt-текст, но он менее естественен, чем видимая метка;
Людей с когнитивными особенностями — символы труднее интерпретировать;
Людей с дислексией — визуальные образы без слов менее информативны;
Новых пользователей — нет точки опоры для понимания.

5. Замедление работы
Даже если пользователь в итоге понимает иконку:

Требуется время на интерпретацию;
Нужно наводить курсор для подсказки (tooltip);
Возрастает риск ошибки и необходимость отмены действия.

6. Ограниченность дизайна иконок
Многие действия невозможно изобразить однозначно:

Экспортировать в PDF;
Отправить на проверку;
Создать копию;
Запланировать публикацию.

Абстрактные действия требуют текстового описания.

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

Все варианты «Поделиться» визуально схожи;
Разные типы экспорта неразличимы;
Приходится изобретать всё более абстрактные символы.

Nielsen Norman Group в исследованиях показал:

Только 5−10 иконок имеют универсальное понимание 🏠 домой, 🔍 поиск, ⚙️ настройки, 🖨️ печать;
Даже универсальные иконки понимаются с точностью лишь 60−80%;
Комбинация «иконка + текст» увеличивает понимание до 95−98%.

Исключения, когда допустимо использовать только иконки:

Строго стандартные действия: ✖️ закрыть, ▶️ воспроизвести, ⏸️ пауза;
При критическом дефиците места (панели инструментов);
НО даже тогда обязательны подсказки (tooltips) при наведении;
Для опытных пользователей в специализированных приложениях.

Если места критически мало:

Первичные кнопки — всегда с текстом;
Вторичные — иконка + текст (можно мельче);
Третичные — иконка с обязательной подсказкой.

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

Иконки — украшают, текст — объясняет.

Обеспечьте достаточный цветовой контраст

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

Оранжевая кнопка на таком же фоне — плохой контраст

Почему важен достаточный цветовой контраст в кнопках:

1. Физиологические ограничения зрения
Миллионы людей имеют особенности восприятия цвета:

Дальтонизм — сложность различения красного и зелёного, синего и жёлтого;
Возрастные изменения — после 40 лет снижается чувствительность к контрасту, хрусталик желтеет;
Катаракта, глаукома — размытие и снижение контрастности;
Слабое зрение — требуется усиленный контраст для различения элементов.

2. Условия использования
Контраст критичен в разных ситуациях:

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

3. Юридические требования и стандарты WCAG 2.1

Уровень AA (минимум): контраст 4.5:1 для обычного текста, 3:1 для крупного (18 px+ или 14 px+ жирного);
Уровень AAA (желательно): контраст 7:1 для обычного текста, 4.5:1 для крупного.

4. Читаемость и скорость восприятия
Низкий контраст заставляет:

Напрягать зрение;
Перечитывать текст несколько раз;
Приближаться к экрану;
Тратить больше времени на распознавание.

5. Усталость глаз
Длительная работа с низко контрастным интерфейсом вызывает:

Зрительное напряжение;
Головную боль;
Общую усталость;
Желание покинуть интерфейс.

6. Визуальная иерархия
Контраст помогает выделить важные элементы:

Первичная кнопка — высокий контраст;
Вторичная кнопка — средний контраст;
Отключенная кнопка — низкий контраст, но всё ещё читаемый.

7. Снижение ошибок
Когда текст кнопки плохо виден:

Пользователь может не заметить важную опцию;
Перепутать активную и неактивную кнопки;
Пропустить предупреждение в деструктивной кнопке.

8. Профессиональное восприятие
Низкий контраст воспринимается как:

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

Как вручную проверить контраст:

Сделайте скриншот в оттенках серого — текст должен быть чётким;
Посмотрите на экран в ярком свете;
Уменьшите яркость монитора до 50%.

Особые случаи:

1. Кнопки с градиентами:
Проверяйте контраст на самой светлой части градиента.

2. Кнопки с фоновыми изображениями:
Используйте overlay для гарантированного контраста.

3. Инвертированные цветовые схемы (тёмная тема):
Проверяйте контраст отдельно для каждой темы.

Цветные акценты:
Не полагайтесь только на цвет для передачи информации — добавляйте иконки, текст.

Высокий контраст усиливает:

Визуальную иерархию (выделение основных кнопок);
Читаемость подписей;
Доступность для всех пользователей;
Скорость взаимодействия.

Если сомневаетесь — выбирайте больший контраст. Ещё никто не жаловался на слишком читаемый интерфейс.

Кнопки должны быть правильного размера

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

Ключевые причины:

1. Закон Фиттса
Фундаментальный принцип UX: время попадания в цель зависит от её размера и расстояния до неё.

Чем больше кнопка, тем быстрее и точнее пользователь в неё попадает;
Чем меньше кнопка, тем больше концентрации и времени требуется;
Маленькие кнопки вызывают промахи и фрустрацию.

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

Палец гораздо менее точен, чем курсор мыши;
Средняя ширина подушечки пальца — 11 мм;
Минимальный размер кнопки:

- iOS Human Interface Guidelines: 44×44 px;
- Material Design (Android): 48×48 dp;
- Рекомендация WCAG: минимум 44×44 px.

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

3. Доступность для людей с моторными нарушениями
Миллионы пользователей имеют сложности с точностью движений:

Пожилые люди (тремор, артрит);
Люди с болезнью Паркинсона;
Травмы конечностей;
Использование устройств одной рукой;
Временные ограничения (держат ребёнка, едут в транспорте).

Крупные кнопки — вопрос доступности для 15−20% населения.

4. Контекст использования
Интерфейсы используются в движении:

В транспорте — вибрация затрудняет точное попадание;
На ходу — внимание рассеяно;
В перчатках — зимой, на производстве;
В стрессе — руки дрожат.

Адекватный размер компенсирует эти трудности.

5. Визуальная иерархия
Размер передаёт важность:

Первичная кнопка (главное действие) — крупная, заметная;
Вторичная кнопка — среднего размера;
Третичная кнопка — меньше, но не менее минимума.

Неправильный размер нарушает иерархию и сбивает с толку.

6. Когнитивная нагрузка
Маленькие кнопки требуют:

Повышенной концентрации;
Замедления движений (осторожное прицеливание);
Дополнительных попыток при промахе;
Больше ментальных усилий.

Крупные кнопки позволяют действовать быстро и уверенно.

7. Ошибки и их цена
При маленьких кнопках возрастает риск:

Нажать не ту кнопку;
Случайно активировать деструктивное действие;
Пропустить важную опцию;
Разочароваться и покинуть интерфейс.

В критических интерфейсах (медицина, финансы) ошибка может быть дорогостоящей.

8. Производительность и конверсия
Исследования показывают:

Увеличение размера кнопки на 20% может повысить конверсию на 10−15%;
Маленькие кнопки снижают продажи;
Пользователи воспринимают крупные кнопки как более надёжные.

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

В этом примере кнопка такая же маленькая, но более адекватно смотрится в пропорциях с небольшим размером текста

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

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

Кнопка должна быть достаточно большой, чтобы в неё можно было попасть с закрытыми глазами (почти).

Расстояние между кнопками должно быть достаточным

Расстояние между кнопками (spacing) определяет точность попадания, предотвращение ошибок и визуальную ясность интерфейса. Плотное расположение кнопок превращает каждое действие в лотерею.

Почему расстояние между кнопками должно быть достаточным:

1. Предотвращение случайных нажатий
Основная опасность тесного расположения — попадание не в ту кнопку:

Пользователь целится в «Сохранить», попадает в «Отменить»;
На тачскрине палец задевает соседнюю кнопку;
При быстром взаимодействии промахи неизбежны;
Особенно критично для деструктивных действий («Удалить» рядом с «Редактировать»).

2. Закон Фиттса
Время и точность попадания зависят не только от размера цели, но и от свободного пространства вокруг неё:

Чем ближе другие кликабельные элементы, тем медленнее и осторожнее пользователь;
Окружённая пространством кнопка воспринимается как бOльшая цель;
Плотное окружение требует замедления и прицеливания.

3. Физиология сенсорного управления
На тачскринах проблема усугубляется:

Подушечка пальца — 10−14 мм диаметром, контакт неточный;
Жировое пятно от касания может активировать соседний элемент;
Движение пальца при отрыве может сдвинуться на 2−3 мм;
Рука закрывает обзор — пользователь не видит точку касания.

Минимальное расстояние между кнопками:

iOS: 8 px между интерактивными элементами;
Material Design: 8 dp (более комфортно — 12−16 dp);
WCAG 2.2: минимум 24×24 px свободного пространства вокруг.

4. Когнитивная нагрузка и визуальное разделение
Плотно расположенные кнопки:

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

Пространство создаёт визуальную группировку и ясность.

5. Доступность для людей с ограничениями
Недостаточное расстояние критично для:

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

6. Контекст использования
Расстояние компенсирует сложные условия:

Движение (транспорт, ходьба) — вибрация и качка;
Одна рука занята — неудобный хват устройства;
Стресс — дрожание рук в критических ситуациях;
Усталость — снижение координации к концу дня.

7. Визуальная иерархия и группировка
Расстояние передаёт смысл:

Тесная группа (4−8 px) — связанные действия;
Среднее расстояние (12−16 px) — независимые действия;
Большое расстояние (24+ px) — разные категории.

Неправильное расстояние нарушает логическую структуру.

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

Добавьте наглядное состояние фокуса и наведения

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

Ключевые причины:

1. Подтверждение интерактивности
Пользователь должен мгновенно понять, что элемент кликабелен:

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

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

Перед кликом: пользователь видит, что попал в цель;
Предотвращает ошибки: можно скорректировать положение до клика;
Уверенность: нет сомнений, что нажмётся именно эта кнопка.

3. Навигация с клавиатуры (критично для доступности)
Миллионы пользователей не используют мышь:

Люди с моторными нарушениями;
Слабовидящие пользователи;
Опытные пользователи (предпочитают клавиатуру);
Пользователи программ чтения с экрана.

Без видимого фокуса:

Невозможно понять, где находишься на странице;
Навигация Tab становится бесполезной

4. Юридические требования
WCAG 2.1 критерии:

2.4.7 Focus Visible (AA): фокус должен быть визуально различим;
2.4.11 Focus Appearance (AAA): контраст фокуса минимум 3:1;
1.4.11 Non-text Contrast (AA): граница фокуса контраст 3:1 к фону.

Отсутствие фокуса — нарушение законов о доступности во многих странах, в том числе, в России.

5. Предотвращение когнитивной перегрузки
Обратная связь экономит ментальную энергию:

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

6. Особенности тачскринов
На мобильных устройствах состояние hover невозможно, но важны:

Active — визуальная обратная связь при нажатии;
Анимация нажатия — подтверждение касания;
Тактильная обратная связь (haptic) усиливает эффект.

Каждое взаимодействие пользователя должно получать визуальный отклик. Молчаливый интерфейс — сломанный интерфейс.

Не полагайтесь исключительно на цвет

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

Почему нельзя полагаться исключительно на цвет в кнопках:

1. Дальтонизм (цветовая слепота). 8−10% мужчин и 0.5% женщин имеют нарушения цветовосприятия. Для дальтоников красная и синяя кнопки могут выглядеть идентично!
2. Юридические требования (WCAG). WCAG 2.1 Критерий 1.4.1 Use of Color (уровень A): «Цвет не используется как единственное визуальное средство передачи информации, указания действия, запроса ответа или выделения визуального элемента».

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

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

Цвет может исказиться или стать неразличимым:
Технические факторы:

Дешёвые экраны — плохая цветопередача;
Старые мониторы — выцветшая матрица;
E-ink дисплеи — только градации серого;
Печать на ч/б принтере — всё превращается в оттенки серого;
Проекторы — искажение цветов.

Условия освещения:

Яркое солнце — экран выцветает, цвета блёкнут;
Тусклое освещение — сложно различить оттенки;
Цветное освещение — искажает восприятие цветов на экране.

Временные нарушения зрения:

Усталость глаз — снижается чувствительность к цвету;
После сварки или яркого света — временная цветовая слепота;
Медицинские процедуры (расширение зрачков) — размытое цветовосприятие.

4. Возрастные изменения зрения
С возрастом цветовосприятие ухудшается:

После 40 лет — хрусталик желтеет, синий спектр воспринимается хуже;
После 60 лет — различение оттенков падает на 30−40%;
Катаракта — всё видится в жёлто-коричневых тонах.

Старайтесь не использовать отключённые кнопки

Отключённые кнопки создают несколько проблем в пользовательском интерфейсе:

Причины избегать отключённых кнопок:

1. Отсутствие обратной связи

Пользователь не понимает, почему кнопка недоступна;
Нет объяснения, что нужно сделать для её активации.

2. Плохая доступность

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

3. Когнитивная нагрузка

Пользователь видит элемент, но не может с ним взаимодействовать;
Это создаёт фрустрацию и замешательство.

Пользователь всегда должен понимать состояние интерфейса и знать, как достичь своей цели.

Избегайте кнопок «на всякий случай»

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

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

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

Нестандартные кнопки

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

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

Пример минималистичной квадратной кнопки

Пример ярких, креативных кнопок на главном экране

Пример гигантской кнопки, которая аккуратно вписывается в дизайн экрана и не перетягивает на себя всё внимание

Эффектная космическая кнопка на сайте ивент-агентства. Проект WebValley Studio

Неоновая кнопка, которая прилипает к курсору. Проект WebValley Studio

Необычная кнопка с обтекаемой формой

И небольшой интерактив)

Мария Дрокина

UX/UI-дизайнер

15.05.2026

Автор статьи

Доверьте разработку сайта профессионалам!

Оставьте заявку с кратким рассказом о проекте или заполните бриф.

Обсудить проект

Понравилась статья?

Поделись материалом с другими в социальных сетях — сохрани статью себе для быстрого доступа, поддержи нашу студию!

Подпишись, чтобы быть в курсе!

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

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

Дизайн

Вёрстка макетов дизайна для сайта

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

Дизайн

Вёрстка макетов дизайна для сайта

Дизайн

Вёрстка макетов дизайна для сайта