Размер кнопок в 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,
Когда же наконец можно будет почитать про сложный дизайн?
Контент уровня “текст нужно делать контрастным чтобы его было легко читать”, “если текст слишком мелкий его трудно читать” и о “правильном” радиусе скругления углов у прямоугольников. Все это якобы из лучших побуждений и альтруизма для мифических “джунов” которые, похоже, вкатываются в UX сразу из детского сада.
все ваши претензии я заранее описал в тексте. Сожалею, что вы потратили зря время для банальных вещей для вас. В будущем советую избегать рубрик, где в заголовках будет написано, что это информация для начинающих
Я не потратил времени, и так все понятно. Да и претензия не столько конкретно к вам, а скорее вообще про тренд. Контент создается не потому что есть что сказать или есть спрос а потому что нужно закрыть контент-маркетинг. Но и тут время тратить не хочется или мотивации нет (зачем заморачиваться если можно лить воду про гештальт или пересказывать очевидные вещи и это будет также эффективно). Отсюда и контент в духе SEO текстов, но печально здесь то он что предполагается вроде как для людей
Что т прям ну оооочень притянули!
Как гритса, компонент компоненту рознь - везде не засунешь
ключевые моменты: джуны, нет опыта и негде толком почитать
Не согласен, это устаревшая модель проектирования кнопки.
Досточно смотреть на высоту текстового блока, если мы в лоб центрируем текстовый блок по центру прямоугольника, то текстовый блок центрируется математически верно, но не визуально из-за заглавной буквы текстового блока. Буква в зависимости от шрифта забирает 1-4 px высоты и если в лоб центрировать её, то текстовый блок просто будет расположен низко.
Решение достаточно тривиально: Сделать padding сверху на 1-4 px меньше и компенсировать его снизу. Этот вариант настолько сильно выигрывает при чтении текстового блока в сравнение с вашим вариантом, что грех юзать такую вещь.
Про визуально верное выравнивание вопрос спорный. Лично у меня выравнивание по X-height вызывает диссонанс, будто блок текста слишком высоко относительно формы кнопули.
Но описанный приём с паддингами точно поможет в случае, когда у шрифта съехавшая базовая линия — этим грешат шрифты от Type Type (до бесплатной кастомизации), многие шрифты с MyFonts (привет, Gordita) и от Студии Лебедева. Помню, как до редизайна сайта Sketch у них в текстах и на кнопках были разные шрифты именно из-за этой проблемы.
Хотя верстать это смерть, конечно.
согласен, но это больше как подсказка для junior как спроектировать кнопку
Комментарий недоступен
доброе утро) линия горизонта - это лежа, линия вертикали - это стоя)
Комментарий недоступен
таки да, а я исправил, сча верну. спасибо большое
Тогда и тут нестыковка: "Вертикальные отступы (A) всегда больше горизонтальных (B), которые могут быть больше, либо быть равными по размеру с текстом (C)". На самом деле правило немного другое - размеры отступов больше по той оси, по которой больше размер элемента. Кнопки так то могут быть размещены вертикально, справа или слева скажем, с текстом, развернутым на 90 градусов.
да, спасибо. отредактирую. когда инспектор доступ вернет)) )я пока ничего не редактировал))
.
готово. еще раз спасибо
Комментарий недоступен
Тогда текстовый блок будет высотой 20px. А мы же хотим высоту 16px и такого же размера вертикальные отступы.
читайте внимательно плз, размер шрифта 16px, блок задаем 20px, что бы не было ошибки.
А вся соль шрифта 16px кроется в его реальной высоте 8px по x-height, но это уже совсем другая тема
X-height - это высота строчных букв, а line-height задаёт высоту всей линии. У вас на чертеже нарисовано 16px. Поэтому line-height и должна быть 16px.
Иначе при вёрстке получится такая штука:
Высота всей кнопки — 52px = 16px + 20px + 16px, а не 48px = 16px + 16px + 16px, как задумывал дизайнер.
а как тогда визуально понятно для джуна отобразить про что я говорю? здесь специально допущен компромисс, ради донесения смысла
Что значит "визуально понятно для джуна"? Это же вы советуете такому джуну ставить line-height: 20px. А джуны у вас настолько бестолковые, что не может понять, чем отличается font-size от line-height? Мне кажется, что нет, а это вы не можете объяснить им отличие. Да и нарисовать правильно не можете. У вас на рисунке именно, что line-height и вертикальные паддинги равны 16px. И line-height: 16px нисколько не мешает при этом поставить и размер шрифта 16px.
Комментарий недоступен
Поэтому им нужно объяснить, что к чему. Что означает размер шрифта и line-height. Иначе он бездумно поставит 20px, а потом верстальщик так и сделает.
Пруфы в студию!
в каком смысле пруфы? это исключительно опыт, как проще новичку выбрать размеры для кнопки.
Я каждый день имею дело с джунами и поэтому в тексте написано, что это ориентир для них на старте, а потом уже с опытом и насмотренностью они начнут пробовать иные ращмерности