Размер кнопок в web интерфейсе

Всем привет, на связи рубрика «Простой дизайн». В прошлый раз мы разбирали правильное скругление внутренних углов фигур, а сегодня я дам совет, как в начале своего пути дизайнером рисовать правильные кнопки для web интерфейсов, какие должны быть размеры, пропорции и какой размер шрифта лучше использовать в кнопке.

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

Но прежде чем приступать к дизайну кнопки для web`а, необходимо понять, что web – это не только большой монитор, но и мобильный экран. Поэтому, что бы ваш дизайн был действительно адаптивным, кнопку необходимо проектировать с учетом размера пальца пользователя, хотя до сих пор идут баталии про размеры пальцев и зоны нажатия, я советую учитывать условный комфортный размер 40x40 px

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

Если у вас, пока нет насмотренности, то самая беспроигрышная размерность кнопок в web выглядит таким образом:

1. Оптимальный размер текста кнопки 16 px, при этом line-height выставляем 20 px, либо auto (очень важно соблюдать высоту строки, так как от нее идет отсчет отступов по горизонтали)

2. Вертикальные отступы от текста равны 16 px,то есть отступы равны размеру шрифта либо немного больше, но при этом стараться придерживаться кратности 4

3. Горизонтальные отступы, это вертикальные отступы умноженные на 2 и округленные кратно 4. В нашем примере 32px по вертикали*

Итого финальная формула размера кнопок для web интерфейса выглядит таким образом:

Горизонтальные отступы (A) всегда больше вертикальных (B), которые могут быть больше, либо быть равными по размеру с текстом (C)

Все, поздравляю, теперь у тебя 5й разряд по созданию кнопок для web интерфейсов и ты уже наверняка заинтригован, как правильно строить кнопки для сервиса и приложений, а так же вовсю уже гуглишь, что такое x-height и читаешь про пиксельные сетки))

Спасибо за внимание, до встречи

CPO Productium,

0
29 комментариев
Написать комментарий...
Ленин-гриб
Ответить
Развернуть ветку
Yury S
 «Простой дизайн»

Когда же наконец можно будет почитать про сложный дизайн?

Контент уровня “текст нужно делать контрастным чтобы его было легко читать”, “если текст слишком мелкий его трудно читать” и о “правильном” радиусе скругления углов у прямоугольников. Все это якобы из лучших побуждений и альтруизма для мифических “джунов” которые, похоже, вкатываются в UX сразу из детского сада. 

Ответить
Развернуть ветку
alex gour
Автор

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

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

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

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

Что т прям ну оооочень притянули!
Как гритса, компонент компоненту рознь - везде не засунешь

Ответить
Развернуть ветку
alex gour
Автор

ключевые моменты: джуны, нет опыта и негде толком почитать

Ответить
Развернуть ветку
greg chudnoff
Ответить
Развернуть ветку
Александр Варанцов

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

Досточно смотреть на высоту текстового блока, если мы в лоб центрируем текстовый блок по центру прямоугольника, то текстовый блок центрируется математически верно, но не визуально из-за заглавной буквы текстового блока. Буква в зависимости от шрифта забирает 1-4 px высоты и если в лоб центрировать её, то текстовый блок просто будет расположен низко.

Решение достаточно тривиально: Сделать padding сверху на 1-4 px меньше и компенсировать его снизу. Этот вариант настолько сильно выигрывает при чтении текстового блока в сравнение с вашим вариантом, что грех юзать такую вещь.

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

Про визуально верное выравнивание вопрос спорный. Лично у меня выравнивание по X-height вызывает диссонанс, будто блок текста слишком высоко относительно формы кнопули.

Но описанный приём с паддингами точно поможет в случае, когда у шрифта съехавшая базовая линия — этим грешат шрифты от Type Type (до бесплатной кастомизации), многие шрифты с MyFonts (привет, Gordita) и от Студии Лебедева. Помню, как до редизайна сайта Sketch у них в текстах и на кнопках были разные шрифты именно из-за этой проблемы.

Хотя верстать это смерть, конечно.

Ответить
Развернуть ветку
alex gour
Автор

согласен, но это больше как подсказка для junior как спроектировать кнопку

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

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

Ответить
Развернуть ветку
alex gour
Автор

доброе утро) линия горизонта - это лежа, линия вертикали - это стоя)

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

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

Ответить
Развернуть ветку
alex gour
Автор

таки да, а  я исправил, сча верну. спасибо большое

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

Тогда и тут нестыковка: "Вертикальные отступы (A) всегда больше горизонтальных (B), которые могут быть больше, либо быть равными по размеру с текстом (C)". На самом деле правило немного другое - размеры отступов больше по той оси, по которой больше размер элемента. Кнопки так то могут быть размещены вертикально, справа или слева скажем, с текстом, развернутым на 90 градусов.

Ответить
Развернуть ветку
alex gour
Автор

да, спасибо. отредактирую. когда инспектор доступ вернет)) )я пока ничего не редактировал))

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

.

Ответить
Развернуть ветку
alex gour
Автор

готово. еще раз спасибо

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

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

Ответить
Развернуть ветку
Artem Petrenkov
line-height выставляем 20 px

Тогда текстовый блок будет высотой 20px. А мы же хотим высоту 16px и такого же размера вертикальные отступы.

Ответить
Развернуть ветку
alex gour
Автор

читайте внимательно плз, размер шрифта 16px, блок задаем 20px, что бы не было ошибки. 
А вся соль шрифта 16px кроется в его реальной высоте 8px по x-height, но это уже совсем другая тема

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

X-height - это высота строчных букв, а line-height задаёт высоту всей линии. У вас на чертеже нарисовано 16px. Поэтому line-height и должна быть 16px.

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

Иначе при вёрстке получится такая штука:

Высота всей кнопки — 52px = 16px + 20px + 16px, а не 48px = 16px + 16px + 16px, как задумывал дизайнер.

Ответить
Развернуть ветку
alex gour
Автор

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

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

Что значит "визуально понятно для джуна"? Это же вы советуете такому джуну ставить line-height: 20px. А джуны у вас настолько бестолковые, что не может понять, чем отличается font-size от line-height? Мне кажется, что нет, а это вы не можете объяснить им отличие. Да и нарисовать правильно не можете. У вас на рисунке именно, что line-height и вертикальные паддинги равны 16px. И line-height: 16px нисколько не мешает при этом поставить и размер шрифта 16px.

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

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

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

Поэтому им нужно объяснить, что к чему. Что означает размер шрифта и line-height. Иначе он бездумно поставит 20px, а потом верстальщик так и сделает.

Ответить
Развернуть ветку
greg chudnoff
 Оптимальный размер текста кнопки 16 px

Пруфы в студию!

Ответить
Развернуть ветку
alex gour
Автор

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

Ответить
Развернуть ветку
26 комментариев
Раскрывать всегда