Дизайн кнопок в UI: иерархия, размеры и состояния

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

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

Определите иерархию, прежде чем выбирать цвет

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

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

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

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

Пишите подпись, которая объясняет результат

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

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

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

Добавляйте иконку, только когда она помогает понять или узнать действие. Стрелка может подчёркивать переход к следующему шагу, но не объяснит расплывчатую подпись «Вперёд». Для кнопки редактирования без текста задайте понятное доступное имя, например «Изменить адрес доставки». Её назначение должно быть ясно и без наведения мыши.

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

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

Критерий минимального размера цели в WCAG 2.2 предусматривает размер 24 × 24 CSS-пикселя для целей указателя с установленными исключениями, в том числе для расстояний между целями и ссылок внутри текста. Это минимальный критерий, а не рекомендация делать главную кнопку покупки настолько маленькой. Для важного действия на сенсорном экране выберите более удобный размер и оцените его вместе с соседними элементами.

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

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

Подбирайте ширину под содержимое и макет

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

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

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

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

Дайте каждому состоянию свою задачу

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

• Обычное состояние: показывает действие и его приоритет до взаимодействия.
• Наведение: даёт отклик указателю, но не скрывает информацию, необходимую пользователям сенсорных экранов.
• Фокус клавиатуры: заметно выделяет текущий элемент. Фокус может совпадать с наведением, поэтому эти состояния не следует считать взаимоисключающими.
• Нажатие: даёт краткий отклик на активацию. Само по себе оно не означает, что покупка состоялась.
• Загрузка: сообщает о незавершённой операции, например «Оформляем заказ…», и предотвращает непреднамеренную повторную отправку.
• Недоступное состояние: показывает, что действие сейчас выполнить нельзя. Если причина неочевидна, её нужно объяснить.

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

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

В формах важно осторожно использовать отключённые кнопки. Если просто сделать «Оформить заказ» серой, не объяснив причину, покупателю придётся искать её самому. Когда это уместно, оставьте отправку доступной, чтобы после попытки показать незаполненные поля. Если действие должно быть недоступно, разместите причину рядом: например, объясните, что способ доставки ещё не выбран.

Сохраняйте читаемость при любом акценте

Фирменный цвет может хорошо работать в обводке и плохо — как фон для белого текста. Проверяйте конкретное сочетание текста и фона в каждом состоянии, включая наведение и фокус. Для текста обычного размера критерий контрастности WCAG требует соотношения не ниже 4,5:1. Для крупного текста и неактивных элементов предусмотрены отдельные условия, но они не дают повода делать второстепенные действия трудночитаемыми.

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

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

Соберите небольшое семейство кнопок в Pixso

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

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

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

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

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

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