Презентация
серверов от Acer
До начала осталось:
Смотреть
Дизайн
alex Gour

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

{ "author_name": "alex Gour", "author_type": "self", "tags": [], "comments": 26, "likes": 29, "favorites": 155, "is_advertisement": false, "subsite_label": "design", "id": 229321, "is_wide": false, "is_ugc": true, "date": "Mon, 05 Apr 2021 08:32:13 +0300", "is_special": false }
0
26 комментариев
Популярные
По порядку
Написать комментарий...
11
Ответить
8

 «Простой дизайн»

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

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

Ответить
5

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

Ответить
1

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

Ответить
3

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

Ответить
0

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

Ответить
1

Это я с утра в пнд не вдупляю, или в п.2 и п.3 вертикальность с горизонтальностю перепутаны?

А так ниче статья, из разряда "дизайнер не должен забывать две вещи"

Ответить
0

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

Ответить
2

вот я и смотрю на п.2 и п.3 и думаю - как бы так лечь, чтобы понять о чем речь 

Ответить
1

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

Ответить
1

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

Ответить
0

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

Ответить
1

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

Ответить
1

 line-height выставляем 20 px, либо auto

Line-height выставлять желательно такой же как для обычного текста. Дело в том, что
1). В нынешнее время кнопки часто верстаются на основе обычной ссылки и наследует общий лайн-хайт документа, поэтому для меньшей возни надо тупо придерживаться одинаковой высоты строки для всех элементов.
2). Кнопка это неотъемлемая часть формы и должна иметь тот же line-height с другими ее элементами, чтобы по высоте форма была целостной. Поэтому желательно рисовать кнопки вместе с полем текста, селектами и тд.
Если ваша форма выглядит хорошо даже в горизонтальном (линейном виде) виде, то вы получили тот самый пятый разряд. 

Ответить
0

line-height выставляем 20 px

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

Ответить
0

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

Ответить
1

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

Ответить
2

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

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

Ответить
–1

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

Ответить
0

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

Ответить
2

мммм вмешаюсь - джуны бывают гораздо более бестолковые 

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

Ответить
0

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

Ответить
0

 Оптимальный размер текста кнопки 16 px

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

Ответить
0

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

Ответить

Комментарии

null