Перейти к содержимому
Silka

Электромобильность2026EN

NOIR X1

Одиннадцать секций, одна машина и конфигуратор, который обязан назвать цену, — на странице, весь аргумент которой построен на сдержанности.

Открыть живой сайт
  • Сайт
  • Продукт
  • Конфигуратор
  • Редакционный контент
Главная 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

Архитектура

  1. L0
    Next.js App RouterСтатическая оболочка
  2. L1
    Острова секцийПривязаны к скроллу
    КонфигураторЧетыре шага
  3. L2
    Модель продуктаМодели, отделка, опции
    Модуль ценЖивой итог
  4. L3
    Запрос конфигурацииServer action
  5. L4
    CRM / почтаВнешнее
    АналитикаВнешнее
Связи (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 с НДС

Вектор
Главное изображение

Перекрашивается и ничего не весит

Продуктовая страница, которая делает то, что продукт заявляет. Ничего на ней не является украшением, а к цене приходят аргументом, а не кнопкой.

Секция спецификаций NOIR X1 с запасом хода
Спецификации по одной
Сравнение моделей NOIR X1 с отделками
Три модели
Конфигуратор NOIR X1 с живым итогом
Конфигуратор
NOIR X1 на мобильном
Мобильная версия

Каждый продукт проектируется под телефон как отдельный опыт, а не как суженный десктоп.

Есть продукт, который давно пора сделать?Расскажите о нём.

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