НовыйБез навесного
2GR-FE
Toyota Camry, Highlander / Lexus ES 350, RX 350
3.5 л · Бензиновый V6
260 000 ₽
UI Skills / варианты для ИноМоторДетали, которые
Детали, которые
меняют ощущение сайта
Шесть работающих примеров. Сравни оформление, нажми кнопки, открой окна. Здесь выбираем поведение и детали, сохраняя наш стиль.
Как смотреть
На компьютере — сравнение рядом.
На телефоне — примеры друг под другом.
У понравившегося варианта нажми «Мне нравится». Выбор виден до перезагрузки и никуда не отправляется.
Polish
Одинаковые данные и фотография. Слева — параметры текущей карточки главной, справа — более собранная иерархия и контраст действий.
A · текущая стилистика сохранён характер сайта
Текущие параметры
| Маркировка | 24 px |
| Цена | 26 px |
| Описание | 12 px |
| Кнопки | 42 px |
Отдельная демонстрация текущих параметров, а не полная копия блока Tilda.
B · предложение Polish
НовыйБез навесного
2GR-FE
Toyota Camry, Highlander / Lexus ES 350, RX 350
3.5 л · Бензиновый V6
260 000 ₽
Иерархия проще
| Маркировка | 26 px |
| Цена | 28 px |
| Совместимость | 13 px |
| Действие | 46 px |
Радиус карточки 12 px, кнопки 8 px. Фото без обработки. Меньше пустоты между текстом и ценой.
Изменение относится только к правой карточке.
Animation Systems
Движение отвечает на действие: увеличение фотографии, нажатие кнопки и короткое подтверждение добавления. Без постоянного движения страницы.
A · спокойное состояние без увеличения фото
2GR-FE
Для Toyota / Lexus
260 000 ₽
Нажми кнопку — здесь появится подтверждение.
B · отзывчивый интерфейс плавно, 120–240 ms
2GR-FE
Для Toyota / Lexus
260 000 ₽
Корзина 0Демо-корзина пуста
На компьютере наведи мышь на правую фотографию. На телефоне нажми «Показать эффект фото». Увеличение 2,5%, подъём 3 px. Демо не изменяет настоящую корзину.
При системном уменьшении движения анимации отключаются.
Beautiful Shadows
Тень отделяет открытую панель от фона. Сравни один и тот же попап без тени и с нейтральной многослойной тенью.
A · плоская панельтолько граница
Каталог двигателей
Пример открытой панели
Уточним совместимость
Оставь VIN или данные автомобиля. Менеджер проверит выбранный двигатель.
2GR-FEToyota / Lexus
B · с глубинойнейтральная тень
Каталог двигателей
Пример открытой панели
Уточним совместимость
Оставь VIN или данные автомобиля. Менеджер проверит выбранный двигатель.
2GR-FEToyota / Lexus
Глубина правой панели:
Для каталога — тонкая граница. Для открытого меню и попапа — средняя тень. Оранжевое свечение не добавляем ко всем поверхностям.
На тёмном фоне сохраняем границу: одна тень не заменяет контраст.
Company Logos
Оригинальные логотипы, одинаковые карточки и оптический масштаб. Знак Lexus уже, надпись Kia шире: одинаковая высота файла не означает одинаковый визуальный вес.
A · одинаковый размер файлов без оптической подгонки
B · оптически выровненные марки вся карточка кликабельна
Выбери марку — она подставится в пример подбора ниже.
Логотип выбранной маркиНа телефоне лента прокручивается пальцем, видна часть следующей марки. Ничего не двигается автоматически. Логотипы взяты из действующего сайта.
Навигацию по маркам и форму можно оформить одинаково.
Clarify + Harden
Ясные подписи и все состояния подбора. Это локальный сценарий на примере Toyota Camry: каталог и сервисы VIN не опрашиваются.
A · короткие общие подписи пример для сравнения
Подбор двигателя
После нажатия неясно, что будет следующим шагом.
Условный пример общих формулировок. Это не утверждение, что действующий подбор работает именно так.
В предложении справа
Сначала объясняем действие. Затем показываем результат или следующий шаг. При ошибке введённые данные остаются на месте.
VIN передаётся менеджеру на проверку; автоматический ответ не имитируется.
B · понятный следующий шаг все состояния можно открыть
Демонстрация · данные не отправляются
Найти двигатели по автомобилю
Укажи автомобиль. Покажем пример результатов, а точную совместимость подтвердит менеджер.
В рабочей форме здесь будет отдельное согласие на обработку данных. В демо поля никуда не передаются.
В реальной форме обещание ответа привяжем к рабочим часам по Москве.
Transitions Polish
Один и тот же попап с тремя настройками. Сравни ощущение открытия и закрытия; оформление и содержание остаются одинаковыми.
Быстро
150 / 100 msПочти мгновенно, короткий отклик.
Сбалансированно
250 / 150 msРекомендую для подбора и небольших окон.
Мягко
400 / 250 msБолее заметное движение; может замедлять частые действия.
Открытие чуть дольше закрытия. Без пружины, размытия и движения фона. На телефоне тот же сценарий, окно помещается в экран.
Уменьшение движения в настройках устройства имеет приоритет.
Что берём на сайт?
Можно выбрать отдельные детали из разных примеров. Напиши, например: «Polish B, анимации B, средняя тень, логотипы B, подбор B, попап 250/150».
Проверки, которые не видно на картинке
Доступность: фокус, клавиатура, Escape и уменьшение движения.
Скорость: измерения до и после внедрения.
SEO: метаданные, canonical и достоверные данные о товарах.
Что остаётся прежним
Furore и Montserrat, реальные фотографии, действующие товары и цены. Рабочий магазин, корзина и заявки этой страницей не изменяются.
Вернуться к примерам ↑