frame 1 1160x620 - Правила дизайна хорошей кнопки

Привет дружок-пирожок. Это будет супер-короткая статья, в которой я поведаю тебе несколько основных правил, которые помогут дизайнить адекватные кнопки для веб-сайтов.
Я уже вижу, как ты тянешь свои пальчики к клавиатуре, чтобы написать о том, что ты и сам всё знаешь, а статья бесполезная. Но давай будем честны, большинство дизайнеров до сих пор делают макеты в стиле «Русский Behance» для цветочных магазинов «Елена», и выглядит это крайне ужасно.

Ладно, не сердись, давай повторим банальщину вместе, а новички узнают что-то новое)

1. Горизонтальные отступы

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Правила дизайна хорошей кнопки

Не стоит делать кнопки слишком узкими или широкими, идеальный отступ для удобного взаимодействия с кнопкой — 32PX с обеих сторон.

2. Вертикальные отступы

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Правила дизайна хорошей кнопки

Так же кнопка не должна быть слишком высокой или плоской.
18 PX — то что нужно.

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Правила дизайна хорошей кнопки
Для создания кнопок в Figma я использую Auto Layout, там очень удобно задавать параметры отступов 
ux research big - Правила дизайна хорошей кнопки

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

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

3. Шрифт и его размер

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Правила дизайна хорошей кнопки

Не стоит использовать слишком большой или маленький размер шрифта, 16pt- самый оптимальный вариант. Так же стоит заметить, что слишком тонкий стиль шрифта может быть плохо читаемым.
Отдельный котел в аду ждёт всех дизайнеров, которые абсолютно во всех кнопках используют кааааапс!
Тебе удобно читать книгу, В которой ВСЁ написано С большой БУКВЫ? Вот и пользователю тоже не очень. Так же, если ты еще не силён в типографике, постарайся не использовать какие-то сложные шрифты с засечками или наклоном. Их трудно сочетать с другими шрифтами, поэтому попробуй что-то простое и распространенное: Roboto, San Francisco или Montserrat.

4. Еще немного правил

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Правила дизайна хорошей кнопки

Радиус закруглений стоит использовать кратным — 2 px., так тебе будет проще сочетать его с другими закругленными элементами в дизайне.
Избегай градиентов! В большинстве своём они сильно удешевляют дизайн и делают текст в кнопке плохо читаемым. Если ты хочешь добавить объём, то стоит заменить градиент тенью.

Заключение

Правила созданы, чтобы их нарушать, поэтому не бойся экспериментировать!
Больше обращай внимание на дизайн продуктов, которыми ты восхищаешься. А главное в этой жизни, не использовать, СУ# *А, КАПС В кнопках!

Больше интересных статей и материалов в моём Telegram-канале
Можешь скачать мой Figma-исходник и поиграть с простыми примерами.
Обнял, приподнял!

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

Похожие записи

Тренды UI/UX дизайна на 2020 год

Подборка основных трендов UI/UX дизайна, которые мы увидим в 2020 году

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

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

Паттерн нижней панели навигации на мобильных веб-сайтах, исследование

Гамбургер-меню? Есть ли лучшая альтернатива? В этой статье я попытаюсь рассмотреть эти вопросы