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

Поэтому современный дизайнер использует не только знания о пользовательском интерфейсе, привычках и эргономике, но и типографические свойства элементов управления, чтобы строить из них лёгкие, прочные и читабельные конструкции. Здесь мы рассмотрим только эту «верстальную» сторону медали.

Компактные элементы интерфейса с выраженным центром внимания — пиктограмма, асинхронный индикатор прогресса, чекбокс:

Точечные элементы удобны в вёрстке. Они выигрышно смотрятся, если выделить им особое «якорное» положение:

Они легко пристраиваются к более важным элементам:

Но точка в вёрстке — плохой командный игрок, каждая старается перекричать другую:

Чтобы успокоить ряд пиктограмм на панели инструментов, приходится прибегать к радикальным мерам — строго унифицировать размеры, выверять порядок и ритм пятен и даже полностью отказываться от цвета:

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

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

А вот увеличиваться по вертикали для них неестественно. Линейные элементы экономичны и не выходят за пределы своей строки. Из них отлично складываются панели инструментов:

Размеры линейных элементов и их содержимое должны соответствовать окружению. На примере слева поле ввода несоразмерно мелкой подписи, а введённый текст зажат внутри поля без гигиенических отступов. Справа кегль подписи и содержания совпадают:

Обратите внимание, как на правом примере подпись, вводимый текст и рамка поля ввода сохраняют соотношения внутреннего и внешнего. Вокруг содержимого достаточный отступ, рамка поля «не влезает в интерлиньяж» строки. Но при этом расстояние от подписи «имя» до рамки поля больше этих внутренних полей.

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

При соседстве по вертикали действуют примерно такие же соотношения. Это, кстати, означает, что строчные контролы плохо встраиваются в сплошной наборный текст — они либо налезут друг на друга, либо раздвинут интерлиньяж текста.

Вариант точных типографических гайдлайнов для элементов управления:

Текстовая область, интерактивная диаграмма, цветовая палитра, карта — эти элементы управления имеют прямоугольную форму:

Благодаря занимаемой площади такие элементы становятся самыми заметными якорными объектами. Их нужно «припарковать» на макете первыми, как иллюстрации.

Большой прямоугольный список в левой части задаёт структуру окна:

Кнопки — обычно линейный элемент. Но важные кнопки часто делают большими. Они «выходят из строки» — начинают вести себя как прямоугольники и занимают особенное место на странице:

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