Hikayeler bileşeni oluşturma

Web'deki Instagram Stories'e benzer bir deneyimin nasıl oluşturulacağına dair temel bilgiler.

Adam Argyle

Bu yayında, web için duyarlı, klavyeyle gezinmeyi destekleyen ve tarayıcılarda çalışan bir Hikayeler bileşeni oluşturma konusundaki düşüncelerimizi paylaşmak istiyorum.

Tanıtım

Bu Hikayeler bileşenini kendiniz oluşturma hakkında uygulamalı bir gösterim isterseniz Hikayeler bileşeni codelab'e göz atın.

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

Genel bakış

Hikayeler kullanıcı deneyiminin iki popüler örneği, Snapchat Hikayeler ve Instagram Hikayeler'dir (filolar dahil değildir). Genel kullanıcı deneyimi terimleriyle, Hikayeler genellikle birden fazla abonelikte gezinmek için yalnızca mobil cihazlarda ve dokunma odaklı bir kalıptır. Örneğin, Instagram'da kullanıcılar bir arkadaşlarının hikayesini açıp içindeki resimlere göz atıyor. Genellikle bunu aynı anda çok sayıda arkadaşıyla yaparlar. Kullanıcı cihazın sağ tarafına dokunduğunda bir sonraki arkadaşının hikayesine atlıyor. Kullanıcı, sayfayı sağa kaydırdığında başka bir arkadaşına atlar. Hikaye bileşeni, banta oldukça benzerdir, ancak tek boyutlu bir dizi yerine çok boyutlu bir dizide gezinmeye olanak tanır. Her bandın içinde bir bant var gibidir. 🤯

Kartların kullanıldığı görselleştirilmiş çok boyutlu dizi. Soldan sağa, mor kenarlıklı kartlar grubu ve her kartın içinde 1-çok camgöbeği kenarlıklı kart yer alıyor. Listedeki liste.
1. arkadaş bandı
2. "yığılmış" hikaye bandı
👍 Liste halinde liste (yani çok boyutlu dizi)

İş için doğru araçları seçme

Sonuçta, birkaç kritik web platformu özelliği sayesinde bu bileşenin oluşturulmasını oldukça kolay buldum. Bu adımlara bakalım.

CSS Tablosu

İçerik hazırlamanın bazı güçlü yollarına sahip olduğundan CSS ızgarası için düzenimizin zorlayıcı olduğu ortaya çıktı.

Arkadaşlar düzeni

Birincil .stories bileşeni sarmalayıcımız, mobil öncelikli bir yatay 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üzeninin dökümünü inceleyelim:

  • Mobil cihazlarda görüntü alanını açık bir şekilde 100vh ve 100vw ile doldurur ve masaüstünde boyutu sınırlandırırız
  • /, satır ve sütun şablonlarımızı ayırır
  • auto-flow, grid-auto-flow: column anlamına gelir
  • Autoflow şablonu 100%; bu örnekte, kaydırma penceresi genişliği

Cep telefonlarında bunu, satır boyutunun görüntü alanı yüksekliği ve her sütunun görüntü alanı genişliği gibi düşünebilirsiniz. Snapchat Hikayeleri ve Instagram Hikayeler örneğinden gidersek her sütun bir arkadaşınızın hikayesi olacak. Arkadaş hikayelerinin görüntü alanının dışında da devam etmesini istiyoruz, bu yüzden ekranı kaydırabileceğimiz bir yer var. Izgara, her arkadaş hikayesi için HTML'nizi düzenlemek için ihtiyaç duyduğu kadar çok sütun sağlar ve böylece bizim için dinamik ve duyarlı bir kaydırma kapsayıcısı oluşturur. Grid tüm etkiyi merkezileştirmemizi sağladı.

Yığma

Her arkadaşınızın hikayelerini sayfalara ayırmaya hazır bir durumda tutmamız gerekir. Animasyon ve diğer eğlenceli desenler için bir yığın seçtim. Yığın derken, mesela bir sandviçi aşağıya bakıyorsun, kenardan bakıyormuşsunuz gibi değil.

CSS ızgarasıyla, satır ve sütunların bir takma adı ([story]) paylaştığı tek hücreli ızgara (ör.kare) tanımlayabiliriz. Ardından her alt öğe bu örtüşen 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ığma sırasını kontrol etmesini sağlar ve aynı zamanda tüm öğelerin akış içinde kalmasını sağlar. absolute konumlandırması veya z-index için herhangi bir şey yapmamıza ve height: 100% ya da width: 100% ile düzeltme yapmamız gerekmediğine dikkat edin. Üst tablo, hikaye resmi görüntü alanının boyutunu zaten tanımlamıştı. Bu nedenle, bu hikaye bileşenlerinin hiçbirinin içeriği doldurması için söylenmesi gerekmez.

CSS Kaydırma Yapıştırma Noktaları

CSS Kaydırma Noktaları Özelliği, kaydırma sırasında öğelerin görüntü alanına kilitlenmesini çocuk oyuncağı haline getirir. Bu CSS özellikleri mevcut olmadan önce JavaScript'i kullanmanız gerekiyordu ve açık bir şekilde söylemek gerekirse bu zordu. Bunları nasıl kullanacağınıza ilişkin harika bir döküm için Sarah Drasner'ın CSS Scroll Snap Points (CSS Kaydırma Noktalarıyla Tanışın) başlıklı yazısına göz atın.

scroll-snap-points stilleri olmadan ve kullanarak yatay kaydırma. Bu olmadan, kullanıcılar normal şekilde serbest kaydırma yapabilir. Tarayıcı, bu hareketle her bir öğeye nazik bir şekilde yerleşir.
parent
.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;
}
Fazla kaydırılmış ü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 hızlı hedef olmayı tercih eder.

Kaydırma Noktalarını seçmemin birkaç nedeni vardır:

  • Ücretsiz erişilebilirlik. Kaydırma Yapışma Noktaları spesifikasyonu, Sol Ok ve Sağ Ok tuşlarına basıldığında varsayılan olarak tutturma noktaları arasında hareket etmeniz gerektiğini belirtir.
  • Artan bir özellik. Kaydırma Snap Puanları spesifikasyonu sürekli yeni özellikler ve iyileştirmeler alıyor. Bu da Hikayeler bileşenimin muhtemelen bundan sonra daha iyi bir hale geleceği anlamına geliyor.
  • Uygulama kolaylığı. Kaydırma Tutturma Noktaları, neredeyse dokunma merkezli yatay sayfalandırma kullanım alanı için oluşturulmuştur.
  • Ücretsiz platform stili eylemsizlik. İnanılmaz bir kaydırma ve dinlenme tarzına sahip olabilen normalleştirilmiş ataletin aksine, her platform kendi tarzında kayıp durur.

Tarayıcılar arası uyumluluk

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

Ancak bazı CSS'ler uygulanmadı. Bu nedenle, şu anda bazı platformlar kullanıcı deneyimi optimizasyonlarını kaçırıyor. Bu özellikleri yönetmek zorunda kalmaktan keyif almadım ve nihayetinde diğer tarayıcı ve platformlara ulaşacaklarından eminim.

scroll-snap-stop

Bantlar, CSS Kaydırma Puanları özelliğinin oluşturulmasını sağlayan başlıca kullanıcı deneyimi kullanım alanlarından biriydi. Hikayeler'in aksine, bir bandın kullanıcı etkileşimde bulunduktan sonra her resimde durması gerekmez. Bantta hızlı bir şekilde dolaşmak tavsiye edilebilir veya teşvik edilebilir. Öte yandan, hikayeler en iyi şekilde tek tek yönetilir. scroll-snap-stop, tam olarak da bunu sağlar.

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

Bu yayın yazıldığı sırada scroll-snap-stop yalnızca Chromium tabanlı tarayıcılarda desteklenmektedir. Güncellemeler için Tarayıcı uyumluluğu'na göz atın. Yine de engel teşkil etmez. Desteklenmeyen tarayıcılarda, kullanıcıların arkadaşlarını yanlışlıkla atlayabilecekleri anlamına gelir. Bu yüzden kullanıcıların daha dikkatli olması gerekir, yoksa atlanan bir arkadaşın "görüntülendi" olarak işaretlenmemesi için JavaScript'i yazmamız gerekir.

İlginizi çekiyorsa daha fazla bilgiyi özelliklerde bulabilirsiniz.

overscroll-behavior

Hiç aniden modanın arkasındaki içeriği kaydırmaya başladığınızda modelde kaydırma yaptığınız oldu mu? overscroll-behavior, geliştiricinin ekranı kaydırmasına izin verip asla bırakmamasını sağlar. Her türlü durum için uygundur. Hikayelerim bileşeni, ek kaydırma işlemlerinin ve kaydırma hareketlerinin bileşenden ayrılmasını önlemek için bunu kullanır.

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

Safari ve Opera, bunu desteklemeyen 2 tarayıcıydı ve bunda sorun yok. Bu kullanıcılar alışkın oldukları gibi kaydırma deneyimi yaşar ve bu geliştirmeyi asla fark etmeyebilir. Kişisel olarak büyük bir hayranıyım ve bunu uyguladığım neredeyse her fazla kaydırma özelliğinin bir parçası olarak dahil etmek hoşuma gidiyor. Bu, yalnızca daha iyi bir kullanıcı deneyimi sağlayabilecek zararsız bir eklemedir.

scrollIntoView({behavior: 'smooth'})

Bir kullanıcı dokunduğunda veya tıkladığında ve bir arkadaşının hikaye grubunun sonuna ulaştığında, kaydırma tutturma noktası grubunda sonraki arkadaşa geçmenin zamanı gelmiş demektir. JavaScript ile bir sonraki arkadaşa başvurup onun görünüme kaydırılmasını isteyebildik. Bu konuda temel bilgiler harika oldu; her tarayıcı ekranı kaydırdı. Ancak tüm tarayıcılar bunu yapmadı 'smooth'. Yani, tutturulmak yerine görünüme kaydırılır.

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

Safari, burada behavior: 'smooth' uygulamasını desteklemeyen tek tarayıcıydı. Güncellemeler için Tarayıcı uyumluluğu'na göz atın.

Uygulamalı

Nasıl yaptığımı artık bildiğine göre sen ne yaparsın? Yaklaşımlarımızı çeşitlendirelim ve web'de geliştirme yapmanın tüm yollarını öğrenelim. Glitch oluşturup versiyonunu tweet'le bana gönder, ardından bunu aşağıdaki Topluluk remiksleri bölümüne eklerim.

Topluluk remiksleri