1 wrrmumtfxjcja2vjhuotng 1160x620 - Как проектировать лучшие кнопки

Что нужно, а что нельзя делать при проектировании кнопок интерфейса

1. Ограничьтесь одним стилем для каждого типа кнопки

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Как проектировать лучшие кнопки

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

2. Добавьте состояния событий и предоставьте визуальный фидбек

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Как проектировать лучшие кнопки

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

ux research big - Как проектировать лучшие кнопки

Профессиональная подготовка UX-исследователей

Научитесь определять потребности пользователей! 3 месяца обучения, ведущие эксперты, удостоверение о повышении квалификации НИУ ВШЭ, менторство
Узнать подробнее

3. Разделяйте типы кнопок

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Как проектировать лучшие кнопки

Типы кнопок должны быть стилистически дифференцированы, чтобы обеспечить визуальные подсказки их иерархии. Первичное действие должно быть более заметным, чем вторичное или третичное. Что касается действий, приводящих к необратимым последствиям, то пользователи должны подтвердить свои намерения.

4. Сохраняйте последовательность стиля кнопок

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Как проектировать лучшие кнопки

Любой стиль дизайна будет работать до тех пор, пока вы придерживаетесь общего стиля. Если вы используете радиус границы 4 пикселя, тонкий градиент и тень, убедитесь, что применили этот стиль ко всем типам кнопок.

5. Другие элементы не должны выглядеть как кнопки

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Как проектировать лучшие кнопки

Кнопки (особенно полностью округлые) часто оформляются аналогично тегам. Если вы используете оба компонента в своем дизайне, убедитесь, что добавили достаточно визуальных различий, чтобы избежать путаницы. Последнее, что вам нужно – это злой пользователь, щелкающий по элементу, который он принимает за кнопку.

6. Придерживайтесь единого регистра

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Как проектировать лучшие кнопки

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

7. Знайте, когда использовать иконки

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Как проектировать лучшие кнопки

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

8. Избегайте длинных меток

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Как проектировать лучшие кнопки

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

9. Метка должна четко сообщать о действии кнопки

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Как проектировать лучшие кнопки

Не заставляйте пользователя гадать, что делает кнопка, особенно, если она приводит к необратимым последствиям. Объясните последствия действия коротко и ясно. Метки «да», «нет» и «отмена» могут быть неверно истолкованы. В приведенном выше примере пользователь может посчитать, что кнопка «отмена» подтверждает удаление местоположения, а не отменяет его.

10. Добавьте отступ между ссылками

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Как проектировать лучшие кнопки

Уделите внимание действиям со ссылками. Убедитесь, что добавили между ссылок достаточно отступов, когда они появляются вместе вне блоков текста.

11. Не переносите текст метки

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Как проектировать лучшие кнопки

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

12. Метка не должна быть длиннее ширины кнопки

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Как проектировать лучшие кнопки

Хотя это кажется очевидным, я видел много дизайнов, в которых текст кнопки был больше ее ширины. Вместо того, чтобы жестко задать ширину кнопки, укажите отступы. Кроме того, всегда старайтесь сократить количество символов и слов до необходимого минимума, чтобы передать действия. Может быть, лучшая метка – это вообще не метка, а иконка.

Оригинал: medium.com

Если вы нашли ошибку, выделите фрагмент текста и нажмите Ctrl+Enter

Добавить комментарий
Похожие записи

10 золотых правил UI дизайна

Когда вы сомневаетесь, обратитесь к этому списку стандартных приемов UI дизайна, которым нужно следовать

47 важных советов для UI и UX дизайнеров

Эта статья – список важных советов для UI / UX дизайнеров, дизайнеров взаимодействия или продуктовых дизайнеров любого уровня

Как создавать темные темы. Руководство от Superhuman

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