diff --git a/adaptive-layout-requirements.checklist.md b/adaptive-layout-requirements.checklist.md index 4bb7b5d..6baa778 100644 --- a/adaptive-layout-requirements.checklist.md +++ b/adaptive-layout-requirements.checklist.md @@ -1,5 +1,7 @@ # Чеклист приёмки макета (Figma) +> Примечание: в этом чеклисте «обоснованно» означает: по каждому «выбору» (например: `Hug/Fill/Fixed`, wrap/truncate для текста, `Fill/Fit`, `Stretch/Center`) понятно **что выбрано**, **зачем** и **как это ведёт себя** на min/max диапазона и при длинном контенте. Если без пояснения можно понять по-разному — добавлена аннотация/комментарий. + ## 0. Структура файла и нейминг - [ ] В файле есть рабочие страницы: Cover / Overview, Design / UI, Components, Styles / Tokens, Responsive / Breakpoints, Prototype (Archive / Old — при необходимости) - [ ] Экраны названы по единому правилу (например: `Feature / Screen — Breakpoint`) @@ -33,7 +35,7 @@ - [ ] Все контейнеры, списки, карточки, кнопки, хедеры, футеры, сайдбары используют Auto Layout - [ ] Padding задан со всех сторон через Auto Layout (без «ручных» отступов) - [ ] Spacing между элементами задан через Auto Layout -- [ ] Режимы ресайза настроены осознанно (`Hug / Fill / Fixed`) для ключевых контейнеров и элементов +- [ ] Режимы ресайза выбраны обоснованно (`Hug / Fill / Fixed`) для ключевых контейнеров и элементов - [ ] При необходимости заданы min/max (для предотвращения поломок на крайних ширинах) - [ ] Constraints заданы корректно (Left / Right / Top / Bottom / Center / Scale) там, где Auto Layout не покрывает сценарий - [ ] Нет ручного позиционирования или абсолютных размеров без причины @@ -43,7 +45,7 @@ ## 4. Сетка / Layout Grid - [ ] Layout Grid настроен на фреймах каждого брейкпоинта (колонки соответствуют принятому стандарту) - [ ] Margin и gutter заданы и согласованы с версткой -- [ ] Поведение сетки выбрано осознанно (Stretch/Center — по модели проекта) +- [ ] Поведение сетки выбрано обоснованно (Stretch/Center — по модели проекта) - [ ] Основные блоки выровнены по сетке и используют согласованный шаг отступов --- @@ -59,10 +61,13 @@ ## 6. Типографика - [ ] Используются Text Styles (`H1 / H2 / Body / Caption / Button` или принятый набор) -- [ ] Размер шрифта адаптируется между брейкпоинтами (если это предусмотрено) -- [ ] Line-height задан осознанно (в % или по принятому стандарту) +- [ ] Используются только бесплатные шрифты (предпочтительно Google Fonts) +- [ ] Есть коллекция Variables для типографики и Modes под брейкпоинты (например: Mobile/Tablet/Laptop/Desktop — как принято в проекте) +- [ ] Text Styles используют переменные типографики (минимум размер и line-height; при необходимости letter-spacing) +- [ ] На фреймах установлен корректный Mode для соответствующего брейкпоинта - [ ] Ограничение количества строк соблюдено там, где это критично - [ ] Правила для текста определены: перенос или обрезка (truncate), поведение при переполнении проверено +- [ ] Проверены «экстремальные» тексты, включая одну очень длинную строку без пробелов --- diff --git a/adaptive-layout-requirements.full.md b/adaptive-layout-requirements.full.md index 0ae3ddc..3adfcc2 100644 --- a/adaptive-layout-requirements.full.md +++ b/adaptive-layout-requirements.full.md @@ -18,6 +18,7 @@ - **Auto Layout** — основной механизм адаптивности в Figma для контейнеров и компонентов. - **Hug / Fill / Fixed** — режимы ресайза (по контенту / заполнять контейнер / фиксированно). - **Constraints** — привязки объектов внутри Frame (Left/Right/Top/Bottom/Center/Scale). +- **«Обоснованно» (в контексте этого стандарта)** — по каждому «выбору» (например: `Hug/Fill/Fixed`, wrap/truncate для текста, `Fill/Fit`, `Stretch/Center`) должно быть понятно: **что именно выбрано**, **зачем** и **как это ведёт себя** на min/max диапазона и при длинном контенте. Если выбор может трактоваться по-разному — добавьте аннотацию/комментарий на странице `Responsive / Breakpoints`. --- @@ -119,7 +120,7 @@ Минимальные требования к Auto Layout: - паддинги задаются через Auto Layout (а не «ручными» прямоугольниками); - расстояния между элементами задаются через `Spacing`; -- направление (Horizontal/Vertical) и `Wrap` выбираются осознанно; +- направление (Horizontal/Vertical) и `Wrap` выбираются обоснованно; - в ключевых местах задаются **min/max** (если без этого появляются «переломы» компоновки). #### 2.5.2. Resizing: Hug / Fill / Fixed @@ -186,9 +187,9 @@ Constraints применяются там, где Auto Layout не покрыв - проверьте состояния и длину текста. ### 3.4. Типовые требования по компонентам (примерно, без привязки к бренду) -- **Button**: фиксированная высота (например, 40/44/48 по дизайн-системе), ширина `Hug` или `Fill` по контексту, текст не должен вылезать (правила: перенос/обрезка задаются осознанно). +- **Button**: фиксированная высота (например, 40/44/48 по дизайн-системе), ширина `Hug` или `Fill` по контексту, текст не должен вылезать (правила: перенос/обрезка задаются обоснованно). - **Input**: высота фиксирована, поле `Fill`, лейбл и хелпер-текст — `Hug` с переносом. -- **Card**: контейнер `Fill`, текстовые блоки — `Hug` по высоте, изображение — осознанный `Fill/Fit` с safe-area. +- **Card**: контейнер `Fill`, текстовые блоки — `Hug` по высоте, изображение — обоснованный `Fill/Fit` с safe-area. --- @@ -229,8 +230,10 @@ Constraints применяются там, где Auto Layout не покрыв ## 5. Типографика -### 5.1. Только через Text Styles -Все тексты обязаны использовать **Text Styles**. +### 5.1. Text Styles + Variables (обязательное правило) +Все текстовые слои в макете обязаны использовать **Text Styles**. + +Text Styles должны быть **семантическими** (а не «по экрану») и опираться на **типографические токены в Variables**. Минимальный набор (пример семантики): - `H1`, `H2`, `H3` @@ -240,29 +243,39 @@ Constraints применяются там, где Auto Layout не покрыв Требования: - одинаковая семантика должна выглядеть согласованно во всех экранах; -- локальные «ручные» размеры шрифта недопустимы, если это не исключение, закреплённое в системе. +- локальные «ручные» правки размеров/интервалов поверх стиля недопустимы (кроме редких исключений, зафиксированных правилом); +- разрешены только бесплатные шрифты; предпочтительно использовать **Google Fonts**; +- значения типографики (минимум `font-size` и `line-height`, при необходимости `letter-spacing`) — источник правды в **Variables**; +- адаптация типографики между брейкпоинтами делается через **Modes** в Variables, а не через дублирование текстовых стилей «под каждый брейкпоинт». -### 5.2. Адаптация типографики между брейкпоинтами -Допускается изменение: -- размера шрифта; -- межстрочного интервала; -- межбуквенного интервала (редко и осознанно); -- ограничения количества строк. +### 5.2. Адаптация типографики между брейкпоинтами через Modes +Если типографика меняется между брейкпоинтами, это изменение фиксируется **через Modes** в коллекции Variables. -Правило: -- изменения типографики между брейкпоинтами должны быть предсказуемыми и фиксироваться как правило (например: `H1` на Mobile меньше на 2–4px). +Обязательная структура: +- есть коллекция Variables для типографики (например: `Typography`); +- в коллекции заведены Modes под брейкпоинты (например: `Mobile`, `Tablet`, `Laptop`, `Desktop` — в точности как принято в проекте); +- для каждого семантического стиля (`H1/H2/Body/...`) определены переменные минимум для: + - `font-size`; + - `line-height`; + - опционально: `letter-spacing` (редко и только обоснованно). + +Обязательное правило применения: +- Text Styles используют эти переменные как значения типографики; +- у каждого фрейма экрана выставлен корректный Mode (Mobile/Tablet/Laptop/Desktop), чтобы типографика внутри фрейма соответствовала брейкпоинту; +- любые отличия от токенов (если они вообще допускаются) должны быть подписаны: **что изменено**, **зачем** и **как это ведёт себя** на min/max диапазона и при длинном контенте. ### 5.3. Многострочный текст: переносы и ограничения Для ключевых текстовых блоков обязаны быть определены правила: - переносится ли текст (wrap) или обрезается (truncate); -- сколько максимум строк допустимо в карточке/ячейке; -- что происходит при переполнении (например, `…` + tooltip в продуктовых требованиях — если применимо). +- сколько максимум строк допустимо в конкретном контексте (карточка/ячейка/таблица/заголовок/кнопка); +- что происходит при переполнении (например, `…`, перенос на следующую строку, увеличение высоты блока — что именно ожидается в UI). Минимальная проверка контента: - короткий текст; - нормальный (ожидаемый); - длинный; -- «экстремальный» (очень длинный) — для выявления поломок. +- «экстремальный» (очень длинный) — для выявления поломок; +- одна очень длинная строка без пробелов (проверка на разъезд/переполнение в узких контейнерах). --- @@ -323,7 +336,7 @@ Constraints применяются там, где Auto Layout не покрыв ## 8. Изображения и медиа -### 8.1. Осознанный выбор Fill / Fit +### 8.1. Обоснованный выбор Fill / Fit - `Fill` (cover) используется, когда допустима обрезка. - `Fit` (contain) используется, когда обрезка недопустима. diff --git a/adaptive-layout-requirements.short.md b/adaptive-layout-requirements.short.md index a9da7b1..82822d5 100644 --- a/adaptive-layout-requirements.short.md +++ b/adaptive-layout-requirements.short.md @@ -1,5 +1,7 @@ # Требования к адаптивному дизайну в Figma (Сжатая версия) +> Примечание: в этом документе «обоснованно» означает: по каждому «выбору» (например: `Hug/Fill/Fixed`, wrap/truncate для текста, `Fill/Fit`) понятно **что выбрано**, **зачем** и **как это ведёт себя** на min/max диапазона и при длинном контенте. + ## 1. Структура файла Figma Рекомендуемая структура: @@ -44,7 +46,7 @@ > Макет некорректен, если работает только на базовой ширине. ### 2.4. Реализация в Figma -- **Обязательно:** Auto Layout на всех контейнерах, осознанные `Hug / Fill / Fixed`, Constraints, min/max width для ключевых блоков. +- **Обязательно:** Auto Layout на всех контейнерах, обоснованный выбор `Hug / Fill / Fixed`, Constraints, min/max width для ключевых блоков. - **Запрещено:** ручное позиционирование без Auto Layout, абсолютные размеры без необходимости, дубли фреймов для адаптивности. --- @@ -71,9 +73,11 @@ --- ## 5. Типографика -- Только через **Text Styles** (`H1 / H2 / Body / Caption / Button`) -- Размеры шрифтов могут меняться между брейкпоинтами -- Line-height в %, ограничения по количеству строк +- Только через **Text Styles** (семантика: `H1 / H2 / Body / Caption / Button`) +- Только бесплатные шрифты (предпочтительно **Google Fonts**) +- Значения типографики (минимум размер и line-height) — через **Variables** +- Адаптация между брейкпоинтами — через **Modes** в Variables (Mobile/Tablet/Laptop/Desktop) +- Для ключевых текстов определены правила: wrap/truncate и max lines --- @@ -90,7 +94,7 @@ --- ## 8. Изображения и медиа -- Использовать `Fill / Fit` осознанно +- Использовать `Fill / Fit` обоснованно - Safe area для обрезки - Поддержка разных соотношений сторон - Форматы и размеры соответствуют проекту