Слой 1

«Водитель должен увидеть это с первого взгляда»

Этот слой про одно: может ли водитель считать информацию с экрана быстро, без напряжения и в любых условиях — будь то ночь, яркое солнце или тряска на плохой дороге. Здесь нет ничего про логику сценариев или количество шагов — только про то, как выглядит интерфейс: размер текста, контраст, шрифты, цвета и анимации.

Визуальные параметры

Телефон стоит в держателе на приборке или лобовом стекле. Расстояние от глаз до экрана — около 55–70 см. Интерфейс работает как дорожный знак: водитель смотрит мельком и должен мгновенно считать нужное.

Пассивный режим

Водитель взаимодействует с телефоном: нажимает на экран в держателе, наклонившись к нему, или держит телефон в руке. Расстояние от глаз — около 30–40 см, примерно как при обычном использовании смартфона. Но водитель всё ещё за рулём, и максимум его внимания должно остаться на дороге.

Активный режим

Общие принципы для обоих режимов

Когда человек едет за рулём, он не читает интерфейс так, как читает статью или переписку. Он бросает быстрый взгляд — примерно на секунду, часто меньше — и должен за это время понять, что написано на экране.

Это принципиально другой режим восприятия. И обычный шрифт — тот, что отлично выглядит на макбуке и удобно читается в метро — в машине просто не работает. Не потому что он плохой, а потому что он спроектирован под другой сценарий.

Размер текста

Водитель не читает — он считывает

Откуда берутся цифры

Стандарты ISO и ГОСТ задают размер текста через понятие «угловой размер символа». Звучит технически, но идея простая.

Представь: ты смотришь на букву. Чем дальше она от тебя — тем меньше она кажется, даже если физически не изменилась. Угловой размер — это то, какой угол занимает буква в твоём поле зрения. Именно этот угол определяет, насколько легко её прочитать за быстрый взгляд

Угловой размер символа

Стандарт говорит: буква должна занимать не меньше определённого угла, чтобы водитель успел её распознать. Из этого угла и расстояния до экрана получается конкретная физическая высота буквы. Из высоты — конкретные цифры в пикселях.

Поэтому правильные минимумы зависят от того, в каком режиме используется телефон.

Расстояние от глаз: ~60 см.

На таком расстоянии буква обычного мобильного приложения (16 pt) занимает слишком маленький угол — водитель не успевает её считать за долю секунды. Нужен принципиально другой масштаб.

Пассивный режим — телефон в держателе, водитель только смотрит

Важная оговорка: активное взаимодействие за рулём — это уже вопрос Слоя 2, то есть не только про размер текста, но и про то, можно ли вообще делать это действие во время движения. Слой 1 только отвечает на вопрос «видно ли это», но не на вопрос «уместно ли это здесь».

Частые ошибки

Мы уже разобрались, что текст в водительском интерфейсе должен быть крупнее обычного. Но размер — только половина задачи. Можно взять правильный кегль и всё равно получить нечитаемый интерфейс, если шрифт слишком тонкий, слишком узкий или слишком декоративный.

Водитель считывает текст боковым зрением, при тряске, иногда в движении взгляда. В таких условиях мозг не «читает» буквы по одной — он распознаёт форму слова целиком, как силуэт. Шрифты, которые хорошо работают в этом режиме, имеют чёткие, предсказуемые формы букв, достаточную толщину штрихов и комфортные пропорции.

Шрифт и начертания

Даже правильный размер не спасёт, если шрифт выбран неверно

Стандарт задаёт диапазон: толщина штриха буквы должна составлять 10–20% от её высоты. Звучит технически, но на практике это легко проверить на глаз и по названию начертания.

Толщина штриха: почему Light убивает читаемость

Стандарт также ограничивает пропорции: ширина буквы должна составлять 65–80% от её высоты. Это означает запрет на два популярных типографических приёма.

Пропорции букв: Condensed и Expanded под запретом

В погоне за компактностью дизайнеры иногда уменьшают letter-spacing, чтобы уместить больше текста. В водительском интерфейсе это запрещено.

Есть простой принцип из классической типографики: расстояние между буквами должно быть пропорционально толщине штриха. Слишком мало — буквы слипаются. Слишком много — слово распадается на отдельные символы, и мозг не может считать его за один взгляд. При быстром взгляде водитель воспринимает слово как силуэт, а не читает букву за буквой — если интервал нарушен, силуэт ломается.

Межбуквенный интервал

Толщина штриха у Regular-начертания — примерно 10–12% от высоты заглавной буквы. Оптимальный интервал равен примерно одной толщине штриха. В Figma это проще всего выражать в процентах:

Межбуквенный интервал

Логика такая: чем крупнее текст, тем меньше нужно дополнительного интервала — белое пространство между буквами и так визуально увеличивается вместе с размером. Для мелкого текста небольшое увеличение интервала компенсирует тесноту.

Лучший выбор для водительского интерфейса — интерфейсные шрифты без засечек. Они спроектированы для максимальной читаемости на экранах, хорошо оптимизированы для рендеринга.

Какие шрифты использовать

Для шрифтов разница между режимами менее драматична, чем для размера текста или контраста — запрет на Light и Condensed действует в обоих случаях. Но есть один нюанс.

В пассивном режиме телефон дальше от глаз, изображение мельче, тряска сильнее влияет на восприятие. Здесь особенно важно не экспериментировать: только проверенные системные шрифты, только Regular и Medium, никаких декоративных решений.

В активном режиме телефон ближе, условия немного мягче. Здесь допустимо чуть больше типографической свободы — например, SemiBold для акцентов или чуть нестандартный, но хорошо читаемый шрифт. Но базовые правила про пропорции и толщину штриха остаются в силе.

Пассивный и активный режим: где разница

Частые ошибки

Контраст — это разница между яркостью информации и яркостью фона. Чем выше разница — тем легче глазу. В обычном приложении дизайнер может позволить себе мягкие, приглушённые сочетания: серый текст на светло-сером фоне, пастельные акценты, тонкие разделители. Это выглядит современно и практически не бьёт по UX.

В машине такие решения становятся опасными.

Контраст

Условия освещённости за рулём меняются постоянно и непредсказуемо: тоннель сменяется ярким солнцем, тень от дерева мелькает каждую секунду, телефон ловит блики от лобового стекла. Интерфейс, который отлично читается в помещении, на солнечной трассе может превратиться в серое пятно

Интерфейс должен быть читаемым, даже когда в глаза бьёт солнце

Контраст измеряется как соотношение яркости двух цветов. Например, 4.5:1 означает, что один цвет в 4,5 раза ярче другого.

Измерять это вручную не нужно. Например, для Figma есть готовые инструменты:

Все эти инструменты используют стандарт WCAG — международную шкалу доступности. Мы опираемся на неё, потому что она хорошо откалибрована, легко проверяется и понятна любому дизайнеру.

Как измерять контраст

Прежде чем говорить про условия освещённости — запомни три базовых уровня, которые действуют всегда:

Базовые уровни контраста

Это нижняя граница при идеальных условиях. Дальше — про то, почему в реальных условиях часто нужно больше.

Здесь важно вернуться к разделению на два режима.

Пассивный и активный режим меняют требования

Телефон стоит в держателе на приборной панели или лобовом стекле. Если солнечный свет бьёт прямо в экран — водитель ничего не может с этим сделать, не отвлекаясь. Чтобы переставить или повернуть телефон, нужно убрать руку с руля, потянуться, отвести взгляд. Это уже опасный манёвр

Пассивный режим

Водитель держит телефон в руке. Если солнце бьёт в экран или создаётся неудобный блик — он инстинктивно чуть повернёт телефон, уйдёт от блика. Ровно так же, как мы все делаем в обычной жизни. Это почти не отвлекает от дороги

Активный режим

Вывод простой: в пассивном режиме приложение само должно справляться с любыми условиями освещённости. Водитель не сможет помочь. Поэтому требования к контрасту здесь жёстче.

Требования по условиям освещённости

Обрати внимание: пассивный режим на ярком солнце и ночью требует одинаково высокого контраста — 7:1. Это не случайно. Ночью экран сам по себе становится источником сильного света и может слепить водителя или давать яркий засвет на лобовом стекле. Днём на солнце — экран наоборот «гасится» внешним светом. Оба крайних условия требуют максимального запаса.

Частые ошибки

В обычном приложении тёмная тема — это опция. Пользователь включает её в настройках, если нравится, или не включает совсем. Это вкусовщина.

«Тема — это не про эстетику, это про то, чтобы не ослепить водителя»

В водительском приложении тёмная и светлая тема — это два обязательных состояния интерфейса, каждое из которых оптимизировано под своё условие освещённости. Не «тёмная для тех, кто любит тёмное», а «тёмная ночью, потому что иначе экран ослепляет водителя и отражается в лобовом стекле».

Ночной и дневной режимы

Почему режимы отображения — это вопрос безопасности

Когда какой режим нужен

Ночью яркий светлый экран становится источником сильного света в тёмном салоне. Это создаёт две проблемы одновременно: экран слепит водителя и даёт заметный засвет на лобовом стекле, который мешает видеть дорогу. Тёмный фон со светлым текстом решает обе

Тёмный режим — ночью и в сумерках

Днём в салоне достаточно внешнего освещения, и тёмный экран не даёт преимущества. Светлый фон лучше работает против бликов — отражение светлого экрана на стекле менее заметно, чем отражение тёмного с яркими элементами

Светлый режим — днём при рассеянном свете

И снова разница между режимами принципиальна.

В активном режиме водитель держит телефон в руке. Если тема неудобна — он может отвести телефон от источника света, прикрыть экран ладонью, изменить угол. Он физически управляет ситуацией.

В пассивном режиме телефон стоит в держателе. Водитель не может изменить угол, не может прикрыть экран. Если тема не соответствует условиям — интерфейс просто перестаёт работать нормально, и водитель не в состоянии это исправить без опасного манёвра.

Поэтому для пассивного режима автоматическое переключение тем — это не удобная фича, это обязательное требование.

Пассивный и активный режим: кто управляет ситуацией

Переключение должно работать автоматически — без участия водителя

Тема должна переключаться автоматически — по одному из сигналов:

Переключение должно быть плавным, но быстрым — резкая смена темы во время движения сама по себе отвлекает. Анимация перехода не дольше 300–400 мс.

Оба режима должны проектироваться как полноценные, самостоятельные версии интерфейса — не как копии друг друга.

Требования к каждой теме

Тёмная тема

Светлая тема

Частые ошибки

В обычном приложении анимация делает интерфейс живым: кнопки пружинят, экраны плавно сменяют друг друга, элементы появляются с лёгким fade-in. Это создаёт ощущение качества и помогает пользователю ориентироваться.

«Интерфейс водителя должен быть таким же стабильным, как дорожный знак»

Анимации и мигание

Почему анимация в машине — это не про красоту

Движущийся элемент на экране привлекает внимание — это физиология, периферийное зрение реагирует на движение автоматически. Если что‑то на экране двигается, мозг хочет посмотреть туда

За рулём анимация работает против водителя

Поэтому базовое правило для режима движения: интерфейс статичен. Не «почти статичен», не «анимации короткие», а именно статичен — как дорожный знак.

Что запрещено в режиме движения

Что разрешено

Мигающий элемент — это самый агрессивный способ привлечь внимание. Именно поэтому стандарт разрешает его только в одном случае: когда водителю нужно немедленно отреагировать на опасную ситуацию.

Если что‑то мигает на экране — водитель должен понимать: это не «новое сообщение» и не «акция заканчивается», это что‑то, требующее немедленного действия.

Мигание: только для критической опасности

Параметры допустимого мигания

Здесь разница между режимами минимальна — правила про анимацию одинаково жёсткие в обоих случаях. Но есть нюанс

Пассивный и активный режим

Телефон всегда в поле обзора. Даже небольшая анимация может регулярно «дёргать» внимание на себя

В пассивном режиме любое движение на экране попадает в периферийное зрение водителя постоянно

Но это не повод расслабляться: анимация, которая не даёт сразу считать нужное состояние — это потерянные доли секунды, когда взгляд не на дороге

В активном режиме водитель смотрит на телефон только в момент взаимодействия

Частые ошибки

Следующий слой

Что разрешено, а что нельзя

Можно ли это делать вообще во время движения? Здесь — список запрещённых функций и действий, правило 2 и 12 секунд и принципы, стоящие за каждым экраном

Слой 2