diff --git a/README.md b/README.md index 14eb1a8..a9da7b1 100644 --- a/README.md +++ b/README.md @@ -1,369 +1,150 @@ -# Требования к адаптивному дизайну в Figma +# Требования к адаптивному дизайну в Figma (Сжатая версия) ## 1. Структура файла Figma +Рекомендуемая структура: -### 1.1. Страницы (Pages) +- **Cover / Overview** — описание проекта, цели, контакты, ссылки +- **Design / UI** — финальные экраны +- **Components** — повторяющиеся элементы и Variants +- **Styles / Tokens** — цвета, типографика, эффекты +- **Responsive / Breakpoints** — логика адаптивного поведения +- **Prototype** — интерактивные сценарии и флоу +- **Archive / Old** — устаревшие версии -Рекомендуемая структура файла Figma: - -- **Cover / Overview** — описание проекта, цели, контакты, ссылки -- **Design / UI** — финальные дизайн-экраны -- **Components** — все компоненты и их варианты -- **Styles / Tokens** — цветовые, текстовые и эффектные стили -- **Responsive / Breakpoints** — документация адаптивного поведения -- **Prototype** — пользовательские сценарии и интерактивность -- **Archive / Old** — устаревшие версии +> Примечание: Страницы `Responsive / Breakpoints` и `Prototype` не дублируют дизайн-экраны, служат для объяснения поведения интерфейса и интерактивности. --- -#### Страница `Responsive / Breakpoints` +## 2. Брейкпоинты и адаптивность -Служебная страница, предназначенная для фиксации и объяснения -адаптивной логики интерфейса. +### 2.1. Якорные брейкпоинты +| Версия | Базовая ширина | Диапазон | +|---------|----------------|---------------| +| Mobile | 375 px | 320 – 768 px | +| Tablet | 768 px | 768 – 1024 px | +| Laptop | 1024 px | 1024 – 1440 px| +| Desktop | 1440 px | 1440 – 1920 px| -Содержит: -- описание системы брейкпоинтов и диапазонов - *(например: Mobile 375 → 320–768, Tablet 768 → 768–1024)* -- примеры поведения ключевых блоков при ресайзе - *(например: перестроение карточек, скрытие sidebar, переход навигации в бургер-меню)* -- визуальные пояснения изменений layout’а - *(например: смена количества колонок, изменение порядка блоков)* -- комментарии для разработки - *(например: max-width контейнера, min-width карточки)* +- Каждый брейкпоинт — отдельный Frame в Figma. +- Количество брейкпоинтов **может корректироваться** (визуальная иерархия, контент, сетка, навигация). +- Все брейкпоинты должны быть **логически и визуально связаны**. -Страница не дублирует дизайн-экраны и не содержит полные версии интерфейса. +### 2.2. Принцип «один фрейм — один диапазон» +- Один фрейм описывает **диапазон ширин**, а не отдельное устройство. +- Дополнительный фрейм — только при изменении сетки, навигации или структуры контента. + +### 2.3. Обязательное требование к ресайзу +- Макеты должны **корректно ресайзиться во всём диапазоне**, без дополнительных фреймов. +- Проверяется: + - изменение ширины фрейма вручную до min/max диапазона + - поведение сетки, карточек, текста, навигации + - отсутствие коллизий и переполнений + - сохранение визуальной иерархии + +> Макет некорректен, если работает только на базовой ширине. + +### 2.4. Реализация в Figma +- **Обязательно:** Auto Layout на всех контейнерах, осознанные `Hug / Fill / Fixed`, Constraints, min/max width для ключевых блоков. +- **Запрещено:** ручное позиционирование без Auto Layout, абсолютные размеры без необходимости, дубли фреймов для адаптивности. --- -#### Страница `Prototype` - -Страница, содержащая интерактивные пользовательские сценарии. - -Содержит: -- ключевые пользовательские флоу - *(например: авторизация, оформление заказа, создание сущности)* -- интерактивные состояния интерфейса - *(например: открытие мобильного меню, модальное окно, dropdown)* -- переходы между экранами и состояниями - *(например: шаги формы, успешное/ошибочное состояние)* - -Страница не предназначена для хранения всех экранов проекта -и используется только для демонстрации поведения интерфейса. +## 3. Компоненты +- Все повторяющиеся элементы — **Components**; использовать **Variants** вместо копий. +- Адаптивность компонентов: + - тянутся по ширине + - меняют высоту по контенту + - корректно ведут себя в разных контейнерах --- -## 2. Брейкпоинты и принцип fluid-адаптива +## 4. Сетка / Layout Grid +| Device | Колонки | +|---------|---------| +| Mobile | 4 | +| Tablet | 8 | +| Desktop | 12 | -### 2.1. Якорные брейкпоинты (структура) - -В проекте используются **якорные брейкпоинты**, которые являются -основными контрольными точками дизайна и описывают -**диапазоны ширин экранов**, а не конкретные устройства. - -| Версия | Базовая ширина | Диапазон | -|------|----------------|----------| -| Mobile | **375 px** | 320 – 768 px | -| Tablet | **768 px** | 768 – 1024 px | -| Laptop (MacBook) | **1024 px** | 1024 – 1440 px | -| Desktop (PC) | **1440 px** | 1440 – 1920 px | - -Каждый брейкпоинт представлен **отдельным Frame в Figma**. +- Настройки: margin, gutter, column width +- Сетка должна соответствовать верстке --- -#### 2.1.1. Гибкость системы брейкпоинтов - -Количество брейкпоинтов **не является фиксированным** и может быть -увеличено или сокращено в процессе работы, если: -- в рамках диапазона невозможно корректно отобразить дизайн, -- страдает визуальная иерархия или читаемость, -- меняется структура, сетка или навигация, -- этого требует продукт, контент или бизнес-логика. - -Решение об изменении количества брейкпоинтов принимается -дизайнером, заказчиком или менеджером проекта. +## 5. Типографика +- Только через **Text Styles** (`H1 / H2 / Body / Caption / Button`) +- Размеры шрифтов могут меняться между брейкпоинтами +- Line-height в %, ограничения по количеству строк --- -#### 2.1.2. Связность брейкпоинтов - -При любом изменении системы брейкпоинтов должно соблюдаться правило: - -> Каждый брейкпоинт обязан логически и визуально -> связываться с предыдущим и следующим брейкпоинтом. - -Это означает: -- согласованную структуру layout’а, -- предсказуемые изменения между диапазонами, -- отсутствие «изолированных» версий дизайна. - -Брейкпоинт не может существовать как самостоятельный, -не связанный с соседними диапазонами. +## 6. Цвета и стили +- **Color Styles** с семантическими названиями: + `Primary / Secondary`, `Text / Background / Border`, `Success / Error / Warning` --- -### 2.2. Обязательное требование к ресайзу - -Каждая версия дизайна **обязана корректно ресайзиться во всём своём диапазоне**, -**без создания дополнительных фреймов**. - -Это означает: -- изменение ширины фрейма **не ломает layout**, -- элементы корректно тянутся или сжимаются, -- отступы и визуальная иерархия сохраняются, -- контент не выходит за границы контейнеров. - -Макет считается некорректным, если он работает -только на базовой ширине брейкпоинта. +## 7. Контент и состояния UI +- Текст: короткий / нормальный / длинный, проверка переполнения +- Состояния UI: Default, Hover, Active, Disabled, Focus, Loading, Empty, Error --- -### 2.3. Реализация в Figma (обязательно) - -Для обеспечения корректного ресайза должны использоваться: -- **Auto Layout** на всех контейнерах -- осознанные значения `Hug / Fill / Fixed` -- корректные **Constraints** -- min / max width для ключевых блоков (логически, не визуально) - -Запрещено: -- проектировать макет только под фиксированную ширину -- компенсировать адаптивность дублированием фреймов -- использовать абсолютные размеры без необходимости +## 8. Изображения и медиа +- Использовать `Fill / Fit` осознанно +- Safe area для обрезки +- Поддержка разных соотношений сторон +- Форматы и размеры соответствуют проекту --- -### 2.4. Проверка адаптивности (обязательная) - -Для каждого якорного брейкпоинта дизайнер обязан: - -1. Ресайзить фрейм до минимального значения диапазона -2. Ресайзить фрейм до максимального значения диапазона -3. Проверить: - - поведение сетки - - переносы текста - - масштабирование карточек - - поведение навигации - - отсутствие коллизий - -Макет считается **не готовым**, если он корректно работает только -на базовой ширине. +## 9. Навигация +- Desktop → горизонтальное меню +- Tablet → сокращённое меню +- Mobile → бургер / bottom bar --- -### 2.5. Принцип «один фрейм — один диапазон» - -> Один фрейм в Figma описывает **не одно устройство**, -> а **диапазон ширин экрана**. - -Дополнительные фреймы допускаются **только если**: -- меняется сетка -- меняется навигация -- меняется структура контента +## 10. Accessibility (A11y) +- Контраст ≥ WCAG AA +- Минимальный размер клика: 44×44 px +- Focus states, логичный tab order --- -### 2.6. Связь с QA-чеклистом - -Требование к обязательному ресайзу является частью -**QA-проверки адаптивности** (см. раздел 14). - -Отсутствие корректного ресайза в диапазоне -считается критической ошибкой адаптивного дизайна. +## 11. Прототипирование +- Основные пользовательские флоу +- Переходы между брейкпоинтами +- Проверка поведения при ресайзе --- -## 3. Auto Layout (ключевое требование) - -### 3.1. Обязательное использование -- Все контейнеры -- Все карточки -- Все списки -- Все кнопки -- Хедеры, футеры, сайдбары - -**Запрещено:** -- Ручное позиционирование без Auto Layout -- Абсолютные отступы без необходимости - -### 3.2. Настройки -- Padding задан со всех сторон -- Spacing между элементами через Auto Layout -- Использование `Hug / Fill / Fixed` осознанно +## 12. QA и проверка адаптивности +- Ресайз фрейма вручную до min/max диапазона +- Проверка компонентов отдельно +- Проверка экстремальных значений +- Макет готов, если ресайз работает корректно во всём диапазоне и нет коллизий --- -## 4. Constraints (Ограничения) - -### 4.1. Обязательные правила -- Корректные Constraints: - - Left / Right - - Top / Bottom - - Center - - Scale (только при необходимости) - -### 4.2. Проверка -- При изменении ширины фрейма интерфейс: - - не ломается - - не наезжает - - не теряет пропорции +## 13. Передача разработчику +- Dev Mode включён +- Комментарии с логикой адаптивности +- Описаны брейкпоинты, поведение блоков, скрытие/появление элементов --- -## 5. Grid / Layout Grid - -### 5.1. Сетки -- Mobile: 4 колонки -- Tablet: 8 колонок -- Desktop: 12 колонок - -### 5.2. Настройки -- Заданы: - - Margin - - Gutter - - Column width -- Сетка соответствует реальной верстке +## 14. Запрещено +- Фиксированные ширины без причины +- Дубли компонентов под каждый экран +- Текст как вектор +- Ручные отступы +- Отсутствие Auto Layout --- -## 6. Компоненты - -### 6.1. Компонентный подход -- Все повторяющиеся элементы — **Components** -- Использовать **Variants** вместо копий - -### 6.2. Адаптивность компонентов -Каждый компонент: -- Тянется по ширине -- Меняет высоту по контенту -- Корректно ведёт себя в разных контейнерах - ---- - -## 7. Типографика - -### 7.1. Стили текста -- Только через **Text Styles** -- Названия: - `H1 / H2 / Body / Caption / Button` - -### 7.2. Адаптивность текста -- Размеры шрифтов меняются между брейкпоинтами -- Line-height задан в % -- Ограничения по количеству строк (max lines) - ---- - -## 8. Цвета и стили - -### 8.1. Color Styles -- Все цвета — через стили -- Семантические названия: - - `Primary / Secondary` - - `Text / Background / Border` - - `Success / Error / Warning` - ---- - -## 9. Контент и состояния - -### 9.1. Длина контента -- Короткий / нормальный / длинный текст -- Переполнение -- Перенос строк - -### 9.2. Состояния UI -- Default -- Hover -- Active -- Disabled -- Focus -- Loading -- Empty -- Error - ---- - -## 10. Изображения и медиа - -### 10.1. Адаптивность -- `Fill / Fit` задан осознанно -- Safe area для обрезки -- Поддержка разных соотношений сторон - ---- - -## 11. Навигация - -### 11.1. Поведение на разных экранах -- Desktop → горизонтальное меню -- Tablet → сокращённое меню -- Mobile → бургер / bottom bar - ---- - -## 12. Accessibility (A11y) - -### 12.1. Минимальные требования -- Контраст ≥ WCAG AA -- Минимальный размер клика: 44×44 px -- Focus states -- Логичный tab order - ---- - -## 13. Прототипирование - -### 13.1. Обязательные сценарии -- Основные пользовательские флоу -- Переходы между брейкпоинтами -- Проверка поведения при resize - ---- - -## 14. Проверка адаптивности (QA в Figma) - -### 14.1. Чеклист -- Ресайз фрейма вручную -- Переключение брейкпоинтов -- Проверка компонентов отдельно -- Проверка экстремальных значений - ---- - -## 15. Передача в разработку - -### 15.1. Требования -- Dev Mode включён -- Комментарии с логикой адаптивности -- Описаны: - - брейкпоинты - - поведение блоков - - скрытие/появление элементов - ---- - -## 16. Документация - -### 16.1. Обязательно -- Описание принципов адаптива -- Таблица брейкпоинтов -- Примеры поведения блоков - ---- - -## 17. Типичные ошибки (запрещено) -- Фиксированные ширины без причины -- Дубли компонентов под каждый экран -- Текст как вектор -- Ручные отступы -- Отсутствие Auto Layout - ---- - -## 18. Минимальный стандарт качества -Макет считается **адаптивным**, если: -- Корректно ресайзится -- Использует Auto Layout + Constraints -- Имеет брейкпоинты -- Понятен разработчику без дополнительных объяснений +## 15. Минимальный стандарт качества +Макет считается адаптивным, если: +1. Корректно ресайзится во всём диапазоне +2. Использует Auto Layout + Constraints +3. Имеет брейкпоинты +4. Понятен разработчику без дополнительных объяснений