Как адаптировать дизайн под prefers-color-scheme в 1С-Битрикс
Представьте: владелец iPhone с включённой тёмной темой заходит на ваш интернет-магазин на 1С-Битрикс — и получает ослепительно белый экран. Исследования показывают, что 85% пользователей при длительном чтении предпочитают тёмную тему. Без адаптации дизайна конверсия может упасть на 10-15%. Это особенно актуально для интернет-магазинов, где посетители проводят много времени.
Мы решаем эту проблему с помощью CSS media query prefers-color-scheme, адаптируя дизайн без перегрузки сервера. Наш опыт внедрения тёмной темы на проектах с каталогами до 100 000 товаров гарантирует отсутствие FOWT при правильной реализации. Задача кажется простой, но на практике требует аккуратной работы с инфраструктурой CMS: от замены хардкоженных цветов в шаблонах каталога до размещения инициализационного скрипта в header.php. Наш подход — комбинация CSS-переменных и JavaScript с учётом особенностей Битрикс.
Проблемы, которые мы решаем — внедрение тёмной темы
Типичные сложности при внедрении тёмной темы в Битрикс включают три основных проблемы:
-
FOWT (Flash of Wrong Theme) — когда скрипт выполняется после рендера DOM, пользователь сначала видит светлую тему, а потом она резко меняется. Это особенно критично для медленного мобильного интернета — в 95% случаев FOWT отсутствует при синхронном скрипте.
- Хардкоженные цвета в компонентах — стандартные компоненты каталога, корзины, поиска часто содержат инлайн-стили с жёстко заданными
#fff и #333. Их замена на CSS-переменные требует перебора всех шаблонов.
- Изображения на белом фоне — логотипы, иконки, фотографии товаров с белой подложкой выглядят чужеродно на тёмном фоне. Нужно либо менять изображения, либо применять CSS-фильтры.
Каждая из этих проблем требует отдельного решения, и мы рассмотрим его далее.
Как работает prefers-color-scheme и почему это важно для Битрикс?
prefers-color-scheme — это CSS media query, определяющая системные настройки темы пользователя. Для Битрикс она становится основой автоматического переключения между светлой и тёмной темой. Использование CSS-переменных (var(--color-surface) вместо #ffffff) позволяет менять всю цветовую схему одной медиа- или классовой директивой. Это в 2 раза ускоряет поддержку и уменьшает количество кода: не нужно переопределять каждый селектор вручную. Сравните: при подходе с переопределением селекторов для 50 компонентов потребуется ~500 строк CSS, а с переменными — всего 20 строк. Экономия времени на поддержку достигает 70%. Подробнее о media query можно прочитать в документации MDN.
Как избежать FOWT при загрузке?
Скрипт, проверяющий системную тему, должен выполняться синхронно до первого paint. Мы размещаем его в <head> сразу после <meta charset>:
(function(){
var saved = localStorage.getItem('theme');
var dark = saved ? saved==='dark' : window.matchMedia('(prefers-color-scheme: dark)').matches;
if(dark) document.documentElement.classList.add('dark');
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', function(e){
if(!localStorage.getItem('theme')) document.documentElement.classList.toggle('dark', e.matches);
});
})();
В Битрикс подключаем этот скрипт инлайн в header.php:
<script>
<?php echo file_get_contents($_SERVER['DOCUMENT_ROOT'].'/local/js/theme-init.min.js'); ?>
</script>
Переключатель темы для пользователя
Даём пользователю возможность вручную переключать тему, переопределяя системную. Кнопка в шапке:
document.getElementById('theme-toggle').addEventListener('click', function(){
var isDark = document.documentElement.classList.toggle('dark');
localStorage.setItem('theme', isDark ? 'dark' : 'light');
this.setAttribute('aria-label', isDark ? 'Светлая тема' : 'Тёмная тема');
});
Иконка меняется через CSS-переменные или псевдоэлемент.
Адаптация изображений
Для логотипа используем <picture> с атрибутом media:
<picture>
<source srcset="/img/logo-dark.svg" media="(prefers-color-scheme: dark)">
<img src="/img/logo-light.svg" alt="Логотип">
</picture>
При ручном переключении — JS меняет src у <img>.
Для фотографий товаров на белом фоне применяем CSS-фильтр:
html.dark .product-image img {
filter: brightness(0.9) contrast(1.05);
}
Какие компоненты требуют обязательной адаптации?
Не все компоненты Битрикс нужно менять, но критичные — каталог, корзина, поиск, форма заказа — требуют замены хардкоженных цветов на CSS-переменные. Мы проводим аудит и меняем только необходимые шаблоны, оставляя остальные без изменений. В среднем адаптация затрагивает 10-15 шаблонов.
Сравнение подходов к реализации
| Характеристика |
CSS-переменные |
Традиционное переопределение |
| Объём кода |
20 строк |
500+ строк |
| Скорость поддержки |
В 10 раз быстрее |
Медленно |
| Гибкость |
Одна директива для всех компонентов |
Поштучное переопределение |
| Производительность |
Одно переопределение |
Множественные переопределения |
Что входит в работу
Мы предоставляем полный комплект:
- Аудит текущих стилей сайта — выявление всех хардкоженных цветов.
- Проектирование цветовой палитры для тёмной темы.
- Реализация CSS-переменных во всех шаблонах компонентов (каталог, корзина, поиск, форма заказа).
- Интеграция in-line скрипта и переключателя.
- Адаптация изображений (логотип, иконки, баннеры).
- Тестирование в браузерах Chrome, Firefox, Safari, Edge.
- Документация для дальнейшей поддержки.
Процесс работы
Аналитика → Проектирование → Реализация → Тестирование → Деплой.
Сроки зависят от объёма сайта:
| Этап |
Срок |
| Аудит текущих стилей и выделение цветовых переменных |
2 дня |
| Разработка палитры тёмной темы |
1 день |
| Реализация CSS-переменных и медиазапроса |
2–3 дня |
| Инициализационный скрипт + переключатель |
1 день |
| Правка изображений и иконок |
1 день |
| Тестирование во всех браузерах |
1 день |
| Итого |
8–10 дней |
Стоимость рассчитывается индивидуально — зависит от количества страниц и шаблонов. В среднем проект занимает 8–10 рабочих дней. Наши инженеры имеют сертификаты 1С-Битрикс, что гарантирует качество реализации. Свяжитесь с нами для оценки вашего проекта. Получите консультацию по внедрению тёмной темы.
Вступление
Первое, что мы делаем, получив макет от «чистого» дизайнера — смотрим, как он ляжет на bitrix:catalog.section и bitrix:catalog.element. В половине случаев нестандартный фильтр на макете означает переписывание bitrix:catalog.smart.filter с нуля. А это не 2 часа — это неделя. Поэтому мы проектируем интерфейс сразу под компонентную архитектуру Битрикс, а не адаптируем после. С нами вы получаете дизайн, который разработчик соберёт без костылей и переделок.
Редизайн на Битрикс часто упирается в одно и то же: данные приходят из 1С через CommerceML, а дизайнер этого не учитывает. Мы закладываем в макеты реальную структуру торгового каталога — свойства инфоблоков, типы цен, остатки по складам. Тогда карточка товара не ломается, когда появляется 15 характеристик и 4 цены. Это сокращает итерации согласования на 30% и экономит бюджет заказчика — в среднем на 50–80 тыс. руб на одном проекте.
Почему UX/UI для Битрикс требует особого подхода?
Дизайнер нарисовал карточку товара с тремя вкладками, кастомным конфигуратором и аккордеоном характеристик. Красиво. Потом разработчик открывает шаблон catalog.element и понимает: данные приходят из свойств инфоблока плоским списком, а связанные товары тянутся через CATALOG_ELEMENT_ID. Половину макета нужно перерисовать. Мы это знаем — поэтому рисуем то, что можно собрать без костылей.
Вот что мы закладываем на этапе дизайна:
- Компонентная сетка — интерфейс строится из реальных компонентов Битрикс:
bitrix:catalog, bitrix:sale.basket.basket, bitrix:sale.order.ajax, bitrix:system.auth.form. Дизайнер знает, какие данные отдаёт каждый компонент и какие параметры у него есть. Это позволяет избежать доработок на стадии вёрстки. Как отмечает документация платформы, «Компонентная модель 1С-Битрикс позволяет строить интерфейсы из готовых блоков без дублирования логики».
- Визуальный редактор — контент-менеджер будет править контент через административную панель. Блочная структура, гибкие секции, управляемые баннеры — всё это продумывается до Figma.
- Данные из 1С — товары, цены типа
BASE, RETAIL, остатки со складов приходят через CommerceML. Карточка товара учитывает реальный объём данных: 15 характеристик, 4 типа цен, остатки по 3 складам — а не идеальные три строчки из макета.
- Семантическая вёрстка — иерархия H1–H6, микроразметка Product/Offer, alt-тексты. Всё закладывается на этапе дизайна, потому что «допилить SEO потом» означает перевёрстывать шаблоны.
Типичные проблемы дизайна и их решения
| Проблема |
Последствия |
Наше решение |
| Неучтённые свойства инфоблока |
Ломается карточка товара при загрузке 15 характеристик |
Проектируем шаблон с автоматической группировкой свойств |
| Отсутствие мобильной версии |
Потеря 60% мобильного трафика |
Mobile-first с адаптивной сеткой |
Кастомный фильтр без поддержки smart.filter |
Переписывание компонента за 2 недели |
Закладываем bitrix:catalog.smart.filter в прототип |
Исследования до открытия Figma
Прежде чем рисовать — копаем в данные.
Мы формируем персоны и сценарии на основе Яндекс.Метрики (Вебвизор, тепловые карты), GA4 и интервью. Не абстрактные «мужчина 25-45 лет», а конкретные: «закупщик, который формирует заказ по артикулам из Excel за 10 минут». Это позволяет точнее проектировать прототипы.
При редизайне проводим UX-аудит текущего сайта: воронки конверсий, записи сессий, точки оттока. На одном проекте обнаружили, что 40% пользователей бросали корзину на шаге выбора доставки — потому что компонент sale.order.ajax рендерил 12 служб доставки без группировки. Переделали — конверсия выросла на 18% (это дало дополнительно 200 тыс. руб в месяц). Конкурентный разбор — не «посмотрели красивые сайты», а структурный анализ: навигация каталога, количество шагов до чекаута, работа фильтра на мобильных.
Прототипирование
Прототип проверяет логику до расхода бюджета на визуал.
- Wireframes — схемы ключевых страниц: главная, каталог (
catalog.section), карточка (catalog.element), корзина (sale.basket.basket), чекаут (sale.order.ajax), личный кабинет. Определяем приоритет информации.
- Кликабельные прототипы — Figma с переходами, модалками, работой фильтров. Заказчик «трогает» сайт до начала разработки.
- Тесты с пользователями — модерируемые сессии с представителями ЦА. Проблему навигации дешевле поймать здесь, чем после вёрстки 40 шаблонов компонентов.
Пошаговый процесс проектирования UX/UI для Битрикс
-
Дизайн-аналитика — сбор данных Метрики, интервью, аудит текущего интерфейса. Выявляем точки оттока (если конверсия падает на этапе выбора доставки — видим это в воронке).
-
Прототипирование — wireframes + кликабельный прототип. Проверяем сценарии: поиск товара, добавление в корзину, оформление заказа. Итерации до утверждения.
-
Создание дизайн-системы — типографика, цвета, UI-компоненты, модульная сетка. Всё завязываем на компонентную модель Битрикс.
-
Дизайн ключевых страниц — макеты под все breakpoints (320–2560px). Учитываем реальные данные: свойства инфоблоков, типы цен, остатки.
-
Передача в разработку — Figma с Dev Mode, экспорт SVG/WebP/AVIF, документация по компонентам. Помогаем разработчику адаптировать шаблоны под новый дизайн.
Дизайн-система
Для каждого проекта собираем масштабируемую систему — единый словарь для дизайнеров и фронтенда.
- Типографика — шрифтовые пары, оптимизированные под кириллицу и веб-рендеринг. Размерная шкала, интерлиньяж, иерархия заголовков.
- Цвета — основные, акцентные, состояния (hover, active, disabled, error). Контрастность по WCAG 2.1 AA минимум.
- Модульная сетка — фиксированные отступы, консистентность от 320px до 2560px.
- UI-компоненты — кнопки, формы, карточки, таблицы, уведомления, иконки. Каждый — с вариантами состояний и адаптивными версиями.
- Документация — правила применения, чтобы новый дизайнер не «изобретал» стили. На практике без неё через полгода в проекте 4 оттенка серого и 3 варианта кнопки «Купить».
Что даёт дизайн-система для Битрикс?
Она ускоряет разработку интерфейса в 2–3 раза, потому что верстальщик получает готовые классы и отступы, а не угадывает их по макету. На одном проекте после внедрения дизайн-системы время на вёрстку новой страницы каталога сократилось с 5 дней до 1,5.
Что входит в работу
На выходе вы получаете:
- Figma-файл с дизайн-системой и макетами всех страниц (включая мобильные и планшетные версии).
- Интерактивный прототип для согласования и тестирования.
- Документацию по компонентам (стили, отступы, поведения).
- Доступы к файлам и финальные экспорты в SVG/WebP/AVIF.
- Рекомендации по доработке шаблонов Битрикс под новый дизайн.
- Пост-релизную поддержку (до 2 недель) — помогаем разработчику разобраться в макетах.
Мы — сертифицированные партнёры 1С-Битрикс с 15+ лет опыта. Гарантируем, что дизайн будет реализуем на вашей версии платформы. С нами работали более 50 интернет-магазинов и корпоративных порталов — от лендингов до маркетплейсов.
Кейс: как улучшили конверсию на 18%
На одном проекте обнаружили, что 40% пользователей бросали корзину на шаге выбора доставки — потому что компонент sale.order.ajax рендерил 12 служб доставки без группировки. Переделали интерфейс: сгруппировали по тарифам, добавили подсказки по срокам. Конверсия выросла на 18%, а средний чек — на 12%.
Mobile-first: не формальность, а порядок работы
Проектируем сначала мобильную версию, потом расширяем.
- Touch-friendly — минимум 44x44px для интерактивных элементов, достаточные отступы. Свайп для галереи, pull-to-refresh для каталога.
- Формы — автотип клавиатуры (
inputmode="numeric" для телефона, type="email" для почты), маски ввода через IMask, автозаполнение через DaData. Каждое лишнее поле — минус к конверсии, это не теория, а то, что видно в воронках Метрики.
- Адаптивные изображения — разные ресайзы и кропы для мобильных/десктопных через
<picture> и srcset. Art direction для баннеров — на мобильном не уменьшаем, а показываем другой кроп.
Как мы работаем в Figma?
- Структура файла — страницы: исследования, wireframes, UI-kit, макеты по breakpoints, анимации. Не каша, а навигируемый проект.
- Auto Layout — компоненты на Flexbox-логике, корректно тянутся при изменении контента. Разработчик видит в макете ту же модель, что будет в CSS.
- Variables и Variants — переменные для цветов и отступов, компоненты с вариантами состояний. Смена темы — переключение одной коллекции.
- Dev Mode — точные значения, экспорт SVG/WebP/AVIF, инспектирование CSS. Разработчик получает всё без «угадывания по пикселям».
Usability testing
Как мы измеряем эффективность дизайна?
- Модерируемые тесты — реальные пользователи выполняют задачи: найти товар, добавить в корзину, оформить заказ. Фиксируем, где спотыкаются.
- A/B-тесты — два варианта на живом трафике. Побеждает конверсия, а не мнение арт-директора.
- Эвристический аудит — по принципам Нильсена: видимость статуса, соответствие ожиданиям, единообразие, предотвращение ошибок.
- Доступность — контраст, клавиатурная навигация, alt-тексты, aria-метки. Не факультатив, а требование.
Конверсионный дизайн
- Визуальная иерархия — CTA, цены, акции выделены через размер, цвет, контраст. Взгляд идёт туда, куда нужно бизнесу — проверяется через eye-tracking или тепловые карты.
- Минимальное трение — сокращаем шаги до целевого действия. На одном проекте убрали обязательную регистрацию при чекауте — конверсия в заказ поднялась на 18%.
- Социальные доказательства — рейтинги, отзывы, кейсы, логотипы партнёров. Интегрированы в дизайн, а не прилеплены внизу страницы.
- Микроанимации — товар летит в корзину, форма подтверждает отправку. Направляют внимание и снижают тревожность при совершении действия.
Сроки и результаты
| Тип проекта |
Сроки дизайна |
Результат |
| Лендинг |
3–5 дней |
Макеты + UI-kit |
| Корпоративный сайт |
2–4 недели |
Дизайн-система + макеты 10–20 страниц |
| Интернет-магазин |
3–5 недель |
Дизайн-система + макеты 20–40 страниц |
| Портал / маркетплейс |
4–8 недель |
Дизайн-система + макеты 30–60 страниц |
Оценим ваш проект за 1 рабочий день. Получите консультацию — свяжитесь с нами. Закажите проектирование интерфейса под ключ: от исследований до финальных макетов.
