Соотношение элементов в формах

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

В типичной форме таким «разъемом» является размер шрифта. Большая часть элементов в форме текстовые, поэтому текст — это скелет:

Заметьте — все, кроме заголовка, здесь сделано одним размером шрифта, 16-м.

Далее идут контейнеры для текста — инпуты и кнопки. Если в таких элементах тексты одинакового размера, то у них должны быть одинаковые вертикальные поля. Добавляем контейнеры и у нас получается система модулей:

Горизонтальные поля могут варьироваться у разных типов элементов. Кнопки лучше выглядят с более широкими боковыми полями, чем инпуты. Думаю это связано с выравниванием текста внутри элемента — то, что отцентровано, требует больше пространства.

На последнем этапе добавляем оставшиеся мелочи:

В данном случае информационные слои различаются размером и цветом шрифта. У второстепенного слоя шрифт мельче и светлее

Часто дизайнеры делают так:

Не знаю с какой целью увеличивают кнопку, возможно чтобы добавить выразительности.

Но потом нужна другая конфигурация формы и ой:

Помимо того, что кнопка не подходит к полю по высоте, два разных размера шрифта выглядят неопрятно.

Хорошо если такая ситуация возникнет в начале и можно быстренько привести все к одному виду. Но если мы уже нарисовали 20 экранов с такими формами, придется на ходу придумывать костыли из нескольких видов кнопок.

В общем мораль

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

Текстовый контейнер

Если бы я был Дональдом Трампом, я бы законодательно запретил эти кнопки в Скетче и Фигме:

В интерфейсных макетах нет ни одной ситуации, когда без них нельзя было бы обойтись. Не для того же мы слезли с (деревь..) Фотошопа, чтобы текст вгонять во фреймы. Особенно мерзко бывает, когда у текста еще забыли выставить констрейнтс и после серии ресайзов случается такое:

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

Такое поведение текстов в макетах встречается очень часто. Если вы вдруг захотите нажать на одну из тех кнопок выше — просто переборите себя и не делайте этого. Серьезно.