Кнопки

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

Принципы

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

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

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

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

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

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

check_circle

Делать

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

cancel

Не

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

check_circle

Делать

Используйте кнопки для вызова действия. Или используйте заголовок в качестве статического элемента.

cancel

Не

Используйте кнопку в качестве статичного декоративного элемента.

Кнопки-иконки

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

check_circle

Делать

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

cancel

Не

Для выполнения очень неочевидных действий используйте кнопку с иконкой.

Переключаемый

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

check_circle

Делать

Используйте кнопку-переключатель, если для действия предусмотрены логические параметры, например, «старт/стоп».

cancel

Не

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

Анатомия

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

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

Оба варианта имеют переключаемый режим.

Настройка

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

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