Создание сервисной страницы сайта- интерфейс формирования заказ

при работе использованы программы векторной графики Corel Draw, Afobe Illustrator, + Photoshop, программа создания прототипов страниц Figma. Публикуется на правах эскизного проекта, потому вид немного «неприбранный»

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

На заглавной иллюстрации - Создание сервисной страницы сайта- интерфейс формирования заказа: экран интерфейса добавьте опции

Алгоритм заказа

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

Конструктор праздника

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

Т.е, к примеру пользователь активирует опцию “пригласить аниматора” и видит на заставке страницы анимацию - выплывающее и отображаемое поверх нее изображение фигуры клоуна.. аналогично с остальным… Как бы сцена, на которой пользователь сам устанавливает декорации 

Иллюстрация 1. Создание сервисной страницы сайта- интерфейс формирования заказа: начальный экран для выбора формата праздника

Иллюстрация 1. Создание сервисной страницы сайта- интерфейс формирования заказа: начальный экран для выбора формата праздника 

(Понятно, что в рамках задания не делал все дотошно, может быть это стоит сделать в векторе по принципу книжки-раскладушки… ну как бы в самом начале акцентный элемент, “делающий игру”…)

Формальные опции заказа

На втором этапе пользователю предлагается ввести формальные опции заказа – такие как дата, время, количество участников

По мере выбора опций справа в поп-ап окне оперативно формируется оценочная стоимость мероприятия, чтобы пользователь наглядно мог отслеживать изменение заказа в денежном эквиваленте…

Иллюстрация 2. Создание сервисной страницы сайта- интерфейс формирования заказа: формальные опции заказа

Иллюстрация 2. Создание сервисной страницы сайта- интерфейс формирования заказа: формальные опции заказа 

Выбор сценария

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

Иллюстрация 3. Создание сервисной страницы сайта- интерфейс формирования заказа: выбор сценария на основе предпочтений пользователя

Иллюстрация 3. Создание сервисной страницы сайта- интерфейс формирования заказа: выбор сценария на основе предпочтений пользователя

Опции с выбором уровня услуги

Кроме того, пользователь может добавить к полученной заявке дополнительные опции, предлагаемые ему дополнительно к стандартному набору сценария, а также сервисные опции, предлагаемые компанией дополнительно (услуги такси для гостей, организация видеосъемки и пр.)

При заказе любой регулируемой опции в этом блоке с помощью выбора рейтинга опции – количества звезд - меняется также степень “крутизны” заказанной опции (хотя, как понимаю, опции таки будут приведены к некоторому стандарту, иначе полный бардак), при этом во всплывающем окне – подсказке (при выборе количества звезд)  есть ее краткое описание. Окошко всплывает при нажатии на плюс или минус позиции…

Иллюстрация 4. Создание сервисной страницы сайта- интерфейс формирования заказа: выбор опций услуг и их категории

Иллюстрация 4. Создание сервисной страницы сайта- интерфейс формирования заказа: выбор услуг и их категории 

Формирование бланка заказа

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

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

Иллюстрация 5. Создание сервисной страницы сайта- интерфейс формирования заказа: формирование формального бланака заказа

Иллюстрация 5. Создание сервисной страницы сайта- интерфейс формирования заказа: формирование формального бланака заказа 

Сценарий заказа развивается сверху вниз – наглядно, последовательно, маскимально понятно

Иллюстрация 6. Создание сервисной страницы сайта- интерфейс формирования заказа: работа с опциями заказа

Иллюстрация 6. Создание сервисной страницы сайта- интерфейс формирования заказа: работа с опциями заказа

 

Иллюстрация 7. Создание сервисной страницы сайта- интерфейс формирования заказа: футер страницы заказа

Иллюстрация 7. Создание сервисной страницы сайта- интерфейс формирования заказа: футер страницы заказа 

Иллюстрация 8. Создание сервисной страницы сайта- интерфейс формирования заказа: общий вид страницы

Иллюстрация 8. Создание сервисной страницы сайта- интерфейс формирования заказа: общий вид страницы


Просмотров: