Web Tasarımındaki Resim Atlıkarıncaları - Yararları ve En İyi Uygulamaları

Sıkıntısı yok atlıkarınca özelliği slayt gösterileri internette. Aslında, bu eğilim dışında hiçbir şey yapmadı son 5-10 yılda büyümek şimdi her zamankinden daha fazla tarayıcı desteği ile. Ama görüntü karuselleri gerçekten çabaya değer mi? Ne tür faydalar üretiyorlar ve bir düzende üretken olarak nasıl kullanılmaları gerekiyor??

Biraz paylaşmak istiyorum ortak eğilimler, canlı örnekler ve fikirler görüntü atlıkarıncalarıyla ilgilenen web tasarımcıları için. Bu dinamik kaydırıcılar çok tartışılıyor, ancak doğru bağlamda üretildiklerinde değer kattıklarını düşünüyorum..

E-ticaret için ürün karuseller

E-ticaret dünyası, ana sayfalarda ve ürün sayfalarında dönen döner mekanizmalarla doludur. Amaç için net bir bilgi yoğunluğunu korumak fotoğraf ve metin eşsiz ve değerli bir hikaye anlatmak ürünleri satmaya yardımcı olmak için.

Var iki birincil yerleşim e-ticaret ürünü kaydırıcısında:

1. Bir mağazanın ana sayfasında
2. Bir ürün sayfasında

İkisi de farklı çalışıyor ama aynı amaca hizmet etmek - Ürünleri görsel olarak satmak.

Örnek 1: Au Lit Fine Linens - ana sayfa

Au Lit Fine Linens için ana sayfaya bir göz atın. tam ekran otomatik döner karusel kullanıyor yorgan, yastık ve yatak örtüleri gibi farklı ürünleri göstermek için.

Görüntüler tam genişliği almak Ana sayfanın kıvrımın çok üstünde görünmek. Aslında, bu kaydırıcı sayfaya ilk iniş yaparken dikkatinizi çeken ilk şey olmalıdır. Her slayt, sitede farklı bir sayfaya yönlendirir. müşterilere alışveriş deneyimi boyunca rehberlik etmek.

Bu kaydırıcı, sayfaya ilk açılışta biraz korkutucu olabilir, ancak düğme bağlantısı ve bindirme metni sadece dalmak ve alışveriş yapmak isteyen ziyaretçiler için çok cesaret verici olabilir..

Örnek 2: Eden telefon kılıfı - ürün sayfası

Eden telefon kılıfı ürün sayfasında daha spesifik bir örnek görebilirsiniz. Kullanır otomatik dönen kaydırıcı Ürün resimlerini göstermek.

Bunları biraz buluyorum “çok fazla” e-ticaret dünyasında. Bir ürüne bakarken olmak istiyorum Görüntüler arasında geçiş kontrolü.

En iyi seçenek, bir resim galerisi yapmaktır. ziyaretçiye verilen kontrol ile. Örneğin, İnsanlara Göre Tasarım sayfası kullanır her fotoğraf için küçük resimler çok daha cesaret verici ve kullanıcıya daha fazla kontrol hakkı veriyor.

Web portföyü atlıkarıncaları

Çevrimiçi web siteleri portföyleri biraz farklıdır çünkü bu slaytlar her zaman başka bir sayfaya tıklamayın. Bazılarının bir vaka incelemesine yol açacağı veya bir proje hakkında yazacağı doğru, ancak portföy web sitelerinde birçok atlıkarınca sadece görsel çalışmaları göstermek.

Örnek 1: Biboun - ana sayfa

Biboun adı altında çalışan Fransız sanatçı atlıkarınca kaymak ana sayfada sanat eserlerinin parçacıklarını içeren. Bireysel slaytlar portföyünde iç sayfalara yol açar. tüm projeyi kapsayacak birden fazla fotoğraf ile.

Bu muhtemelen kaymak yapmanın en iyi yolu bir portföy web sitesinde. Sadece belirli bir eserin sergilenmesi için bir neden olmadıkça, rastgele bir eser listesini göstermek anlamsızdır..

Bütün parçalar nefis Biboun'un kaydırıcısında ve fazla yer kaplamaz Ya. Bazı insanların otomatik dönen slayt gösterilerinden nefret ettiklerini bilmeme rağmen, böyle minimalist bir düzende bu tasarım özelliğinden şikayet etmekte zorlanıyorum.

Örnek 2: Aaron Blaise web sitesi - ana sayfa

Aaron Blaise'ın internet sitesinde bulunan örneği çok beğendim çünkü çalışmalarını portföy olarak sergiliyor, ama çoğunlukla bu web sitesini kullanır sanat videolarını sat. Aaron Blaise bir kaç yıl boyunca Disney'de çalıştı ve bunu kanıtlama becerisine sahipti..

Sitedeki ana sayfa kaydırıcısı otomatik olarak dönerken, inanılmaz derecede sinir bozucu ya da kullanım dışı bulmuyorum. Her slayt Resimle alakalı bir miktar içerik var, ve Aaron'a yardım eder En son video derslerine dikkat çekmek Genç sanatçılara belirli becerilerde ustalaşmayı öğreten.

Harika bir portföy atlıkarınca görsellere odaklanır, ve ziyaretçileri daha da ileri götürür Web sitesine Bu iki şeyi elde edersen, kişisel bir portföy web sitesinde böyle bir özelliğe karşı olmazdım..

Ortak tasarım trendleri

Yukarıdaki örneklerimden bazılarına bakarsanız, genellikle iki farklı sürgü türü olduğunu fark edeceksiniz: Tam ekran ve sabit genişlik.

Bu stilistik seçimler sıklıkla düzeni ile ilgili ve ne kadar içeriğe sahip olabileceği. Bir düzen sayfanın tüm genişliğini kaplarsa, kaydırıcıyı genişletmek de mantıklı olur. Ama bu aynı zamanda sizi zorlar yüksek kaliteli görüntüler bulmak hala büyük çözünürlüklü monitörlerde tam ekranda iyi görünüyor.

İki sanat portföyündeki örneklerde göreceğiniz gibi sabit genişlik stilini şahsen tercih ediyorum. Bunlar kontrolü çok daha kolay, ve sık sık o kadar uzun değil - ziyaretçilerin yapmasını kolaylaştırmak basitçe onları yoksay isterlerse.

Ayrıca otomatik ilerleyen slaytların değerini de göz önünde bulundurun ve ne kadar zor olabilir kullanıcıların bu içeriği yakalamaları için. Nielsen Norman Grubu tarafından daha iyi olduğunu gösteren harika bir vaka çalışması. otomatik ilerleyen sürgülere sahip olmamak.

Bu yaklaşımla gemideyim. hafızaya daha az yoğun tarayıcıda daha az animasyon ve hareket ile ve çoğu insan da otomatik dönen karusellerden hoşlanmıyor - ve her zaman izleyicilerinize hitap etmek.

Ancak, otomatik olarak ilerleyen bir kaydırıcı eklemenin hiçbir zaman değmeyeceğini söyleyemem, özellikle de statik kaydırıcılar ile pek fazla görüş alamadım, ve ayrıca gerek ilk slaydınızı en önemli hale getirin birçok kullanıcı bir sonraki slayda geçmeyecek. Bir sürgü otomatik dönen olup olmayacağına karar verme ne yazık ki deneme yanılma alanı.

Her ne pahasına önlemek için ne

İşte şahsen düşündüğüm önemli bir şey altına düşmek “ne pahasına olursa olsun önlemek”. Aşağıdaki ekran görüntüsüne bir göz atın veya tıklayın ve ne olabileceğini tahmin etmeye çalışın.

Yozenn cafe web sitesinde tam ekran başlık sürgüsü kullanılıyor. Otomatik olarak dönmez, bu da mükemmeldir, ancak slaytlar da dekorasyon dışında bir amaca hizmet etmemek.

Görüntüler hiçbir yere bağlama, ve küçük bir avuç dolusu ürünü gösterirler. Hepsi sadece olabilir ana sayfa arka planına eklendi kargaşayı ve ekstra kilobaytlık JavaScript tasarrufu için kaydırıcı olmadan.

Bu arka plan sürgülü özelliğinin zaten sıkışık bir web sitesine çok fazla değer katmadığını savunuyorum. Resimlerin bağlantıları veya beraberindeki metinleri olsaydı, en azından daha alakalı olurlardı.

Başlık bölümünde, tam sayfayı kaplayan görüntüleri kullanmaktan çekinmeyin, ancak hiçbir yere bağlantı verme veya herhangi bir orijinal bilgi sunma o zaman onları atlıkarıncaya çevirme.

Etkileşimli özellikler

Kullanıcıların bir atlıkarıncada gezinme şekli tasarımı etkiler. Bir var navigasyon stilleri çeşitliliği, ama bunlar en popüler olanları:

• Nokta tabanlı gezinme
• Ok gezinti
• Küçük resim gezinme
• Bağlantıları veya başlık öğelerini listeleme

En yaygın nokta gezinti yüzlerce modern web sitesinde bulabileceğiniz.

Örnek 1: Evde Şık - ana sayfa

Evde şık Chic kullanarak harika bir örnek kaydırıcının altında üç küçük nokta navigasyonu belirtmek için. Her görüntü otomatik olarak döner ve serideki ilgili nokta siyahla doldurulur. Diğer iki boş nokta potansiyel slaytları gösterir kullanıcıların göz atması için.

Bu bir popüler tasarım deseni zaten birçok kullanıcı tanıdı. Birçok tasarımcının sevmediği hamburger menüsü ile aynı kategoriye giriyor. kullanıcılar zaten tanıdı, ve içgüdüsel olarak nasıl kullanılacağını bilmek.

Örnek 2: Saf Döngüler - ana sayfa

Saf Döngüleri ana sayfasında bir kullanır nokta ve ok navigasyonunun kombinasyonu. Bu şekilde kullanıcılar ileri ve geri gezinmeye sahiptir, ancak ayrıca bkz “tüm” navigasyon alttan nokta bağlantıları.

Aslında bu örnekte nokta bağlantılarını görmek zor buluyorum. Görsel slaytlardaki zorluk, birçok öğenin ayırt edilmesinin kolay olmamasıdır, böylece oklar ve noktalar olabilir arka plana kolayca karışır.

Örnek 3: IGN - ana sayfa

IGN ana sayfasında başka bir tane bulacaksınız otomatik dönen atlıkarınca kullanan navigasyon için başlık bağlantıları. Bu, isteyen yayıncılar için çok yaygındır. satış başlığı ürünlerden ziyade. Her bağlantı sonunda kaybolacak ayrı slayda gider. makale sayfasına yönlendirir.

Bu bağlantılar küçük resimlerle değiştirilebilir, ve hatta her hikayenin küçük resimlerini ekleyin - ancak Atlıkarıncada görsel görünüş, küçük resmi atlamak aslında yer kazandırır.

Farklı web siteleri farklı nedenlerle farklı gezinme stilleri kullanır. Ziyaretçilerinizin hedeflerini düşünün, ve en iyi kullanıcı deneyimi için tasarım.

Anahtar teslim paketler

Hedeflemelisin gerçek değer veya ek bilgi üretmek bir atlıkarınca ile. Bu, ziyaretçinin daha önce sahip olmadığı bilgiler olabilir veya ziyaretçinin başka türlü bulamadığı sayfalara yol açabilir..

Otomatik dönen karusellerden kaçınmaya çalışın ve onları yalnızca ana açılış sayfalarında kullanın (giriş sayfası bir örnektir). Atlıkarınca sürece bir amacı var, ve reklam gibi görünmüyor, tasarımınız iyi yapmalı.

Web karuselleri hakkında daha fazla bilgi arıyorsanız, aşağıdaki yayınlardan bazılarına göz atın:

• Carousels Brad Frost tarafından
• Kullanıcı Dostu Bir Ana Sayfa Atlıkarınca Tasarlamak için 8 UX Gereksinimi
• Carousel Kullanılabilirliği: İçeriği Aşırı Yükleyen Web Siteleri için Etkili Bir Kullanıcı Arayüzü Tasarlama