Не указан
7 ставок
1. Общие требования к дизайну и состояниям элементов
Дизайнеру необходимо разработать современную UX/UI концепцию страницы маркетплейса для выбора услуг. Интерфейс должен иметь минимальную нагрузку, обеспечивая быстрый доступ к фильтрации и поиску желаемой услуги. Все интерактивные элементы (кнопки, переключатели, инпуты, карточки) должны иметь прорисованные визуальные состояния: Default (Обычный): Базовый вид элемента. Hover (Наведение): Изменение цвета, появление тени или подсветка при наведении курсора. Active/Pressed (Нажато): Статический отклик в момент клика. Focus (Фокус): Состояние для инпутов и кнопок при навигации с клавиатуры или вводе текста (акцентная рамка). Disabled (Заблокировано): Неактивное состояние элемента, если функция недоступна.
2. Глобальный хедер сайта (Header) Логотип: левая часть. Навигационное меню: Пункты "Пункт 1", "Пункт 2", "Пункт 3", "Поддержка". Пункты "Пункт 1", "Пункт 2" и "Пункт 3" имеют выпадающие списки (Mega Menu) с подпунктами, иконками и коротким описанием. Например: подпункт "Медицинская помощь" сопровождается медицинской иконкой и описанием "Первая помощь и вызов экстренных служб". Пункт "Поддержка" в будущем будет открывать диалоговое окно (сейчас не делаем). Блок авторизации (правая часть). Состояние неавторизованного пользователя: Кнопки "Войти" и "Зарегистрироваться". Состояние авторизованного пользователя: Кнопка-ссылка "Перейти в кабинет", аватар пользователя пункты меню
3. Правая панель фильтрации (Sidebar Filter)
Панель работает в режиме автоматического применения (без кнопки "Применить"). Любое изменение состояния обновляет контент левой части автоматически.
Этот блок уже реализован. Нужно будет лишь доработать для открытия на мобильных устройствах
4. Основная (левая) часть: Панель результатов поиска
4.1 Основная (левая) часть: Панель результатов поиска Справочная информация (Строка 1): Текст слева — "Мы подобрали [X] услуг", текст справа в этой же строке — "В [Y] организациях". Локационный блок (Строка 2): Текст по умолчанию "Организации по всей Украине". При клике активируется поле с автокомплитом для поиска населенного пункта. Дизайн автокомплита: Опции в выпадающем списке отображают название населенного пункта (введенное пользователем) жирным, а под ним — полную административную иерархию: например, с. Лебедь (Лебедская ТГ, Лебедский р-н., Ровненская область) или Голосеевский район (г. Киев). Для городов со специальным статусом (Киев) высшая иерархия отсутствует. Переключатель вида отображения: Toggle-кнопка для выбора режима: "Списком" или "На карте"
4.2. Содержимое карточек услуг (Режим списка)
Карточки делятся на два визуальных типа: Классическая карточка и Выделенная карточка. Выделенная карточка имеет яркую рамку/фон и содержит акцентные маркеры-лейблы: РЕКОМЕНДОВАННАЯ УСЛУГА или ВЫБОР ПОЛЬЗОВАТЕЛЕЙ.
Обязательные компоненты каждой карточки: Брендинг автошколы: Логотип, название организации, верификационная зеленая галочка (для проверенных организаций). Социальное доказательство: Средняя оценка звездами (например, 4.8), количество отзывов (в виде кликабельной ссылки, ведущей на блок отзывов организации) и процент успешности предоставления услуг. Параметры услуги: Название (например: "Услуга по предоставлению услуг"). Адрес/Локация (полное название, например: "Ровненская обл., Сарненский р-н, Дубровицкая ТГ, с. Озерск, ул. Степана Бандеры, 14"). Рядом кнопка "Показать на карте", которая открывает локацию в модальном окне. Теги преимуществ организации (наличие укрытия, скидки для ветеранов и т.д.), выбранные пользователем в фильтре. Большое количество можно скрывать под кнопкой "Показать все". Категории, входящие в программу. Наведение на категорию вызывает тултип. Учебные модули: Блоки "Модуль 1" и/или "Модуль 2". Отображают количество часов предоставления услуги и их тип — академические или астрономические. Рядом размещается иконка знака вопроса с тултипом объяснением разницы между этими часами. Интерактив и сохранение: Кнопка-иконка (сердечко или другая) для добавления программы в "Избранное" (имеет состояния Default и Active-filled). Финансовый блок: Полная стоимость (большой акцентный шрифт) Блок рассрочки: Количество месяцев и сумма ежемесячного платежа. Оформляется компактным блоком с мини-логотипами доступных банков (ПриватБанк, Монобанк и т.д.), цифрой и пояснительным тултипом. Медиа и описание: Краткий текстовый описание программы, блок миниатюр фото/видео с возможностью развертывания в галерею (Lightbox) при клике. Дополнительно (если позволяет свободное место): График работы организации, кнопка развертывания прямых контактов. Главное целевое действие (CTA): Акцентная, большая кнопка "Оставить заявку"
Нужно показать содержимое страницы с карточками, и без карточек. Когда целевые программы согласно фильтру не найдены
4.3. Нижний блок страницы
Под основным списком карточек по центру размещается кнопка "Показать еще" для пагинации. В самом низу страницы интегрируется дополнительный контентный блок "Просмотренные программы" с компактными карточками самих брендов организаций.
Проект пока на ранней стадии разработки, поэтому я сейчас очень ограничен по бюджету. Я сам программист и фрилансер, поэтому прекрасно понимаю, что работа должна оплачиваться хорошо, но пока ищу компромисс по цене. Спасибо за понимание
Дополнительную и более детальную информацию предоставлю потенциальному исполнителю.
