Ringkasan dasar tentang cara membangun pengalaman yang serupa dengan Instagram Stories di web.
Dalam postingan ini, saya ingin berbagi pemikiran tentang membangun komponen Stories untuk web yang responsif, mendukung navigasi {i>keyboard<i}, dan bekerja di browser.
Jika Anda lebih suka demonstrasi langsung untuk membangun komponen Stories ini sendiri, lihat codelab komponen Stories.
Jika Anda lebih suka menonton video, berikut versi YouTube untuk postingan ini:
Ringkasan
Dua contoh UX Stories yang populer adalah Snapchat Stories dan Instagram Stories (belum lagi inventaris). Dalam istilah UX umum, Cerita biasanya merupakan pola khusus seluler dan berfokus pada ketukan untuk menavigasi beberapa langganan. Misalnya, di Instagram, pengguna membuka story teman dan menelusuri gambar-gambar di dalamnya. Mereka umumnya melakukan ini ke banyak teman di baik. Dengan mengetuk sisi kanan perangkat, pengguna langsung membuka cerita berikutnya. Dengan menggeser ke kanan, pengguna akan langsung menuju teman yang lain. Komponen {i>Story<i} cukup mirip dengan {i>carousel<i}, tetapi memungkinkan navigasi array multi-dimensi yang berbeda dengan array satu dimensi. Seolah-olah ada korsel di dalam setiap korsel. 🤯
Memilih {i>tool<i} yang tepat untuk pekerjaan Anda
Secara keseluruhan, saya menemukan bahwa komponen ini cukup mudah untuk dibuat, berkat beberapa fitur platform web yang penting. Mari kita bahas lebih lanjut.
Petak CSS
Tata letak kita ternyata bukan urutan yang tinggi untuk {i>CSS Grid<i} karena dilengkapi dengan beberapa cara yang ampuh untuk mengacaukan konten.
Tata letak Teman
Wrapper komponen .stories
utama kami adalah scrollview horizontal berorientasi seluler:
.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;
}
Mari kita uraikan tata letak grid
tersebut:
- Kita secara eksplisit mengisi area pandang di perangkat seluler dengan
100vh
dan100vw
serta membatasi ukuran di desktop /
memisahkan template baris dan kolomauto-flow
diterjemahkan menjadigrid-auto-flow: column
- Template autoflow-nya adalah
100%
, yang dalam hal ini adalah berapa pun lebar jendela scroll-nya
Pada ponsel, anggaplah ini seperti ukuran baris sebagai tinggi {i>view <i}dan setiap kolom menjadi lebar area pandang. Melanjutkan ke Snapchat Stories dan Contoh Instagram Stories, setiap kolom akan menjadi story seorang teman. Kita ingin teman cerita untuk berlanjut di luar area pandang sehingga kita memiliki tempat untuk men-scroll. {i>Grid<i} akan membuat kolom sebanyak apa pun yang diperlukan untuk mengatur tata letak HTML Anda untuk setiap teman untuk membuat container scroll yang dinamis dan responsif. Petak memungkinkan kita untuk memusatkan seluruh efek.
Tumpukan
Untuk setiap teman, kita memerlukan cerita mereka dalam status siap paginasi. Untuk persiapan animasi dan pola menarik lainnya, saya memilih stack. Ketika saya mengatakan {i>stack<i}, maksud saya seperti Anda sedang melihat ke bawah pada {i>sandwich<i}, bukan seperti Anda melihat dari samping.
Dengan grid CSS, kita dapat menentukan grid sel tunggal (yaitu persegi), tempat baris
dan kolom berbagi alias ([story]
), lalu setiap turunan ditetapkan ke alias tersebut
ruang sel tunggal beralias:
.user {
display: grid;
grid: [story] 1fr / [story] 1fr;
scroll-snap-align: start;
scroll-snap-stop: always;
}
.story {
grid-area: story;
background-size: cover;
…
}
Ini membuat HTML kita dapat mengendalikan urutan tumpukan dan juga menjaga semua elemen
dalam aliran. Perhatikan bahwa kita tidak perlu melakukan apa pun pada pemosisian absolute
atau z-index
dan
kita tidak perlu mengkoreksi kotak
dengan height: 100%
atau width: 100%
. Petak induk
sudah menentukan ukuran area pandang gambar cerita, jadi tidak satu pun dari komponen cerita ini
perlu diberi tahu untuk mengisinya!
Snap Points Scroll CSS
Spesifikasi Snap Points Scroll CSS membuatnya lebih mudah untuk mengunci elemen ke dalam area pandang saat men-scroll. Sebelum properti CSS ini ada, Anda harus menggunakan JavaScript, dan itu... cukup sulit. Periksa Memperkenalkan Snap Points Scroll CSS oleh Sarah Drasner untuk penjelasan tentang cara menggunakannya.
.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; }
.user { display: grid; grid: [story] 1fr / [story] 1fr; scroll-snap-align: start; scroll-snap-stop: always; }
Saya memilih Scroll Snap Points karena beberapa alasan:
- Aksesibilitas gratis. Spesifikasi Scroll Snap Points menyatakan bahwa menekan Tombol Panah Kiri dan Panah Kanan akan bergerak melalui titik yang dipaskan secara {i>default<i}.
- Spesifikasi yang terus bertambah. Spesifikasi Scroll Snap Points mendapatkan fitur dan peningkatan baru sepanjang waktu, yang berarti bahwa komponen Stories saya mungkin akan menjadi lebih baik lagi dari terus keluar.
- Kemudahan penerapan. Snap Points Scroll praktis dibuat untuk kasus penggunaan penomoran horizontal yang berfokus pada sentuhan.
- Inersia gaya platform gratis. Setiap platform akan men-scroll dan beristirahat dalam gayanya, bukan yang dinormalkan, yang bisa memiliki gaya gulir dan istirahat yang luar biasa.
Kompatibilitas lintas browser
Kami telah mengujinya di Opera, Firefox, Safari, dan Chrome, serta Android dan iOS. Berikut ikhtisar singkat fitur web yang menampilkan perbedaan kemampuan dan dukungannya.
Meskipun kami menggunakan beberapa CSS yang tidak berlaku, sehingga beberapa platform saat ini kehilangan peluang UX pengoptimalan. Saya senang tidak perlu mengelola fitur ini dan merasa percaya diri sehingga mereka akan menjangkau browser dan platform lain.
scroll-snap-stop
Korsel adalah salah satu kasus penggunaan UX
utama yang mendorong pembuatan
Spesifikasi Snap Points Scroll CSS. Tidak seperti Stories, carousel tidak selalu harus berhenti
pada setiap gambar setelah pengguna berinteraksi dengannya. Mungkin saja diperbolehkan
atau disarankan untuk
dengan cepat menelusuri korsel. Di sisi lain, story sebaiknya dibuka satu per satu,
dan itulah yang disediakan oleh scroll-snap-stop
.
.user {
scroll-snap-align: start;
scroll-snap-stop: always;
}
Pada saat menulis postingan ini, scroll-snap-stop
hanya didukung di perangkat berbasis Chromium
browser. Periksa
Kompatibilitas browser
untuk mendapatkan info terbaru. Namun, ini bukan pemblokir. Artinya, di browser yang tidak didukung
pengguna dapat secara tidak sengaja
melewatkan teman. Jadi pengguna hanya perlu
lebih berhati-hati, atau
kita harus menulis JavaScript untuk memastikan bahwa teman yang dilewati tidak ditandai sebagai telah dilihat.
Baca selengkapnya di spesifikasi jika Anda tertarik.
overscroll-behavior
Pernahkah Anda menelusuri sebuah modal
ketika tiba-tiba Anda
mulai men-scroll konten di belakang modal?
overscroll-behavior
membiarkan developer menjebak yang men-scroll dan tidak membiarkannya
akan pergi. Ini bagus untuk segala jenis kesempatan. Komponen Stories Saya menggunakannya
untuk mencegah gestur geser dan gestur scroll keluar dari
komponen.
.stories {
overflow-x: auto;
overscroll-behavior: contain;
}
Safari dan Opera adalah 2 {i>browser<i} yang tidak mendukung ini, dan itu benar-benar baik-baik saja. Pengguna tersebut akan mendapatkan pengalaman {i>overscroll<i} seperti biasa dan mungkin tidak melihat peningkatan ini. Saya pribadi adalah penggemar berat dan menyertakannya sebagai bagian dari hampir setiap fitur {i>overscroll<i} yang saya terapkan. Ini adalah tambahan yang tidak berbahaya yang hanya dapat mengarah pada peningkatan UX.
scrollIntoView({behavior: 'smooth'})
Ketika pengguna mengetuk atau mengeklik dan
telah mencapai akhir rangkaian cerita teman,
saatnya berpindah ke teman berikutnya dalam rangkaian titik geser scroll. Dengan
JavaScript, kami dapat mereferensikan teman berikutnya dan memintanya untuk
di-scroll hingga terlihat. Dukungan untuk dasar-dasar ini sangat bagus; setiap browser
men-scroll hingga terlihat. Namun, tidak semua browser melakukannya 'smooth'
. Artinya, ini hanya
di-scroll ke tampilan, bukan dipaskan.
element.scrollIntoView({
behavior: 'smooth'
})
Safari adalah satu-satunya browser yang tidak mendukung behavior: 'smooth'
di sini. Periksa
Kompatibilitas browser
untuk mendapatkan info terbaru.
Langsung
Sekarang setelah Anda tahu cara saya melakukannya, bagaimana Anda akan melakukannya?! Mari kita mendiversifikasi pendekatan dan mempelajari semua cara untuk membangun di web. Buat Glitch, tweet saya versi Anda, dan saya akan menambahkannya ke bagian Remix Komunitas di bawah.
Remix komunitas
- @geoffrich_ dengan Svelte: demo & kode
- @GauteMeekOlsen dengan Vue: demo + kode
- @AnaestheticsApp dengan Lit: demo & kode