КнопкаButton

Кнопка запускает действие.

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

Не используйте кнопки для перехода на другую страницу.

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

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

Название кнопки пишется с заглавной буквы.

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

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

Существуют исключения, когда название кнопки формулируется от первого лица:

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

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

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

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

Или поясните рядом с кнопкой:

Нельзя сокращать название кнопки, если оно не входит:

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

Не ставьте иконки в терминальных кнопках окна «Сохранить», «Отменить» и т.д.

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

Существует 3 стандартных размера кнопки:

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

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

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

Ширина кнопки задается размером текста внутри нее и стандартными отступами. Нельзя произвольно уменьшать отступы:

Увеличивать отступы можно:

• если это делает кнопку более пропорциональной остальным элементам страницы;
• если текст внутри кнопки короткий и кнопка выглядит маленькой.

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

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

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

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

Лучше располагать спиннер рядом с кнопкой, если есть место.

Если в кнопке есть иконка — можно подменять иконку.

Когда текст кнопки заменяется на спиннер ширина кнопки не должна меняться.

Обычные кнопки — белые с серой рамкой:

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

В проектах могут использоваться кнопки фирменного цвета:

Желтый — действия, связанные с оплатой сервисов:

Красный — необратимое или негативное по смыслу действие. Зеленый — действие с положительной окраской. Зеленую кнопку уместно ставить только если рядом есть красная кнопка с обратным смыслом: