серверов от Acer
Всем привет, на связи рубрика «Простой дизайн». В прошлый раз мы разбирали правильное скругление внутренних углов фигур, а сегодня я дам совет, как в начале своего пути дизайнером рисовать правильные кнопки для 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 текстов, но печально здесь то он что предполагается вроде как для людей
Что т прям ну оооочень притянули!
Как гритса, компонент компоненту рознь - везде не засунешь
Это я с утра в пнд не вдупляю, или в п.2 и п.3 вертикальность с горизонтальностю перепутаны?
А так ниче статья, из разряда "дизайнер не должен забывать две вещи"
вот я и смотрю на п.2 и п.3 и думаю - как бы так лечь, чтобы понять о чем речь
Тогда и тут нестыковка: "Вертикальные отступы (A) всегда больше горизонтальных (B), которые могут быть больше, либо быть равными по размеру с текстом (C)". На самом деле правило немного другое - размеры отступов больше по той оси, по которой больше размер элемента. Кнопки так то могут быть размещены вертикально, справа или слева скажем, с текстом, развернутым на 90 градусов.
line-height выставляем 20 px, либо auto
Line-height выставлять желательно такой же как для обычного текста. Дело в том, что
1). В нынешнее время кнопки часто верстаются на основе обычной ссылки и наследует общий лайн-хайт документа, поэтому для меньшей возни надо тупо придерживаться одинаковой высоты строки для всех элементов.
2). Кнопка это неотъемлемая часть формы и должна иметь тот же line-height с другими ее элементами, чтобы по высоте форма была целостной. Поэтому желательно рисовать кнопки вместе с полем текста, селектами и тд.
Если ваша форма выглядит хорошо даже в горизонтальном (линейном виде) виде, то вы получили тот самый пятый разряд.
line-height выставляем 20 px
Тогда текстовый блок будет высотой 20px. А мы же хотим высоту 16px и такого же размера вертикальные отступы.
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, а потом верстальщик так и сделает.
