Shoupapp
Sabit bir fotoğraf ana sayfayı cansız gösterebilir. Tam ekran arka plan videosu ise sayfayı ağırlaştırır. Hareketli ürün görselleri tam ortada durur: kameranın ve ışığın hareket ettiği, ürünün ise tam olarak yerinde kaldığı birkaç saniyelik yumuşak bir hareket. Bu rehberde video ya da GIF yerine ne zaman hareketli görsel seçmeniz gerektiğini, sitenin hangi bölümüne hangi hareketin yakıştığını ve erişilebilirliği ya da sayfa hızını bozmadan bunu nasıl ekleyeceğinizi anlatıyoruz.
Hareketli görsel mi, video mu, GIF mi?
| Hareketli ürün görseli | Ürün videosu | GIF | |
|---|---|---|---|
| Ne hareket eder | Yalnızca kamera ve ışık | Kamera, sahne, bazen ürünün kendisi | Her şey |
| Sayfadaki etkisi | Sakin, prestijli | Dikkat çekici | Fotoğraflarda çoğu zaman ucuz durur |
| Görüntü kalitesi | MP4 olarak yüksek | MP4 olarak yüksek | Sınırlı renk, büyük dosya |
| En uygun yer | Hero alanları, bannerlar, galeriler | Reklamlar, ilanlar, açılış sayfaları | Küçük grafikler ve ikonlar |
Fotoğraf içeriği söz konusu olduğunda MP4 neredeyse her zaman daha iyi bir dosyadır: GIF'e göre daha küçük boyutta daha fazla renk ve ayrıntı korur.
Yumuşak hareket web sitesinde nerede işe yarar
- Ana sayfa hero alanı. Tek bir sakin döngü, tam bir videonun ağırlığı olmadan gözü yakalar.
- Kategori bannerları. Yavaş bir kaydırma, ürün ızgarasının üstüne derinlik katar.
- Ürün galerileri. Odak kayması, sabit fotoğrafların yanında bir malzemeyi ya da bir ayrıntıyı öne çıkarır.
- Açılış sayfaları. Hafif bir yakınlaşma, lansman sayfasının durgun görünmesini engeller.
Hareketi ölçülü kullanın. Bir sayfadaki tek hareketli görsel odak noktası olur. Birbiriyle yarışan birkaç döngü ise sayfayı okumayı zorlaştırır ve hiçbirinin öne çıkmasına izin vermez.
Hangi bölüme hangi hareket
| Hareket | Ne yapar | En uygun yer |
|---|---|---|
| Yumuşak yakınlaşma | Yavaşça ürüne doğru ilerler | Ana sayfa hero alanı |
| Yumuşak uzaklaşma | Ürünü ve bulunduğu ortamı açığa çıkarır | Lansman ve açılış sayfaları |
| Hafif kaydırma | Görselin üzerinde yana doğru süzülür | Geniş kategori bannerları |
| Odak kayması | Odağı bir ayrıntının üzerine taşır | Ürün galerileri, malzemeler |
| Hafif salınım | Fark edilir edilmez bir süzülme | Sade, sakin sayfalar |
Ürün neden hareket etmemeli
Hareketli ürün görselinin amacı, sabit fotoğraflarınızın yanında sırıtmadan durabilmesidir. Bu da ancak ürünün kendisi sabit ve değişmeden kalırsa mümkün olur: ilk kareden son kareye kadar aynı konum, aynı biçim, aynı etiket, aynı renk. Yalnızca kamera ve ışık hareket ettiğinde sayfa sakinliğini kaybetmeden canlanır, ürün de tanıdık haliyle sizin ürününüz olarak kalır.
Sitenize ekleme
Hareketli ürün görseli, bir görselin bulunacağı yerde kullanılan kısa bir MP4'tür: kendi kendine oynayan, döngüye giren ve sesi olmayan bir video. Çoğu mağaza teması ve sayfa oluşturucusunda bu seçenekleri sunan bir video bloğu bulunur. Elle eklemek isterseniz kod şöyle görünür:
<video autoplay muted loop playsinline poster="product-still.jpg">
<source src="product-loop.mp4" type="video/mp4">
</video>- muted otomatik oynatma için zorunludur. Tarayıcılar sesli otomatik oynatmayı engeller; Chrome'un otomatik oynatma politikasında belirtildiği gibi, "sessiz otomatik oynatmaya her zaman izin verilir".
- playsinline telefonlarda videonun tam ekrana geçmek yerine sayfa içinde kalmasını sağlar.
- poster video yüklenirken sabit fotoğrafı gösterir, böylece o alan hiçbir zaman boş kalmaz.
Azaltılmış harekete saygı gösterin
Bazı ziyaretçiler, rahat etmek ya da sağlık nedenleriyle cihaz ayarlarından animasyonları kapatır. Tarayıcılar bu tercihi prefers-reduced-motion ayarıyla iletir; bu ayar "kullanıcının cihazında gereksiz hareketi en aza indiren bir ayarı etkinleştirip etkinleştirmediğini" algılar. Bu ziyaretçilere onun yerine sabit görseli gösterin:
@media (prefers-reduced-motion: reduce) {
.product-loop { display: none; }
.product-still { display: block; }
}Yumuşak bir döngü tanımı gereği gereksiz harekettir; dolayısıyla bu düzenleme size hiçbir şeye mal olmaz ve sayfayı herkes için kullanılabilir kılar.
Hafif tutun
- Kısa tutun. Temiz bir şekilde döngüye giren birkaç saniye yeterlidir.
- Bulunduğu yere göre boyutlandırın. Bir banner, gösterildiği genişlikten daha büyük bir videoya ihtiyaç duymaz.
- Sakin hareket daha iyi sıkışır. Yavaş ve küçük hareketler, hızlı olanlara göre daha küçük dosyalar üretir.
- Ekledikten sonra ölçün. Özellikle mobilde sayfa hızınızı öncesi ve sonrasıyla kontrol edin.
Döngüleri Shoupapp'te hazırlamak
Shoupapp'in hareketli ürün fotoğrafları tam bu kullanım için tasarlandı. Kitaplığınızdan bir fotoğraf seçiyor, bir hareket belirliyor (yumuşak yakınlaşma, yumuşak uzaklaşma, hafif kaydırma, odak kayması veya hafif salınım) ya da fotoğrafa uygun olanı seçmesine izin veriyor, ardından formatı seçiyorsunuz: dikey 3:4, kare, dikey 9:16, yatay 4:3 veya geniş 16:9. Her klip beş saniye uzunluğunda ve MP4 olarak geri geliyor; yazmanız gereken bir prompt yok. Dosyayı indirin, orijinal fotoğrafı poster ve yedek görsel olarak saklayın ve döngüyü görselin bulunduğu yere yerleştirin.
Daha fazla harekete ihtiyaç duyduğunuzda
Hareketli görseller tasarımı gereği sakindir. Gerçek hareket gerektiren reklamlar ve ilanlar için ürün videosu daha uygundur. Reels ve TikTok için ise birkaç çekimden oluşan kısa dikey bir film doğru seçimdir.
Hareketli görselin üzerindeki metin
Hero alanlarında genellikle görselin üzerinde bir başlık ve bir buton bulunur. Altta hareket varken okunabilirlik daha da önemli hale gelir:
- Metni karenin sakin kısmına yerleştirin, kameranın ilerlediği alanın üzerine değil.
- Yumuşak bir gradyan veya gölge kullanın: döngü boyunca arka planın parlaklığı değişiyorsa metnin arkasına koyun.
- Hareketi yumuşak tutun ki metin kayıyormuş gibi görünmesin.
Döngüyü kusursuz hale getirmek
Video yeniden başlarken görünen bir sıçrama, sakin etkiyi bozar. Yumuşak bir yakınlaşma ya da hafif bir kaydırma gibi yavaş ve düzenli hareketler, döngü noktasını en iyi gizleyenlerdir. Sıçrama fark ediliyorsa döngüyü bir kez oynayıp son karede duracağı bir yere koyun ya da başlangıcı ve bitişi benzer kadrajda olan bir hareket kullanın.
Telefonlarda
Telefonlar hero alanını daha küçük ve çoğu zaman daha uzun gösterir. Temanız izin veriyorsa geniş bir döngünün kırpılmasına izin vermek yerine mobil düzen için ayrı bir dikey veya portre döngü hazırlayın. Yavaş bağlantılarda video yüklenene kadar sayfayı poster görseli taşır; bu yüzden tek başına da iş gören bir poster seçin.
Hareketli görsel soruları
Ürün hareket eder ya da değişir mi?
Etmemek üzere tasarlanmıştır: yalnızca kamera ve ışık hareket eder. Yine de her klibi kullanmadan önce kontrol edin.
Hareketli görseli pazaryeri ilanında kullanabilir miyim?
Pazaryeri ürün videolarını kabul ediyorsa evet, ancak sakin bir döngü esas olarak kendi web siteniz için yapılmıştır.
Önce hangi fotoğrafı hareketlendirmeliyim?
Ana sayfanızın en üstündekini. Küçük bir hareketin en çok ziyaretçi tarafından görüldüğü tek yer orasıdır.