HIF / Документация / Пространственная грамматика

Компоновка и композиция

Статус: нормативный справочник по дизайну

Версия: 0.1

Этот документ определяет, как HIF организует содержание интерфейса в пространстве. Он применяется к окнам приложений, сайтам, поверхностям операционной системы, встроенным интерфейсам, документам с интерактивными областями и пространственным интерфейсам. Компоновка рассматривается как модель смысла и действия, а не как декор.

1. Результаты

Соответствующая HIF композиция позволяет человеку:

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

Визуальный порядок MUST поддерживать модель задачи и MUST NOT создавать иерархию объектов или команд, отличную от семантического интерфейса.

2. Перцептивная организация

2.1. Механизмы группировки

Композиция MAY использовать повторяющиеся тенденции восприятия как гипотезы:

Механизм	Вероятный эффект восприятия	Уместное применение в интерфейсе	Основной риск
Близость	расположенные рядом элементы могут восприниматься как группа	label с control, title с content, связанные команды	компактно расположенные несвязанные элементы кажутся связанными
Сходство	сходная форма может означать класс или роль	равнозначные controls, повторяющиеся records, семейства статусов	разные действия становятся неразличимыми
Общая область	единая ограниченная область может образовывать группу	card, fieldset, panel, область table	избыток containers создаёт шум и ложную вложенность
Соединённость	зрительно соединённые элементы могут восприниматься как единая структура	процесс, зависимость, диаграмма отношений	декор подразумевает несуществующую связь
Продолжение и alignment	выровненные траектории поддерживают зрительное следование	columns, baselines, последовательности	зрительная траектория конфликтует с порядком чтения или focus
Общая судьба	движущиеся совместно элементы могут восприниматься как связанные	согласованный переход одного объекта	совпавшая animation создаёт ложную группу
Разделение figure–ground	contrast и enclosure отделяют foreground	modal layer, выбранный объект, активная рабочая область	слабая граница делает ownership и modality неясными
Замыкание и symmetry	неполные или уравновешенные формы могут восприниматься как целые	сдержанное построение icon или diagram	отсутствующая информация принимается за намеренно завершённую

Это описательные тенденции, а не универсальные законы, рецепты conversion или доказательство работоспособности дизайна. Их эффект зависит от задачи, культуры, опыта, зрительных возможностей, display, конкурирующих cues и всей конфигурации. Термины Gestalt MUST NOT подменять наблюдение за репрезентативными пользователями. Когда cues конфликтуют, интерфейс MUST разрешить предполагаемую связь с помощью semantics, labels, structure или interaction, а не предполагать, что восприятие исправит её самостоятельно.

2.2. Контракт группировки

Для каждой существенной группы фиксируются:

идентичность группы
правило членства
семантическая связь
визуальный cue
программная структура
вход и выход
свёрнутое и развёрнутое состояния
трансформация в малом пространстве

Визуальная и программная группы MUST совпадать. Пространство само по себе MUST NOT быть единственным свидетельством существенной связи.

3. Иерархия и акцент

Иерархия отвечает по порядку:

Где я?
Что это за объект или задача?
Что изменилось или требует внимания?
Что я могу сделать?
Что является вспомогательной подробностью?

Иерархия MAY использовать order, position, scale, weight, space, contrast, enclosure, colour, depth и motion. Акцент — ограниченный ресурс. Если множество элементов претендует на высший уровень, ни один не создаёт надёжный приоритет.

Сильнейший акцент SHOULD быть отдан наиболее важной текущей информации или действию, а не автоматически наиболее коммерчески ценному действию. Destructive, irreversible или privacy-sensitive действия MUST быть различимы, но не должны становиться проще для случайного запуска.

Каждая страница или ограниченная рабочая область SHOULD иметь:

одну воспринимаемую primary identity;
небольшой обоснованный набор уровней иерархии;
определённую primary task либо явную multi-task model;
стабильные landmarks и navigation;
локально видимые state и ownership;
вторичный материал, который остаётся доступным, не конкурируя постоянно.

Один size MUST NOT кодировать heading level. Визуальные headings MUST иметь соответствующие semantic headings или равнозначную platform structure.

4. Сетки, оси и выравнивание

4.1. Выбор сетки

Grid — система координации. Она не является обязательной эстетикой и MUST NOT переопределять осмысленный порядок. В зависимости от содержания HIF различает:

flow grid для чтения и порядка документа;
column grid для согласованных областей и measures;
модульная сетка для повторяющихся ячеек или блоков панели;
сетка базовых линий для типографического ритма;
сетка данных для сравнения выровненных значений;
spatial grid для карт, canvases и direct manipulation;
platform-managed layout, где размещением управляет среда.

Выбирается наименее сложная grid, сохраняющая связи во всех поддерживаемых размерах. Grid MAY меняться между layout modes. Content MUST NOT растягиваться только ради заполнения каждого track.

4.2. Правила выравнивания

Выравнивание создаёт невидимые связи. Связанные подписи, значения и элементы управления SHOULD иметь общий осмысленный край, базовую линию или центр. Нарушение выравнивания MAY обозначать реальную смену уровня или роли, но случайное почти-выравнивание создаёт визуальное трение.

В specification используются логические оси (inline и block). Физические предположения left/right MUST NOT встраиваться туда, где writing direction может измениться.

Text SHOULD обычно выравниваться по стабильному краю чтения. Centred body copy и fully justified interface text требуют свидетельств, что readability, переменное content и localisation остаются приемлемыми.

5. Ритм и интервалы

Пространство сообщает связь на трёх уровнях:

пространство внутри component задаёт его внутреннюю конструкцию;
пространство между components задаёт grouping и sequence;
пространство между regions задаёт hierarchy и context.

Spacing system SHOULD использовать сдержанную шкалу, но MUST допускать оптически или лингвистически необходимые исключения. Базовый increment — средство реализации, а не правило, по которому каждое расстояние должно быть его целым кратным.

Обычно SHOULD выполняться следующее отношение:

пространство внутри группы < пространство между равными группами < пространство между областями

Исключения MUST оставаться однозначными. Divider не компенсирует надёжно ошибочные интервалы. Negative space — функциональный резерв для разделения, focus, scanning, будущей localisation и zoom; это не автоматически потраченное впустую место.

Vertical rhythm SHOULD сохраняться при:

multi-line labels и validation messages;
увеличенном text и пользовательских text spacing;
переведённых строках и альтернативных numerals;
асинхронном content и вставке status;
compact и comfortable density modes.

Margin collapse, sub-pixel rounding и platform text metrics MUST проверяться в отрендеренных реализациях, а не выводиться только из frames в design tool.

6. Баланс, мера и плотность

6.1. Баланс

Balance — распределение перцептивного веса, а не обязательная symmetry. На вес влияют size, contrast, colour, detail, isolation, motion и semantic importance. Asymmetry MAY создавать стабильную композицию, если она поддерживает направление задачи и не заставляет вторичный материал доминировать.

Decorative balance MUST NOT менять порядок controls, отделять label от value или помещать critical status в слабую периферийную область.

6.2. Мера чтения

Мера prose MUST ограничиваться readability, а не максимальной доступной шириной. Product Profile определяет проверенные ranges для каждой type role, script, size и context. Единое универсальное число символов MUST NOT заявляться для каждого typeface, языка или условия чтения.

Long-form reading SHOULD иметь:

стабильный начальный край и предсказуемое продолжение строки;
достаточный line height для выбранных face и measure;
видимую структуру paragraphs и sections;
headings, сохраняющие связь со следующим content;
отсутствие конкурирующего fixed layer, закрывающего reading column.

6.3. Плотность

Density — согласованный профиль видимой информации, spacing, target size и navigation, а не глобальная scale transform. HIF различает:

comfortable для общей работы;
compact для экспертной высокочастотной работы с данными и precise input;
touch для coarse pointers и hand-held operation;
large/accessible с увеличенными targets, type и separation;
distance/kiosk для удалённого просмотра или ограниченного публичного interaction.

Смена density MUST сохранять semantic order, accessible targets, focus visibility, labels, error presentation и доступ к commands. Content density MAY увеличиваться на большей поверхности только при сохранении comprehension и interaction; свободное место само по себе не оправдывает добавление panels.

7. Порядок чтения, фокуса и визуального представления

Исходный порядок, порядок доступности, чтения, фокуса и визуальный порядок MAY различаться только тогда, когда различие сохраняет смысл и управляемость во всех поддерживаемых режимах. CSS или visual placement MUST NOT создавать осмысленную последовательность, которую не выражает программная структура.

Порядок по умолчанию SHOULD следовать причинности задачи:

контекст → инструкция или состояние → ввод/содержание → действие → результат или восстановление

Для bidirectional или vertical writing порядок следует языковым и platform conventions из Product Profile.

Каждая композиция проверяется с:

отключёнными или упрощёнными styles;
прохождение только с клавиатурой;
структурная навигация программы экранного доступа;
масштаб браузера 200% и 400%, где применимо;
переводом на самое длинное поддерживаемое репрезентативное содержание;
вставленным, удалённым, загружающимся, failed и partially available content.

8. Свободное пространство, контейнеры и границы

Открытое пространство используется, когда proximity и alignment достаточно задают группу. Граница добавляется, когда она сообщает реальное свойство:

containment или ownership;
selection;
interactivity;
отдельную scrolling;
security или permission boundary;
transient или modal layer;
независимые state или lifecycle.

Вложенных cards и borders SHOULD избегать, если у каждого слоя нет отдельного semantic contract. Surface colour, shadow и blur MUST NOT быть единственным способом различения необходимой границы.

Whitespace MUST NOT скрывать недоступную информацию, имитировать premium quality за счёт task efficiency или вынуждать к чрезмерной scrolling при частой работе.

9. Формы

9.1. Композиция формы

Form — диалог о данных и последствиях. Её layout MUST задавать:

назначение и границы;
logical sections;
явный label для каждого control;
связь help, input, unit и validation;
required/optional policy;
action hierarchy;
progress, saving и submission state;
error summary и local recovery;
сохранение введённых values.

Single-column flow SHOULD быть default для форм с зависимыми вопросами, переменными сообщениями или линейным завершением. Multiple columns MAY использоваться для коротких, тесно связанных fields, когда reading order, zoom, localisation и вставка error остаются однозначными.

Placeholder text MUST NOT быть единственным label. Labels SHOULD оставаться видимыми после ввода. Help text располагается рядом с соответствующим field, но MUST NOT прерывать routine scanning, когда не нужен.

9.2. Действия

Primary action SHOULD следовать за fields в осмысленном порядке. Sticky action areas MAY использоваться в длинных или высокочастотных forms, если не закрывают content, errors или focused controls. Cancel, back, save draft и destructive actions MUST выражать разные последствия.

При validation failure focus и view position MUST перемещаться предсказуемо, не удаляя input и не скрывая error summary.

10. Таблицы и плотные данные

Table используется, когда частью задачи является сравнение по rows и columns. Подлинная table не заменяется несвязанными positioned containers, а table не используется только для принудительной visual layout.

Specification data table определяет:

row и column semantics и headers;
units, precision, alignment и missing-value representation;
sorting, filtering, pagination или virtualisation;
selection и ownership bulk action;
row expansion и hierarchy;
sticky regions и их occlusion behaviour;
small-space strategy;
keyboard и assistive-technology navigation;
loading, empty, partial и error states.

Numbers для сравнения SHOULD выравниваться по осмысленной позиции, например decimal или последней цифре, и использовать согласованные units. Text обычно выравнивается по началу чтения. Icons и colour MUST NOT быть единственным представлением status.

При малой ширине осознанно выбирается один из вариантов:

horizontal scrolling внутри одной labelled region;
prioritised columns с управляемым пользователем disclosure;
record cards с сохранением связей header–value;
focused detail view;
domain-specific visualisation.

Reflow MUST NOT молча удалять data, actions или row identity. Sticky headers и columns MUST проверяться при zoom и enlarged text на occlusion.

11. Пространственные слои, прокрутка и elevation

У каждого слоя есть роль, ответственный, правила ввода и срок жизни:

Слой	Типичная роль	Обязательный контракт
Canvas	основание приложения или документа	глобальный reading и scroll context
Embedded	содержание внутри parent	parent управляет clipping и navigation
Raised	независимо действующая область	ясная boundary и focus behaviour
Floating	transient non-modal support	dismissal и collision strategy
Overlay	contextual content поверх другого слоя	anchor, stacking и escape
Modal	временно исключительная задача	focus containment, inert background, return focus
System/critical	permission, safety или platform state	trusted provenance и precedence

Elevation MUST соответствовать interaction и occlusion, а не только brand style. Stacking model MUST быть tokenised или централизованно управляемой. Произвольно большие значения z-index являются дефектом.

Избегайте nested scrolling на одной оси, если каждая scroll region не является необходимой, labelled и независимо operable. Fixed и sticky regions MUST:

иметь документированные threshold и collision rule;
сохранять доступ при zoom;
не закрывать focused content;
адаптироваться к safe areas и on-screen keyboards;
не занимать большую часть малого viewport.

12. Токены компоновки

Рекомендуемые семейства semantic tokens:

layout.measure.reading
layout.measure.form
layout.region.min/max
layout.columns.count
layout.gutter
layout.margin.inline
space.related
space.group
space.region
space.inset.control
size.target.minimum
size.control.block
layer.embedded/raised/floating/overlay/modal/system
border.boundary/subtle/strong
density.comfortable/compact/touch/large/distance

Tokens MUST указывать unit, allowable range, mode, direction behaviour и consumers. Primitive pixel values MUST NOT становиться component contract, когда semantic relationship можно назвать. Spacing tokens MAY разрешаться по-разному для platform или density, сохраняя предполагаемую grouping.

13. Алгоритм композиции

Для каждой страницы, окна или рабочей области применяется последовательность:

Смоделировать objects, tasks, commands, states и consequences.
Инвентаризировать content, случаи переменной длины, permissions и exceptional states.
Упорядочить content семантически до назначения координат.
Сгруппировать по relationship, дав каждой существенной группе programmatic structure.
Приоритизировать current task, critical state и recovery.
Выбрать flow, grid, measure и density из требований content.
Распределить layers, scroll ownership и safe areas.
Определить transformations для constrained и expanded spaces.
Токенизировать стабильные relationship, а не случайные измерения frame.
Прототипировать с реальными, длинными, короткими, empty, failed и adversarial data.
Проверить reading, focus, pointer, touch, assistive technology, zoom, локализация и производительность.
Зафиксировать исключения, доказательства и остаточный риск.

Начало с polished frame до шагов 1–5 не является допустимой заменой.

14. Приёмочные испытания

14.1. Структурные испытания

Каждая видимая region и group соответствует semantic или platform structure.
Связи heading, label, value, help и error программно определимы.
Source и focus order сохраняют смысл без layout styling.
Повторяющиеся layouts используют одинаковые relationship tokens, если не зафиксировано исключение.
Никакое произвольное stacking value не обходит layer contract.

14.2. Визуальные испытания

Primary identity, current state и следующее уместное action находятся без чтения каждого элемента.
Связанные items остаются зрительно ближе или сильнее соединены, чем несвязанные peers.
Alignment осознан во всех поддерживаемых длинах content.
Уровни emphasis различимы в colour, monochrome и forced-colour modes.
Boundaries и overlays воспринимаются без shadow или blur.

14.3. Стресс-испытания

Проверяются минимальный и максимальный поддерживаемые window sizes и каждый transformation threshold.
Проверяются 200% text enlargement и 400% browser zoom, где применимо.
Content заменяется репрезентативными длиннейшими переводами, unbroken identifiers, large numerals и mixed writing directions.
Вставляются validation, banners, virtual keyboards, browser chrome и safe-area insets.
Отрабатываются loading, empty, partial, error, offline, permission-denied и stale states.
Всё content используется через keyboard, coarse pointer, precise pointer и поддерживаемые assistive technologies.

14.4. Свидетельства по задачам

Репрезентативная evaluation MUST установить, что люди могут:

правильно определить grouping и hierarchy;
найти и завершить primary tasks;
сравнить tabular values без ошибок row или unit;
связать form errors с правильным field;
сохранить ориентацию после overlay, resize или navigation;
работать при заявленной density без неприемлемых error или fatigue.

Одна эстетическая preference недостаточна как свидетельство качества композиции.