Кнопки

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

Принципы

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

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

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

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

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

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

check_circle

Делать

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

cancel

Не

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

check_circle

Делать

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

cancel

Не

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

Анатомия

По умолчанию

1. Включено: состояние по умолчанию. 2. Наведите курсор . 3. Нажмите.

Большой

1. Включено: состояние по умолчанию. 2. Наведите курсор . 3. Нажмите.

Настройка

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