{"id":13466,"url":"\/distributions\/13466\/click?bit=1&hash=891d339b00b86120568ea8e4296ded112a42876a976e2fd335004400f35cbd30","title":"\u0427\u0442\u043e \u0441\u043c\u043e\u0442\u0440\u044f\u0442, \u0447\u0438\u0442\u0430\u044e\u0442 \u0438 \u043a\u0443\u0434\u0430 \u0445\u043e\u0434\u044f\u0442 \u0432\u0430\u0448\u0438 \u043a\u043b\u0438\u0435\u043d\u0442\u044b?","buttonText":"\u0423\u0437\u043d\u0430\u0442\u044c","imageUuid":"24bb823c-c595-5fc8-be0f-fba9e89237c2","isPaidAndBannersEnabled":false}

Правила дизайна хорошей кнопки

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

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

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

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

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

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

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

Для создания кнопок в Figma я использую Auto Layout, там очень удобно задавать параметры отступов 

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

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

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

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

Заключение

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

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

0
50 комментариев
Написать комментарий...
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Zoibana

Когда один коммент полезнее и интереснее всего поста

Ответить
Развернуть ветку
Denis Klyuev

А высота кнопки 38 у бутстрапа это 36+2 внешней обводки по 8пикс сетке? :)

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Всвиторе

Читаешь серьезный журнал про бизнес, трюки увлечение роста продаж, стартапы и на тебе. 

Привет дружок-пирожок.
Ответить
Развернуть ветку
Макс О дизайне
Автор

Извините, мистер бизнесмен, не хотел сбивать ваш деловой настрой 😆

Ответить
Развернуть ветку
Investinder Ru

Порвался)))

Ответить
Развернуть ветку
Юрий Б.

И ты ты тянешь свои пальчики к клавиатуре, чтобы написать «Привееет! 👋»

Ответить
Развернуть ветку
Уоррен Баффет

Слабо.
1. В дизайне не отражены состояния кнопок - ховер, фокус и нажатая.
2. Нет обоснования откуда взялись "магические цифры" - 32px, 18px, 16pt.

Ответить
Развернуть ветку
Гриша Булыжников

"оптимально" же..

Ответить
Развернуть ветку
Jazique Evoque

Попробуй зайти сейчас в Figma  и нарисовать такую кнопку - у тебя выйдет кнопка высотой в 56px. Куда ты применишь «оптимальный» размер? Поставь такую кнопку в свои обычные макеты просто рядом с обычными кнопками (38-44px) и посмотри, как можно загнать новичка в коллапс таким гайдом)

Ответить
Развернуть ветку
AtlasOkon

"Не стоит делать кнопки слишком узкими или широкими."
"Не стоит использовать слишком большой или маленький размер."
"Кнопка не должна быть слишком высокой или плоской."
"Правила созданы, чтобы их нарушать, поэтому не бойся экспериментировать!" ))

Ответить
Развернуть ветку
Dmitriy Lupachev

Захотелось глянуть сайт цветочного магазина Елена))

Ответить
Развернуть ветку
Андрей Никифоров

я то же хочу посмотреть

Ответить
Развернуть ветку
Pavel Voronkov

Это краткий пересказ гайдлайна MD?

Ответить
Развернуть ветку
Александр Борисов

Нет, там другие цифры, на сколько я помню

Ответить
Развернуть ветку
Гриша Булыжников

молдовы?

Ответить
Развернуть ветку
Гриша Булыжников

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

Ответить
Развернуть ветку
Zoibana

Именно.

горизонтальные - 32, вертикальные - 18, шрифт - 16

Про адаптив и разные размеры кнопок под разные разрешения автор не слышал

Ответить
Развернуть ветку
va loo

справедливости ради: пиксели прекрасно масштабируются согласно разрешениям и пропорциям экранов

Ответить
Развернуть ветку
Герман Манвелов

Я и так всё знаю, а статья бесполезная.

Ответить
Развернуть ветку
Радимира Богданович

Спасибо за материал, познавательно))
P. S. Пирожочек.. Сразу бабушка Шелдона вспомнилась)

Ответить
Развернуть ветку
Artyom Konakov

А что не так с этой кнопкой?

Ответить
Развернуть ветку
Денис Малышев

Автор не любит капс:))

Ответить
Развернуть ветку
Ольга Маньшина

Она работает в таком варианте:

Ответить
Развернуть ветку
Андрей Никифоров

прикольная кнопка

Ответить
Развернуть ветку
va loo

А В А М П Р А В Д А У Д О Б Н О Ч И Т А Т Ь Т Е К С Т С Т А К И М И О Т С Т У П А М И?
ничем не обоснованный font-spacing, необоснованный капс (че эта К Н О П К А на меня орёт?), тонкий шрифт (тем более на кнопке, тем более белым на цветном) - харам (люди с плохим зрениям скажут дизайнеру спасибо).

такие кнопки должны отправляться в помойку вместе с дизайнером

Ответить
Развернуть ветку
Artyom Konakov

Как скажете (:

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Pavel Voronkov

Коллега просто ещё в начале пути, и впереди ещё много новых открытий и разочарований.

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Лена Успенская

Не подскажете где можно прочитать про кнопки более детально?

Ответить
Развернуть ветку
Аккаунт заморожен

Комментарий недоступен

Ответить
Развернуть ветку
Макс О дизайне
Автор

Сергей, речь в статье о Web сайтах и приложения, на мобильных устройствах совершенно другие параметры, так что вы правы)

Ответить
Развернуть ветку
Аккаунт заморожен

Комментарий недоступен

Ответить
Развернуть ветку
Андрей Никифоров

Bootstrap

Ответить
Развернуть ветку
Investinder Ru

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

Ответить
Развернуть ветку
Макс О дизайне
Автор

Неоморфизм) Выглядит круто, но функционала в себе практически не несёт

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Аккаунт заморожен

Комментарий недоступен

Ответить
Развернуть ветку
Nikita Loginov

Если не ошибаюсь,то pt — это типографский пункт, полиграфическая тема в дюймах. Разве не принято в интерфейсах пользоваться пикселями? Объясните связь, пожалуйста, между единицами. 

Ответить
Развернуть ветку
Pavel Voronkov

Я бы сказал, что уже не пиксели, а dp.
Почитайте https://material.io/design/layout/pixel-density.html

Ответить
Развернуть ветку
Nikita Loginov

Благодарю, ознакомлюсь 

Ответить
Развернуть ветку
Антон Илларионов

Коллега, согласен, что основы нужно периодически вспоминать и проговаривать и для себя и для новичков. Так что дело ваше правое. 
Однако тут и для основ маловато. Вышло пока весьма поверхностно, часто безосновательно. 
Нет ничего про состояния, кнопки разных уровней, кнопки с иконками... короче, тема огромная. Почитайте конструктивные комментарии и по возможности дополните статью.
Удачи!

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Валентин Кротов

Ну а мобильная то где(

Ответить
Развернуть ветку
Art Coupe

Не очень универсальна статья, т.к. не понятно, под какие размеры экранов это подходит.

Ответить
Развернуть ветку
Yury

Что то вы совсем не старитесь. Про кнопку то можно было бы по-подробнее, а здесь даже состояний нет, да и видов кнопок на самом деле много.
Хотя бы:

Ответить
Развернуть ветку
Аккаунт заморожен

Комментарий недоступен

Ответить
Развернуть ветку
Читать все 50 комментариев
null