Uzun Kaydırmalı Web Tasarım Trendini Keşfetmek

Ekran ne kadar küçük olursa, kaydırma o kadar uzun olur.

Bu gerçek, uzun kaydırmanın yükselişini açıklıyor: mobil taramanın masaüstü taramayı geçmesiyle birlikte, küçük ekranların popülaritesi, tasarımcıları modası geçmiş "ekranın üst kısmındaki" zihniyetlerini yeniden düşünmeye sevk etti.

Uzun kaydırma, hikaye anlatımı, gezinme, yaratıcı görseller ve daha sürükleyici bir genel deneyim için birçok yeni fırsat yaratır. Sonuç olarak, birkaç ortak teknik ve stratejinin ortaya çıkmaya başladığını görüyoruz:

• Paralaks Grafikleri – Video oyunu endüstrisinden ödünç alınan bu arka planları farklı hızlarda hareket ettirme stratejisi, etkileşim kurması daha keyifli olan 3D efekti ve uyarıcı görseller yaratır.
• Sayfalar Olarak Ekranlar – Bilgileri tek bir sayfada düzenlemenin önemli bir yolu, kavramları genellikle arka planı değiştirerek ekran boyutundaki bölümlere ayırmak, siteleri daha uyumlu hale getirir.
• Yapışkan Navigasyon – Uzun kaydırmanın en büyük dezavantajlarından biri, kullanıcının yönünü şaşırmasıdır, bu nedenle ekranda her zaman aynı yerde kalan bir navigasyon sistemine sahip olmak, kullanıcılara kaybolmayı önlemek için kontrol ve güvenlik sağlar.
• Hareketli Etkileşim – Kaydırma ile tetiklenen animasyonlar, içerikten bağımsız olarak kullanıcının kaydırma yapmaktan keyif aldığı bir noktaya kadar ilgisini çeken eğlenceli bir etkileşim düzeyi ekler.
• Atipik Yön - Son zamanlarda uzun kaydırma eğilimi nedeniyle, siteler sola, sağa veya yukarı kaydırarak kendilerini farklılaştırabilir.
• Göstergeler – Bazı kullanıcılar kendi başlarına kaydırmayı düşünmezler, bu nedenle "aşağı kaydır" veya başka bir gösterge gibi hızlı talimatlar kafa karışıklığını önler - bunları diğer bağlantılardan veya harekete geçirici mesajlardan ayırdığınızdan emin olun.

Web Tasarım Trendleri 2015 ve 2016'da açıklandığı gibi, aşağıdaki siteleri uzun kaydırmalı sitelerin en iyi örnekleri arasında yapan tekniklerdir.

heyecan

Sayfa sayfa kalıbı kırmaktan sorumlu öncülerden biri olan Twitter, bugün en iyi ve en çok tanınan uzun kaydırma siteleri arasında yer alıyor. Bu format, tweet'lerin kronolojik olarak düzenlenmesine ve hala yeni ve taze görünmesine izin verir.

Sosyal medya siteleri ve kullanıcı tarafından oluşturulan içeriğe sahip diğerleri için, uzun kaydırma sadece modaya uygun bir seçim değil, aynı zamanda pratik bir seçimdir. Sonsuz kaydırmadan hiç bitmeyen yeni içeriğin yüklenmesi, aksi takdirde kaotik içeriğin düzenlenmesine izin verir.

Kalp Çocuk NW

Yeni Zelanda yardım kuruluşu Heart Kids tüm engelleri kaldırıyor. Uzun kaydırmalı site, hayat kurtaran mesajını tanıtmak için animasyonları (bazıları kaydırmayla etkinleştirilmiş), çarpıcı renk kullanımını, dokunaklı görüntüleri ve imleç etkileşimini birleştirir.

Açılış ekranında göze batmayan "Kaydırma" simgesine ve talimatına ve her zaman en üstte kalan yapışkan harekete geçirici mesajın farkına varın.

Bot

Uzun kaydırmanın en yaratıcı kullanımlarından biri, etkileşimli bir roman gibi bir şey olan SBS'nin The Boat'ıdır. Sürekli animasyonlar ve yeni içerik göründüğünde hareket ve açıların akıllıca kullanılması, kullanıcıyı/okuyucuyu geleneksel, durağan kaydırma sitelerinin eşleşemeyeceği sürükleyici bir deneyime çekiyor.

MCA Leicester: Yedi Tür Motosiklet Sürücüsü

MCA Leicester için bu yan site, gerçekten kaydırmadan kaydırmayı belirtmek için sorunsuz bir yöntem gösterir. Sol taraftaki gri renkli miğferler, dikey olarak istiflenir ve (başlıkla birlikte) kullanıcının daha fazla içerik görmek için aşağı kaydırması gerektiğini gösterir.

Ek bir taktik, siteyi biraz uzun kaydırma/sayfa sayfa gezinme melezi haline getiren, her yeni ekranı sunan akıllı animasyondur.

Beyninizin İnfografik İstemesinin On Üç Nedeni

Farklı bölümlerin ve kavramların doğal olarak sürekli bir akışta birleştirildiği doğal uzun kaydırma stili, onları infografikler için harika kılar.

Infographics'in Beyninizin İstediğinin On Üç Nedeni Infographics'in gösterdiği gibi, tek sayfa formatı tasarımcıların ağır dozdaki bilgileri daha küçük, sindirilebilir bitlerde akıcı bir şekilde sunmasına olanak tanır.

Ayrıca, kaydırma ile hareket eden göz gibi arka plan animasyonları gibi kaydırmayla etkinleştirilen animasyonlar, bilgi öğrenmenin bazen sıkıcı yönlerini ortadan kaldırır.

Junko'nun Hikayesi: Hiroşima'da Hayatta Kalmak

Başka bir SBS sitesi olan Junko's Story, hayatta kalanların Hiroşima patlamasında hayatta kalmanın tüyler ürpertici hikayesini anlatmak için uzun kaydırmanın hikaye anlatımı ve infografik özelliklerini bir araya getiriyor.

Ciddi doğası nedeniyle, site, grafiklerle serpiştirilmiş düz metin içeren geleneksel bir formatı koruyor. Ancak site, kenarlarda kaybolan yukarıdaki metal kask gibi kaydırmayla etkinleştirilen görüntülerle taze ve modern bir his veriyor.

Bu görüntüler, Hiroşima hakkında - patlama yarıçapının bir haritası gibi - daha fazla ayrıntı için tıklayabileceğiniz eserler ve gerçek bilgi grafikleri anlatıyor.

beagle

Podio'nun Beagle aracı için site, uzun kaydırma formatına sayfa sayfa gezinme ayarlar.

Değer önermesindeki her noktanın kendi ekranı/sayfası vardır, ancak hepsine doğrusal bir kaydırma yoluyla erişilebilir ve ekrandan yukarıdaki ekrana hareket eden kağıt parçası gibi kullanıcının dikkatini bir ekrandan diğerine taşıyan animasyonlarla birleştirilir. .

Bowhead (Kuyruklar ve Balinalar)

Yukarıdaki Beagle gibi Bowhead, tek bir ürün için olsa da, değer teklifini nokta nokta görüntülemek için uzun kaydırmadan yararlanır. Site, içeriğin ilgi çekici olmasını sağlamak için solma ve slayt gibi animasyonlar kullanır.

Kral Kolları

Tüm uzun kaydırma sitelerinin gösterişli olması gerekmez. Londra pub'ı The Kings Arms, ekranlar arasında süslü animasyon geçişleri olmadan basit arka plan bölümleri kullanır.

Ancak, arka plan telefonlarındaki bir paralaks hareketi ve ek imleç animasyonları (estetik bir düzenden bahsetmiyorum bile) sitenin donuk görünmesini engelliyor.

Wall's Dondurma ve Airpure Araba Kokuları

Buna karşılık, Wall's Ice Cream ve Airpure Oto Spreyi işbirliğinin tanıtım sitesi çok gösterişli. İkonik buzlu şekerlerin görüntülerinden biraz daha fazlası olan uzun kaydırmalı site, ekranlar arasında göz atmaya değer kılan eğlenceli animasyonlara sahiptir.

Sol sitede ve alttaki ilerleme çubuğunda (renkleri değiştiren) yapışkan gezinmeye dikkat edin.

Beatrate Bandı

Beatrate grubunun uzun kaydırma sitesi, otomatik oynatılan video ve yatay bir görüntü atlıkarınca dahil olmak üzere uzun kaydırma için birkaç deneysel özellik içerir.

Uzay iğnesi

Seattle Space Needle sitesi, tipik olmayan kaydırma yönünün mükemmel bir örneğidir. Uzay iğnesinde yukarı (ve ötesine) seyahat etme bahanesi altında, kullanıcıların aşağı değil yukarı kaydırma yapması mantıklıdır.

Ek Sahalar

Kale

Ortaya Çıkmak (Lexus)

Bir John St

Biri Görmek, Biri Öldürmek

Vimeo'dan Cameo

kare boşluk

Evet Uygulama

oyun

Google'dan Gelen Kutusu

Reebok'tan İnsan Olun

Çözüm

Yukarıdaki sitelerin kanıtladığı gibi, uzun kaydırmanın en başarılı uygulaması, bir trendin parçası olarak görünmemek için pratik faydalarıdır.

Uzun kaydırmanın birçok yararlı avantajı vardır: düzensiz bilgileri birleştirmek, etkileşim, gezinme özgürlükleri, çarpıcı görseller, kapsamlı içerik görüntüleme (sonsuz kaydırma), doğrusal hikaye anlatımı vb. Ancak, yönelim bozukluğu ve bazen yükleme süreleri gibi dezavantajlar göz önüne alındığında, yapmamalısınız. dikkatsizce geçiş yapın. Bundan en iyi şekilde yararlanmak için en iyi teknikleri anlayın.