Кнопки в дизайн-системе проекта
Каких только кнопок не бывает. Чем больше проект, тем больше разнообразия встречается. Много действий и нужно внимательно следить за контрастом и удержанием внимания. Дизайнеры часто используют разные типы кнопок по наитию, неосознанно. Иногда, в одинаковых ситуациях, они испльзуют разные стили. Консистентность проекта снижается.
Коротко разберу, какие базовые кнопки нужны в большенстве случаев и когда их лучше использовать.
Конфигурация кнопок
Я советую начать со сборки типовых кнопок. В 80% случаев этого будет достаточно. К типовым кнопокам отностятся:
- текстовая;
- с иконкой слева;
- с иконкой справа;
- с двумя иконками;
- с иконкой и ценой;
- только с иконкой;
- специфическая.
Отправить письмо Войти Создать Продолжить Купить 1200 ₽ Получить суперсилу
Размеры кнопок
Редко встречается больше трех размеров кнопок:
- маленькая;
- средняя;
- большая.
Этого хватает, чтобы использовать их на страницах, в таблицах и модулях разного размера.
Действия и стили
Кнопки могут быть с заливкой, с тенью, с обводкой, без заливки, яркие, тусклые, похожие на ссылки… Но независимо от стилистики, кнопки делятся по действиям и контрасту. Чем действие важнее – тем контрастнее кнопка.
Целевая – самая заметная. Побуждает совершить нужное действие.
Купить 1200 ₽
Альтернативная – используются в паре с целевой, как альтернативное действие.
Отменить Сохранить
Или самостоятельно для нейтральных действий.
Пропустить шаг Показать еще
Опциональная – для люого действия, не связанного с целевыми.
Напечатать Подробнее
Целевые и альтернативные кнопки обычно каркасные, залитые цветом. Каркасным нужен дополнительный воздух вокруг. Поэтому они хорошо себя чувствуют, когда их не много рядом.
Опциональные кнопки обычно безскаркасные. Они не перетягивают на себя внимание. Лучше объединяются в группы и компануются плотнее, потому что им не нужен дополнительный воздух вокруг.
Сергей Плохотнюк
Привезли еду как всегда почти горячую. Рядом с метро Сходненская. К качеству никаких вопросов: обалденный суп с белыми грибами, вкусное харчо, много мяса. За что снял 2 звезды? При заказе указал количество персон. Иниииии? Не дали ни одной вилки, ложки, салфеток...
Продолжение
Состояния кнопок
Здесь все просто. Для всех типов кнопок нужны три базовых состояния:
- по умолчанию;
- при наведении/фокусе;
- заблокированное.
Отправить
Отправить
Отправить
Для целевой кнопки
Отправить
Отправить
Отправить
Для альтернативной кнопки
Отправить
Отправить
Отправить
Для опциональной кнопки
Дополнительные цвета
Одного оттенка для всех кнопок недостаточно. Кнопки могут быть с положительным целевым действием или отрицательным целевым действием. Кнопки разного цвета могут показывать разные направления действий: одни для покупки за рубли, другие для покупки в кредит.
Создавать все варианты в разных цветах – непрактично. В дизайн-системе достаточно хранить базовые кнопки и красить их при использовании в макетах. А для разработчиков подготовить гайдлайн с состояниями и примерами.
Купить в подарок
Сообщить о поступлении
Отключить рассылку
Задавайте правила, описывайте применение. Тогда у дизайнеров будет четкое руководство и проект останется консистентным.
29 июня 2023