git:20261002.e1bc514 to git:20261003.c86df95

7 added, 4 removed. Audit A to A.

---

name: nickture-interface

- description: 'Правила дизайна интерфейса для проверки и правки: типографика, цвет, отступы, иерархия, иконки, формы, состояния, навигация, онбординг, компоненты, мобильная вёрстка, графики, документы и слайды, письма, доступность, прокрутка, анимация, производительность, признаки сгенерированного дизайна. Применяется при любом изменении вёрстки, стилей, компонентов и анимации, на разборе и приёмке экрана, сайта, лендинга или презентации. Тексты интерфейса проверяются по скиллу nickture-text-ru.'

+ description: 'Правила дизайна интерфейса для проверки и правки: типографика, цвет, отступы, иерархия, иконки, формы, состояния, навигация, онбординг, компоненты, мобильная вёрстка, графики, документы и слайды, письма, доступность, прокрутка, анимация, производительность, признаки сгенерированного дизайна. Применяется при любом изменении вёрстки, стилей, компонентов и анимации, на разборе и приёмке экрана, сайта, лендинга или презентации. Тексты интерфейса проверяются по скиллу nickture-text-ru. Checkable UI design rules for building and reviewing interfaces: typography, color, spacing, forms, states, navigation, accessibility, motion and signs of AI-generated design.'

---

# Правила интерфейса

Проверяемые правила для любого цифрового интерфейса: веб-приложения, сайта, лендинга, мобильной вёрстки, презентации. Правила сведены из открытых каталогов, книг, статей и из разборов и мыслей автора.

- Правила читаются на каждом изменении интерфейса и на приёмке. Правило можно не соблюсти, если у этого есть причина, и она записывается в Foundation проекта, если он есть. Что решено в конкретном проекте (гарнитуры, цвета, шкалы, исключения), лежит там же, в Foundation. Правила текста, подписей и микрокопирайтинга лежат в скилле `nickture-text-ru`, здесь на них только ссылки по заголовку.

+ Правила читаются на каждом изменении интерфейса и на приёмке. После правки экран сравнивается с исходным целиком по принципу «[Правка не утяжеляет экран](rules/principles.md)». Правило можно не соблюсти, если у этого есть причина, и она записывается в Foundation проекта, если он есть. Что решено в конкретном проекте (гарнитуры, цвета, шкалы, исключения), лежит там же, в Foundation. Правила текста, подписей и микрокопирайтинга лежат в скилле `nickture-text-ru`, здесь на них только ссылки по заголовку.

Стек примеров: [Tailwind CSS](https://tailwindcss.com/) v4, компоненты в духе [shadcn](https://ui.shadcn.com/). Tailwind utility class в скобках подсказывает реализацию. Правило верно и без него.

## Как читать

- **Заголовок и описание.** Заголовок коротко формулирует правило. Описание после него объясняет, что проверять и почему, и даёт пример.

- **★ — экспресс-проход.** Около сорока правил со звёздочкой проверяются на экране первыми, когда времени мало: они ловят самые заметные ошибки. Их заголовки собраны в разделе «Экспресс-проход». Полный проход идёт по всем.

- **Ключ в конце — источник.** Одно правило может прийти из нескольких источников. Расшифровка в [таблице источников](sources.md).

- - **Значения пишутся как в коде.** Кегли, отступы, длительности и пороги стоят в том же виде, в каком попадут в стили: `16px`, `300ms`, `2.5s`, без отбивки от числа и без перевода единицы на русский. Правило «Знаки и единицы отбиваются по норме» скилла `nickture-text-ru` их не касается.

+ - **Значения пишутся как в коде.** Кегли, отступы, длительности и пороги записаны в том же виде, в каком попадут в стили: `16px`, `300ms`, `2.5s`, без отбивки от числа и без перевода единицы на русский. Правило «Знаки и единицы отбиваются по норме» скилла `nickture-text-ru` их не касается.

- **«Слабый приём».** Приём, который решает задачу хуже названного рядом. Берётся, когда названный недоступен, и в разборе отмечается как запасной.

## Разделы

Раздел лежит в своём файле. Для правки читаются разделы по её теме, на приёмке читаются все.

| Раздел | Что внутри |

| --- | --- |

| [Принципы](rules/principles.md) | из них выводятся остальные правила, по ним решается случай, которого в правилах нет |

| [Что желательно определить](rules/what-to-define.md) | вопросы, на которые отвечает Foundation проекта: бренд, характер, цвет, шкалы, движение, браузеры. Читается при заполнении Foundation |

| [Типографика](rules/typography.md) | длина строки, интерлиньяж, трекинг, шкала кеглей, гарнитуры и начертания, заголовки, обрезка текста, табличные цифры, загрузка шрифтов |

| [Цвет и токены](rules/color.md) | акцент, контраст, статусные цвета, палитра, токены, тёмная тема |

| [Пространство и форма](rules/space.md) | отступы и группировка, выравнивание, шкала значений, геометрия контролов, радиусы, тени, сетка, картинки |

| [Иерархия и акцент](rules/hierarchy.md) | главное действие, точки взгляда, одна цель на экран, плотность, секции |

| [Иконки](rules/icons.md) | набор и размер, обводка и заливка, оптическое выравнивание, иконка с подписью и без, эмодзи |

| [Формы и ввод](rules/forms.md) | подписи полей, ошибки и проверка, кнопка отправки, варианты выбора, значения по умолчанию, оплата, пошаговые формы, вход и регистрация |

| [Состояния и отклик](rules/states.md) | загрузка, пусто, ошибка, успех, неактивное, скелетоны, тосты, отмена и подтверждение |

| [Навигация и адрес](rules/navigation.md) | меню и разделы, глубина, адрес страницы, вкладка браузера, фиксированные панели, поиск |

| [Онбординг, пустой продукт и платный доступ](rules/onboarding.md) | первые шаги, пустые экраны, анкеты, разрешения, выбор тарифа, приглашения |

| [Компоненты и организмы](rules/components.md) | выбор примитива, модалки, поповеры, тултипы, табы, аккордеоны, карусели, фильтры, чат, чек-лист компонента |

| [Мобильная версия и жесты](rules/mobile.md) | зона большого пальца, адаптивная вёрстка, высота экрана, жесты, шторки, клавиатура |

| [Данные и графики](rules/charts.md) | форма графика, оси и шкалы, цвет серий, легенда, тултипы, карточки показателей |

| [Презентации и документы](rules/documents.md) | слайды, питч-деки, длинные веб-документы, печать |

| [Почта](rules/email.md) | вёрстка писем рассылки |

| [Доступность](rules/accessibility.md) | фокус, размер цели нажатия, клавиатура, семантика и ARIA, масштаб, системные настройки |

| [Прокрутка и списки](rules/scrolling.md) | вид прокручиваемого, подгрузка, конец списка, длинные списки, перехват прокрутки |

| [Движение](rules/motion.md) | когда анимировать, длительности и кривые, вход и выход, прерывание, reduced motion |

| [Производительность отрисовки](rules/performance.md) | что анимировать, `will-change`, исходный HTML, Web Vitals, место под асинхронное, сторонние виджеты, медленная сеть |

| [Слоп](rules/slop.md) | признаки шаблонного и сгенерированного интерфейса |

## Экспресс-проход

- Правила со звёздочкой в порядке разделов. Описание каждого правила стоит в его разделе.

+ Правила со звёздочкой в порядке разделов. Описание каждого правила дано в его разделе.

+ - Правка не утяжеляет экран.

- Строка основного текста 45–75 знаков.

- Гарнитур одна или две.

+ - На экране не больше четырёх кеглей, двух начертаний и двух цветов текста.

- Уровней текста в блоке не больше трёх.

+ - Чекбокс, радиокнопка, иконка и маркер списка выровнены по первой строке.

- Один акцент на экран.

- Контраст текста не ниже AA.

- Статус не только цветом.

- Группировка пространством, а линия — крайняя мера.

- Отступ внутри меньше отступа снаружи.

- Выравнивание не создаёт ложных связей.

- Без «почти».

- Контролы одного ряда одной геометрии.

- Экран понятен при прищуре.

- Главное действие — самый контрастный элемент экрана.

- Число для решения видно сразу.

- У каждого поля видимая подпись.

- Ошибка под своим полем.

- Кнопка отправки нажимается всегда.

- Спрашивается только необходимое.

- Порядок действий не навязывается.

- Отклик по длительности.

- Каждое действие видно.

- Состояния загрузки, пусто, ошибка, успех и частично.

- Undo вместо переспрашивания.

- Навигация следует конвенциям.

- Пустой экран — первый шаг.

- Экран-ловушка запрещён.

- Карточка — когда она сама взаимодействие.

- Однотипные элементы одинаковы.

- Главное действие под пальцем.

- Видимый фокус.

- Цель нажатия 44 × 44 на сенсорном экране и 28 × 28 везде.

- У анимации есть работа.

- Частое не анимируется.

- Отклик интерфейса короче 300ms.

- Reduced motion по уровням.

- Три колонки «иконка в цветном круге, жирный заголовок, две строки».

- Моноширинный шрифт вне кода.