Кнопки в дизайне

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

Кнопка на сайте trello.com узнаваема, заметна и понятна

Различие кнопок по внешнему виду

1. Залитая цветом кнопка, как правило, выделяющаяся относительно других кнопок. Она обозначает самые важные действия на сайте
2. Кнопка с контуром может использоваться для обозначения как вторичной кнопки, так и основной
3. Текстовая кнопка используется для менее приоритетных действий и помогает сохранить акцент на основном тексте, не отвлекая на себя внимание
4. Кнопка переключения группирует набор действий, из которых можно выбрать только одно. Такие кнопки используются реже остальных.

Различие кнопок по иерархии

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

1. Основная (первичная) кнопка. Эта кнопка должна быть сильным визуальным индикатором, помогающим пользователю ориентироваться на сайте. Используйте для таких действий, как «перейти», «следующий», «смотреть еще», «заказать» и т.д.
Основная кнопка «подробнее» на сайте brandon-visa.ru


2. Вторичная кнопка используется для второстепенных действий, с более низким приоритетом, чем у основной кнопки. Может быть кнопкой-компаньоном для основной. Например, быть рядом с кнопкой «отправить» и называться «отмена».
   Не обязательно, чтобы эта кнопка имела отношение к первичной, суть ее в том, что она должна привлекать меньше внимания. Использование вторичных кнопок рядом с основной на сайте designmodo.com
   
   
3. Плавающая кнопка используется для обозначения действия, на котором нужно сфокусировать отдельное внимание. Обычно используется в мобильных приложениях. Плавающая кнопка «больше похожих аккаунтов» в приложении Instagram
   
   

Несколько полезных советов

Внешний вид:

• горизонтальный внутренний отступ может быть либо выровнен по сетке, либо иметь одинаковый отступ по бокам. Выравнивание по сетке позволяет сохранять кнопку всегда одинакового размера (в таком случае это ограничивает количество текста в кнопке). Если сохранять одинаковый отступ по бокам, например, 32рх, это позволит менять длину кнопки и избежать ограничения по длине текста. Но в таком случае надо установить минимальную ширину кнопки, например, 100рх, чтобы избежать слишком маленьких кнопок
• вертикальный внутренний отступ должен быть достаточным, чтобы тексту в кнопке не было «тесно», например, при высоте строки 22px сделайте отступы по 40рх
• делайте текстовую кнопку узнаваемой и понятной. Если она не написана заглавными буквами, ее цвет и стиль должен отличаться от обычного текста.

На сайте equatorcoffees.com у кнопки горизонтальный внутренний отступ выровнен по сетке и все кнопки одного размера

Содержание:

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

На сайте ekolife.co.uk кнопка имеет формулировку глагол+наречие и недлинный текст в одну строку

Сочетание:

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

Основная кнопка на сайте themelooks.com выделена, а менее приоритетная кнопка—контурная

Состояние:

• Неактивные кнопки. Кнопка может быть не активной, (отключенной), если пользователь не выполнил необходимые действия. После выполнения действий кнопка становится активной.
• Активная кнопка—ее внешний вид дает пользователю понять, что она кликабельна
• Наведение
• Фокус обозначает, например, открытую вкладку
• Нажатие.

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

Выводы:

• Кнопки различаются по внешнему виду: залитая цветом кнопка, кнопка с контуром, текстовая кнопка, кнопка переключения
• Различаются по иерархии: основная (первичная), вторичная и плавающая
• Во внешнем виде соблюдайте горизонтальные и вертикальные отступы и выделяйте текстовую кнопку, чтобы она отличалась от обычного текста
• Следите за содержанием кнопки: придерживайтесь одного текстового стиля, формулировки, не делайте текст слишком длинным и не переносите его на вторую строчку
• Правильно сочетайте кнопки: при использовании нескольких кнопок рядом, основной кнопкой выделите более важное действие, не ставьте рядом две основные кнопки, не размещайте кнопки друг под другом.