Mobil E-Ticarette 3D Deneyim: Tasarım ve Performans Rehberi

Mobil Öncelikli 3D Tasarım

E-ticaret trafiğinin büyük bölümü mobil cihazlardan gelir. Bu nedenle 3D ürün deneyimini önce mobil için tasarlamak, sonra masaüstüne uyarlamak doğru yaklaşımdır.

Dokunmatik Etkileşim Tasarımı

Mobil 3D etkileşimi, fare etkileşiminden temelden farklıdır:

• Tek parmak sürükleme: Modeli yatay ve dikey döndürme. Sayfa kaydırma ile çakışma olmadığından emin olun.
• İki parmak sıkıştırma: Yakınlaştırma ve uzaklaştırma. Minimum ve maksimum zoom sınırlarını belirleyin.
• Çift dokunma: Varsayılan görünüme sıfırlama veya odak noktasına yakınlaştırma.

Önemli tasarım kararı: 3D görüntüleyici alanı ile sayfa kaydırma arasındaki çatışmayı çözün. Görüntüleyici alanına dokunulduğunda sayfa kaydırması devre dışı kalmalı, alan dışında normal çalışmalıdır.

Performans Optimizasyonu

Mobil cihazlar masaüstü bilgisayarlara göre sınırlı GPU gücüne sahiptir. Performansı korumak için:

Model Optimizasyonu

• Mobil için polygon sayısını 20.000'in altında tutun
• Texture boyutlarını maksimum 1024x1024 olarak sınırlayın
• Draco sıkıştırma ile dosya boyutunu küçültün
• Gereksiz detayları normal map ile verin, polygon ile değil

Yükleme Stratejisi

1. Poster görseli ile başlayın - model arka planda yüklenirken müşteri ürünü görür
2. Progressive loading kullanın - düşük kaliteli model hemen gösterilsin, yüksek kaliteli sonra yüklensin
3. Ekranda görünmeden yüklemeyin (lazy loading)

Responsive Boyutlandırma

3D görüntüleyici alanı ekran boyutuna göre uyum sağlamalı:

model-viewer {
  width: 100%;
  height: 0;
  padding-bottom: 100%; /* Kare oran */
  max-height: 500px;
}

Pil ve Isınma

Sürekli 3D render mobil cihazda pil tüketir ve ısınmaya neden olabilir. auto-rotate animasyonunu kullanıcı etkileşimi olmadığında durdurun ve render döngüsünü minimize edin.

Sonuç

Mobil 3D deneyimi, doğru tasarım ve optimizasyon ile masaüstü kadar etkili olabilir. Anahtar, mobil cihazın kısıtlamalarını tasarım sürecinin başından itibaren dikkate almaktır.