Hikayeler bileşeni oluşturma

Web'de Instagram Hikayeleri'ne benzer bir deneyimin nasıl oluşturulacağına dair temel bir genel bakış.

Adam Argyle

Bu gönderide, web için duyarlı, klavye gezinmesini destekleyen ve tüm tarayıcılarda çalışan bir Hikayeler bileşeni oluşturma konusundaki düşüncelerimi paylaşmak istiyorum.

Demo

Bu Hikayeler bileşenini kendiniz oluşturma konusunda uygulamalı bir açıklamaya göz atmak istiyorsanız Hikayeler bileşeni codelab'ine göz atın.

Videoyu tercih ediyorsanız bu yayının YouTube sürümünü burada bulabilirsiniz:

Genel Bakış

Hikayeler kullanıcı deneyimine örnek olarak Snapchat Hikayeleri ve Instagram Hikayeleri (ve grup yayınlar) verilebilir. Genel kullanıcı deneyimi terimleriyle, Hikayeler genellikle birden fazla abonelik arasında gezinmek için yalnızca mobil cihazlarda kullanılan, dokunmaya dayalı bir modeldir. Örneğin, Instagram'da kullanıcılar bir arkadaşın hikayesini açıp içindeki resimlere göz atıyor. Genellikle bu işlemi birden fazla arkadaş için yaparlar. Kullanıcı, cihazın sağ tarafına dokunarak arkadaşının bir sonraki hikayesine atlayabilir. Kullanıcı, sağa kaydırarak farklı bir arkadaşa atlayabilir. Hikayeler bileşeni, atlı karıncaya oldukça benzer ancak tek boyutlu bir dizi yerine çok boyutlu bir diziye gitmenize olanak tanır. Her bant içinde bir bant varmış gibi. 🤯

Kartlar kullanılarak görselleştirilmiş çok boyutlu dizi. Soldan sağa doğru mor kenarlıklı kartlar ve her kartın içinde 1-çok sayıda turkuaz kenarlıklı kart var. Liste içinde liste.
1. arkadaş bandı
2. "yığılmış" hikaye bandı
👍 Listede liste, diğer adıyla çok boyutlu dizi

Görev için doğru araçları seçme

Genel olarak, birkaç önemli web platformu özelliği sayesinde bu bileşeni oluşturmanın oldukça kolay olduğunu gördüm. Bu konulara değinelim.

CSS Grid

İçerikleri düzenlemenin bazı güçlü yollarına sahip olduğu için CSS Grid, düzenimiz için çok zor bir iş değildi.

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;
}
Grid tarafından oluşturulan sütunları vurgulamak için Chrome Geliştirici Araçları'nın Cihaz Modu'nu kullanma

grid düzenini inceleyelim:

  • Mobil cihazlarda görüntü alanını 100vh ve 100vw ile açıkça doldurur 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 çevrilir
  • Otomatik akış şablonu 100%'tür. Bu durumda, kaydırma penceresi genişliğidir.

Mobil telefonda, satır boyutunun görüntü alanı yüksekliği, her sütunun ise görüntü alanı genişliği olduğunu düşünün. Snapchat Hikayeleri ve Instagram Hikayeleri örneğine devam edersek her sütun bir arkadaşınızın hikayesi olur. Arkadaş hikayelerinin görüntü alanının dışında devam etmesini istiyoruz. Böylece, kaydırabileceğimiz bir yer olur. HTML'nizi her arkadaş hikayesi için düzenlerken Grid, ihtiyaç duyduğu kadar sütun oluşturur ve bizim için dinamik ve duyarlı bir kaydırılabilir kapsayıcı oluşturur. Izgara, tüm efekti merkezileştirmemizi sağladı.

Birleştirme

Her arkadaş için hikayelerinin sayfalandırmaya hazır durumda olması gerekir. Animasyon ve diğer eğlenceli desenlere hazırlanırken bir yığın seçtim. Yığın derken, sandviçe yandan değil de yukarıdan baktığınızı kastediyorum.

CSS ızgara ile, satırların ve sütunların bir takma adı ([story]) paylaştığı tek hücreli bir ızgara (ör.kare) tanımlayabiliriz. Ardından her alt öğe, bu 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 sayede HTML'imiz yığın sıralamasını kontrol eder ve tüm öğeleri akış içinde tutar. absolute konumlandırması veya z-index ile ilgili herhangi bir işlem yapmamıza ve height: 100% veya width: 100% ile doğru kutuyu seçmemize gerek olmadığını fark edin. Üst ızgara, hikaye resmi görüntü alanının boyutunu zaten tanımladığı için bu hikaye bileşenlerinin hiçbirine alanı doldurması söylenmesi gerekmez.

CSS Kaydırma Kilitleme Noktaları

CSS Kaydırma Kilitleme Noktaları spesifikasyonu, kaydırma sırasında öğeleri görüntü alanına kilitlemeyi kolaylaştırır. Bu CSS özellikleri mevcut olmadan önce JavaScript kullanmanız gerekiyordu ve bu da en hafif tabirle zordu. Bu özelliklerin nasıl kullanılacağına dair mükemmel bir döküm için Sarah Drasner'in CSS Kaydırma Sabitleme Noktaları ile Tanışın başlıklı makalesine göz atın.

scroll-snap-points stilleri olmadan ve stilleriyle yatay kaydırma. Bu özellik olmadan kullanıcılar normal şekilde serbest kaydırma yapabilir. Bu sayede tarayıcı her öğeye nazikçe dokunur.
ü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, sabitleme davranışını tanımlar.
alt
.user {
  display: grid;
  grid: [story] 1fr / [story] 1fr;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
 Çocuklar, fotoğraf çekme hedefi olmayı kabul eder.

Kaydırma sabitleme noktalarını birkaç nedenden dolayı seçtim:

  • Ücretsiz erişim. Kaydırma Sabitleme Noktaları spesifikasyonunda, sol ok ve sağ ok tuşlarına basıldığında varsayılan olarak sabitleme noktaları arasında hareket edileceği belirtilmektedir.
  • Gelişen bir özellik. Kaydırma sabitleme noktaları özelliğine sürekli olarak yeni özellikler ve iyileştirmeler eklenmektedir. Bu da Hikayeler bileşenimin bundan sonra daha da iyi olacağı anlamına gelir.
  • Uygulama kolaylığı. Kaydırma sabitleme noktaları, dokunmaya dayalı yatay sayfalandırma kullanım alanı için tasarlanmıştır.
  • Platform tarzında serbest hareket. Her platform, kaydırma ve durma stilini kendi tarzında uygular. Bu, kaydırma ve durma stili garip olabilecek normalleştirilmiş ataletin aksinedir.

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 tespit ettiğimiz web özelliklerinin kısa bir özetini aşağıda bulabilirsiniz.

Ancak bazı CSS'ler geçerli olmadığından bazı platformlar şu anda kullanıcı deneyimi optimizasyonlarından yararlanamıyor. Bu özellikleri yönetmek zorunda kalmamak beni memnun etti ve bu özelliklerin zaman içinde diğer tarayıcılara ve platformlara ulaşacağından eminim.

scroll-snap-stop

CSS Kaydırma Sabitleme Noktaları spesifikasyonunun oluşturulmasına yol açan en önemli kullanıcı deneyimi kullanım alanlarından biri bantlardır. Hikayeler'in aksine, bir bantta kullanıcının etkileşime geçtiği her resimde durulması gerekmez. Bantta hızlıca gezinmek iyi olabilir veya teşvik edilebilir. Öte yandan, hikayelerde en iyi gezinme yöntemi hikayeleri tek tek incelemektir. scroll-snap-stop tam da bunu sağlar.

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

Bu makale hazırlanırken scroll-snap-stop yalnızca Chromium tabanlı tarayıcılarda destekleniyordu. Güncellemeler için Tarayıcı uyumluluğu başlıklı makaleyi inceleyin. Ancak bu durum, reklam yayınını engellemez. Bu, desteklenmeyen tarayıcılarda kullanıcıların yanlışlıkla bir arkadaşını atlayabileceği anlamına gelir. Bu nedenle, kullanıcıların daha dikkatli olması veya atlanan bir arkadaşın görüntülendi olarak işaretlenmemesini sağlamak için JavaScript yazmamız gerekir.

Daha fazla bilgi için özellikleri inceleyin.

overscroll-behavior

Bir modal pencerede kaydırırken aniden modal pencerenin arkasındaki içeriği kaydırmaya başladınız mı? overscroll-behavior, geliştiricinin kaydırma çubuğunu tuzağa düşürmesine ve hiçbir zaman kaydırma çubuğunun kaybolmasına izin vermemesine olanak tanır. Her türlü durum için uygundur. Hikayelerim bileşeni, ek kaydırma ve kaydırma hareketlerinin bileşenden çıkmasını önlemek için bu özelliği kullanır.

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

Safari ve Opera bu özelliği desteklemeyen iki tarayıcıydı. Bu durum tamamen normaldir. Bu kullanıcılar, alıştıkları gibi bir kaydırma deneyimi elde eder ve bu iyileştirmeyi hiç fark etmeyebilir. Bu özelliğin büyük bir hayranı olarak, uyguladığım neredeyse her kaydırma üstü özelliğin bir parçası olarak eklemeyi seviyorum. Bu, yalnızca kullanıcı deneyimini iyileştirebilecek zararsız bir eklemedir.

scrollIntoView({behavior: 'smooth'})

Kullanıcı bir arkadaşın hikaye grubunun sonuna dokunduğunda veya tıkladığında, kaydırma sabitleme noktası grubundaki bir sonraki arkadaşa geçme zamanı gelmiştir. JavaScript ile bir sonraki arkadaşa referans verip ekrana kaydırılmasını isteyebildik. Bu konuda temel bilgilere verilen destek mükemmel; her tarayıcıda kaydırarak görüntüleyebilirsiniz. Ancak her tarayıcı bunu yapmadı 'smooth'. Bu, öğenin sabitlenmek yerine kaydırılarak görüntülendiği anlamına gelir.

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

Safari, burada behavior: 'smooth' özelliğini desteklemeyen tek tarayıcıydı. Güncellemeler için Tarayıcı uyumluluğu başlıklı makaleyi inceleyin.

Uygulamalı

Bunu nasıl yaptığımı öğrendiğinize göre, siz ne yapardınız? Yaklaşımlarımızı çeşitlendirelim ve web'de uygulama geliştirmenin tüm yollarını öğrenelim. Bir Glitch oluşturun ve benimle tweet'de paylaşın. Topluluk remiksleri bölümüne ekleyeceğim.

Topluluk remiksleri