Как согласовать дизайн главной, каталога, карточки и оформления
Общие правила цвета, текста, цены и состояний для четырёх типов страниц. Пример сквозной покупки, матрица приёмки и проверка на телефоне и с клавиатуры.
Единый дизайн интернет-магазина получается, когда одни и те же элементы сохраняют смысл на всём пути покупки. Покупатель узнаёт цену, выбранный вариант, основную кнопку и сообщение об ошибке на главной, в каталоге, карточке и оформлении. При этом страницы могут иметь разную композицию: их задачи различаются.
Начните с набора общих правил, затем проверьте один товар на четырёх экранах. Это помогает принять работу дизайнера и разработчика по конкретному результату. Красивые отдельные макеты ещё не показывают, что переходы между ними понятны или что форма работает с клавиатуры.
Что должно быть общим, а что может различаться
Главная объясняет предложение и направляет к выбору. Каталог помогает сравнивать. Карточка раскрывает конкретный вариант, а оформление собирает необходимые данные и показывает итог. Одинаковое количество баннеров на этих страницах не является признаком согласованности.
| Элемент | Общее правило | Допустимое различие |
|---|---|---|
| Название и вариант товара | Один смысл и идентификатор, понятный размер или цвет | В списке название короче, в карточке подробнее |
| Цена | Различимы текущая цена, старая и условие «от» | Итог заказа учитывает количество и доставку |
| Основное действие | Узнаваемые цвет, форма, текст и состояния | «Выбрать», «В корзину» и «Подтвердить» решают разные задачи |
| Ошибка | Понятное сообщение рядом с причиной | Вариант закончился, адрес не обслуживается или поле заполнено неверно |
| Навигация | Предсказуемое положение и узнаваемые элементы | В оформлении можно сократить шапку |
Например, постоянный яркий цвет лучше закрепить за главным действием. Если тот же цвет одновременно означает скидку, опасность и выбранный фильтр, одно правило перестаёт помогать. Исключения возможны, но их нужно назвать, а не оставлять случайными.
Небольшой набор правил вместо четырёх отдельных стилей
Согласуйте основные цвета текста, фона, ссылок, кнопок и ошибок; размеры заголовков и обычного текста; интервалы; форму полей и карточек. Такие повторно используемые значения часто называют токенами дизайна. Для небольшого магазина достаточно таблицы и нескольких компонентов в макете, если команда действительно применяет их одинаково.
Отдельно опишите поведение при наведении, фокусе клавиатуры, загрузке, ошибке и недоступном действии. Кнопка оплаты во время ожидания должна показывать, что запрос обрабатывается. Одно изменение оттенка без текста не объясняет, почему товар нельзя добавить.
Для читаемости можно использовать критерии WCAG: контраст обычного текста с фоном не ниже 4,5:1, крупного — 3:1 в рамках соответствующего критерия. Это ориентиры доступности, а не обещание роста продаж. В учебной паре серый #666666 на белом даёт примерно 5,74:1, а белый на #999999 — около 2,85:1. Вторую пару нельзя выбрать для обычной надписи основной кнопки, если требуется выполнить порог 4,5:1.
Замените цвет в общем компоненте и проверьте все его применения. Исправление только одной кнопки оставит остальные страницы с прежней проблемой. Подбор палитры подробнее разобран в статье о цветах интернет-магазина.
Как согласовать широкий экран и телефон
Сетка должна помогать читать реальные товары. Учебный каталог можно начать с четырёх колонок при ширине 1 280 пикселей и двух при 390. Но длинные названия, мерки или параметры могут потребовать одной колонки: число колонок не является стандартом качества.
Проверьте длинное название, отсутствие скидки, два ценовых варианта, товар без наличия и сообщение об ошибке. Они чаще выявляют расхождения, чем одинаковые короткие подписи в демонстрационном макете. Важный текст не должен исчезать из-за фиксированной высоты блока.
На телефоне оцените доступность выбора варианта и итоговой суммы. Закреплённая кнопка не должна закрывать поле, условия или сообщение об ошибке. Для отдельной диагностики полезен UX-аудит магазина, но сквозное согласование начните с одного законченного сценария.
Учебная покупка через четыре страницы
Предположим, магазин продаёт органайзер в двух размерах. Малый стоит 990 ₽, выбранный большой — 1 490 ₽, доставка в обслуживаемую зону — 250 ₽. Покупатель берёт два больших. Все условия учебные, это не проверка действующего магазина.
| Экран | Что видит и делает покупатель | Ожидаемый результат |
|---|---|---|
| Главная | Переходит из тематического блока к органайзерам | Попадает в соответствующую группу, название предложения узнаваемо |
| Каталог | Видит «от 990 ₽» и открывает карточку | Понятно, что цена зависит от размера |
| Карточка | Выбирает большой размер за 1 490 ₽ | Меняются цена, наличие и изображение нужного варианта |
| Оформление | Покупает два больших с доставкой | Товары 2 × 1 490 = 2 980 ₽, итог 3 230 ₽ |
Допустим, в макете карточки выбор размера выделен синим, а в оформлении синий означает ошибку. Исправление — выделить разные роли и применить общий стиль выбора и ошибки на обоих экранах. Если корзина показывает старую цену 990 ₽, это уже ошибка данных или реализации, которую изменение цвета не исправит.
Проверьте существенную альтернативу: большой размер закончился после просмотра каталога. Карточка должна сообщить об отсутствии и предложить доступный вариант или понятное продолжение. Она не должна молча добавить малый. Сохранение выбранного варианта проверяйте и после возврата назад, перезагрузки и изменения количества.
Состояния, которые нужны для приёмки
Пройдите сценарий мышью, затем клавиатурой и на телефоне. Положение фокуса должно быть видно, порядок перехода — соответствовать чтению. Поле должно иметь понятную подпись; исчезающий пример ввода не заменяет её. Ошибка объясняет, что исправить, и связана с нужным полем.
При неверном адресе остальные уже введённые данные по возможности сохраняются. При ожидании ответа об оплате покупатель не получает ложное подтверждение. Эти состояния нужно показать в макетах и проверить в реализации, а не принимать только по картинке успешного заказа.
Сохраните матрицу для передачи команде:
Элемент и его смысл:
Общее правило цвета, текста и размера:
Главная / каталог / карточка / оформление:
Телефон и широкий экран:
Обычное состояние, фокус, ожидание, ошибка, недоступность:
Допустимое исключение и причина:
Учебный товар, вариант и сумма:
Что проверено в макете, что — на работающем сайте:
Замечание, ответственный и повторная проверка:
Не записывайте «единый стиль принят», пока остаются неописанные исключения в покупке. Вместе с тем согласованные цвета и кнопки сами по себе не доказывают улучшение конверсии: для оценки результата нужны корректные исходные данные и отдельная проверка гипотезы.