Перейти к содержимому

Сложные и пограничные случаи

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

  • Ошибка — затронутая область не может пройти свой этап проверки: для реализации придётся угадывать.
  • Предупреждение — перенос возможен, но результат зависит от среды или требует объяснения.
  • Ручная проверка — валидатор видит подозрительный случай, а окончательное решение принимает человек.

Ручная проверка — способ оценки, а не уровень серьёзности. Она может выявить блокирующую проблему или подтвердить, что решение намеренное.

Ситуация Риск Решение DFC Bridge
Один элемент имеет разные имена на адаптивах Реализация создаст дубликаты. Использовать один стабильный идентификатор.
Один идентификатор обозначает разные типы Кнопка может превратиться в текст или карточку. Сохранять логический тип элемента.
Несколько карточек имеют одно имя Экземпляры невозможно различить. Использовать стабильные имена вроде product-card-oak-chair; [item=product] может повторяться. Ключ рабочей записи не зависит от позиции в списке.
Переопределение экземпляра меняет содержимое Исходный компонент и страница говорят разное. Считать итоговое содержимое экземпляра источником правды и отражать переопределение в отчёте.
Скрытый слой хранит актуальную версию Можно случайно взять старое или неправильное состояние. Оформить альтернативу как состояние, вариант или архив.
Ситуация Риск Решение DFC Bridge
На мобильном адаптиве меняется смысл текста Пользователи получают разные обещания. Сохранять текст; язык, эксперимент и продуктовый вариант моделировать отдельно.
Меняется количество элементов Непонятно, что удалено, скрыто или относится к другой версии. Сохранять состав или оформлять отличие как правило коллекции, состояние либо исключение.
Товары добавлены ради ровной сетки Меняется состав выдачи и пагинация. Адаптив меняет число колонок, но не данные. Неполная строка допустима.
Элемент переезжает к другому родителю Ломаются структура, аналитика и связи доступности. Сохранять вложенность или объяснять исключение.
Скрытый элемент удалён из дерева Нельзя отличить намеренную невидимость от потери слоя. Сохранять ключ и описывать видимость.
Для мобильного создана отдельная копия Действия, текст и состояния копий расходятся. Использовать один ключ и менять раскладку или видимость.
Критичный элемент исчезает Теряется действие, цена, юридическое примечание или ошибка. Сохранить элемент или описать достижимую равноценную альтернативу; не удалять важное содержимое молча.
Сетка превращается в карусель Появляются новые состояния и элементы управления. Описать преобразование в bridge.responsive: сопоставление элементов, управление, перенос состояния и доступные альтернативы. Не придумывать тег слоя.
Нет правил для промежуточных ширин Реализация работает только на точных размерах фреймов. Сначала задать контрольные ширины, затем диапазоны и плавное поведение.
Не учтены безопасные области экрана Интерфейс конфликтует с вырезом, панелями или закреплённой навигацией. Задать безопасные отступы и поведение закреплённых элементов.
Ситуация Риск Решение DFC Bridge
На корне страницы или секции выключен Auto Layout Контентный поток существует только как снимок координат. Безусловно включить нативный Auto Layout даже при нуле или одном дочернем слое.
Корень страницы DFC Bridge содержит [asset] Вся живая страница скрывается за заявлением о непрозрачном экспорте. Удалить [asset], продолжить проверку потомков и отдельно показать ошибку Auto Layout корня, если она применима.
У обычного контейнера есть два или более видимых значимых элемента потока, но нет Auto Layout Направление, интервалы, перенос и размеры нельзя воспроизвести однозначно. Включить нативный Auto Layout; примитивы и конечная геометрия остаются исключёнными.
GROUP Figma находится вне ресурса GROUP сохраняет геометрию, но не даёт переносимого контракта раскладки. Заменить фреймом/компонентом с Auto Layout либо сделать настоящее непрозрачное поддерево [asset]. Manual-layout с причиной документирует отклонение, но не подавляет ошибку.
Корни страницы сгруппированы в нативных Section Figma на холсте Проверка только прямых потомков страницы Figma пропускает допустимые адаптивные корни. Считать нативные Section Figma прозрачными организаторами при поиске корней; каждый настоящий корень остаётся размеченным фреймом с Auto Layout. Не использовать для этого внешние FRAME/GROUP.
Глубокая цепочка обёрток Дерево сложно и не несёт смысла. Оставить только обёртки с реальной функцией.
Фиксированная высота обрезает содержимое Локализация и данные из CMS ломают раскладку. Использовать рост по содержимому, минимальную высоту или явную обрезку.
Вынесенный визуальный слой считается обычным контентом Он не адаптируется вместе с потоком. Включить в Auto Layout либо указать назначение на точном абсолютном узле: [decor], [asset], цель или overlay с причиной.
[decor] поставлен на свободный контейнер Тег скрывает сломанную структуру вместо описания одного визуального слоя. Ставить [decor] только на точный абсолютный визуальный узел; сложный непрозрачный визуал помечать [decor] [asset].
Слои перекрываются случайно Порядок наложения может измениться при реализации. Задать назначение наложения, точного абсолютного декора, непрозрачного ресурса, цели или причину.
Родитель случайно обрезает дочерний слой Исчезают декор, подсказка, фокус или текст. Указать правила обработки переполнения.
Отрицательные интервалы не объяснены Геометрию нельзя воспроизвести однозначно. Использовать токены или явное исключение.
Закреплённый элемент закрывает содержимое Шапка или панель перекрывает секции. Зарезервировать место и описать закрепление.
Ситуация Риск Решение DFC Bridge
Количество элементов приходит из административной панели Макет на три карточки ломается при двух или семи. Описать минимум, максимум, пустое состояние и загрузку.
Локализация увеличивает объём текста Текст выходит за границы. Использовать гибкую или минимальную высоту и проверить длинные строки.
Композиция держится на ручных переносах Реальные данные ломают раскладку. Переносить текст по ширине; исключения оформлять явно.
Цена или юридический текст меняются между адаптивами Нарушается продуктовая и юридическая точность. Считать такие значения строгим содержимым и сравнивать по ключу.
Форматированный текст превращён в обычную строку Теряются ссылки, списки и выделения. Сохранять структуру форматированного текста.
Нет пустого состояния, загрузки и ошибки Реальный блок нельзя реализовать полностью. Задать обязательные состояния динамического блока.
Ситуация Риск Решение DFC Bridge
Кнопка не имеет действия Результат взаимодействия неизвестен. Использовать [action] или черновой [control]; для перехода — [href] или [link].
Цель модального окна отсутствует Нельзя построить сценарий. action=modal:x требует [modal=x].
Не описано закрытие модального окна Пользователь может застрять. Задать кнопку, фон и клавишу Escape.
У полей формы нет подписей Ломаются доступность и сопоставление данных. Задать подписи, имена, валидацию и цель отправки.
Вкладки, аккордеон или карусель имеют одно состояние Поведение невозможно воспроизвести. Показать все важные состояния и состояние по умолчанию.
Неясно, как открывается внешняя ссылка Скрыты решения безопасности и поведения. Задать адрес и при необходимости открытие в новой вкладке.
Нет состояний наведения, фокуса, отключения и загрузки Элемент существует только в идеальном состоянии. Определить обязательные состояния в UI Kit.
Ситуация Риск Решение DFC Bridge
Текст превращён в изображение Его нельзя перевести, найти или отредактировать. Оставить текст редактируемым либо объяснить экспорт.
Не задана важная область изображения Адаптивная обрезка может отрезать лицо или товар. Указать точку фокуса или стратегию обрезки.
Иконка хранится случайной картинкой Нельзя применить тему и токены. Использовать компонент или вектор с понятным идентификатором.
У видео или Lottie нет запасного варианта Целевая среда может не поддержать формат. Добавить постер, запасной ресурс и правила управления.
Режим смешивания или фильтр не поддерживается Визуал изменится после переноса. Оформить исключение или экспортировать результат целиком.
Ситуация Риск Решение DFC Bridge
Используются одноразовые цвета и интервалы Реализация расходится с системой. Сначала использовать токены, исключения помечать отдельно.
Тёмная тема подготовлена частично Элементы исчезают или теряют контраст. Проверить покрытие всех состояний темы.
Нет вариантов компонента Состояния кнопок и карточек придумываются при реализации. Задать обязательные варианты и состояния.
Области взаимодействия слишком малы Сенсорное управление становится неудобным. Проверить минимальные размеры целей.
Контраст вызывает сомнения Интерфейс может быть недоступен. Провести автоматическую или ручную проверку контраста.
  • Скрытый старый мобильный фрейм назван как финальный.
  • Одно модальное окно открывается тремя кнопками, но содержит текст только для одной секции.
  • Закреплённая шапка перекрывает якорь после перехода.
  • Баннер файлов cookie, чат или промопанель меняют доступную высоту экрана.
  • Нарисованы ошибки формы, но отсутствует обычное состояние.
  • У карусели есть стрелки, но не определены слайды и границы прокрутки.
  • Важное содержимое существует только внутри анимации.
  • Визуальная кнопка называется Rectangle 44 и не имеет действия.
  • На мобильном вместо настоящих карточек используются их снимки.
  • На разных адаптивах отличаются валюта, цена или юридическое примечание.

9. Пробелы возможностей и производительности

Заголовок раздела «9. Пробелы возможностей и производительности»
Ситуация Риск Решение DFC Bridge Владелец/проверка
У тяжёлого изображения или видео нет правил доставки Растут трафик, память и время загрузки, хотя картинка совпадает. Задать размеры, форматы, качество, кадрирование по смыслу, безопасную область обрезки, обложку, приоритет и отложенную загрузку. Дизайн объявляет важные медиа, реализация владеет бюджетом и измерением.
Отображение данных рассчитано на число примеров Большой результат зависает или теряет удобство. Задать ожидаемый/максимальный объём и порог пагинации, потока или виртуализации. Проверка данных и реализации.
Опыт предполагает быструю сеть и полную мощность Отсутствие сети, экономия трафика, низкая скорость или экономия энергии не дают пользователю выполнить задачу. Профиль задаёт важный результат, деградацию, кэш/очередь и запасной вариант. Проверка профиля цели.
Цель не поддерживает закрепление при прокрутке, анимацию, кодек, ввод или диаграмму Адаптер молча удаляет смысл. Записать поддержку и семантический запасной вариант; неизвестное оформить открытым вопросом с владельцем и статусом. Проверка возможностей адаптера.
Бюджет сформулирован как пожелание Его невозможно проверить. Назвать метрику, предел, окружение, этап измерения и владельца реализации. Свидетельство выпуска.

DFC Bridge не ограничен вебом: каждая цель сопоставляет профиль с нативными механизмами. Безопасность, приватность, доступность и выполнение важной задачи приоритетнее точности медиа.

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

Приближайте и листайте. Закрыть — Esc.