Hikayeler bileşeni oluşturma

Web'de Instagram Hikayeleri'ne benzer bir deneyim oluşturma hakkında temel bir genel bakış.

Adam Argyle

Bu yayında, web için duyarlı, klavye ile gezinmeyi destekleyen ve tarayıcılar arasında çalışan bir Hikayeler bileşeni oluşturma konusundaki düşüncelerimi paylaşmak istiyorum.

Demo

Bu Hikayeler bileşenini kendiniz oluşturmayla ilgili uygulamalı bir gösterim tercih ederseniz Hikayeler bileşeni codelab'ine göz atın.

Video tercih ediyorsanız bu yayının YouTube versiyonunu aşağıda bulabilirsiniz:

Genel Bakış

Hikayeler kullanıcı deneyimiyle ilgili iki popüler örnek Snapchat Hikayeleri ve Instagram Hikayeleri'dir (fleets'i de unutmamak gerekir). Genel kullanıcı deneyimi açısından Hikayeler, genellikle birden fazla abonelikte gezinmek için kullanılan, yalnızca mobil cihazlarda kullanılabilen ve dokunmaya dayalı bir yöntemdir. Örneğin, Instagram'da kullanıcılar bir arkadaşının hikayesini açıp fotoğraflara göz atar. Genellikle bu işlemi aynı anda birçok arkadaş için yaparlar. Kullanıcı, cihazın sağ tarafına dokunarak arkadaşının bir sonraki hikayesine geçer. Sağa kaydıran kullanıcılar farklı bir arkadaşa geçer. Hikaye bileşeni, atlı karıncaya oldukça benzer ancak tek boyutlu bir dizi yerine çok boyutlu bir dizide gezinmeye olanak tanır. Her bandın içinde bir bant varmış gibi görünür. 🤯

Kartları kullanarak çok boyutlu diziyi görselleştirme. Soldan sağa doğru, mor kenarlıklı kartlardan oluşan bir yığın ve her kartın içinde 1-çok sayıda mavi kenarlıklı kart var. Listedeki liste.
1. arkadaş bandı
2. "yığılmış" hikaye bandı
👍 Liste içinde liste, diğer adıyla: çok boyutlu dizi

İşe uygun araçları seçme

Sonuç olarak, birkaç kritik web platformu özelliği sayesinde bu bileşeni oluşturmanın oldukça kolay olduğunu gördüm. Bu konuları ele alalım.

CSS Izgarası

CSS Grid, içerikleri düzenlemek için bazı güçlü yöntemlerle donatıldığından düzenimiz CSS Grid için zorlu bir görev olmadı.

Arkadaşlar düzeni

Birincil .stories bileşen sarmalayıcımız, mobil öncelikli yatay bir kaydırma görünümüdür:

.stories {
  inline-size: 100vw;
  block-size: 100vh;

  display: grid;
  grid: 1fr / auto-flow 100%;
  gap: 1ch;

  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior: contain;
  touch-action: pan-x;
}

/* desktop constraint */
@media (hover: hover) and (min-width: 480px) {
  max-inline-size: 480px;
  max-block-size: 848px;
}
Izgara tarafından oluşturulan sütunları vurgulamak için Chrome Geliştirici Araçları'nın Cihaz Modu'nu kullanma

grid düzenini ayrıntılı şekilde inceleyelim:

  • Mobil cihazlarda görüntü alanını 100vh ve 100vw ile açıkça doldururuz ve masaüstünde boyutu kısıtlarız.
  • /, satır ve sütun şablonlarımızı ayırır.
  • auto-flow, grid-auto-flow: column olarak çevriliyor
  • Otomatik akış şablonu 100%'dır. Bu durumda, kaydırma penceresinin genişliği ne olursa olsun.

Mobil telefonda bunu, satır boyutunun görüntü alanı yüksekliği ve her sütunun görüntü alanı genişliği olarak düşünebilirsiniz. Snapchat Hikayeleri ve Instagram Hikayeleri örneğine devam edersek her sütun, bir arkadaşın hikayesi olur. Görüntü alanının dışında da arkadaş hikayelerini görmeye devam etmek istiyoruz. Böylece kaydırabileceğimiz bir yer olur. Grid, her arkadaş hikayesi için HTML'nizi yerleştirmek üzere gereken sayıda sütun oluşturarak bizim için dinamik ve duyarlı bir kaydırma kapsayıcısı oluşturur. Grid, tüm efekti merkezileştirmemizi sağladı.

Birleştirme

Her arkadaşımızın hikayelerini sayfalandırmaya hazır bir şekilde almamız gerekir. Animasyon ve diğer eğlenceli desenler için bir yığın seçtim. Yığın derken, yandan değil, yukarıdan baktığınız bir sandviç gibi görünmesini kastediyorum.

CSS ızgarasıyla, satır ve sütunların bir takma ad ([story]) paylaştığı tek hücreli bir ızgara (ör.kare) tanımlayabiliriz. Ardından her alt öğe, takma adlı tek hücreli alana atanır:

.user {
  display: grid;
  grid: [story] 1fr / [story] 1fr;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.story {
  grid-area: story;
  background-size: cover;
  …
}

Bu, HTML'mizin yığınlama sırasını kontrol etmesini sağlar ve tüm öğeleri akışta tutar. absolute konumlandırma veya z-index ile ilgili hiçbir şey yapmamıza gerek kalmadığını ve height: 100% veya width: 100% ile doğru kutuyu işaretlememize gerek olmadığını fark edin. Üst ızgara, hikaye resmi görüntü alanının boyutunu zaten tanımladığından bu hikaye bileşenlerinin hiçbiri, alanı doldurmak için belirtilmek zorunda değildi.

CSS Scroll Snap Points

CSS Scroll Snap Points spesifikasyonu, kaydırma sırasında öğeleri görüntü alanına sabitlemeyi kolaylaştırır. Bu CSS özellikleri yokken JavaScript kullanmanız gerekiyordu ve bu işlem en hafif tabirle zordu. Nasıl kullanılacakları hakkında ayrıntılı bilgi için Sarah Drasner'ın Introducing CSS Scroll Snap Points (CSS Kaydırma Sabitleme Noktalarına Giriş) başlıklı makalesine göz atın.

scroll-snap-points stilleri olmadan ve bu stillerle yatay kaydırma. Bu politika olmadan kullanıcılar normal şekilde serbestçe kaydırma yapabilir. Bu sayede tarayıcı, her öğenin üzerinde nazikçe durur.
üst
.stories {
  display: grid;
  grid: 1fr / auto-flow 100%;
  gap: 1ch;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior: contain;
  touch-action: pan-x;
}
 Kaydırma sonu olan üst öğe, tutturma davranışını tanımlar.
alt
.user {
  display: grid;
  grid: [story] 1fr / [story] 1fr;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
 Çocuklar, Snap hedefi olmayı kabul eder.

Kaydırma sabitleme noktalarını seçmemin birkaç nedeni var:

  • Ücretsiz erişilebilirlik. Scroll Snap Points spesifikasyonu, sol ok ve sağ ok tuşlarına basıldığında varsayılan olarak tutturma noktaları arasında hareket edilmesi gerektiğini belirtir.
  • Gelişen bir spesifikasyon: Kaydırma Snap Noktaları spesifikasyonu sürekli olarak yeni özellikler ve iyileştirmeler alıyor. Bu da Hikayeler bileşenimin bundan sonra muhtemelen daha da iyi olacağı anlamına geliyor.
  • Uygulama kolaylığı. Kaydırma sabitleme noktaları, dokunmaya odaklı yatay sayfalama kullanım alanı için özel olarak tasarlanmıştır.
  • Ücretsiz platform tarzı atalet. Her platform, tuhaf bir kaydırma ve duraklatma stiline sahip olabilen normalleştirilmiş atalet yerine kendi stilinde kaydırılır ve duraklatılır.

Tarayıcılar arası uyumluluk

Opera, Firefox, Safari ve Chrome'un yanı sıra Android ve iOS'te test ettik. Özellikler ve destek açısından farklılıklar bulduğumuz web özelliklerinin kısa bir özetini aşağıda bulabilirsiniz.

Ancak bazı CSS'ler uygulanmadığı için bazı platformlar şu anda kullanıcı deneyimi optimizasyonlarından yararlanamıyor. Bu özellikleri yönetmek zorunda kalmamak hoşuma gitti. Ayrıca, bu özelliklerin diğer tarayıcılara ve platformlara da geleceğinden eminim.

scroll-snap-stop

Bantlar, CSS Scroll Snap Points spesifikasyonunun oluşturulmasına yol açan başlıca kullanıcı deneyimi kullanım alanlarından biriydi. Bantlar, Hikayeler'in aksine, kullanıcı etkileşimde bulunduktan sonra her resimde durmak zorunda değildir. Bantta hızlıca gezinmek sorun olmayabilir veya hatta teşvik edilebilir. Bununla birlikte, Hikayeler'de en iyi gezinme şekli tek tek ilerlemektir ve scroll-snap-stop tam olarak bunu sağlar.

.user {
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

Bu gönderi yazıldığı sırada scroll-snap-stop yalnızca Chromium tabanlı tarayıcılarda destekleniyordu. Güncellemeler için Tarayıcı uyumluluğu bölümüne göz atın. Ancak bu durum, taşıma işlemini engellemez. Bu yalnızca, desteklenmeyen tarayıcılarda kullanıcıların arkadaşlarını yanlışlıkla atlayabileceği anlamına gelir. Bu nedenle kullanıcıların daha dikkatli olması gerekir. Alternatif olarak, atlanan bir arkadaşın görüntülenmiş olarak işaretlenmemesini sağlamak için JavaScript yazmamız gerekir.

İlgileniyorsanız özellikler hakkında daha fazla bilgi edinebilirsiniz.

overscroll-behavior

Bir modalı kaydırırken aniden modalın arkasındaki içeriği kaydırmaya başladığınız oldu mu? overscroll-behavior Geliştiricinin bu kaydırmayı yakalamasına ve asla bırakmamasına olanak tanır. Her türlü etkinlik için uygundur. My Stories bileşeni, ek kaydırma ve kaydırma hareketlerinin bileşenden ayrılmasını önlemek için kullanılır.

.stories {
  overflow-x: auto;
  overscroll-behavior: contain;
}

Safari ve Opera bu özelliği desteklemeyen 2 tarayıcıydı ve bu durum tamamen normaldir. Bu kullanıcılar, alıştıkları gibi bir aşırı kaydırma deneyimi yaşayacak ve bu iyileştirmeyi hiç fark etmeyebilir. Ben şahsen bu özelliğin büyük bir hayranıyım ve neredeyse uyguladığım her fazla kaydırma özelliğine dahil etmeyi seviyorum. Bu, yalnızca kullanıcı deneyimini iyileştirebilecek zararsız bir eklentidir.

scrollIntoView({behavior: 'smooth'})

Bir kullanıcı dokunup tıkladığında ve bir arkadaşının hikaye grubunun sonuna ulaştığında, kaydırma noktası grubundaki bir sonraki arkadaşa geçme zamanı gelmiş demektir. JavaScript ile sonraki arkadaşa referans verebiliyor ve bu arkadaşın görünür hale gelmesini isteyebiliyorduk. Bu özelliğin temel düzeyde desteklenmesi harika. Her tarayıcıda görünür hale getirildi. Ancak her tarayıcı bunu yapmadı 'smooth'. Bu yalnızca, öğenin yerine yerleştirilmek yerine kaydırılarak görünüme getirildiği anlamına gelir.

element.scrollIntoView({
  behavior: 'smooth'
})

Safari, behavior: 'smooth' özelliğini desteklemeyen tek tarayıcıydı. Güncellemeler için Tarayıcı uyumluluğu bölümüne göz atın.

Uygulamalı

Benim nasıl yaptığımı öğrendiğinize göre, siz nasıl yapardınız? Yaklaşımlarımızı çeşitlendirelim ve web'de içerik oluşturmanın tüm yollarını öğrenelim. Bir Glitch oluşturun, kendi versiyonunuzu bana tweet atın. Ben de onu aşağıdaki Topluluk remiksleri bölümüne ekleyeyim.

Topluluk remiksleri