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