ภาพรวมพื้นฐานเกี่ยวกับวิธีสร้างประสบการณ์ที่คล้ายกับ Instagram Stories บนเว็บ
ในโพสต์นี้ เราอยากจะแชร์ความคิดเห็นเกี่ยวกับการสร้างคอมโพเนนต์เรื่องราวสำหรับ เว็บที่ปรับเปลี่ยนตามอุปกรณ์ รองรับการนำทางด้วยแป้นพิมพ์ และทำงาน เบราว์เซอร์
หากคุณต้องการดูการสาธิตการสร้างคอมโพเนนต์เรื่องราวนี้ด้วยตัวเอง โปรดไปที่ Codelab คอมโพเนนต์เรื่องราว
หากต้องการดูวิดีโอ โปรดใช้โพสต์นี้ในเวอร์ชัน YouTube
ภาพรวม
ตัวอย่างยอดนิยม 2 ตัวอย่างของ UX ของ Stories คือ Snapchat Stories และสตอรี่ของ Instagram (ไม่รวมถึงกลุ่มอุปกรณ์) ในความหมายทั่วไปเกี่ยวกับ UX นั้น เรื่องราวมักจะเป็นรูปแบบที่ใช้แค่การแตะเป็นหลักสำหรับการดูบนอุปกรณ์เคลื่อนที่เท่านั้น การสมัครใช้บริการหลายรายการ เช่น ใน Instagram ผู้ใช้เปิดเรื่องราวของเพื่อน และดูภาพในนั้น พวกเขามักจะทำสิ่งนี้กับเพื่อนๆ จำนวนมากในเวลา การแตะที่ด้านขวาของอุปกรณ์จะเป็นการข้ามไปยังหน้าของเพื่อน ข่าวถัดไป การปัดไปทางขวาจะทำให้ผู้ใช้สามารถข้ามไปยังเพื่อนคนอื่นได้ คอมโพเนนต์เรื่องราวค่อนข้างคล้ายกับภาพหมุน แต่ช่วยให้ไปยังส่วนต่างๆ อาร์เรย์หลายมิติ ซึ่งตรงข้ามกับอาร์เรย์มิติเดียว เหมือนมีม้าหมุนอยู่ข้างใน ภาพสไลด์แต่ละภาพ 🤯
![อาร์เรย์แบบหลายมิติที่มองเห็นได้โดยใช้การ์ด ซ้ายไปขวาคือกลุ่มการ์ดเส้นขอบสีม่วง และภายในการ์ดแต่ละใบมีการ์ดที่มีเส้นขอบสีน้ำเงินหลายใบ รายการในรายการ](https://web.dev/static/articles/building/a-stories-component/image/visualized-multi-dimensio-bca9c1e40444a.png?authuser=1&hl=th)
"ซ้อน" อันดับที่ 2 ภาพสไลด์ของเรื่องราว
👍 ลิสต์แบบรายการ หรือที่เรียกว่าอาร์เรย์หลายมิติ
เลือกเครื่องมือที่เหมาะกับงาน
สรุปทั้งหมด ผมพบว่าคอมโพเนนต์นี้สร้างได้ง่ายๆ เพราะ ฟีเจอร์ของแพลตฟอร์มเว็บที่สำคัญ มาพูดถึงเรื่องนี้กัน
ตารางกริด CSS
เลย์เอาต์ของเราไม่ได้เรียงตามลำดับเลยสำหรับตารางกริด CSS เพราะมีบางส่วน วิธีที่มีประสิทธิภาพ ในการบิดเบือนเนื้อหา
รูปแบบการแสดงเพื่อน
Wrapper ของคอมโพเนนต์ .stories
หลักคือมุมมองการเลื่อนแนวนอนที่ใช้อุปกรณ์เคลื่อนที่เป็นหลัก
.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
- เราเติมวิวพอร์ตในอุปกรณ์เคลื่อนที่อย่างชัดแจ้งด้วย
100vh
และ100vw
และจำกัดขนาดบนเดสก์ท็อป /
จะแยกเทมเพลตแถวและคอลัมน์auto-flow
แปลเป็นภาษาgrid-auto-flow: column
- เทมเพลตโฟลว์อัตโนมัติคือ
100%
ซึ่งในกรณีนี้เท่ากับความกว้างของหน้าต่างเลื่อน
ในโทรศัพท์มือถือ ให้คิดว่าขนาดแถวคือความสูงของวิวพอร์ตและ แต่ละคอลัมน์เท่ากับความกว้างของวิวพอร์ต มาต่อกันด้วยเรื่องราวของ Snapchat และ ตัวอย่าง Instagram Stories แต่ละคอลัมน์จะเป็นเรื่องราวของเพื่อน เราอยากให้เพื่อนๆ เรื่องราวให้อ่านต่อนอกวิวพอร์ตเพื่อให้เราเลื่อนไปได้ ตารางกริดจะสร้างคอลัมน์จำนวนมากที่ต้องใช้เพื่อเลย์เอาต์ HTML สำหรับเพื่อนแต่ละคน และสร้างคอนเทนเนอร์แบบเลื่อนได้ แบบไดนามิกและตอบสนองได้ ตารางกริด ทำให้เราเป็นศูนย์กลางของผลกระทบทั้งหมด
กองซ้อน
เราต้องการเรื่องราวของเพื่อนแต่ละคนในสถานะพร้อมใส่เลขหน้า เพื่อเตรียมพร้อมสำหรับภาพเคลื่อนไหวและรูปแบบสนุกๆ อื่นๆ ฉันเลยเลือกมาซ้อนกัน ที่ผมพูดถึงกลุ่มภาพ ผมหมายถึงเหมือนคุณกำลังมองดู ไม่เหมือนการดูจากด้านข้าง
ในตารางกริด CSS เราสามารถกำหนดตารางกริดแบบเซลล์เดียว (กล่าวคือ สี่เหลี่ยมจัตุรัส) โดยที่แถว
และคอลัมน์จะใช้ชื่อแทนร่วมกัน ([story]
) จากนั้นระบบจะกำหนดบุตรหลานแต่ละคนให้
พื้นที่เซลล์เดียวที่เป็นนามแฝง:
.user {
display: grid;
grid: [story] 1fr / [story] 1fr;
scroll-snap-align: start;
scroll-snap-stop: always;
}
.story {
grid-area: story;
background-size: cover;
…
}
ซึ่งจะทำให้ HTML ของเราควบคุมลำดับการเรียงซ้อน และเก็บองค์ประกอบทั้งหมด
ได้อย่างต่อเนื่อง โปรดสังเกตว่าเราไม่ต้องดำเนินการใดๆ กับการวางตำแหน่ง absolute
หรือ z-index
และ
เราไม่จำเป็นต้องแก้ไขด้วย height: 100%
หรือ width: 100%
ตารางกริดหลัก
กำหนดขนาดของวิวพอร์ตภาพสตอรี่ไว้อยู่แล้ว ดังนั้นไม่มีส่วนประกอบของเรื่องราวเหล่านี้
บอกให้เติม!
จุดสแนปการเลื่อน CSS
ข้อกำหนดเฉพาะของการสแนปการเลื่อนของ CSS บีบเพื่อล็อกองค์ประกอบต่างๆ ลงในวิวพอร์ตเมื่อเลื่อน ก่อนที่จะมีพร็อพเพอร์ตี้ CSS เหล่านี้ คุณจะต้องใช้ JavaScript และบอกเลยว่ายุ่งยากมาก เช็คเอาต์ ขอแนะนำจุดสแนปการเลื่อน CSS โดย Sarah Drasner เพื่อดูรายละเอียดวิธีใช้
scroll-snap-points
หากไม่มี ผู้ใช้จะเลื่อนดูได้อย่างอิสระตามปกติ ด้วยการทำเช่นนี้ เบราว์เซอร์จะค่อยๆ วางอยู่บนแต่ละรายการ
.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; }
ฉันเลือก Scroll Snap Points ด้วยเหตุผล 2-3 ข้อต่อไปนี้
- การช่วยเหลือพิเศษฟรี ข้อมูลจำเพาะของการเลื่อนจุดสแนประบุว่าการกด ปุ่มลูกศรซ้ายและลูกศรขวาควรเลื่อนผ่านจุดต่างๆ ของสแนป โดยค่าเริ่มต้น
- ข้อกำหนดที่มีการพัฒนามากขึ้น ข้อมูลจำเพาะของ Scroll Snap Points กำลังจะมีฟีเจอร์และการปรับปรุงใหม่ๆ ซึ่งหมายความว่าคอมโพเนนต์เรื่องราว ของฉันอาจจะดีขึ้นแค่จาก ออกไปข้างนอกเลย
- ติดตั้งใช้งานได้ง่าย จุดสแนปการเลื่อนสร้างขึ้นมาเพื่อ กรณีการใช้งานการใส่เลขหน้าแนวนอนที่เน้นการแตะ
- ความเฉื่อยแบบแพลตฟอร์มฟรี ทุกแพลตฟอร์มจะเลื่อนและวางราบตามสไตล์ของตัวเอง ความเฉื่อยมาตรฐาน ซึ่งอาจมีลักษณะการเลื่อนดูและไม่หยุดนิ่ง
ความสามารถในการใช้งานร่วมกันข้ามเบราว์เซอร์
เราทดสอบกับ Opera, Firefox, Safari, Chrome รวมถึง Android และ iOS นี่คือ สรุปสั้นๆ เกี่ยวกับฟีเจอร์บนเว็บที่เราพบว่าความสามารถและการสนับสนุนแตกต่างกัน
แต่เรามี CSS บางส่วนที่ไม่ได้ใช้ ปัจจุบันบางแพลตฟอร์มจึงพลาด UX การเพิ่มประสิทธิภาพ ฉันสนุกมากที่ไม่จำเป็นต้องจัดการฟีเจอร์เหล่านี้และรู้สึกมั่นใจ เพื่อเข้าถึงเบราว์เซอร์และแพลตฟอร์มอื่นๆ ในที่สุด
scroll-snap-stop
ภาพหมุนเป็นหนึ่งในกรณีการใช้งาน UX ที่สำคัญที่กระตุ้นให้เกิดการสร้าง
ข้อมูลจำเพาะของจุดสแนปการเลื่อนของ CSS ภาพสไลด์ไม่จำเป็นต้องหยุดเสมอไป ซึ่งต่างจากเรื่องราว
ในแต่ละรูปภาพหลังจากที่ผู้ใช้โต้ตอบกับรูปภาพ นี่อาจเป็นการดีหรือแนะนำให้เรา
หมุนภาพสไลด์เร็วๆ ในทางกลับกัน เรื่องราวควรไปยังส่วนต่างๆ ได้ดีที่สุดทีละเรื่อง
และนั่นคือสิ่งที่ scroll-snap-stop
มีให้
.user {
scroll-snap-align: start;
scroll-snap-stop: always;
}
ในขณะที่เขียนโพสต์นี้ scroll-snap-stop
จะใช้งานได้ใน Chromium เท่านั้น
เบราว์เซอร์ เช็คเอาต์
ความเข้ากันได้กับเบราว์เซอร์
อย่างไรก็ตาม นี่ไม่ใช่เครื่องมือบล็อก แต่หมายความว่าในเบราว์เซอร์ที่ไม่รองรับ
ผู้ใช้อาจข้ามเพื่อนโดยไม่ได้ตั้งใจ ดังนั้นผู้ใช้จะมีความระมัดระวังมากขึ้น หรือ
เราจึงต้องเขียน JavaScript เพื่อให้มั่นใจว่าจะไม่มีการทำเครื่องหมายเพื่อนที่ข้ามว่าดูแล้ว
อ่านเพิ่มเติมใน ข้อมูลจำเพาะ หากคุณ สนใจ
overscroll-behavior
คุณเคยเลื่อนดูโมดัลต่างๆ แล้วทันใดนั้น
เริ่มเลื่อนดูเนื้อหาเบื้องหลังโมดัลไหม
overscroll-behavior
ทำให้นักพัฒนาซอฟต์แวร์ดักจับ
ที่เลื่อนได้ตลอด
เหมาะสำหรับทุกโอกาส คอมโพเนนต์เรื่องราวของฉันใช้
เพื่อป้องกันไม่ให้การปัดและท่าทางสัมผัสการเลื่อนเพิ่มเติมออกจาก
คอมโพเนนต์
.stories {
overflow-x: auto;
overscroll-behavior: contain;
}
Safari และ Opera เป็น 2 เบราว์เซอร์ที่ไม่ได้ใช้ สนับสนุนตรงนี้ และที่ ไม่มีปัญหา ผู้ใช้ดังกล่าวจะได้รับประสบการณ์การเลื่อนมากเกินไปเหมือนที่เคย และอาจไม่สังเกตเห็นการเพิ่มประสิทธิภาพนี้เลย โดยส่วนตัวแล้วเป็นแฟนตัวยงและชอบ รวมทั้งถือเป็นส่วนหนึ่งของฟีเจอร์การเลื่อนหน้าจอได้เกือบทั้งหมดที่ผมนำไปใช้ เป็น การเพิ่มที่ไม่มีอันตรายที่จะทำให้ UX มีแต่การเพิ่มประสิทธิภาพ
scrollIntoView({behavior: 'smooth'})
เมื่อผู้ใช้แตะหรือคลิก และเลื่อนไปถึงท้ายชุดเรื่องราวของเพื่อน
ถึงเวลาย้ายไปยังเพื่อนคนถัดไปในชุดการเลื่อนสแนปแล้ว ด้วย
JavaScript เราจึงสามารถอ้างอิงเพื่อนคนถัดไปและขอให้
เลื่อนเข้ามาในมุมมอง ข้อมูลพื้นฐานเกี่ยวกับเรื่องนี้ทำได้ดีเยี่ยม ทุกเบราว์เซอร์
ให้เลื่อนดู แต่ไม่ใช่ว่าทุกเบราว์เซอร์จะทำเช่นนั้น 'smooth'
นี่หมายความว่า
จะเลื่อนหน้าจอเข้ามาแทนที่การสแนป
element.scrollIntoView({
behavior: 'smooth'
})
Safari เป็นเบราว์เซอร์เดียวที่ไม่รองรับ behavior: 'smooth'
ที่นี่ เช็คเอาต์
ความเข้ากันได้กับเบราว์เซอร์
ลงมือปฏิบัติ
เมื่อรู้แล้วว่าฉันทำแบบนั้นได้อย่างไร คุณจะทำอย่างไร มาเพิ่มความหลากหลาย และเรียนรู้วิธีทั้งหมดในการสร้างเนื้อหาบนเว็บ สร้าง Glitch ทวีตให้ฉันเกี่ยวกับเวอร์ชันของคุณ แล้วฉันจะเพิ่มลงใน ส่วนรีมิกซ์ของชุมชนด้านล่าง
รีมิกซ์ในชุมชน
- @geoffrich_ กับ Svelte: การสาธิตและ รหัส
- @GauteMeekOlsen พร้อม Vue: การสาธิต + โค้ด
- @AnaestheticsApp พร้อม Lit: การสาธิตและ รหัส