Дизайн — статьи о сайтах
В спортивном магазине покупатель не может примерить кроссовки, пощупать ткань или оценить объём рюкзака. Эту роль играют фотографии. Если они загружены хаотично, человек не поймёт, что получит, и уйдёт к тому, у кого это понятнее. Ниже о том, как выстроить фото на сайте так, чтобы их было удобно снимать, загружать и смотреть.
Какие кадры нужны в карточке товара
Набор зависит от категории, но основа общая:
- общий вид на нейтральном фоне. Это главное фото, оно же идёт в каталог;
- другие ракурсы: у обуви сбоку, сверху, подошва и задник, у одежды спереди и сзади;
- детали: молнии, шнуровка, швы, фактура ткани, бирка с составом;
- товар в использовании или на человеке, чтобы были понятны посадка и масштаб;
- комплектация: что лежит в коробке, например гантели с ключом или шлем со сменными подушечками.
Для инвентаря масштаб важнее всего. Положите рядом знакомый предмет или добавьте кадр с руками.
Пример: порядок кадров в карточке рюкзака
Возьмём условную карточку «Рюкзак для бега 12 л». Кадры идут в таком порядке:
- общий вид спереди на белом фоне;
- вид сзади: спинка и лямки;
- крупно нагрудная стяжка и карман для питьевой системы;
- рюкзак на человеке, вид сбоку;
- раскрытый рюкзак с вещами внутри, чтобы была видна вместимость;
- рюкзак рядом с бутылкой 0,5 л для масштаба.
Порядок не случаен. На телефоне галерею листают пальцем, и многие досматривают до второго-третьего кадра. Поэтому первые три фото должны отвечать на главные вопросы: как выглядит, как сидит, насколько большой. Мелкие детали можно оставить в конце. К кадрам с деталями добавьте короткие подписи: «карман на лямке под телефон», а не «деталь 3».
Цвета и размеры: что показывать при переключении
У каждого цвета должен быть свой набор снимков. При выборе цвета меняйте всю галерею, а не только название. Если полного набора для какого-то цвета нет, загрузите хотя бы главное фото и не подставляйте снимки другого цвета.
Размеры отдельных фото не требуют, но у одежды и обуви нужна таблица или схема замеров. Если на фото модель, укажите рядом её рост и размер вещи. Это снижает число вопросов вроде «как будет сидеть».
Вес и формат файлов, чтобы страница не тормозила
Снимок с камеры может весить несколько мегабайт. В таком виде его нельзя загружать на сайт, иначе карточка с шестью кадрами будет открываться долго, особенно в мобильной сети. Исходники храните отдельно, а на сайте используйте версии трёх размеров: маленькую для каталога, среднюю для карточки и крупную для увеличения. Хорошая CMS создаёт их сама при загрузке, и это стоит проверить заранее.
- Для фотографий подходит JPEG. WebP обычно легче, но для старых браузеров нужен запасной JPEG, поэтому уточните это у разработчика.
- Задайте ширину и высоту изображений в вёрстке, иначе страница будет «прыгать» при загрузке.
- Фото ниже первого экрана можно подгружать по мере прокрутки. Главное фото карточки откладывать не нужно.
- Откройте страницу с телефона и медленным соединением, а не только с рабочего компьютера.
Каталог: единый стиль вместо набора разных снимков
В списке товаров кадры сравнивают друг с другом, и разнобой сразу заметен. Договоритесь об одном соотношении сторон, например 1:1 или 4:3, одном фоне и одинаковых отступах вокруг товара. Кроссовки разворачивайте в одну сторону.
Не вшивайте в картинку плашки «Скидка» и «Новинка». Делайте их средствами сайта, тогда акцию можно снять без пересъёмки. Если при наведении мыши показывается второй кадр, учтите, что на телефоне наведения нет. Важная информация там должна быть доступна и без него.
Имена файлов и описания изображений
Дайте файлам понятные имена: runner-pack-12l-black-back.jpg вместо IMG_4082.jpg. Это помогает команде ориентироваться в медиатеке. Для каждого изображения заполните описание (alt), которое коротко говорит, что на фото: «Рюкзак для бега 12 л, чёрный, вид сзади». Такой текст нужен и людям с программами чтения экрана, и на случай, когда картинка не загрузилась. Перечислять в нём ключевые слова не нужно.
Запишите правила на одной странице: сколько кадров, в каком порядке, какого размера. Тогда новые товары будет добавлять любой сотрудник, и каталог не разойдётся по стилю.
Проверочный список перед публикацией карточки
- Есть общий вид, минимум один дополнительный ракурс и один кадр с деталью.
- Есть кадр, по которому понятен масштаб.
- У каждого цвета свой набор фото.
- Первые три кадра отвечают на главные вопросы покупателя.
- Файлы сжаты, а не загружены прямо с камеры.
- Главное фото в каталоге в том же формате и на том же фоне, что у соседних товаров.
- У файлов понятные имена, у изображений заполнено описание.
- Карточка проверена на телефоне.
