Мы сделали сайт-каталог официальной техники DJI для AeroFiberPRO — компании, которая продаёт дроны, ремонтирует их в своём сервисе и принимает старые аппараты по Trade-In. Главная сложность такой техники не в цене, а в выборе: под съёмку, тепловизионную инспекцию и поисковые работы нужны разные аппараты, а внутри одной модели — разные комплектации. Мы собрали на Next.js фасетный каталог на 14 комплектаций, подборки по типовым задачам, карточки с таблицей наборов и раздел услуг сервисного центра.
02 — Контекст
Исходная ситуация, ограничения и проблемы, которые должна была решить новая система.
Дрон за 200–500 тысяч рублей покупают не по фотографии. Перед покупкой человек выясняет, хватит ли времени полёта на облёт объекта, добьёт ли связь до дальнего конца трассы, различит ли тепловизор утечку на трубопроводе. Обычный интернет-магазин с плиткой товаров и кнопкой «в корзину» на таких вопросах не помогает: покупатель уходит искать ответы на форумы и возвращается уже не к вам.
Вторая сложность — комплектации. У одной модели их несколько, и аппарат в них один и тот же: отличаются пульт, число аккумуляторов, зарядный хаб и кейс, а разница в цене доходит до сотни тысяч рублей. Если вывести наборы просто отдельными товарами, посетитель видит пять почти одинаковых названий с разными ценами и не понимает, за что переплачивает. Так теряется и доверие, и заявка.
Третья часть задачи — показать, что компания не перепродаёт коробки. У AeroFiberPRO есть собственный сервисный центр, запчасти под заказ, прошивка и настройка, Trade-In и поставки организациям со счётом и закрывающими документами. Всё это влияет на решение о покупке не меньше характеристик, но обычно прячется в подвале сайта. Нам нужно было вывести сервис на один уровень с каталогом — и уложиться в полтора месяца.
Покупатель приходит не за «Mavic», а за облётом ЛЭП или ночным дежурством. В обычном каталоге он вынужден сам переводить задачу в характеристики: сверять время полёта, дальность связи и наличие тепловизора по таблицам разных моделей.
Пять позиций с почти одинаковыми названиями и разбросом цен до ста тысяч рублей читаются как ошибка каталога. Без наглядного сравнения наборов посетитель не понимает, что именно лежит в коробке и за что он доплачивает.
Ремонт, запчасти, прошивка и Trade-In — сильная сторона компании, но на типовом сайте они спрятаны в подвале. Покупатель дорогой техники хочет заранее знать, кто и на каких условиях будет её обслуживать после падения или залития.
03 — Возможности
Ключевые сценарии и рабочие модули, собранные в единую систему.
Ядро сайта: 14 комплектаций двух серий, которые отбираются по серии, задаче, оснащению, наличию, цене и времени полёта. У каждого значения фильтра стоит счётчик, поэтому посетитель заранее видит, сколько аппаратов останется после выбора, и не попадает в пустую выдачу. Сортировка — по цене, новинкам и наличию: покупатель с бюджетом и покупатель со срочной задачей идут разными путями.
Шесть готовых подборок — аэрофотосъёмка, профессиональная съёмка, мониторинг и инспекция, промышленные задачи, поисково-спасательные работы, техника с тепловизором. Это вход в каталог для тех, кто формулирует потребность делами, а не моделями: человек выбирает свою задачу и сразу получает короткий список подходящих аппаратов вместо всей линейки DJI.
Страница аппарата отвечает на вопросы в том порядке, в котором они возникают: галерея, цена и наличие, четыре ключевых параметра крупно, затем комплектации с таблицей «что лежит рядом с дроном», описание, характеристики, состав коробки, доставка, применение, отзывы и вопросы. Якорная навигация сверху позволяет прыгнуть к нужному блоку, не пролистывая длинную страницу.
Корзины и онлайн-оплаты на сайте нет намеренно: цену и наличие подтверждает менеджер, а организациям выставляют счёт и готовят договор. Вместо «купить» на карточке — «Купить в 1 клик» и заявка с телефоном, плюс сквозной блок обратного звонка. Это честнее для техники, которую подбирают под задачу, и снимает риск продать не тот набор.
Четыре услуги с отдельными страницами: ремонт и диагностика, прошивка и настройка, подбор и поставка запчастей, Trade-In. У обмена расписаны критерии оценки — состояние корпуса, налёт и износ, подвес и камера, комплектность, актуальность модели — и четыре шага сделки от заявки с фотографиями до зачёта суммы. Владелец дорогой техники видит условия до звонка.
Организации покупают дроны иначе, чем частные пилоты: им нужны счёт, договор и закрывающие документы, отгрузка со склада в день оплаты, доставка с контролем груза, персональный менеджер и обслуживание парка. Мы вынесли эти условия в отдельный блок и на страницу сотрудничества, чтобы закупщик не выяснял их в переписке, а сразу видел на сайте.
Блог с рубриками «Полезно знать», «Обзоры дронов» и «Сервис» отвечает на вопросы, которые люди задают до покупки: как выбрать аппарат с тепловизором, что брать под мониторинг объектов, как часто обслуживать дрон. Карточки товаров размечены Product, разделы — BreadcrumbList, вопросы — FAQPage, поэтому каталог понятен и поисковикам, и AI-ответам.
04 — Архитектура
Технологии выбраны под нагрузку, интеграции и дальнейшее развитие продукта.
Каталог техники живёт долго и должен открываться мгновенно, поэтому страницы серий, подборок и товаров генерируются заранее и отдаются как статика, а обновления цен и наличия подхватываются пересборкой. Тот же фреймворк даёт нам аккуратные URL вида /catalog/matrice/matrice-4t/, серверную генерацию мета-тегов и структурированных данных — всё, что нужно каталогу, который ищут в поиске, а не только листают.
У каждой комплектации свой набор полей: цена, наличие, время полёта, разрешение тепловизора, состав коробки, задачи, к которым она подходит. Типы описывают эту модель данных один раз, и дальше сборка сама ловит опечатку в характеристике или забытое поле в новом товаре. Для каталога, где ошибка в цифре стоит доверия покупателя, это дешёвая страховка.
Каталог — это плотный интерфейс: фильтры со счётчиками, бейджи «Хит» и «Новинка», таблицы сравнения наборов, характеристики в две колонки. Утилитарные классы позволяют собирать такие блоки быстро и держать единый ритм отступов и типографики на всех страницах, а не поддерживать разъезжающиеся стили в десятке отдельных файлов вёрстки.
Всё, что происходит на странице без перезагрузки, построено на React: пересчёт фасетного фильтра и счётчиков, сортировка выдачи, галерея кадров, переключение комплектаций в карточке, якорная навигация и формы заявок. Компонентная модель позволила один раз собрать эти элементы и переиспользовать их в каталоге, подборках, услугах и блоге без дублирования кода.
05 — Процесс
Последовательность работ от исследования задачи до запуска и проверки результата.
Начали не с дизайна, а с товарной матрицы: две серии, 14 комплектаций, десятки характеристик и шесть типовых задач применения. Свели всё в одну таблицу и увидели главное — покупателю нужны два входа в каталог: от задачи и от модели. Эта развилка определила всю дальнейшую структуру сайта.
06 — Итог
Что создано в рамках проекта: рабочий контур, реализованные возможности и подтверждённые факты.
У компании появился каталог, который работает как консультант. Посетитель заходит от своей задачи — инспекция, съёмка, поисковые работы — и получает короткий список подходящих аппаратов вместо всей линейки DJI. В карточке он видит не пять похожих названий, а один аппарат и наглядную таблицу наборов с явной доплатой за пульт, аккумуляторы и кейс. Вопрос «за что я переплачиваю» снимается до звонка менеджеру.
Сервис перестал быть сноской: ремонт, запчасти, прошивка и Trade-In с прозрачными критериями оценки стоят на сайте рядом с каталогом, а условия для организаций — счёт, договор, закрывающие документы — видны закупщику сразу. Мы уложились в полтора месяца и отдали клиенту статичный быстрый сайт на Next.js с разметкой Product и FAQPage. Для нас это пример каталога сложной техники, где подбор по задаче важнее плитки товаров.
14 комплектаций
двух серий в фасетном каталоге
6 подборок
вход в каталог от задачи, а не от модели
4 услуги
сервис и Trade-In на уровне каталога
1.
от разбора ассортимента до запуска
FAQ
Расскажите о задачах вашего бизнеса — предложим архитектуру и оценим сроки
Телеграмм
Делимся визуально привлекательными фрагментами наших последних веб-проектов.
ВКонтакте
Пишем о интересных технических решениях и вызовах в разработке.
MAX
Демонстрируем дизайнерские элементы наших веб-проектов.
TenChat
Деловые связи, кейсы и экспертные публикации.
Рассылка
© 2025-2026 МАЙПЛ. Все права защищены.
