Размер кнопок в 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,

Alex Gour