Explore
Уложитесь в мой дедлайн?
Oops! Something went wrong while submitting the form.
Мы в Purrweb любим выходить из зоны комфорта и брать совершенно новые, нестандартные задачи. Поэтому когда заказчики обратились к нам за разработкой интерфейса для стрелкового тепловизора, не раздумывали: такое мы еще не делали, надо брать!
В кейсе показываем, как справились с дизайном для нетипичного устройства с минимумом элементов управления, как разбирались со сложными сценариями и взяли приемы из геймдизайна, чтобы продукт клиента был непохож на решения конкурентов.
Мы сотрудничали с российским производителем тепловизионных приборов, который разрабатывал новую модель прицела. Устройство пока не вышло на рынок, но интерфейс нужно было спроектировать заранее — так, чтобы он масштабировался вместе с аппаратной частью и был готов к будущим версиям.
🎯 Кстати, а что вообще за тепловизионный прицел? Так называют оптическое устройство для наблюдения и прицеливания в условиях ограниченной видимости (в темноте, при плохом освещении или сложной погоде). Пользователь смотрит в него через окуляр и видит тепловое изображение сцены: именно поверх него и отображается весь интерфейс.
Выглядит это примерно так:
Наша зона ответственности — дизайн интерфейса самого прибора, проработка визуальной системы и пользовательского опыта.
При работе с физическими устройствами важно учитывать ограничения для дизайна. Экран небольшой, изображение искажено оптикой, а внимание пользователя в первую очередь направлено на цель — изучать меню некогда.
Еще одна особенность — это управление. У прицела всего несколько физических элементов: кнопки и энкодер (поворотный элемент управления). При этом внутри устройства довольно сложная логика: есть режимы отображения, цветовые палитры, пристрелка, баллистические профили и настройки связи.
Перед нами стояли такие задачи:
Когда мы начали проект, само устройство находилось в разработке. Параметры экрана, его разрешение и пропорции могли меняться. Значит, интерфейс должен быть готовым к адаптации без переработки логики.
.svg)
Как мы уже говорили, у физических устройств свои особенности. Поэтому на проекте пришлось отталкиваться от некоторых ограничений.
Формат просмотра. Пользователь видит интерфейс через окуляр, почти как через дверной глазок. Даже если на макетах элементы выглядят читаемыми и аккуратными, в самом приборе они могут оказаться слишком мелкими или отображаться некорректно из-за оптических искажений. Поэтому каждый элемент — от текста до иконок — выверяли с учетом восприятия через окуляр. Так удалось приблизить макеты к реальным условиям даже без готового устройства на руках.
Минимальное количество элементов управления. Устройством можно управлять при помощи всего нескольких кнопок. Причем каждая из них должна выполнять сразу несколько функций. Это накладывало ограничения на глубину меню, количество действий и способы навигации — интерфейс не мог быть сложным по определению.
Контекст использования. Прицел используется в моменте: на стрельбище, в поле, в условиях, где нет времени разбираться с интерфейсом. Пользователь не изучает меню, а действует по памяти. И тут важна предсказуемость логики.
Высокая цена ошибки. Ошибка в выборе режима или настройке может повлиять на результат использования прибора. Поэтому в интерфейсе мы делали акцент на однозначность состояний, чёткую иерархию элементов и визуальную сдержанность.
Мы выстраивали навигацию вокруг простых паттернов управления, которые поддерживают несколько ключевых сценариев. Основой навигации стал простой принцип:
🔄 вращение энкодера — перемещение по пунктам меню
▶️ нажатие — выбор действия
⏸️ удержание — возврат на уровень выше или выход
Одна и та же логика применяется во всех разделах интерфейса — пользователю достаточно запомнить базовый паттерн. При этом кнопки используются как контекстные действия. Одиночное нажатие, двойное нажатие и удержание позволяют расширить количество доступных сценариев без увеличения числа физических элементов. Фактически три кнопки превращаются в набор из нескольких логических действий.
В результате получилась навигационная система, которую легко запомнить. Она не требует визуальных подсказок в момент использования. Но при этом легко масштабируется при добавлении новых функций.
Следующим шагом стало проектирование структуры меню. Здесь нам важно было найти баланс: с одной стороны, уместить все необходимые функции, с другой — не превратить интерфейс в сложное многоуровневое дерево, в котором пользователь будет теряться.
Мы выстраивали меню так, чтобы основные действия были доступны быстро, а более редкие настройки не мешали повседневному использованию прибора.
Вся структура делится на несколько ключевых блоков.
Режимы отображения. Они отвечают за то, как именно пользователь видит картинку: уровень детализации, контрастность, поведение изображения на разных дистанциях. Эти настройки используются чаще всего, поэтому вынесли их ближе к верхнему уровню меню и сделали максимально быстрыми в переключении.
Цветовые палитры. Тепловизор работает с температурными градиентами, и выбор палитры напрямую влияет на читаемость сцены. Палитры нам дал клиент, а нашей задачей было встроить их в интерфейс: визуально различимо, с понятными иконками, которые легко считываются через окуляр.
Настройки связи и ролей. Прицел может использоваться не только одним владельцем, но и, например, в аренде. Поэтому мы предусмотрели разные уровни доступа: владелец и гость. В этом же разделе находятся настройки сопряжения с внешними устройствами.
Общая структура меню получилась компактной и логичной: пользователь всегда понимает, где он находится, и может вернуться на шаг назад одним действием. Эта система стала фундаментом для проработки отдельных сценариев — в том числе самого сложного из них.
Иконки. Создали более 120 иконок, чтобы пользователи могли быстрее ориентироваться в интерфейсе.
Режим пристрелки стал самым сложным сценарием во всем интерфейсе. Он используется реже, чем палитры, но требует максимальной точности и пошаговой логики. Поэтому пристрелка выделена в отдельный раздел с собственной структурой и визуальными подсказками.
Здесь цена ошибки особенно высока: пользователь взаимодействует с оружием, настраивает прицел под конкретную дистанцию и ожидает от интерфейса максимальной точности.
Пристрелка используется не в момент охоты, а в более спокойной обстановке — как правило, в тире или на полигоне. Это дало нам немного больше пространства для пошаговой логики, но не сняло основное требование: интерфейс все равно должен оставаться простым.
Мы выстраивали этот сценарий как процесс. Пользователь последовательно:
Ключевой задачей было визуально разделить эти состояния и не допустить путаницы. Все действия сопровождаются понятным контекстом: где пользователь находится, что от него требуется на текущем шаге и какой будет следующий.
Важно и то, что при пристрелке пользователь не двигает прицел физически. Корректировка происходит внутри интерфейса — электронно, через смещение метки. Мы заложили эту логику в дизайн так, чтобы она была очевидна и не вызывала сомнений в том, что именно происходит в момент настройки.
Дополнительно мы учли, что пристрелку можно выполнить вручную, под конкретный патрон, для разных дистанций или с сохранением нескольких профилей.
Интерфейс позволяет работать с этими сценариями последовательно — шаг за шагом, в одном и том же паттерне управления, который пользователь уже знает по другим разделам меню.
В процессе работы менялись параметры экрана: например, разрешение, соотношение сторон и планы по версиям устройства. Сначала рассматривались разные модификации прицела, затем клиент сфокусировался на одной версии, но с другими характеристиками экрана. Все эти изменения напрямую влияли на интерфейс.
Мы проектировали UI как систему, и это позволило:
Часть функций сохранили для будущих версий устройства. Мы прорабатывали экраны и сценарии так, чтобы заказчику было проще развивать продукт дальше и постепенно расширять возможности интерфейса.
Дополнительную сложность создавал тот факт, что у команды не было готового физического прибора для тестирования. Мы работали с параметрами, схемами и ограничениями, которые менялись по мере развития R&D. Поэтому важную роль сыграла постоянная коммуникация с заказчиком и быстрые итерации: обсуждение гипотез, корректировки, повторная проверка решений.
В результате интерфейс оказался устойчивым к изменениям аппаратной части и готовым к дальнейшему развитию вместе с устройством — без необходимости начинать работу заново при каждом обновлении параметров.
В этом проекте мы спроектировали интерфейс для тепловизионного прицела — физического устройства со сложной логикой и заданными рамками по управлению и формату использования.
Мы работали с реальными условиями: маленький экран, оптические искажения, минимальное количество кнопок и высокая цена ошибки. Это потребовало другого подхода к UX — функционального и ориентированного на повторяемые действия.
В результате получился интерфейс, который:
Этот кейс стал для нас примером того, как принципы UX/UI-дизайна работают за пределами привычных экранов — в физическом устройстве, где интерфейс становится частью точного инструмента.
Экспертиза в дизайне
В нашем портфолио — более 550 проектов: от образовательных платформ и маркетплейсов до IoT-продуктов и embedded-интерфейсов. Мы умеем адаптировать дизайн под задачу, среду и аудиторию.
Работаем как единая команда
Встраиваемся в процессы клиента, взаимодействуем с разработчиками, продуктами и инженерами.
Превращаем идеи в продукты
Нам не нужен подробный бриф или техническое задание на 100 страниц. Достаточно идеи — мы поможем ее сформулировать, уточним детали и предложим рабочие дизайн-решения.
Расскажите нам о вашем проекте — мы прикинем сроки, бюджет и план работы.
