Руководство по дизайну кнопок

Перевод статьи от UX Teddy из email-рассылки UI Adrian о создании кнопок. Кстати, в UX Teddy так же переводят статьи из закрытого блога UX Movement по подписке на Boosty.

Вы когда-нибудь задумывались о том, как сделать «идеальную кнопку»?

При создании интерфейсов для Android нет смысла проектировать кастомные компоненты. Вместо этого лучше обратиться к Material Guidelines и его официальной библиотеке дизайна.

Из статьи вы узнаете, как это сделать.

Типы кнопок

В Material Design есть девять типов кнопок:


1. Приподнятая кнопка
2. Кнопка с заливкой
3. Кнопка с более светлой заливкой и тёмным шрифтом
4. Контурная кнопка
5. Текстовая
6. Кнопка-иконка
7. Сегментированная кнопка
8. Плавающая кнопка действия (FAB)
9. Расширенная FAB

Иерархия кнопок

Кнопки в Material имеют 3 уровня акцента — низкий, средний и высокий.

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

Вот как следует обозначать кнопки в соответствии с иерархией:

Кнопки с высоким акцентом:
— Расширенная FAB — часто используется на больших экранах вместо FAB
— FAB — компонент по умолчанию для совершения основного действия на экране
— Кнопка с заливкой — предназначена для совершения завершающих действий на пути пользователя

Кнопки со средним акцентом:
— Кнопка с более светлой заливкой и тёмным шрифтом — менее заметная, чем кнопка с заливкой, и используется для тех же действий
— Приподнятая — предназначена для ситуаций, когда кнопку необходимо визуально отделить от фона
— Контурная кнопка — используется для таких действий, как «Посмотреть всё», «Читать далее», «Добавить в корзину» и т.д. Предназначена для совершения дополнительных действий

Кнопки с низким акцентом:
— Текстовая кнопка — используется для альтернативных вариантов
— Сегментированная кнопка — используется для совершения дополнительных действий или переключения между опциями в рамках одного экрана
— Кнопка-иконка — наиболее компактный и изящный тип кнопки, который предназначен для таких действий, как «Добавить в закладки», «Звезда» (добавить или убрать звезду у товара), «Сохранить», «Нравится» и других

Анатомия кнопок

Высота кнопок Material 3 составляет не менее 40 dp(px), а углы у них полностью закругленные. Их цветовые значения реализуются посредством дизайн-токенов.
Анатомия общего стиля кнопки:

FAB (Плавающая кнопка действия) теперь имеет 3 размера. Анатомия FAB:

И, наконец, анатомия расширенной FAB:

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