Электромобильность2026EN
NOIR X1
Одиннадцать секций, одна машина и конфигуратор, который обязан назвать цену, — на странице, весь аргумент которой построен на сдержанности.
- Сайт
- Продукт
- Конфигуратор
- Редакционный контент

- Отрасль
- Электромобильность
- Длительность
- 9 недель
- Команда
- 1 дизайнер · 2 инженера
- Платформы
- Маркетинговый сайт · Интерактивный конфигуратор · Поверхности спецификаций
01
Задача
Всё заявление NOIR — это вычитание: каждую деталь, которая не заслужила своего места, убрали, а не задекорировали. Сайт для такого продукта не может продавать украшением, потому что украшение противоречило бы тому, что он продаёт.
Под этим лежит коммерческая проблема. Электровелосипеды покупают по трём числам — запас хода, мощность, вес — и эти же три печатает каждый конкурент. Повторить их не доказывает ничего; сайт должен был сделать так, чтобы они что-то значили, а затем назвать реальную цену и не превратиться в магазин.
- Продукт
- 140 км · 750 Вт · 19,8 кг
- Линейка
- X1 · X1 S · X1 Carbon, €3 490 – €5 490
- Главная сложность
- Сдержанность, которая всё равно должна продавать
02
Решение
Страница — это одиннадцать пронумерованных секций, читающихся как один непрерывный аргумент, и каждая делает ровно одну работу: для чего эта вещь, что из неё убрали, что значат числа, как она себя ведёт, сколько стоит.
Спецификации показаны по одной, а не таблицей. Выбор «запас хода» заполняет экран числом 140 км и условиями, в которых его измерили: смешанное городское кольцо, режим Tour, райдер 75 кг, 18 °C. Число с условиями — это совсем другое заявление, чем число само по себе.
Конфигуратор — это четыре решения: модель, отделка, аксессуары, дополнительный аккумулятор, — и сумма пересчитывается после каждого. Заканчивается он запросом конфигурации, а не оформлением заказа, потому что этот велосипед доставляют и собирают отдельно в каждом городе.
- Рассказ
- Одиннадцать секций, один аргумент
- Спецификации
- По одному показателю, с условиями замера
- Конфигуратор
- Четыре решения, живой итог
03
Архитектура
- L0Next.js App RouterСтатическая оболочка
- L1Острова секцийПривязаны к скроллуКонфигураторЧетыре шага
- L2Модель продуктаМодели, отделка, опцииМодуль ценЖивой итог
- L3Запрос конфигурацииServer action
- L4CRM / почтаВнешнееАналитикаВнешнее
Связи (8)
- Next.js App Router → Острова секций
- Next.js App Router → Конфигуратор
- Острова секций → Модель продукта
- Конфигуратор → Модель продукта
- Конфигуратор → Модуль цен · пересчёт
- Конфигуратор → Запрос конфигурации · вместе со сборкой
- Запрос конфигурации → CRM / почта
- Next.js App Router → Аналитика
04
UX
Порядок чтения — это порядок покупки: для чего оно, что оттуда убрали, что значат числа, как едется, сколько стоит. Кто хочет только цену, попадает в конфигуратор из шапки за один клик и пропускает аргумент целиком.
Каждый интерактивный блок — переключатель спецификаций, режимы езды, конфигуратор — имеет читаемое статическое состояние, так что страница доказывает своё и без JavaScript, и с включённым reduced motion.
- Порядок чтения
- Назначение → вычитание → числа → цена
- Быстрый путь
- Конфигуратор доступен из шапки
- Запасное состояние
- Каждый остров сворачивается в текст
05
UI
Почти монохром с единственным медным акцентом, который появляется раз на секцию — на её номере и больше нигде. Когда акцента так мало, он работает как знак препинания, а не как украшение.
Заголовки набраны очень крупно и очень плотно, а каждый замер использует табличные цифры с меньшей единицей рядом, так что 140 KM и 19.8 KG выравниваются в колонку, а единицы не спорят с числами.
06
Разработка
Цены существуют в одном месте. Секция моделей и конфигуратор читают один и тот же модуль цен, так что надбавка не может быть верной в одном месте и устаревшей в другом.
Двадцать экранов анимации, привязанной к скроллу, работают от одного общего обсервера, а не от слушателей в каждой секции, и вся хореография сворачивается в мгновенные смены состояния под prefers-reduced-motion.
Велосипед — вектор, а не фотография: он остаётся резким при любой плотности пикселей, перекрашивается вместе с выбором отделки и весит долю того, что стоил бы героический снимок.
07
Что он умеет
Одиннадцать секций
Философия, объект, технологии, спецификации, режимы, приложение, производительность, экология, модели, галерея, конфигуратор.
Переключатель спецификаций
Запас хода, мощность, вес, максимальная скорость и заряд — по одному, каждый с условиями замера.
Режимы езды
City, Tour и Sport в сравнении по запасу хода, мощности, разгону и пределу поддержки.
Сравнение моделей
X1, X1 S и X1 Carbon с тремя вариантами отделки и показателями для каждой.
Конфигуратор из четырёх шагов
Модель, отделка, аксессуары и дополнительный аккумулятор — сумма обновляется с каждым решением.
Секция про приложение
Дашборд, статистика поездок, навигация и настройки велосипеда — так, как их показывает приложение.
Экологические факты
91% КПД привода, 1 200 циклов до 80% ёмкости, разделение на однородные материалы.
Запрос конфигурации
Готовая сборка отправляется через server action, а не кладётся в корзину.
08
Интеграции и стек
Интеграции
- Маршрутизация запросов на конфигурацию
- Уведомления по почте
- Аналитика
Фронтенд
- Next.js
- React
- TypeScript
- Tailwind CSS
- Motion
Платформа
- Статическая генерация
- Server actions
- Vercel
09
Чем это закончилось
- 11
- Секций
- По одной
- Спецификации
- На странице
- Цена
- Вектор
- Главное изображение
Один аргумент, а не буклет
Каждая с условиями замера
От €3 490 с НДС
Перекрашивается и ничего не весит
Продуктовая страница, которая делает то, что продукт заявляет. Ничего на ней не является украшением, а к цене приходят аргументом, а не кнопкой.




Каждый продукт проектируется под телефон как отдельный опыт, а не как суженный десктоп.
Есть продукт, который давно пора сделать?Расскажите о нём.
Опишите, что должно измениться в вашем бизнесе. Мы разберёмся, что для этого действительно нужно — даже если нужно меньше, чем кажется.