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ı, klavyeyle gezinmeyi destekleyen ve tüm tarayıcılarda çalışan bir Hikayeler bileşeni oluşturma konusundaki düşüncenizi paylaşmak istiyorum.

Demo

Bu Hikayeler bileşenini kendiniz oluşturma konusunda uygulamalı bir açıklamalı kılavuz tercih ederseniz 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ı deneyiminin en popüler iki örneği Snapchat Hikayeler ve Instagram Hikayeler'dir (filolardan bahsetmiyorum). 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ın hikayesini açar ve içindeki resimleri gözden geçirir. Genellikle bunu çok sayıda arkadaşıyla yapıyorlar. 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 bir bandın içinde bir atlı karınca olması 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 Izgarası

İç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 boyutunu görüntü alanı yüksekliği, her sütunu ise görüntü alanı genişliği olarak 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üzene sokmak üzere gereken sayıda sütun oluşturan ızgara, 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 gerekmedi.

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. Bunların nasıl kullanılacağına dair mükemmel bir döküm için Sarah Drasner'ın CSS Scroll Snap Points ile Tanışın başlıklı makaleye göz atın.

scroll-snap-points stil olmadan ve bu stillerle yatay kaydırma. Bu olmadan, kullanıcılar her zamanki gibi 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;
}
 İnce kaydırma özelliğine sahip ü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 Tutturma Puanları'nı birkaç nedenden dolayı seçtim:

  • Ücretsiz erişim. Kaydırma Tutturma Noktaları spesifikasyonunda, Sol Ok ve Sağ Ok tuşlarına basıldığında, varsayılan olarak tutturma noktalarından geçilmesi gerektiği belirtilmektedir.
  • Gelişen bir özellik. Kaydırma sabitleme noktaları özelliği sürekli olarak yeni özellikler ve iyileştirmeler alıyor. Bu da Hikayeler bileşenimin bundan sonra daha da iyi olacağı anlamına geliyor.
  • Uygulama kolaylığı. Kaydırma Tutturma Noktaları, pratik olarak dokunma merkezli yatay sayfalara ayırma kullanım alanı için oluşturulmuştur.
  • 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 değil. Bu nedenle, bazı platformlar şu anda kullanıcı deneyimi optimizasyonlarını yapamı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

Bantlar, CSS Scroll Snap Points spesifikasyonunun oluşturulmasına yol açan önemli kullanıcı deneyimi kullanım alanlarından biriydi. Hikayeler'den farklı olarak, bir kullanıcı etkileşimde bulunduktan sonra her resimde bir bandın durması gerekmez. Bantta hızlıca gezinmek iyi olabilir veya istenebilir. Ö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 yayını yazarken scroll-snap-stop yalnızca Chromium tabanlı tarayıcılarda desteklenmektedir. 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. Dolayısıyla, 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 gerekecektir.

Daha fazla bilgi için özellikleri inceleyin.

overscroll-behavior

Bir modal pencerede gezinirken aniden modal pencerenin arkasındaki içeriği kaydırmaya başladınız mı? overscroll-behavior, geliştiricinin kaydırmayı yakalamasına ve asla bırakmasına izin vermez. Her tür 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ışık oldukları gibi fazla kaydırma deneyimi yaşarlar ve bu geliştirmeyi hiç fark etmeyebilirler. 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ı deneyiminin iyileştirilmesini sağlayabilecek zararsız bir katkıdır.

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ı gelir. JavaScript ile bir sonraki arkadaşımızı gösterebildik ve bunun ekrana kaydırılmasını istedik. Bu konudaki temel bilgiler için sunulan destek mükemmel. Her tarayıcıda kaydırarak görüntüledim. 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'
})

Burada behavior: 'smooth', Safari tarafından desteklenmeyen 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