Чеклист для ревью сценариев
Прогони любой экран через этот список перед тем, как отдать в разработку
Это не формальность и не бюрократия. Это быстрая проверка, которая занимает 5–10 минут и позволяет поймать очевидные проблемы до того, как они попадут в код.
Прогоняй чеклист для каждого экрана, который доступен в режиме движения. Экраны только для стоянки — не требуют полной проверки, только базовые пункты из Слоя 1.
Прогоняй чеклист для каждого экрана, который доступен в режиме движения. Экраны только для стоянки — не требуют полной проверки, только базовые пункты из Слоя 1.
Как пользоваться чеклистом
Три статуса для каждого пункта
Ок
Нужно исправить
Неприменимо
Слой 1 — Визуальные параметры
- Главный текст не меньше 36 pt / 36 dp в пассивном режиме
- Главный текст не меньше 22 pt / 22 dp в активном режиме
- Второстепенный текст не меньше 24 pt / 24 dp в пассивном режиме
- Второстепенный текст не меньше 16 pt / 16 dp в активном режиме
- На экране нет текста меньше минимального порога
- Весь текст умещается без усечения (без многоточия)
Размер текста
- Весь текст проходит WCAG AA (4.5:1) — проверено в Stark или Contrast
- Критические алерты проходят WCAG AAA (7:1)
- Иконки и графика — минимум 3:1
- Пассивный режим, прямое солнце — контраст текста 7:1
- Тёмная тема проверена отдельно, не является инверсией светлой
- Оба варианта темы проверены на контраст независимо
Контраст
- Используется только Regular, Medium или SemiBold
- Нет Thin, Light, UltraLight, Black, Heavy начертаний
- Нет Condensed или Expanded шрифтов
- Letter-spacing не отрицательный
- Letter-spacing в диапазоне 0% — +5%
Шрифт
- Нет декоративных переходов между экранами в режиме движения
- Нет пульсирующих или «дышащих» элементов
- Нет автоматически прокручивающегося контента
- Нет looping-анимаций
- Мигание используется только для критических алертов
- Частота мигания 1–3 Гц, не дольше 5–7 секунд
Анимации и мигание
- Тёмная тема включается автоматически, не вручную
- Переключение тем плавное, не дольше 300–400 мс
- Тёмный фон не чисто чёрный (#121212 — #1C1C1E)
- Светлый текст не чисто белый (#E5E5E5 — #F0F0F0)
Режимы отображения
Слой 2 — Допустимые задачи
- Приложение определяет движение по GPS или акселерометру
- Переключение в режим стоянки с задержкой 3–5 секунд после остановки
- Переход между режимами не вызывает резкого изменения интерфейса
- Навигационный контекст сохраняется при переключении режимов
Режимы приложения
- Весь текст проходит WCAG AA (4.5:1) — проверено в Stark или Contrast
- Критические алерты проходят WCAG AAA (7:1)
- Иконки и графика — минимум 3:1
- Пассивный режим, прямое солнце — контраст текста 7:1
- Тёмная тема проверена отдельно, не является инверсией светлой
- Оба варианта темы проверены на контраст независимо
Абсолютные запреты
- Каждый элемент считывается за 2 секунды — проверено тестом «закрытые глаза»
- Вся задача выполняется суммарно за 12 секунд взгляда — проверено
- Тест «один метр»: главная информация видна с расстояния метра
Правило 2 и 12 секунд
- Водитель управляет темпом: нет таймеров и автодействий
- Любое действие можно прервать и вернуться
- Все действия выполнимы одной рукой и одним пальцем
- Нет элементов, которые конкурируют с дорогой за внимание
Принципы
Слой 2 — Допустимые задачи
- Все интерактивные элементы в режиме движения — минимум 60×60 pt / 64×64 dp
- Критические действия — минимум 80×80 pt / 80×80 dp
- Отступ между интерактивными элементами — минимум 16 pt
- Отступ между противоположными критическими действиями — минимум 24 pt
- Критические действия расположены в нижней трети экрана
- Нет ghost buttons в режиме движения
Touch-таргеты
- На экране не более двух уровней текстовой иерархии
- Суммарно не более четырёх строк текста на экране
- В списке не более четырёх элементов при движении
- Главный текст умещается в одну строку
- Нет выравнивания по правому краю или по ширине (justify)
- Нет caption и третьего уровня иерархии
Типографика в компонентах
- Красный используется только для критической опасности
- Жёлтый используется только для предупреждений
- Зелёный используется только для успешных статусов
- Брендовый цвет не конфликтует с семантической шкалой
- Каждый цветовой сигнал дублируется иконкой или текстом
- Цвет не является единственным способом передать смысл
Цвет
- Каждое нажатие подтверждается вибрацией
- Вибрация мгновенная, без задержки после анимации
- Критические сигналы громче фонового шума на 8–10 дБ
- Звуковые сигналы только для событий, требующих реакции
- Нет дублирования одного события несколькими сигналами подряд
- Соблюдается иерархия: при нескольких событиях звучит только важнейшее
Звук и тактильность
- Уведомления в режиме движения — одна строка текста
- Максимум два варианта действия в уведомлении
- Уведомление исчезает автоматически через 3–5 секунд
- Уведомление не блокирует основной интерфейс
Уведомления
- Максимум два уровня навигации в режиме движения
- Кнопка назад всегда видима и доступна
- Размер кнопки назад — не меньше стандартного touch-таргета
- Нет горизонтального скролла
- Вертикальный скролл дублируется кнопками вверх/вниз
- Инерционная прокрутка ограничена
- Главный экран содержит одно основное действие
- На главном экране нет лент, каруселей и обновляющегося контента
Навигация и структура
Прежде чем поставить галочку «готово» — сделай финальную проверку вживую.
Слой 3 — Компоненты и детали
Закрепи телефон в держателе на расстоянии 60 см. Сядь за стол, смотри прямо перед собой. Бросай взгляд на экран на 1–2 секунды, возвращай взгляд вперёд. Ты понимаешь главную информацию? Ты знаешь, что нажать? Если нет — экран требует доработки.
Тест «держатель»
Возьми телефон в руку и слегка потряхивай его, имитируя вибрацию на дороге. Попробуй нажать на каждую кнопку режима движения. Попадаешь с первого раза? Если нет — таргеты нужно увеличить или отступы расширить.
Тест «трясущаяся рука»
Покажи экран коллеге, который не знаком с этим интерфейсом. Дай ему 2 секунды. Спроси: что здесь происходит? Что нужно нажать? Если он не знает — экран перегружен или неочевиден.
Тест «незнакомец»
Мы собираем пользовательские данные для улучшения работы сайта. Используя сайт, вы подтверждаете согласие на их обработку