Разработка конструктора путешествий, часть 7: пакуйте чемоданы

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

После заполнения пунктов, дат и прочих параметров вашего путешествия (этот интерфейс я описывал ранее) и нажатия на большую кнопку «OK, show me my plan!» вы получаете вот такую страницу:

Рассчитанный маршрут путешествия

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

Описание вашего плана

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

Заголовок плана и его карточка у аккуратного автора будут выглядеть вот так:

Заголовок рассчитанного плана и карточка — так план будет представлен в общем каталоге.

Маршрут

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

Отправляемся из Петербурга в Рейкьявик

Вообще билеты оказались одной из самых объёмных задач на единицу площади — маленькие в результате, но вобравшие в себя кучу часов обдумываний, разговоров и работы в Фотошопе. Вот, например, как выглядят карточки для некоторых комбинаций транспорта и групп путешественников:

Билеты на перелёты и бронь в отелях

Моей задачей было показать основные данные о перелётах и переездах, необходимые в пути, на небольших карточках. Если вы задумаете изменить маршрут, то увидите список из всех возможных перемещений, который можно отфильтровать по нужным вам параметрам:

Смена маршрута, фильтры и карта в помощь.

Если вы надумаете остановиться в отеле, ваша бронь будет выглядеть вот так:

Краткая карточка брони отеля

Или подробнее — информация по отелю, фотогалерея, рейтинги и отзывы с Трипадвайзора, описание номеров, разбивка семей по номерам.

Подробное описание отеля

Сюда же я перенёс и возможность смены номера на любой из доступных:

Доступные номера в отеле

Задумали сменить отель? Выбирайте из списка альтернативных:

Смена отеля с помощью фильтров и карты

А вообще ваш маршрут описывается несколькими пунктами пути (извините за несовпадения названий городов, был очень долгий процесс со многими итерациями, названия затерялись и сбились, но для макетов этого хватает).

Пример маршрута

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

Напомню — все описанные выше макеты пока в разработке, вживую сайт в новом дизайне будет доступен немного позже. А пока всем спасибо за внимание!

Andrey Belikov, арт-директор IQPlanner.com