Перейти к содержанию

Адаптивный дизайн туристских страниц

1. Цели

  • Обеспечить удобную работу туриста на любых экранах (от 320px до десктопа).
  • Исключить «заезды» блоков, горизонтальный скролл и визуальный шум.
  • Сделать управление всеми услугами (отели, туры, трансферы, рестораны, ски‑пассы и т.д.) максимально простым, предсказуемым и одинаковым по паттернам.

2. Общие принципы адаптивного интерфейса

  • Mobile‑first: верстаем и проверяем сначала экраны 320–414px, затем планшет, затем десктоп.
  • Брейкпоинты (ориентировочно):
  • Мобильные: < 640px — одна колонка, минимум отвлекающих элементов.
  • Планшет: 640–1024px — возможны 2 колонки, но крупные интерактивные элементы.
  • Десктоп: > 1024px — 2–3 колонки, больше воздуха, дополнительные панели.
  • Сетка и отступы:
  • Единый горизонтальный паддинг контейнера (например, 16px на мобайле, 24px на планшете, 32px+ на десктопе).
  • Вертикальные отступы между блоками не менее 12–16px.
  • Ограничение максимальной ширины контента (например, 1200–1280px) для предотвращения «растягивания» строк.
  • Текст и кликабельность:
  • Минимальный размер шрифта: 14px на мобайле, основные элементы 16px+.
  • Зоны нажатия кнопок и интерактивных элементов: высота не менее 44px.
  • Обязательный перенос длинных текстов (word-break, line-clamp) вместо вылета за экран.
  • Карточки услуг:
  • На мобайле — одна карточка в ряд, full‑width.
  • На планшете — 2 карточки в ряд.
  • На десктопе — 3–4 карточки, но с контролем по высоте и выравниванию.
  • Формы бронирования:
  • На мобайле — только одна колонка полей.
  • На десктопе допускается 2 колонки, но логически сгруппированные (гость / поездка / оплата).
  • Важные CTA («Забронировать», «Оплатить») всегда остаются в зоне видимости (фикс. панель, закрепление снизу).
  • Навигация:
  • Для туриста — единый паттерн: верхний заголовок страницы + назад, снизу/сверху — понятные CTA.
  • Ясная иерархия заголовков (H1 — название страницы, H2 — секции).

3. Карта туристских страниц (по маршрутам)

Основные маршруты из TouristRoutes: - Старт и обзор: /tourist/welcome, /tourist/dashboard. - Проживание: /tourist/hotels, /tourist/new-hotels, /tourist/hotels/:id, /tourist/book/:hotelId/:roomTypeId, orders/hotel/:id. - Туры и экскурсии: /tourist/tours, /tourist/tours/:id, /tourist/excursions/:id, /tourist/top-tours, orders/tour/:id. - Ски‑пассы: /tourist/ski-pass, /tourist/ski-passes/purchase, /tourist/ski-passes/payment-result, /tourist/ski-passes/my-passes, orders/skipass/:id. - Трансферы: /tourist/transfers, /tourist/transfers/book/:scheduleId, /tourist/transfers/:id, bookings/transfers, orders/transfer/:id. - Рестораны: /tourist/restaurants, /tourist/restaurants/:id, /tourist/restaurants/:id/menu, /tourist/restaurants/:id/booking, bookings/restaurants, orders/restaurant/:id. - Инструкторы: /tourist/instructors, /tourist/instructors/:id, /tourist/instructors/:id/book, orders/instructor/:id. - История бронирований и платежей: /tourist/booking-history, /tourist/bookings/history, /tourist/payment-history, /tourist/orders. - Кошелёк и финансы: /tourist/wallet, /tourist/insurance, /tourist/payment-success. - Контент и вовлечение: /tourist/events, /tourist/events/:id, /tourist/news, /tourist/news/:id, /tourist/stories, /tourist/stories/:storyId, /tourist/webcams, /tourist/promotions, /tourist/promotions/:id, /tourist/weather. - Поддержка и коммуникации: /tourist/support, /tourist/chats, /tourist/chats/new, /tourist/chats/:chatId, /tourist/chats/:chatId/info, /tourist/emergency. - Профиль и настройки: маршруты /tourist/profile*, /tourist/settings*, /tourist/subscriptions, /tourist/profile/subscribe, /tourist/profile/password, /tourist/role-management*. - Избранное: /tourist/favorites, /tourist/favorites/hotels, /tourist/favorites/tours.

Ниже — пошаговый план адаптации по группам страниц.

4. Стартовые страницы: Welcome и Dashboard

Маршруты: /tourist/welcome, /tourist/dashboard.

Цель

  • Мягкий вход в систему, обзор ключевых возможностей, быстрый переход к основным услугам.

Шаги адаптива

  1. Мобильный (320–414px):
  2. Оставить один главный CTA (например, «Найти жильё») и 2–3 вторичных (туры, ски‑пассы, трансферы) в виде вертикального списка больших кнопок/карточек.
  3. Карточки/баннеры промо сократить по высоте, убрать второстепенные тексты или свернуть под «Показать подробнее».
  4. Важные виджеты (погода, вебкамы) разместить ниже основного сценария бронирования.
  5. Планшет:
  6. Разделить экран на 2 колонки: слева — приветствие и ключевой CTA, справа — блоки статистики/рекомендаций.
  7. Сохранять крупные кнопки с минимальной высотой 48–56px.
  8. Десктоп:
  9. Ввести трёхколоночную структуру:
    • левая — навигационные блоки (услуги),
    • центр — выбранный сценарий (например, форма быстрого поиска),
    • правая — рекомендации, акции.
  10. Общее:
  11. Проверить отсутствие горизонтального скролла на всех брейкпоинтах.
  12. Ограничить длину текстов в заголовках и использовать line-clamp для описаний.

5. Проживание: список и детали отелей

Маршруты: /tourist/hotels, /tourist/new-hotels, /tourist/hotels/:id, /tourist/book/:hotelId/:roomTypeId, orders/hotel/:id.

Цели

  • Быстрый выбор отеля и номера, понятное сравнение вариантов, удобное бронирование с телефона.

Шаги адаптива

  1. Список отелей:
  2. На мобайле — одна карточка в ряд, картинка сверху, затем название, рейтинг, цена и CTA («Выбрать» / «Подробнее»).
  3. Фильтры и сортировка вынести в выезжающую панель/дно‑sheet, а не держать постоянно сверху.
  4. На планшете — 2 колонки карточек, фильтры сверху в одной строке (иконки + короткие подписи).
  5. Детали отеля:
  6. Галерея изображений — горизонтальный скролл/свайп, а не сетка, чтобы не ломать экран.
  7. Блоки «описание», «удобства», «расположение», «отзывы» оформить как табы или аккордеоны.
  8. На мобайле CTA «Выбрать номер» вынести в фиксированную нижнюю панель.
  9. Выбор номера и бронирование (/book/:hotelId/:roomTypeId):
  10. Сначала краткий резюме (название отеля, даты, гости), ниже — форма гостя в одной колонке.
  11. Разделить форму на секции: данные гостя, детали поездки, пожелания.
  12. На десктопе — двухколоночная компоновка: слева форма, справа — боковая панель с итоговой ценой и условиями.
  13. Детали бронирования (orders/hotel/:id):
  14. На мобайле — карточка с основными данными (даты, гости, статус, сумма) + кнопки «Показать маршрут», «Связаться с отелем», «Отменить».
  15. На десктопе — таблица/двухколоночный layout, но без скрытия критичных данных на малых экранах.

6. Туры и экскурсии

Маршруты: /tourist/tours, /tourist/tours/:id, /tourist/excursions/:id, /tourist/top-tours, orders/tour/:id.

Цели

  • Простой выбор туров/экскурсий, быстрый просмотр программы, цены и даты.

Шаги адаптива

  1. Каталог туров:
  2. Карточки во всю ширину на мобайле с ключевой информацией: название, локация, дата/диапазон дат, цена от.
  3. Фильтры по датам/сложности/типу туров — в модальном окне, вызываемом кнопкой «Фильтры».
  4. Детали тура / экскурсии:
  5. Шапка: изображение, название, цена, CTA «Забронировать».
  6. Программа и детали — в виде аккордеона (по дням) вместо длинного полотна текста.
  7. На планшете и десктопе — две колонки: слева программа, справа — блок бронирования и ключевая информация.
  8. Детали бронирования тура (orders/tour/:id):
  9. На мобайле — вертикальный список блоков: общая информация, статус, участники, платежи, контакты.
  10. Кнопки действия (повторить тур, написать организатору) — внизу либо в фиксированной панели.

7. Ски‑пассы

Маршруты: /tourist/ski-pass, /tourist/ski-passes/purchase, /tourist/ski-passes/payment-result, /tourist/ski-passes/my-passes, orders/skipass/:id.

Цели

  • Быстрое и понятное оформление ски‑пасса, хранение и предъявление на склоне с телефона.

Шаги адаптива

  1. Список и выбор ски‑пасса:
  2. На мобайле — список тарифов в виде карточек, каждая карточка кликабельна целиком.
  3. Важные параметры (кол-во дней, тип, цена) выделить крупным шрифтом.
  4. Покупка ски‑пасса:
  5. Форма покупки в одной колонке: выбор тарифа, даты, данные туриста, выбор оплаты.
  6. Итоговая сумма и кнопка «Оплатить» — в фиксированном нижнем блоке.
  7. Мои ски‑пассы:
  8. Каждая запись — «карта» для предъявления: QR‑код, срок действия, имя владельца.
  9. На мобайле — фокус на одном пассе (карточка во всю высоту), с возможностью свайпа между пассами.

8. Трансферы

Маршруты: /tourist/transfers, /tourist/transfers/book/:scheduleId, /tourist/transfers/:id, bookings/transfers, orders/transfer/:id.

Цели

  • Удобный выбор рейса/маршрута и управление трансфером (изменение, отмена).

Шаги адаптива

  1. Каталог трансферов:
  2. На мобайле — список по датам/времени, каждая строка или карточка содержит маршрут, время отправления, цену.
  3. Фильтрация по дате и количеству пассажиров — через компактную панель сверху или модальное окно.
  4. Бронирование трансфера:
  5. Форма в одной колонке: время, пассажиры, контактные данные, способ оплаты.
  6. На десктопе — отдельный блок справа с деталями маршрута и подсчётом цены.
  7. Детали трансфера:
  8. Вверху показать маршрут и время, ниже — статус и действия: «Открыть в карте», «Связаться с водителем/службой», «Отменить».

9. Рестораны

Маршруты: /tourist/restaurants, /tourist/restaurants/:id, /tourist/restaurants/:id/menu, /tourist/restaurants/:id/booking, bookings/restaurants, orders/restaurant/:id.

Цели

  • Просмотр ресторанов, меню и бронирование стола с минимальным количеством шагов.

Шаги адаптива

  1. Список ресторанов:
  2. На мобайле — карточки с картинкой, названием, типом кухни и средней ценой.
  3. Фильтры (кухня, рейтинг, расстояние) — в модальном окне, а не в нескольких строках сверху.
  4. Детали ресторана и меню:
  5. На мобайле — табы «О ресторане», «Меню», «Отзывы» вместо длинной прокрутки.
  6. Пункты меню — список с краткими карточками, кнопка «Добавить к заказу» крупная, не менее 44px.
  7. Бронирование стола:
  8. Форма одной колонкой, поля даты и времени — с крупными touch‑friendly контролами.
  9. На десктопе таблицу выбора столов можно вывести в отдельную панель/таблицу справа.

10. Инструкторы

Маршруты: /tourist/instructors, /tourist/instructors/:id, /tourist/instructors/:id/book, orders/instructor/:id.

Цели

  • Подбор подходящего инструктора и запись на обучение без сложных форм.

Шаги адаптива

  1. Каталог инструкторов:
  2. На мобайле — карточки с фото, именем, специализацией, уровнем, ценой.
  3. Сортировка и фильтры по уровню и опыту — через выезжающую панель.
  4. Профиль инструктора:
  5. Сверху — фото, имя, рейтинг и CTA «Записаться».
  6. Ниже — расписание в виде списка слотов, которые легко нажать пальцем.
  7. Бронирование:
  8. Один экран с выбором даты/времени + данные туриста.
  9. На десктопе можно разделить на две колонки: слева календарь/слоты, справа форма.

11. История бронирований и платежей

Маршруты: /tourist/booking-history, /tourist/bookings/history, /tourist/payment-history, /tourist/orders, /tourist/orders/*.

Цели

  • Быстро найти нужное бронирование или платеж и перейти к деталям/повторному действию.

Шаги адаптива

  1. Списки:
  2. На мобайле — список карточек с типом услуги (иконка), датой, статусом и суммой.
  3. Фильтры по типу услуги и статусу — компактный горизонтальный скролл по тегам/чипам.
  4. Детали:
  5. Структура такая же, как на соответствующих деталях услуги, но с акцентом на платежи и статус.
  6. Кнопки «Повторить бронирование», «Скачать чек» — внизу или в выделенном блоке действий.

12. Избранное

Маршруты: /tourist/favorites, /tourist/favorites/hotels, /tourist/favorites/tours.

Цели

  • База сохранённых вариантов, к которым турист возвращается.

Шаги адаптива

  1. Общий список избранного:
  2. На мобайле — вертикальные карточки с типом услуги и основными данными.
  3. Возможность быстро перейти в соответствующий каталог или к деталям.
  4. Избранные отели/туры:
  5. Использовать те же карточки, что в каталогах, чтобы не плодить разные паттерны.
  6. На планшете и десктопе — сетка 2–3 карточки в ряд.

13. Контент и вовлечение

Маршруты: /tourist/events*, /tourist/news*, /tourist/stories*, /tourist/webcams, /tourist/promotions*, /tourist/weather.

Цели

  • Дать полезный и вдохновляющий контент без перегрузки интерфейса.

Шаги адаптива

  1. Списки контента:
  2. На мобайле — лента карточек с изображением и кратким текстом.
  3. Ограничить длину превью текста, использовать line-clamp.
  4. Детальные страницы:
  5. Оставить широкий колонкой текст с комфортной шириной строки (60–70 символов).
  6. Изображения адаптировать по ширине, избегать фиксированных высот.
  7. Webcams / погода:
  8. Видео/камеры — в 1 колонку на мобайле, 2–3 колонки на десктопе.
  9. Все элементы управления (пауза, разворот) должны быть доступны пальцем.

14. Поддержка и чаты

Маршруты: /tourist/support, /tourist/chats, /tourist/chats/new, /tourist/chats/:chatId, /tourist/chats/:chatId/info, /tourist/emergency.

Цели

  • Дать туристу быстрый доступ к помощи, не перегружая интерфейс.

Шаги адаптива

  1. Страница поддержки:
  2. На мобайле — список крупных кнопок: чат, телефон, FAQ, экстренная помощь.
  3. Экстренные контакты вынести наверх и выделить цветом.
  4. Чаты:
  5. Список чатов — одна колонка, каждая строка кликабельна.
  6. Экран чата — компоновка мессенджера, поле ввода закрепить внизу, список сообщений занимает всю доступную высоту.
  7. Экстренная страница:
  8. Только критичная информация: телефоны, кнопки звонка, карта/геолокация.
  9. Крупные элементы, минимум текста.

15. Профиль и настройки

Маршруты: /tourist/profile*, /tourist/settings*, /tourist/subscriptions, /tourist/profile/subscribe, /tourist/profile/password, /tourist/role-management*.

Цели

  • Управление личными данными, доступами и подписками без сложной навигации.

Шаги адаптива

  1. Профиль:
  2. На мобайле — вертикальные блоки: личные данные, бронирования, подписки, безопасность.
  3. Для редактирования — отдельные экраны, не пытаться уместить все формы на одном.
  4. Настройки:
  5. Список разделов в виде крупного списочного меню (язык/часовой пояс, безопасность, о приложении, поддержка).
  6. На десктопе можно использовать layout «меню слева — содержимое справа».
  7. Безопасность и пароль:
  8. Формы с минимальным количеством полей, понятными подсказками.
  9. На мобайле — одна колонка, кнопка «Сохранить» закреплена в нижней части экрана.

16. Кошелёк и финансы

Маршруты: /tourist/wallet, /tourist/payment-history, /tourist/insurance, /tourist/payment-success.

Цели

  • Понятное отображение баланса, операций и статусов оплат.

Шаги адаптива

  1. Кошелёк:
  2. На мобайле — крупный блок баланса сверху, ниже — список последних операций.
  3. Кнопки пополнения/вывода — крупные, на всю ширину.
  4. История оплат:
  5. Список операций, каждая строка: дата, тип услуги, сумма, статус.
  6. Фильтры по дате и статусу — модальное окно или компактные чипы.
  7. Страховка и результаты оплат:
  8. Понятный статус с цветовым кодированием (успешно, ожидает, ошибка).
  9. На мобайле — минимум текста, главное сообщение + CTA (вернуться на главную, посмотреть заказ).

17. Проверка и тестирование адаптива

Для всех перечисленных групп страниц: 1. Проверить отображение на ключевых разрешениях: 320×568, 360×640, 390×844, 768×1024, 1280×800+. 2. Убедиться в отсутствии горизонтального скролла и «заезжающих» блоков: - прокрутка только вертикальная; - длинные тексты корректно переносятся или обрезаются с многоточием. 3. Проверить кликабельность: - все основные действия доступны без масштабирования; - CTA находятся в видимой области даже при открытой клавиатуре. 4. Прогнать полноценные пользовательские сценарии на мобайле: - поиск и бронирование отеля; - выбор и покупка тура; - бронирование трансфера; - запись в ресторан и к инструктору; - просмотр моих заказов и ски‑пассов; - обращение в поддержку и открытие экстренной страницы.

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