sync

adaptive-layout-requirements.checklist.md

@@ -0,0 +1,133 @@
+# Чеклист приёмки макета (Figma)
+
+## 0. Структура файла и нейминг
+- [ ] В файле есть рабочие страницы: Cover / Overview, Design / UI, Components, Styles / Tokens, Responsive / Breakpoints, Prototype (Archive / Old — при необходимости)
+- [ ] Экраны названы по единому правилу (например: `Feature / Screen — Breakpoint`)
+- [ ] Компоненты названы семантически и единообразно (без «Button 1 / Button 2»)
+- [ ] На странице `Responsive / Breakpoints` описаны правила перестроения для сложных зон (колонки, переносы, скрытие/появление элементов)
+
+---
+
+## 1. Брейкпоинты
+- [ ] Все якорные брейкпоинты созданы в виде отдельных фреймов
+  - Mobile, Tablet, Laptop, Desktop (диапазоны соблюдены)
+- [ ] Границы диапазонов трактуются единообразно (например: `Mobile < 768`, `Tablet ≥ 768`)
+- [ ] Фреймы логически и визуально связаны
+- [ ] Дополнительные фреймы есть только при изменении сетки, навигации или структуры контента
+
+---
+
+## 2. Адаптивность и ресайз
+- [ ] Ресайз фрейма вручную до минимального значения диапазона
+- [ ] Ресайз фрейма до максимального значения диапазона
+- [ ] Проверены промежуточные значения (минимум 3–5 точек внутри диапазона)
+- [ ] Макет корректно меняется во всём диапазоне без создания дублирующих фреймов
+- [ ] Нет коллизий при ресайзе (наезды, обрезания, неожиданные перекрытия)
+- [ ] Карточки и блоки тянутся или сжимаются корректно
+- [ ] Текст переносится/обрезается по правилам и не выходит за пределы контейнеров
+- [ ] Навигация корректно адаптируется под ширину
+
+---
+
+## 3. Auto Layout и Constraints
+- [ ] Все контейнеры, списки, карточки, кнопки, хедеры, футеры, сайдбары используют Auto Layout
+- [ ] Padding задан со всех сторон через Auto Layout (без «ручных» отступов)
+- [ ] Spacing между элементами задан через Auto Layout
+- [ ] Режимы ресайза настроены осознанно (`Hug / Fill / Fixed`) для ключевых контейнеров и элементов
+- [ ] При необходимости заданы min/max (для предотвращения поломок на крайних ширинах)
+- [ ] Constraints заданы корректно (Left / Right / Top / Bottom / Center / Scale) там, где Auto Layout не покрывает сценарий
+- [ ] Нет ручного позиционирования или абсолютных размеров без причины
+
+---
+
+## 4. Сетка / Layout Grid
+- [ ] Layout Grid настроен на фреймах каждого брейкпоинта (колонки соответствуют принятому стандарту)
+- [ ] Margin и gutter заданы и согласованы с версткой
+- [ ] Поведение сетки выбрано осознанно (Stretch/Center — по модели проекта)
+- [ ] Основные блоки выровнены по сетке и используют согласованный шаг отступов
+
+---
+
+## 5. Компоненты
+- [ ] Все повторяющиеся элементы оформлены как Components
+- [ ] Используются Variants вместо копий
+- [ ] Состояния компонентов показаны (минимум: Default, Hover, Active/Pressed, Disabled, Focus — если применимо)
+- [ ] Компоненты корректно тянутся и меняют высоту по контенту
+- [ ] Адаптивное поведение проверено во всех типовых контейнерах (экран, модалка, сайдбар, список/сетка)
+
+---
+
+## 6. Типографика
+- [ ] Используются Text Styles (`H1 / H2 / Body / Caption / Button` или принятый набор)
+- [ ] Размер шрифта адаптируется между брейкпоинтами (если это предусмотрено)
+- [ ] Line-height задан осознанно (в % или по принятому стандарту)
+- [ ] Ограничение количества строк соблюдено там, где это критично
+- [ ] Правила для текста определены: перенос или обрезка (truncate), поведение при переполнении проверено
+
+---
+
+## 7. Цвета и стили
+- [ ] Все цвета через Color Styles
+- [ ] Семантические названия соблюдены (`Primary / Secondary`, `Text / Background / Border`, `Success / Error / Warning`)
+- [ ] Дополнительные стили (тени/обводки/радиусы), если используются, применены единообразно
+
+---
+
+## 8. Контент и состояния UI
+- [ ] Текст проверен на короткие / нормальные / длинные варианты
+- [ ] Проверка переполнения и переноса строк выполнена
+- [ ] Состояния UI присутствуют: Default, Hover, Active, Disabled, Focus, Loading, Empty, Error
+- [ ] Для форм/инпутов показаны состояния ошибок и валидации (включая сочетания вроде `Focus + Error`, если применимо)
+
+---
+
+## 9. Изображения и медиа
+- [ ] Fill / Fit задан корректно
+- [ ] Safe area для обрезки изображений соблюдена
+- [ ] Поддерживаются разные соотношения сторон (описано поведение при изменении ratio)
+- [ ] Форматы и размеры соответствуют требованиям проекта (если есть требования к экспорту)
+
+---
+
+## 10. Навигация
+- [ ] Desktop → горизонтальное меню
+- [ ] Tablet → сокращённое меню
+- [ ] Mobile → бургер / bottom bar
+- [ ] Описаны правила overflow/сокращения (что уходит в «ещё», что скрывается/переезжает)
+
+---
+
+## 11. Accessibility (A11y)
+- [ ] Контраст ≥ WCAG AA
+- [ ] Минимальный размер клика 44×44 px
+- [ ] Focus states проверены
+- [ ] Логичный tab order соблюден
+
+---
+
+## 12. Прототипирование
+- [ ] Основные пользовательские флоу представлены
+- [ ] Переходы между брейкпоинтами реализованы (если требуется)
+- [ ] Поведение при ресайзе проверено/продемонстрировано
+
+---
+
+## 13. Передача в разработку
+- [ ] Dev Mode включён
+- [ ] Все комментарии с логикой адаптивности оставлены
+- [ ] Брейкпоинты, поведение блоков, скрытие/появление элементов описаны
+- [ ] Ассеты к экспорту подготовлены (если требуется): корректные имена, форматы, настройки экспорта
+
+---
+
+## 14. Запрещено
+- [ ] Фиксированные ширины без причины
+- [ ] Дубли компонентов под каждый экран
+- [ ] Текст как вектор
+- [ ] Ручные отступы
+- [ ] Отсутствие Auto Layout
+
+---
+
+## ✅ Итоговое решение
+Макет считается **готовым к разработке**, если выполнены все пункты чеклиста и ресайз работает корректно во всех диапазонах.