Город рассказывает. Интерфейс помогает слушать.
У городского тура есть маршрут. У интерфейса - десятки переходов, возвратов и состояний. Я связала их в UX-сценарии и дизайн, который поддерживает прогулку на каждом шаге.
Человексмотритна город.Интерфейсдолженэто учитывать.
Во время экскурсии внимание постоянно переключается: с улицы на карту, с карты на видео, с истории обратно на дорогу. Сложность V Tour была в этих переходах. Красивых отдельных экранов для такого продукта недостаточно.
Я получила исходную архитектуру и структуру экранов. Моя часть работы - детализировать сценарии, проработать состояния и собрать визуальную систему. В центре проектирования был вопрос: что человек должен увидеть и сделать, чтобы продолжить прогулку после каждого переключения?
При разборе входа я заметила пробел: если новый пользователь откроет My Tours без покупок, он окажется в пустой библиотеке. От этого зависела архитектура: нужен ли продукту собственный каталог или люди приходят на конкретный тур?
Я уточнила сценарий и зафиксировала границу MVP: вход по ссылке на гида или тур, My Tours - личная библиотека. Это определило роли трех экранов. Профиль знакомит с рассказчиком, страница тура помогает оценить прогулку, библиотека возвращает к доступному контенту.
Начать с доверия
В профиле я объединила личность гида и его туры: посетитель знакомится с человеком и сразу видит, что он предлагает.
Дать основания для выбора
На странице тура собрала описание, длительность, фотографии и действие. Они отвечают на вопросы о прогулке до покупки.
Отделить выбор от возвращения
My Tours получила роль личной библиотеки. Купленный и сохраненный контент не смешивается с общим поиском новых туров.
История звучит. Маршрут остается перед глазами.
В требованиях были два входа в дорожное аудио: нажатие на отрезок маршрута и Next после медиа точки. Я свела их к одному состоянию интерфейса, чтобы способ запуска не менял правила управления.
Сложность была в совместной работе карты и плеера. В макете управление занимает нижнюю часть, маршрут остается видимым. Я также описала выход: закрытие останавливает запись и возвращает обычную карту. Проработан весь переход, включая то, что произойдет после прослушивания.
В медиасценарии легко продумать открытие и упустить обратный путь. Если после видео человек получает исходную карту или начало списка, ему приходится заново искать место, на котором он остановился.
Поэтому я отдельно описала сохранение контекста: положения и масштаба карты, прокрутки списка, прогресса тура. Карта и список используют общие статусы. Так два представления маршрута связываются не только внешне, но и правилами поведения.
Основной сценарий показывает, как продукт работает, когда все хорошо. Но для прогулки по городу важны и прерывания. Я включила их в проектирование, чтобы реализация не заканчивалась на счастливом пути.
Разделила сбой загрузки, отсутствие сети и пустую библиотеку. Внешне все три ситуации могут выглядеть как отсутствие содержимого, но требуют разных сообщений и действий.
Загрузка не удалась
Предусмотрела понятное сообщение и повторную попытку. Человек видит, что содержимое не загрузилось, и получает действие вместо необъяснимого пустого экрана.
Связь прервалась
Предусмотрела отдельное состояние сети. Оно объясняет, почему содержимое недоступно: пользователю не приходится воспринимать остановку как собственную ошибку.
Пока нет туров
Отделила пустую библиотеку от технического сбоя. Здесь человеку нужно объяснение состояния аккаунта, а не предложение бесконечно повторять загрузку.
Для входа я предложила разделить email и код подтверждения. Сначала человек отправляет адрес, затем работает только с кодом. Так на каждом экране есть одна текущая задача, а состояния отправки и проверки не конкурируют за внимание.
Это решение я объяснила через последовательность действий. С тем же подходом проработала установку PWA: знакомство с форматом приложения должно продолжать исходный сценарий, а возможность остаться в браузере - сохранять путь к туру.
Один плеер встречается в разных сценариях. У точки маршрута есть несколько статусов. Кнопки проходят через загрузку, фокус и отключение. Если проектировать эти элементы отдельно для каждого экрана, различия начнут появляться там, где их не должно быть.
Я собрала компоненты и варианты состояний в отдельную библиотеку с учетом Tailwind CSS и shadcn/ui. Зеленый акцент, спокойные поверхности и типографика задают визуальную иерархию; компоненты закрепляют ее в повторяемых правилах.
Разделила цвета по назначению: текст, поверхности, действия и состояния маршрута. Это основа для последовательного использования акцентов.
То,что междумакетами,тоженужноспроектировать.
В UX-разделе я связала общую схему, ключевые сценарии и системные состояния. Например, открытие медиа само по себе не отвечает на вопросы, что будет с картой, как закроется плеер и что сохранится после выхода.
Эти переходы я описала отдельно. Такая детализация делает дизайн пригодным для передачи: разработчику не приходится восстанавливать логику по расположению кнопок или самостоятельно решать, какой экран следует за текущим.
После согласования UI я собрала интерактивный прототип по user flow. Его задача - сделать переходы и последовательность действий видимыми, а не оставить их только в комментариях.
В записи можно проследить путь от знакомства с гидом до маршрута. Это наглядная часть передачи проекта: она показывает, как отдельные решения должны работать вместе.
В визуальной части я развела два приоритета. Фотографии и медиа передают характер прогулки, а действия и статусы помогают ею управлять. Поэтому выразительность сосредоточена в контенте, а повторяемые элементы остаются спокойными и узнаваемыми.
Мой вклад в V Tour - детальная UX-проработка исходной архитектуры, визуальный дизайн, компоненты со состояниями и интерактивный прототип. В проект вошли не только основные экраны, но и ошибки, прерывания, возврат и первый запуск.
Именно такую работу я беру на себя в продуктовых задачах: нахожу неясности в сценариях и довожу интерфейс до состояния, в котором вид и поведение можно передавать в разработку вместе.
