Каталог оформления fnow.ru — выбери номера (черновик, удалить после просмотра)
Вставлено через режим «Источник». Каждый вариант пронумерован. Посмотри на компьютере и с телефона, назови номера — они станут стандартом в гайде.
Мобильная адаптация проверена на 375, 768, 1024 и 1440px. Все варианты в этом файле держат мобильный экран.
Группа 1. Таблица — канон
Основа: обёртка forecast__problems__item, семантические thead и th, обёртка со скроллом. Шапка КАПСом 16px, вес 700 с обводкой 0,3px — на сайте шрифт подключён только до 600, дальше плотность даёт только обводка.
1.1 Синяя шапка — основной вариант, по умолчанию
| Тип модели | Что это | Что делает для закупщика |
|---|---|---|
| Чат-модель (LLM) | Отвечает текстом на запрос | Письма поставщикам, анализ КП |
| ИИ-агент | Модель с инструментами и правом действовать | Исследование рынка, обход документов |
| Прогнозная модель | Работает с временными рядами | Прогноз спроса, расчёт запаса |
1.2 Светлая шапка — для разбавления, когда таблицы идут подряд
| Тип модели | Что это | Что делает для закупщика |
|---|---|---|
| Чат-модель (LLM) | Отвечает текстом на запрос | Письма поставщикам, анализ КП |
| ИИ-агент | Модель с инструментами и правом действовать | Исследование рынка, обход документов |
| Прогнозная модель | Работает с временными рядами | Прогноз спроса, расчёт запаса |
Внутри обёртки текст данных становится тёмно-синим #1a295f, а сетка — голубоватой rgba(0,102,202,.4) вместо серой. Первый столбец остаётся синим и залипает при прокрутке на телефоне.
Группа 2. Узкая таблица на телефоне
Смотреть только с телефона. На компьютере разницы нет.
2.2 В обёртке со скроллом
| Тип модели | Что это | Что делает для закупщика |
| Чат-модель (LLM) | ChatGPT, Claude, YandexGPT — отвечают текстом | Письма поставщикам, анализ КП, скрипты Excel |
| ИИ-агент | Та же модель с инструментами и правом действовать | Исследование рынка, обход документов |
2.2. Таблица прокручивается вбок, первый столбец залипает. Колонки сохраняют читаемую ширину.
Группа 3. Широкая таблица, 6 колонок
3.1 Обёртка со скроллом
| Месяц | 2021 | 2022 | 2023 | 2024 | Итог |
| Январь | 1,09 | 1,06 | 0,92 | 0,99 | 1,02 |
| Февраль | 0,94 | 0,97 | 1,01 | 0,96 | 0,97 |
3.1. Скролл вбок, первый столбец залипает — и на компьютере, и на телефоне.
Группа 4. Врезка
4.1 Blockquote
Простыми словами: страховой запас — это плата за то, что будущее известно неточно.
4.2 Blockquote с подписью автора
Мы не считали упущенные продажи, пока не увидели цифру за квартал.
Иван Петров, директор по закупкам
4.3 Голубая плашка itog
Крупный акцент. Плашка шире и заметнее, чем blockquote.
4.4 Плашка с рамкой
Спокойный вариант — рамка вместо заливки.
4.5 Плашка с цветной полосой слева
Важное замечание: на маленьких выборках коэффициент сезонности неустойчив.
Группа 5. Цифры и метрики
Классы home-info-numbers__* здесь убраны намеренно: на экране уже 767px они превращают число в узкую плашку 17px с фоновой картинкой, а подпись — в 10px. Оформление задано напрямую, поэтому на телефоне и на компьютере блок выглядит одинаково.
5.1 Три в ряд
5.1. На телефоне перестраивается в две строки.
5.2 Списком, цифра слева — центрировано по высоте
5.2. Подпись выровнена по центру числа. Колонка чисел одинаковой ширины 104px, поэтому подписи стоят в один столбец.
Группа 6. Кнопка
6.1 Сплошная синяя
Открыть калькулятор6.2 Контурная
Скачать шаблон6.3 Две в ряд
6.4 Во всю ширину
Открыть калькуляторГруппа 7. Блок лид-магнита
7.1 Акцентный, голубая плашка
Калькулятор страхового запаса
Введите спрос, срок поставки и уровень сервиса — получите норму запаса и точку заказа.
Открыть калькулятор7.2 Спокойный, с рамкой
7.3 С обложкой слева
под обложку
Группа 8. Подпись эксперта
Фото центрировано по высоте относительно текста. Мешали два правила сайта: картинка внутри author-big оставалась 50px в боксе 93px, а общее правило для картинок статьи добавляло ей отступ сверху 10px. Оба перебиты инлайн.
8.3 Фото 60px, компактный — принято
Группа 9. Шаги и инструкции
9.1 Обычный нумерованный список
- Собрать историю продаж за два года.
- Очистить от дефицита и акций.
- Рассчитать разброс спроса.
9.2 Шаги блоком planItem
Демонстрация
1 час
Расспрашиваем клиента о специфике его компании.
Исследование
5 дней
Считаем потенциал на данных клиента.
9.3 Номер внутри заголовка — центрировано по высоте
Число и текст выровнены по центру друг друга. Достигается тем, что текст заголовка тоже завёрнут в span, и обоим задано vertical-align:middle. Число получает line-height:1, иначе оно тянет строку вверх.
9.3a Число 34px, голубое — мягкий акцент
01Демонстрация программы
Расспрашиваем клиента о специфике его компании и показываем нужные функции.
02Предпроектное исследование
Считаем потенциал сокращения запасов на реальных данных.
9.3b Число 34px, брендовое синее — сильный акцент
01Демонстрация программы
Расспрашиваем клиента о специфике его компании и показываем нужные функции.
02Предпроектное исследование
Считаем потенциал сокращения запасов на реальных данных.
Группа 10. Карточки-перелинковки — сетка
Две карточки в ряд на компьютере, одна под другой на телефоне. Заголовок ведёт на смежную статью — готовый блок внутренней перелинковки. Иконка и заголовок выровнены по центру друг друга.
10.1 Иконка 48px в строке с заголовком
10.2 Иконка 56px в строке с заголовком
10.3 Иконка 70px в строке с заголовком
10.4 Иконка сверху, как было
Низкая точность прогнозов
Упущенные продажи никто не считает
Что обязательно прописывать инлайн
- margin:0 на заголовке — штатно у него margin-bottom 20px, из-за которого при выравнивании по центру текст оказывается на 10px выше иконки. Это и было причиной перекоса.
- margin:0 и flex-shrink:0 на картинке — иначе прилетает отступ сверху 10px от общего правила для картинок статьи, а иконка сжимается при длинном заголовке.
- width и height на картинке — только для варианта в строку. При иконке сверху размер задаёт сам сайт, 70x70.
- opacity:1 — штатно 0,5, непрозрачность даёт Swiper. Без JS карточки выцветшие.
- font-weight:600 и font-size:17px — штатные 20px рвут заголовок на четыре строки, а на телефоне правило сайта сбрасывает вес до 400.
- flex:1 1 280px и min-width:260px — штатная ширина карточки 400px, на телефоне не помещается.
Готовые иконки
- /system/static_file/160/forecast__difficulties__item1.png — мишень с крестом, точность прогноза
- /system/static_file/161/forecast__difficulties__item2.png — бутылка с часами, сроки годности
- /system/static_file/162/forecast__difficulties__item3.png — ценник, промо-акции
- /system/static_file/163/forecast__difficulties__item4.png — график с рублём, потери
- /system/static_file/164/forecast__difficulties__item5.png
- /system/static_file/165/forecast__difficulties__item6.png
Свои иконки грузятся через CKEditor. Готовить в двойном размере: для 48px — файл 96x96.
