Кнопки являются важными компонентами любого цифрового продукта . Хотя существует множество способов создания кнопки, дизайнеры должны следовать принципам и рекомендациям, чтобы создать знакомый и интуитивно понятный пользовательский интерфейс .
Дизайн кнопок — это больше, чем выбор формы и цвета. Дизайнеры должны учитывать состояния кнопок, размещение, размер, отзывчивость, согласованность, использование значков, подходящий текст/метки и многое другое.
Какова цель кнопки в дизайне пользовательского интерфейса?
Хотя это может показаться очевидным для опытных дизайнеров пользовательского интерфейса, многие цифровые продукты по-прежнему неправильно используют кнопки. Кнопки передают определенный призыв к действию (CTA), например «Отправить» или «Оплатить».
Кнопки сообщают пользователям: «Если вы нажмете на меня, что-то произойдет». Дизайнеры также используют кнопки для общения с пользователями с помощью состояний, цвета и текста. Например, отключенное состояние кнопки (недоступное для нажатия) остается до тех пор, пока пользователь не заполнит обязательные поля формы.
Кнопки против ссылок
Многие цифровые продукты и веб-сайты неправильно используют кнопки и ссылки. Существует простое правило, которому нужно следовать при выборе между кнопкой и ссылкой: ссылки предназначены для навигации , а кнопки — для выполнения действий .
4 типа дизайна кнопок
Существует четыре типа дизайна кнопок , и каждая кнопка передает пользователям свое сообщение:
- Содержащаяся кнопка: часто используется в качестве основной кнопки для CTA и важных действий. Содержащиеся кнопки используют цвет фона с контрастным текстом.
- Кнопка с контуром: также называется дополнительной или призрачной кнопкой и часто размещается рядом с основной кнопкой в качестве альтернативного действия, например «Отмена» вместо «Отправить». Кнопки с контуром используют прозрачный фон с контрастной рамкой и текстом.
- Текстовая кнопка: также называется плоской кнопкой и часто используется для маловажных действий, таких как выбор даты. Текстовые кнопки не имеют фона или границ, а только цветная и видимая метка.
- Кнопка-переключатель: дизайнеры используют кнопки-переключатели для двух или более связанных действий, таких как переключение темного/светлого режима в приложении или выделение полужирным шрифтом, курсивом и подчеркиванием в текстовых процессорах. Разработчики используют состояния, чтобы указать, какая опция активна.
Современные мобильные приложения также используют плавающую кнопку действия (FAB) для важных действий. Дизайнеры часто размещают FAB в нижней части экрана, чтобы пользователь мог дотянуться до них большим пальцем.
Анатомия кнопки пользовательского интерфейса
Дизайнеры и инженеры могут изменить несколько свойств кнопки:
- Фон
- Этикетка
- Значок
- Прокладка
- Поле
- Граница
- Радиус границы
- Тень
6 состояний кнопки пользовательского интерфейса
Дизайнеры используют состояния для предоставления контекста и общения с пользователями. Существует шесть типов состояний кнопок:
- По умолчанию: как кнопка выглядит без состояния. Кнопка по умолчанию может быть встроенной, контурной или плоской, в зависимости от вашего дизайна пользовательского интерфейса и системы проектирования .
- Active: Сообщает пользователю, что он нажал кнопку
- Наведение: активируется, когда курсор мыши наводится на кнопку. Hover сообщает пользователю, что это кликабельный элемент
- Фокус: используется для обозначения выбора при использовании клавиатуры или вспомогательных технологий.
- Отключено: указывает, что пользователь не может нажать кнопку, пока не завершит другую задачу .
- Загрузка: сообщает, что система обрабатывает действие пользователя.
Рекомендации по использованию и дизайну кнопок
Дизайнеры должны следовать определенным принципам проектирования кнопок и пользовательских интерфейсов. Используйте эти рекомендации по дизайну кнопок для руководства своим следующим проектом.
Иерархия и размещение кнопок
Дизайнеры должны учитывать иерархию и расположение кнопок, чтобы предоставить пользователям ясность и выделить наиболее важные действия. Google Material Design рекомендует дизайнерам создавать акценты с помощью цвета:
- Высокий акцент (основной): используйте яркий цвет, предпочтительно вложенную кнопку, чтобы показать, что эта кнопка наиболее важна. Избегайте использования более одной кнопки с высоким выделением на одном экране.
- Средний акцент (вторичный): используйте более светлый оттенок основного цвета, чтобы обозначить, что эта кнопка менее важна.
- Низкий акцент (третичный): используйте текстовую кнопку или кнопку с контуром и прозрачным фоном, чтобы показать пользователям ее низкую важность.
Применяя принципы иерархии кнопок, пользователи могут выполнять важные действия, не задумываясь. Если вы используете одну кнопку для каждого действия, пользователям придется изучить каждую, чтобы определить, какую из них они должны нажать.
Правильное размещение кнопок также важно для навигации пользователей по цифровому продукту. Если вы размещаете две кнопки рядом, всегда используйте содержащуюся кнопку в качестве основного действия и обведенную или текстовую кнопку в качестве дополнительного действия.
Например, если у вас есть «Сохранить» и «Отмена» в нижней части формы, «Сохранить» будет основным действием с более высоким акцентом.
Согласованность кнопок
Дизайнеры должны последовательно использовать кнопки во всем цифровом продукте. Если вы используете содержащуюся кнопку для основного действия на одном экране, повторяйте этот выбор повсюду.
Дизайнеры также должны соответствовать размерам кнопок, шрифтам, значкам, цветам, радиусу границы, пробелам и другим свойствам, чтобы создать знакомый пользовательский интерфейс, в котором легко ориентироваться.
Размер и расстояние между кнопками
Размер имеет значение, когда речь идет о кнопках, особенно в мобильных приложениях, где пользователи используют пальцы. Дизайнеры должны использовать соответствующий размер кнопок и расстояние между ними, чтобы пользователи случайно не наткнулись на другой элемент.
Дизайнер Тарас Бакусевич рекомендует делать элементы пользовательского интерфейса размером не менее 48×48 пикселей, чтобы избежать ошибок касания цели.
Ярлыки кнопок
Этикетки должны быть максимально короткими и информативными. Дизайнеры также должны располагать этикетки на одной строке для удобства чтения.
Язык текста кнопки также имеет решающее значение для передачи пользователям правильного сообщения и действия. Например, если вы удаляете песню из плейлиста, правильной фразой будет «Удалить», а не «Удалить». Удалить может ввести пользователя в заблуждение, заставив его думать, что он удаляет песню со своего устройства или из приложения.
Аргумент в пользу использования заглавных букв в предложении лучше подходит для пользователей с нарушениями чтения, такими как дислексия. Google считает, что верхний регистр «должен отличать текстовую метку от окружающего текста».
Лучший вариант — протестировать свой продукт с пользователями. Цвет, контраст, размер, макет пользовательского интерфейса и многие другие факторы влияют на удобочитаемость, поэтому не существует универсального решения для использования заглавных букв.
Доступность кнопок
Доступность — критический фактор в современном UX-дизайне и разработке продуктов. Дизайнеры должны тестировать пользовательские интерфейсы с помощью инструментов и различных участников юзабилити, чтобы убедиться, что кнопки и другие элементы пользовательского интерфейса соответствуют стандартам доступности .
Размер метки, интервалы и отступы также могут повлиять на доступность. Эти свойства сложнее протестировать с помощью инструментов, поэтому дизайнеры должны использовать тестирование удобства использования , чтобы получить значимые результаты.
Устройства и размеры экрана
Понимание того, как выглядят кнопки на разных устройствах и размерах экрана, имеет решающее значение для дизайнеров. Например, диалоговые окна на устройствах Apple выглядят совершенно иначе, чем на Android. Плавающая кнопка действия также выглядит по-разному на iOS и Android.
Дизайнеры также должны учитывать, как кнопки будут отображаться на экранах разной ширины. Например, кнопка с длинной меткой может выглядеть по-разному на мобильных устройствах и компьютерах.
Подпишитесь на наши новости и следите за развитием сверы дизайна.