Лэйаут — принцип организации пространства¶

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

¶Веб-дизайн и UI/UX

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

Основные типы веб-лэйаутов:

• Фиксированный (fixed) — ширина макета задана в пикселях и не меняется при изменении размера окна браузера.
• Жидкий (fluid) — ширина задана в процентах и подстраивается под ширину окна.
• Адаптивный (responsive) — макет меняется в зависимости от разрешения экрана, используя медиазапросы CSS.
• Адаптивный с гибкой сеткой (adaptive) — создаётся несколько отдельных макетов под типичные размеры экранов (телефон, планшет, десктоп).

Для реализации лэйаутов в CSS исторически использовались таблицы, затем — плавающие блоки (float), всплывающие окна (position: absolute) и, начиная с середины 2010-х годов, технологии Flexbox и CSS Grid, которые стали стандартом для построения сложных сеток.

¶Полиграфия и вёрстка

В полиграфии лэйаут (макет) — это точное расположение текстовых блоков, иллюстраций, колонтитулов и других элементов на полосе издания. Различают:

• Текстовый лэйаут — распределение текста по колонкам и полосам.
• Иллюстративный лэйаут — размещение изображений.
• Комбинированный — сочетание текстовых и графических элементов.

В настольных издательских системах (Adobe InDesign, QuarkXPress) лэйаут строится на основе сетки (модульной сетки), полей, колонок и направляющих линий. Понятие модульной сетки как инструмента рациональной организации макета было разработано швейцарскими дизайнерами в 1950–1960-е годы и описано в книге Йозефа Мюллера-Брокманна «Сетчатые системы в графическом дизайне» (1981).

¶Программирование и разработка интерфейсов

В программировании лэйаут — это компонент или набор компонентов, определяющих структуру расположения других элементов на экране приложения.

В Android SDK Layout — это XML-файл, описывающий иерархию View-элементов экрана. Основные типы:

• LinearLayout — линейное расположение элементов по горизонтали или вертикали.
• RelativeLayout — позиционирование относительно других элементов.
• FrameLayout — наложение элементов друг на друга.
• ConstraintLayout — гибкое позиционирование с помощью ограничений.
• GridLayout — табличное расположение.

В iOS-разработке аналогичную роль играют UIView с системой Auto Layout, основанной на ограничениях (constraints).

В вебе структура лэйаута описывается HTML-разметкой, а внешний вид — CSS. Фреймворки (Bootstrap, Foundation) предоставляют готовые сетки (grid-системы) для ускорения вёрстки.

¶Другие применения

• В каллиграфии и типографике — лэйаутом называют расстановку букв и слов на заданной площади.
• В радиолюбительстве и электронике — размещение компонентов и трассировка дорожек на печатной плате (PCB layout).
• В архитектуре и интерьерном дизайне — планировка помещения, расстановка мебели и оборудования.
• В логистике — размещение оборудования и рабочих зон на производственной площадке.
• В настольных играх и компьютерных играх — расположение объектов на карте или игровом поле.

¶История термина

Слово layout происходит от английского to lay out — «раскладывать, размещать». В полиграфии и журналистике термин вошёл в употребление в конце XIX — начале XX века, когда редакции выделяли отдельного сотрудника (layout man), отвечавшего за раскладку полос перед печатью. С развитием компьютерной графики в 1980–1990-е годы термин распространился на цифровую сферу.

¶См. также

• Модульная сетка
• Адаптивный веб-дизайн
• Flexbox
• CSS Grid
• Вёрстка (документ)

¶Источники

• Мюллер-Брокманн Й. Сетчатые системы в графическом дизайне. — Basel: Niggli, 1981.
• Кастеллани Д. HTML5 и CSS3. Разработка для современных браузеров. — СПб.: Питер, 2014.
• Фримен Э. Head First. Дизайн сайтов. — СПб.: Питер, 2012.
• Документация W3C по CSS Flexible Box Layout Module и CSS Grid Layout Module.