Button

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

§Внешний вид

Существует 5 видов кнопок: акцентные, основные, семантические, приподнятые и контрастные.

§Акцентные

Акцентные кнопки предназначенные для выделения ключевых действий и привлечения внимания пользователей к важным операциям. Они представлены тремя основными стилями: Action, Outlined Action и Flat Action.

Выбор между этими типами акцентных кнопок зависит от нужной степени акцента на действиях в интерфейсе. Action подходит для высшего приоритета, Outlined Action — для среднего, а Flat Action — для более низкого приоритета или второстепенных операций.

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

§Основные

Основные кнопки предназначены для выполнения основных и общих действий в интерфейсе. Эти кнопки доступны в нескольких стилях: Normal, Outlined, Flat и Flat Secondary. Выбор между этими стилями зависит от степени акцента на определенных действиях в интерфейсе. Например, Normal-кнопка подходит для обычных действий, Outlined – для действий со средним приоритетом, а Flat и Flat Secondary предназначены для менее важных или второстепенных операций.

§Семантические

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

Семантические кнопки представлены четырьмя основными стилями: Info, Success, Warning и Danger.

§Info

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

Success

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

Warning

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

Danger

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

Приподнятые

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

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

Контрастные кнопки

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

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

§Анатомия

Анатомия кнопки в интерфейсе включает в себя различные варианты оформления:

1. Только текст — кнопка, которая содержит только текст. Такая кнопка полезна, когда текст сам по себе ясно и однозначно передает назначение кнопки, особенно когда текст короткий и информативный. Например, такая кнопка может использоваться для действий «создать» или «отменить».
2. Иконки справа — кнопка, где иконка располагается справа от текста. Этот вариант полезен, когда необходимо представить разные способы выполнения одного и того же действия. Например, такая кнопка может использоваться для действия «сохранить», где у пользователя есть несколько опций для выбора («сохранить как PDF/RTF/HTML...»).
3. Иконка слева — кнопка, где иконка располагается слева от текста. Этот вариант полезен, когда иконка несет ключевую информацию и должна быть выделена. Например, такая кнопка может использоваться для действий «запустить» или «удалить».
4. Иконки справа и слева — кнопка, на которой размещены иконки слева и справа от текста. Этот вариант полезен, когда нужно подчеркнуть ключевое действие с помощью иконки и предоставить разные пути для его выполнения. Например, такая кнопка может использоваться для действия «добавить», где у пользователя есть несколько опций для выбора («добавить проект/ресурс/документ...»).
5. Только иконка — кнопка, которая состоит только из иконки и не содержит текста. Этот вариант полезен, когда информация на кнопке легко усваивается визуально и не требует дополнительных текстовых пояснений. Также он применяется, когда необходимо компактно сгруппировать множество действий в ограниченной области и нет возможности разместить кнопки с текстовыми подписями. Например, кнопка удаления в списке элементов может выглядеть как иконка с изображением корзины без текстовой метки.

§Состояния

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

Default — основное состояние кнопки, в котором она готова к взаимодействию и ожидает действий пользователя.

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

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

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

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

§Размеры

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

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

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

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

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

XL — используется в местах, где требуется выделить действия и есть достаточно места для размещения (например, на сайте или лендинге).

§Форма

Свойство pin предоставляет возможность управлять формой кнопок, определяя их стиль с помощью следующих значений:

round — кнопка округлой формы (скругленные углы с обеих сторон). Этот стиль придает кнопке мягкий и современный облик, делая её дружелюбной и приятной для взаимодействия.

brick – кнопка с острыми углами с обеих сторон.

clear – кнопка имеет острые углы и не имеет обводки с обеих сторон.

circle – кнопка имеет форму круга с обеих сторон.

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

§Ширина

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

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

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

§Рекомендации

Использование

• Формулируйте текст кнопки ясно и лаконично, чтобы пользователи сразу понимали, что произойдет после нажатия.
• При использовании иконок убедитесь, что они ясно передают свое значение и ваши пользователи легко их распознают.
• Соблюдайте баланс между иконками и текстом, чтобы оба элемента были видны и читаемы и ни один из них не доминировал.
• При использовании кнопок только с иконками рекомендуем добавлять подсказки при наведении (action tooltips), чтобы пользователи могли понять, что означает иконка.

Написание текстов

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