Слой 3
Компоненты и детали
Слой 1 отвечал на вопрос «видно ли это». Слой 2 — «можно ли это делать за рулём». Слой 3 отвечает на вопрос «из чего это сделано»
«Собираем интерфейс из правильных деталей»
Здесь про конкретные компоненты: кнопки, которые можно нажать одним пальцем при тряске, типографику, которая не перегружает экран лишним, цвет, который несёт смысл а не просто украшает, звук и вибрацию, которые помогают водителю не отвлекаясь получить обратную связь, и структуру экранов, по которой можно перемещаться не думая.
Если Слой 2 — это про то, что не должно попасть в режим движения, то Слой 3 — про то, как именно устроено то, что всё‑таки попало. Это самый практичный слой: здесь больше всего конкретных чисел, правил и примеров, которые можно напрямую переносить в дизайн-систему и компонентную библиотеку.
Один важный момент: компоненты из этого слоя проектируются один раз и применяются везде. Если кнопка правильно устроена в одном месте — она правильно устроена во всём приложении. Именно поэтому Слой 3 удобнее всего оформлять как набор правил для UI-кита, а не как отдельные решения для каждого экрана.
Если Слой 2 — это про то, что не должно попасть в режим движения, то Слой 3 — про то, как именно устроено то, что всё‑таки попало. Это самый практичный слой: здесь больше всего конкретных чисел, правил и примеров, которые можно напрямую переносить в дизайн-систему и компонентную библиотеку.
Один важный момент: компоненты из этого слоя проектируются один раз и применяются везде. Если кнопка правильно устроена в одном месте — она правильно устроена во всём приложении. Именно поэтому Слой 3 удобнее всего оформлять как набор правил для UI-кита, а не как отдельные решения для каждого экрана.
«Кнопка должна прощать неточное нажатие»
В обычном приложении пользователь сидит спокойно, смотрит на экран, целится пальцем в нужный элемент. Промахнуться можно, но это просто неудобно — он нажмёт ещё раз.
За рулём всё иначе. Рука на руле, машина вибрирует на дороге, водитель смотрит не на экран а на дорогу, и нажимает почти вслепую. В таких условиях промах — это не просто неудобство. Это ещё один взгляд на экран, ещё одно нажатие, ещё секунды без внимания на дорогу.
Большая кнопка прощает неточность. Маленькая — наказывает за неё.
За рулём всё иначе. Рука на руле, машина вибрирует на дороге, водитель смотрит не на экран а на дорогу, и нажимает почти вслепую. В таких условиях промах — это не просто неудобство. Это ещё один взгляд на экран, ещё одно нажатие, ещё секунды без внимания на дорогу.
Большая кнопка прощает неточность. Маленькая — наказывает за неё.
Touch-таргеты и кнопки
Почему размер кнопки в машине — это не про эстетику
Минимум — 44×44 pt на iOS и 48×48 dp на Android.
Минимальный размер touch-таргета
Кнопка может выглядеть меньше — например, иконка 24×24 pt — но зона нажатия вокруг неё должна быть не меньше 44×44 pt. В Figma это padding компонента или отдельный невидимый слой hit area. Но это минимум для обычного мобильного интерфейса. Для режима движения — другие числа
Это не визуальный размер кнопки, а размер интерактивной зоны.
Тип действия
Минимум iOS (pt)
Минимум Android (dp)
Критическое действие (принять звонок, подтвердить маршрут)
80×80
80×80
Любое действие в режиме движения
60×60
64×64
Второстепенное действие (закрыть, отложить)
44×44
48×48
Критические действия — крупнее, потому что их нужно нажать быстро и точно, часто не глядя. Второстепенные — могут быть стандартного размера, потому что водитель нажимает их осознанно и не в спешке.
Мало сделать кнопку большой — нужно ещё убедиться, что рядом нет другой кнопки, в которую можно случайно попасть.
Отступы между элементами
Если два действия расположены рядом и оба критические — например, «Принять звонок» и «Отклонить» — отступ должен быть не меньше 24 pt. Промах между «принять» и «отклонить» — это не просто UX-проблема
Минимальный отступ между интерактивными элементами в режиме движения — 16 pt/16 dp
В Figma удобно проверять это через Auto Layout с явно заданными gap-значениями. Если gap меньше 16 — элементы расположены слишком близко.
Вспомни принцип из 2.4: одна рука остаётся на руле. Это означает, что водитель взаимодействует с телефоном большим пальцем одной руки.
Большой палец уверенно достаёт до нижней трети экрана. До середины — с усилием. До верхней части — почти никак, не меняя хват.
Большой палец уверенно достаёт до нижней трети экрана. До середины — с усилием. До верхней части — почти никак, не меняя хват.
Расположение: всё важное — внизу
- Критические действия — нижняя треть экрана
- Информация, которую нужно только считать — верхняя и средняя часть
- Деструктивные действия (завершить поездку, отменить маршрут) — нижняя треть, но с достаточным отступом от основного действия
Это также означает: не размещай два противоположных по смыслу действия рядом в нижней зоне без визуального разделения. Пример плохого решения — кнопки «Начать» и «Отменить» одинакового размера рядом друг с другом внизу экрана.
Правило расположения:
Кнопка в режиме движения должна выглядеть как кнопка — без двусмысленности. Водитель не должен думать «это нажимаемое или нет».
Форма и визуальное оформление кнопки
Что помогает
- Явный фон с высоким контрастом относительно экрана
- Скруглённые углы — они визуально отделяют кнопку от фона лучше, чем острые
- Достаточный padding внутри: текст не должен упираться в края
Что мешает
- Кнопки-призраки (ghost buttons) — только контур без заливки. При ярком свете контур исчезает, кнопка становится невидимой
- Текстовые ссылки как основное действие — нет визуального веса, сложно точно нажать
- Иконка без подписи как единственный способ понять действие — водитель не должен вспоминать, что означает иконка
Водитель нажимает на телефон в держателе — рука тянется к экрану, угол неудобный, точность низкая. Здесь особенно важен крупный таргет и большие отступы между элементами
Пассивный режим
Телефон в руке, точность выше. Но рука при этом не на руле — значит, действие должно быть максимально быстрым. Крупные таргеты здесь важны по другой причине: чем быстрее водитель попадает по кнопке, тем быстрее рука возвращается на руль
Активный режим
Пассивный и активный режим
«Кнопка выглядит достаточно большой на макете»
Макет смотрят на большом экране с расстояния 50 см, сидя за столом. Проверяй на реальном устройстве, держа телефон так, как держит его водитель.
«Отступы съедают место, экран выглядит пустым»
Пустое пространство в водительском интерфейсе — это не проблема, это решение. Меньше элементов, больше воздуха — водитель быстрее находит нужное.
«Ghost button выглядит элегантно»
На солнце он просто исчезает. Используй ghost button только для второстепенных действий в режиме стоянки — никогда в режиме движения.
Частые ошибки
«Один экран — одна главная мысль»
В Слое 1 мы разобрались с базовыми параметрами текста: размер, контраст, шрифт, интервалы. Но это были правила для текста в вакууме. В реальном интерфейсе текст живёт внутри компонентов — карточек, списков, строк навигации, уведомлений. И здесь появляются дополнительные ограничения.
Типографика в компонентах
Почему типографика в компонентах — это отдельная задача
Не «минимум текста», а именно одна мысль — один факт, одно действие, один ответ на вопрос «что сейчас происходит»
В режиме движения на одном экране должна быть одна главная мысль
В режиме движения допустимы только два уровня текстовой иерархии — главный и второстепенный. Всё остальное убирается.
Главный уровень — одно короткое сообщение, которое водитель считывает первым. Через 200 м поверните направо. Звонит Иван. Маршрут перестроен.
Второстепенный уровень — минимальный контекст, который уточняет главное. Улица Ленина. Мобильный. Новый маршрут займёт 5 минут дольше.
Третий уровень — подсказки, сноски, дополнительные детали — в режиме движения не существует. Если информация не помещается в два уровня, значит её слишком много.
Главный уровень — одно короткое сообщение, которое водитель считывает первым. Через 200 м поверните направо. Звонит Иван. Маршрут перестроен.
Второстепенный уровень — минимальный контекст, который уточняет главное. Улица Ленина. Мобильный. Новый маршрут займёт 5 минут дольше.
Третий уровень — подсказки, сноски, дополнительные детали — в режиме движения не существует. Если информация не помещается в два уровня, значит её слишком много.
Иерархия текста на экране
Уровень
Размер (пассивный режим)
Размер (активный режим)
Начертания
Главный
36 pt/36 dp
22 pt / 22 dp
Medium или SemiBold
Второстепенный
24 pt / 24 dp
16 pt / 16 dp
Regular
Максимум строк на экране
Включая все уровни иерархии, подписи к кнопкам и любые другие текстовые элементы
В режиме движения на одном экране не должно быть больше четырёх строк текста суммарно
Четыре строки — это не произвольное число. Это максимум, который водитель может охватить одним взглядом без необходимости «читать» сверху вниз. Пять строк и больше — водитель начинает именно читать, а не считывать.
Если на экране больше четырёх строк — убирай информацию, а не уменьшай текст.
Если на экране больше четырёх строк — убирай информацию, а не уменьшай текст.
Иногда задача требует выбора из нескольких вариантов — например, выбрать точку из нескольких сохранённых адресов. Для этого допустимы короткие списки.
Списки в режиме движения
Каждый элемент списка — одна строка. Без вложенных подписей, без второстепенного текста под основным, без иконок со сложным смыслом. Просто короткий текст, достаточно крупный, с большой зоной нажатия.
Если вариантов больше четырёх — показывай только четыре наиболее вероятных (последние, избранные, ближайшие), остальное скрывай до остановки
Если вариантов больше четырёх — показывай только четыре наиболее вероятных (последние, избранные, ближайшие), остальное скрывай до остановки
Максимум — 4 элемента в списке при движении
Длинные строки текста в режиме движения — проблема. Водитель не успевает дочитать строку до конца за один взгляд и вынужден смотреть дольше.
Длина строки и перенос текста
Если не умещается — текст слишком длинный, его нужно сократить, а не переносить на вторую строку.
Главный текст должен умещаться в одну строку
Но не больше. Две строки второстепенного текста — это уже на грани.
Сокращение с многоточием — плохое решение для режима движения. Водитель видит обрезанный текст и хочет прочитать полностью — это лишний взгляд. Лучше изначально писать короче.
Второстепенный текст допускает перенос на вторую строку
В режиме движения текст выравнивается только по левому краю или по центру — в зависимости от типа компонента.
Выравнивание текста
По центру
Для главного сообщения на экране, уведомлений, статусов. Водитель смотрит в центр экрана, центрированный текст считывается быстрее.
По левому краю
Для списков, последовательных элементов, любого текста, где есть несколько строк.
Выравнивание по правому краю и по ширине
Выравнивание по правому краю для нас непривычно. А выравнивание по ширине создаёт неравномерные интервалы между словами и ухудшает считываемость при быстром взгляде.
В типографике разница между режимами — это прежде всего размеры из таблицы выше. Но есть ещё один нюанс.
Пассивный и активный режим
Экран постоянно в поле зрения водителя. Это означает, что любой текст на экране — даже второстепенный — может случайно притянуть взгляд. Поэтому второстепенный текст в пассивном режиме должен быть визуально тихим: достаточно крупным для читаемости, но явно слабее главного по контрасту или весу
В пассивном режиме
Водитель смотрит на экран осознанно в момент взаимодействия. Здесь важнее скорость считывания: главное должно бросаться в глаза мгновенно, чтобы рука сделала нужное действие и вернулась на руль
В активном режиме
«Мы добавили маленький caption под каждым элементом»
Caption в режиме движения — это третий уровень иерархии, которого не существует. Если информация в caption важна — подними её уровень. Если не важна — убери совсем.
«Список из восьми вариантов, пользователю нужен выбор»
Восемь вариантов в режиме движения — это восемь строк текста, которые нужно прочитать и сравнить. Это задача для режима стоянки. В движении — максимум четыре наиболее вероятных варианта.
«Мы обрезаем длинные названия многоточием»
Водитель увидит обрезанный текст и захочет прочитать полностью. Это лишний взгляд. Сокращай текст заранее: «ул. Ленина» вместо «улица Ленина, дом. 14, строение 2».
«Текст по ширине выглядит аккуратнее»
Нет, он создаёт плавающие пробелы между словами — это нарушает равномерность силуэтов строк и замедляет считывание. Только левое выравнивание или центр.
Частые ошибки
«В водительском интерфейсе цвет — это не украшение, это сигнал»
В обычном приложении цвет решает много задач одновременно: передаёт бренд, создаёт настроение, выделяет акценты, группирует элементы. Это нормально, когда у пользователя есть время разобраться в интерфейсе.
За рулём на это времени нет. Водитель бросает взгляд на экран и должен мгновенно понять: это важно или нет, это опасно или нет, это требует действия прямо сейчас или может подождать. Цвет — самый быстрый способ передать эту информацию. Быстрее текста, быстрее иконки.
Но только если цвет используется последовательно и предсказуемо. Если красный появляется то как кнопка опасного действия, то как брендовый акцент, то как промо-баннер — водитель перестаёт ему доверять как сигналу.
Главное правило: в режиме движения каждый цвет имеет одно значение. Всегда.
За рулём на это времени нет. Водитель бросает взгляд на экран и должен мгновенно понять: это важно или нет, это опасно или нет, это требует действия прямо сейчас или может подождать. Цвет — самый быстрый способ передать эту информацию. Быстрее текста, быстрее иконки.
Но только если цвет используется последовательно и предсказуемо. Если красный появляется то как кнопка опасного действия, то как брендовый акцент, то как промо-баннер — водитель перестаёт ему доверять как сигналу.
Главное правило: в режиме движения каждый цвет имеет одно значение. Всегда.
Цвет как смысл
Почему цвет работает иначе в машине
Это не рекомендации — это жёсткие соответствия, которые нельзя нарушать в режиме движения.
Цветовая семантика
Красный — только критическая опасность
Красный появляется на экране только тогда, когда водителю нужно немедленно среагировать на опасную ситуацию. Авария впереди, критическая ошибка системы, экстренное торможение. Всё остальное — не красное. Никаких красных кнопок «Отмена», красных промо-баннеров, красных индикаторов «нет интернета». Если водитель видит красный — он должен знать: это серьёзно.
Жёлтый / янтарный — предупреждение
Ситуация требует внимания, но не немедленного действия. Пробки на маршруте, низкий заряд батареи, слабый GPS-сигнал. Водитель замечает, держит в голове, действует когда удобно. Важно: жёлтый не должен использоваться для декоративных акцентов или брендовых элементов — только для предупреждений.
Зелёный — всё хорошо
Подтверждение, успешное действие, нормальный статус системы. Маршрут построен, звонок принят, соединение установлено. Водитель видит зелёный — можно не беспокоиться.
Синий — навигация и информация
Нейтральная информация, интерактивные элементы, текущее состояние без оценки. Активный маршрут, выбранный вариант, текущая скорость. Синий не требует реакции — он просто информирует.
Серый — недоступный
Элементы, недоступные в режиме движения, заблокированные функции, второстепенный контекст. Серый говорит: «это есть, но сейчас не твоё».
Таблица цветовой семантики
Цвет
Значение
Пример использования
Запрещено
🔴 Красный
Критическая опасность
Авария впереди, экстренный алерт
Кнопка отмены, промо, ошибки ввода
🟡 Жёлтый
Предупреждение
Пробки, низкий заряд, слабый сигнал
Декоративные акценты, бренд
🟢 Зелёный
Успех, норма
Маршрут построен, действие выполнено
Промо, декор
🔵 Синий
Информация, навигация
Активный маршрут, интерактивные элементы
Критические алерты
⚫ Серый
Неактивно
Заблокированные функции
Основной текст, критические элементы
Это частый и болезненный вопрос. Бренд требует своих цветов, продукт требует безопасности — и они не всегда совпадают.
Брендовые цвета в режиме движения
Если бренд — синий или фиолетовый, всё хорошо: используй его для интерактивных элементов и нейтральных акцентов.
Если бренд — красный или оранжевый, это проблема. Красный брендовый элемент на экране водителя будет восприниматься как сигнал опасности. Решение: в режиме движения брендовый красный заменяется на нейтральный — тёмно-серый, белый или синий. Бренд возвращается в режиме стоянки.
Если бренд — жёлтый, используй его осторожно: только там, где нет предупреждений, чтобы не размывать семантику
Если бренд — красный или оранжевый, это проблема. Красный брендовый элемент на экране водителя будет восприниматься как сигнал опасности. Решение: в режиме движения брендовый красный заменяется на нейтральный — тёмно-серый, белый или синий. Бренд возвращается в режиме стоянки.
Если бренд — жёлтый, используй его осторожно: только там, где нет предупреждений, чтобы не размывать семантику
Брендовый цвет в режиме движения допустим только если он не конфликтует с семантической шкалой
Важное уточнение, которое часто забывают: цветовое кодирование работает только в паре с достаточным контрастом.
Красный алерт на тёмно-красном фоне — водитель не увидит. Зелёный статус на белом фоне с контрастом 2:1 — водитель не считает. Цвет передаёт смысл, контраст обеспечивает видимость. Одно без другого не работает.
Поэтому для каждого семантического цвета в дизайн-системе нужны проверенные пары фон/текст с контрастом согласно правилам из раздела 1.2.
Красный алерт на тёмно-красном фоне — водитель не увидит. Зелёный статус на белом фоне с контрастом 2:1 — водитель не считает. Цвет передаёт смысл, контраст обеспечивает видимость. Одно без другого не работает.
Поэтому для каждого семантического цвета в дизайн-системе нужны проверенные пары фон/текст с контрастом согласно правилам из раздела 1.2.
Цвет не заменяет контраст
Около 4–5% людей имеют то или иное нарушение цветового восприятия — чаще всего это сложности с различением красного и зелёного. Это означает, что цвет не может быть единственным способом передать критическую информацию.
Цвет и дальтонизм
- Красный алерт — плюс иконка предупреждения и короткий текст
- Зелёный статус — плюс галочка или слово «Готово»
- Жёлтое предупреждение — плюс иконка и пояснение
Каждый цветовой сигнал должен дублироваться формой, иконкой или текстом:
Это не только про доступность — это про надёжность. Водитель может смотреть на экран через солнцезащитные очки с поляризацией, которые искажают восприятие цвета. Тёмная тема меняет насыщенность. Прямое солнце «выбивает» оттенки. Дублирование смысла через форму и текст делает интерфейс устойчивым к любым условиям — независимо от того, как именно водитель воспринимает цвет.
Семантика цвета одинакова в обоих режимах — это её главная ценность: предсказуемость.
Пассивный и активный режим
Цветовой сигнал должен быть заметён периферийным зрением — водитель не смотрит прямо на экран. Это означает достаточную площадь цветного элемента: маленькая цветная точка не сработает, нужна полноценная цветная плашка или крупный элемент
В пассивном режиме
Водитель смотрит на экран осознанно, и цвет считывается точнее. Здесь допустимы более компактные цветовые индикаторы — но семантика остаётся той же
В активном режиме
«Красная кнопка выглядит как призыв к действию»
В обычном маркетинге — да, красная CTA-кнопка работает. В водительском интерфейсе красная кнопка означает опасность. Используй для основного действия синий или брендовый нейтральный цвет.
«Мы используем зелёный для промо-акций»
Водитель видит зелёный и думает: всё в порядке, система работает нормально. Не используй зелёный для чего‑либо, кроме статусов и подтверждений.
«Цвет и так очевиден, зачем дублировать иконкой»
4–5% людей не различают красный и зелёный. Поляризованные очки меняют восприятие цвета. Тёмная тема меняет насыщенность. Дублируй всегда.
«В тёмной теме мы просто сделали цвета чуть ярче»
Насыщенность и семантика — разные вещи. Проверяй, что семантические цвета в тёмной теме сохраняют свой смысл и читаются с достаточным контрастом — особенно красный, который в тёмной теме легко превращается в «просто акцент».
Частые ошибки
«Водитель должен понять, что произошло, не глядя на экран»
В обычном приложении обратная связь почти всегда визуальная: кнопка изменила цвет, появился экран подтверждения, всплыл тост-уведомление. Пользователь смотрит на экран и видит результат своего действия.
За рулём взгляд должен вернуться на дорогу сразу после нажатия. Водитель не может ждать и смотреть, произошло ли действие. Ему нужно понять это другим способом — через руку или через уши.
Именно поэтому звук и тактильный отклик в водительском интерфейсе — это не украшение и не опция для любителей вибрации. Это основной канал обратной связи, который позволяет водителю не возвращать взгляд на экран лишний раз.
За рулём взгляд должен вернуться на дорогу сразу после нажатия. Водитель не может ждать и смотреть, произошло ли действие. Ему нужно понять это другим способом — через руку или через уши.
Именно поэтому звук и тактильный отклик в водительском интерфейсе — это не украшение и не опция для любителей вибрации. Это основной канал обратной связи, который позволяет водителю не возвращать взгляд на экран лишний раз.
Обратная связь: звук, тактильность и уведомления
Почему обратная связь без экрана — это не бонус, а необходимость
Тактильный отклик
Водитель нажал кнопку — почувствовал лёгкую вибрацию — понял, что нажатие произошло — вернул взгляд на дорогу. Без этой вибрации водитель вынужден посмотреть на экран ещё раз, чтобы убедиться, что всё сработало
Каждое успешное нажатие в режиме движения должно подтверждаться вибрацией
Лёгкий импульс — подтверждение обычного действия
Короткий, мягкий. Водитель нажал «Следующий трек», принял звонок, выбрал вариант из списка. Просто подтверждение: да, нажатие зарегистрировано.
На iOS это UIImpactFeedbackGenerator с параметром.light или.medium. На Android — VibrationEffect.createOneShot с длительностью 20–30 мс.
На iOS это UIImpactFeedbackGenerator с параметром.light или.medium. На Android — VibrationEffect.createOneShot с длительностью 20–30 мс.
Двойной импульс — подтверждение важного действия
Два коротких удара с паузой между ними. Маршрут построен, поездка началась, звонок завершён. Немного заметнее, чтобы водитель понял: произошло что‑то значимое.
На iOS — UINotificationFeedbackGenerator с параметром.success. На Android — два коротких импульса с паузой 50 мс между ними.
На iOS — UINotificationFeedbackGenerator с параметром.success. На Android — два коротких импульса с паузой 50 мс между ними.
Длинный настойчивый импульс — критическое предупреждение
Более длинная, заметная вибрация. Используется только вместе с визуальным и звуковым сигналом для критических алертов. Авария впереди, потеря маршрута в опасной зоне.
На iOS — UINotificationFeedbackGenerator с параметром.warning или.error. На Android — VibrationEffect.createWaveform с нарастающей интенсивностью.
На iOS — UINotificationFeedbackGenerator с параметром.warning или.error. На Android — VibrationEffect.createWaveform с нарастающей интенсивностью.
Что важно при работе с тактилом
Вибрация должна быть мгновенной — не с задержкой после анимации, а в момент касания. Задержка даже в 100–150 мс разрывает связь между действием и откликом, и водитель всё равно смотрит на экран для подтверждения.
Не используй вибрацию для фоновых событий, которые не требуют реакции водителя. Если каждое уведомление вибрирует — вибрация перестаёт что‑либо значить.
Не используй вибрацию для фоновых событий, которые не требуют реакции водителя. Если каждое уведомление вибрирует — вибрация перестаёт что‑либо значить.
Звук в водительском интерфейсе — мощный инструмент, но требует аккуратности. Неправильно выстроенная звуковая система раздражает водителя и заставляет его отключить звук совсем — тогда приложение теряет этот канал полностью.
Звук
Громкость: перекрыть шум дороги
Звуковой сигнал приложения должен быть громче фонового шума минимум на 8–10 дБ, чтобы водитель его услышал
Шум в салоне автомобиля при скорости 80–100 км/ч составляет около 65–70 дБ
На практике это означает: не полагайся на системную громкость по умолчанию. Критические звуковые сигналы должны воспроизводиться через отдельный аудиоканал с достаточным уровнем — на iOS через AVAudioSession с категорией.playback, на Android через AudioManager.STREAM_ALARM для критических алертов.
Три уровня звуковых сигналов
- Тихий звук — подтверждение действия Короткий, ненавязчивый. Дополняет тактильный отклик. Водитель нажал кнопку — услышал мягкий щелчок или короткий тон. Не отвлекает, просто подтверждает.
- Информационный сигнал — навигационная подсказка Чёткий, приятный, хорошо различимый в шуме дороги. Поворот через 200 м, перестройка завершена, прибытие в точку. Должен однозначно отличаться от предупреждающего сигнала.
- Предупреждающий сигнал — требует внимания Более настойчивый, с выраженным характером срочности. Используется только для реальных предупреждений — пробки, изменение маршрута, низкий заряд в критический момент. Не для обычных уведомлений.
Alarm fatigue — когда звуков слишком много
Это состояние, когда водитель получает так много звуковых сигналов, что перестаёт на них реагировать. Или, что хуже, отключает звук приложения совсем. Тогда по‑настоящему важный сигнал — об аварии впереди или критическом событии — просто не доходит
Alarm fatigue
Правила против alarm fatigue
- Звуковой сигнал — только для событий, которые требуют реакции водителя. Фоновые события, информация для справки, статусы системы — без звука.
- Не дублируй одно событие несколькими сигналами подряд. Один сигнал — одно событие. Если водитель не отреагировал, повтори один раз через разумный интервал — и замолчи.
- Соблюдай иерархию: если одновременно происходит несколько событий, звучит только самое важное. Остальные ждут или отображаются визуально без звука.
Уведомления — отдельная большая проблема. Телефон в машине продолжает получать сообщения, звонки, напоминания. Если всё это попадает на экран в режиме движения — водитель постоянно отвлекается.
Уведомления в режиме движения
Что делать с входящими уведомлениями в режиме движения
Уведомления от других приложений не должны отображаться поверх водительского интерфейса в виде баннеров или всплывающих плашек. Если система показывает их принудительно — водительское приложение должно запрашивать режим «не беспокоить» на время поездки.
Уведомления внутри самого приложения в режиме движения показываются только если они требуют немедленной реакции. Всё остальное — в очередь до остановки.
Уведомления внутри самого приложения в режиме движения показываются только если они требуют немедленной реакции. Всё остальное — в очередь до остановки.
- Одна строка текста — не больше
- Максимум два действия: подтвердить или отклонить
- Автоматически исчезает через 3–5 секунд если водитель не отреагировал
- Не блокирует основной интерфейс
Структура уведомления в режиме движения
В пассивном режиме тактильный отклик особенно важен — телефон в держателе, и водитель нажимает на него, не глядя. Вибрация — единственный способ подтвердить нажатие без взгляда на экран. Убедись, что держатель не гасит вибрацию телефона механически — некоторые жёсткие держатели значительно снижают ощутимость тактила.
В активном режиме телефон в руке, тактил ощущается лучше. Здесь важнее звуковая обратная связь — водитель держит телефон, но его взгляд должен вернуться на дорогу сразу после нажатия. Звук подтверждает действие, пока глаза уже смотрят вперёд.
В активном режиме телефон в руке, тактил ощущается лучше. Здесь важнее звуковая обратная связь — водитель держит телефон, но его взгляд должен вернуться на дорогу сразу после нажатия. Звук подтверждает действие, пока глаза уже смотрят вперёд.
Пассивный и активный режим
«Мы не делаем вибрацию, это дёшево»
Тактильный отклик — это не про дешевизну, это про безопасность. Хорошо настроенная вибрация воспринимается как признак качества, а не наоборот. Сравни тактил в iPhone и в дешёвом Android — разница именно в качестве реализации, а не в самой идее.
«Мы добавили звук на каждое событие, чтобы пользователь всё слышал»
Это прямой путь к alarm fatigue. Звук — только для событий, требующих реакции. Остальное — тишина.
«Наши пользователи всегда едут с музыкой, звуки приложения всё равно не слышны»
Если звуки приложения не слышны — это повод усилить тактильный канал, а не отказаться от звука совсем. Используй оба канала как дублирующие друг друга.
«Уведомление появляется на три секунды и исчезает, это же быстро»
Три секунды — это полтора взгляда водителя. Уведомление, которое появилось и исчезло, пока водитель смотрел на дорогу, создаёт худший сценарий: водитель заметил движение на экране краем глаза, посмотрел — уже ничего нет. Теперь он отвлёкся дважды: первый раз на появление, второй раз на попытку понять, что это было.
Частые ошибки
«Водитель не должен искать — он должен находить»
В обычном приложении пользователь может позволить себе исследовать интерфейс: листать, нажимать, возвращаться назад, пробовать разные пути. Если он заблудился — это просто неудобно.
За рулём заблудиться в интерфейсе означает провести лишние секунды со взглядом на экране. Каждый лишний шаг навигации, каждый неожиданный экран, каждый скролл в поисках нужного — это время без внимания на дорогу.
Структура экранов в режиме движения должна быть настолько предсказуемой, что водитель находит нужное не думая. Как привычный маршрут домой — руки сами знают, куда поворачивать.
За рулём заблудиться в интерфейсе означает провести лишние секунды со взглядом на экране. Каждый лишний шаг навигации, каждый неожиданный экран, каждый скролл в поисках нужного — это время без внимания на дорогу.
Структура экранов в режиме движения должна быть настолько предсказуемой, что водитель находит нужное не думая. Как привычный маршрут домой — руки сами знают, куда поворачивать.
Навигация, скролл и структура экранов
Почему структура экранов в машине работает иначе
Максимальная вложенность навигации
В режиме движения — не более двух уровней навигации
Первый уровень — главный экран. Второй уровень — одно действие или один выбор. Глубже не идём.
Если задача требует трёх и более шагов навигации — она слишком сложная для режима движения. Либо упрощай сценарий, либо переноси в режим стоянки.
Если задача требует трёх и более шагов навигации — она слишком сложная для режима движения. Либо упрощай сценарий, либо переноси в режим стоянки.
Режим
Максимум уровней навигации
Движение
2 уровня
Стоянка
Без ограничений
Хороший пример
Главный экран → выбор из четырёх сохранённых адресов → маршрут построен. Два уровня, задача решена.
Плохой пример
Главный экран → раздел «Куда едем» → категории мест → список → карточка места → подтверждение. Пять уровней — это сценарий для стоянки.
На любом экране в режиме движения должна быть очевидная возможность вернуться назад или закрыть текущий экран.
Это не только про удобство. Если водитель случайно попал не туда — он должен мгновенно выйти, не разбираясь в ситуации. Один тап — и он снова на главном экране.
Это не только про удобство. Если водитель случайно попал не туда — он должен мгновенно выйти, не разбираясь в ситуации. Один тап — и он снова на главном экране.
Кнопка назад — всегда доступна
Правила для кнопки назад
- Всегда видима, не прячется за жестом или свайпом
- Размер — не меньше стандартного touch-таргета для режима движения (60×60 pt)
- Расположение — верхний левый угол или нижняя зона, предсказуемо на каждом экране
- Никогда не запрашивает подтверждение для выхода в режиме движения — просто выходит
Скролл в режиме движения — это проблема по двум причинам.
Первая: скролл требует точного свайпа по экрану — движения, которое сложно выполнить одним пальцем при тряске без визуального контроля.
Вторая: скролл означает, что нужная информация не помещается на экране. А значит, водитель должен искать — листать, пока не найдёт. Это прямое нарушение правила 2 секунд.
Первая: скролл требует точного свайпа по экрану — движения, которое сложно выполнить одним пальцем при тряске без визуального контроля.
Вторая: скролл означает, что нужная информация не помещается на экране. А значит, водитель должен искать — листать, пока не найдёт. Это прямое нарушение правила 2 секунд.
Скролл: минимизируй и дублируй
Правило минимизации скролла
В режиме движения контент должен помещаться на одном экране без прокрутки. Если не помещается — убирай элементы, а не прячь их за скроллом.
Если скролл неизбежен — например, список из четырёх адресов иногда требует небольшой прокрутки на маленьких экранах — соблюдай ограничения:
Только вертикальный скролл, никакого горизонтального
Инерционная прокрутка отключена или сильно ограничена — контент не должен «улетать» от одного свайпа. Автоматическая прокрутка запрещена полностью.
Если скролл неизбежен — например, список из четырёх адресов иногда требует небольшой прокрутки на маленьких экранах — соблюдай ограничения:
Только вертикальный скролл, никакого горизонтального
Инерционная прокрутка отключена или сильно ограничена — контент не должен «улетать» от одного свайпа. Автоматическая прокрутка запрещена полностью.
Там где скролл всё же присутствует — дублируй его кнопками «вверх» и «вниз». Большие кнопки со стрелками по бокам или снизу списка позволяют листать без свайпа — одним точным нажатием большого пальца, не глядя на экран.
Это особенно важно в пассивном режиме: телефон в держателе, точный свайп неудобен, а нажать большую кнопку — легко
Это особенно важно в пассивном режиме: телефон в держателе, точный свайп неудобен, а нажать большую кнопку — легко
Дублирование скролла кнопками
Модальное окно — это экран, который блокирует всё остальное и требует ответа перед продолжением. В режиме движения это опасная конструкция: водитель вынужден разобраться в диалоге, прежде чем вернуться к навигации.
Модальные окна и диалоги
Правила для модальных окон в режиме движения
- Максимум два варианта действия — «Да» и «Нет», «Принять» и «Отклонить». Никаких трёх кнопок, никаких сложных выборов.
- Текст диалога — одно короткое предложение. Если для понимания диалога нужно читать — это не диалог для режима движения.
- Всегда есть возможность закрыть диалог без выбора — крестик или кнопка «Позже». Водитель не должен быть заблокирован в диалоге.
- Лучшее решение — вообще не показывать диалоги в режиме движения, если они не критичны. Отложи до остановки.
Главный экран — это то, что водитель видит большую часть поездки. Он должен быть спроектирован как приборная панель: минимум элементов, максимум ясности, одно главное действие.
Главный экран в режиме движения
Что должно быть на главном экране в режиме движения
- Один главный информационный блок: что происходит прямо сейчас
- Одно основное действие: что сделать дальше
- Максимум одно второстепенное действие: что может понадобиться
Чего не должно быть
- Лент, карусели, обновляющегося контента
- Рекламы и промо
- Элементов, которые ведут в глубокую навигацию
- Всего, что не нужно водителю прямо сейчас
Когда машина останавливается и интерфейс переходит в полный режим — и обратно — навигационный контекст должен сохраняться.
Водитель был на экране выбора маршрута, тронулся — интерфейс переключился в режим движения. Остановился — вернулся на тот же экран выбора, где был. Ничего не сбросилось, ничего не потерялось.
Это важно, потому что иначе водитель будет намеренно тормозить, чтобы сделать что‑то в полном режиме, а потом снова искать своё место в интерфейсе — лишние взаимодействия, лишнее отвлечение.
Водитель был на экране выбора маршрута, тронулся — интерфейс переключился в режим движения. Остановился — вернулся на тот же экран выбора, где был. Ничего не сбросилось, ничего не потерялось.
Это важно, потому что иначе водитель будет намеренно тормозить, чтобы сделать что‑то в полном режиме, а потом снова искать своё место в интерфейсе — лишние взаимодействия, лишнее отвлечение.
Переход между режимами: навигационный контекст сохраняется
В пассивном режиме навигация должна быть максимально простой — в идеале водитель вообще не переходит между экранами во время движения. Главный экран показывает всё необходимое, и этого достаточно до следующей остановки.
Скролл в пассивном режиме особенно нежелателен: телефон далеко, свайп неудобен. Если без скролла не обойтись — обязательно дублируй кнопками.
В активном режиме один дополнительный уровень навигации допустим и удобен: водитель держит телефон в руке, нажать кнопку перехода легко. Но правило двух уровней остаётся в силе — глубже двух уровней не идём даже в активном режиме.
Скролл в пассивном режиме особенно нежелателен: телефон далеко, свайп неудобен. Если без скролла не обойтись — обязательно дублируй кнопками.
В активном режиме один дополнительный уровень навигации допустим и удобен: водитель держит телефон в руке, нажать кнопку перехода легко. Но правило двух уровней остаётся в силе — глубже двух уровней не идём даже в активном режиме.
Пассивный и активный режим
«Мы спрятали второстепенные функции за свайпом»
Свайп как навигационный жест в режиме движения — это скрытый функционал, который водитель не найдёт за быстрый взгляд. Используй явные кнопки для всех действий, доступных при движении.
«У нас сложный интерфейс, просто немного урежем для движения»
Режим движения не проектируется как урезанная версия полного интерфейса. Он проектируется с нуля, исходя из минимального набора задач. Потом полный режим расширяет этот минимум, а не наоборот.
«Диалог появляется редко, водитель успеет разобраться»
Диалог появляется именно тогда, когда водитель меньше всего готов с ним разбираться. Если диалог не критичный — откладывай его до остановки. Если критичный — одно предложение и две кнопки, без вариантов.
«Горизонтальный скролл помогает уместить больше вариантов»
Горизонтальный скролл — один из самых неудобных жестов при тряске и одной рукой. В режиме движения его нет. Если вариантов много — показывай максимум четыре, остальное на стоянке.
Частые ошибки
Мы собираем пользовательские данные для улучшения работы сайта. Используя сайт, вы подтверждаете согласие на их обработку