การสร้างคอมโพเนนต์เรื่องราว

ภาพรวมพื้นฐานเกี่ยวกับวิธีสร้างประสบการณ์ที่คล้ายกับ Instagram Stories บนเว็บ

Adam Argyle

ในโพสต์นี้ เราอยากจะแชร์ความคิดเห็นเกี่ยวกับการสร้างคอมโพเนนต์เรื่องราวสำหรับ เว็บที่ปรับเปลี่ยนตามอุปกรณ์ รองรับการนำทางด้วยแป้นพิมพ์ และทำงาน เบราว์เซอร์

การสาธิต

หากคุณต้องการดูการสาธิตการสร้างคอมโพเนนต์เรื่องราวนี้ด้วยตัวเอง โปรดไปที่ Codelab คอมโพเนนต์เรื่องราว

หากต้องการดูวิดีโอ โปรดใช้โพสต์นี้ในเวอร์ชัน YouTube

ภาพรวม

ตัวอย่างยอดนิยม 2 ตัวอย่างของ UX ของ Stories คือ Snapchat Stories และสตอรี่ของ Instagram (ไม่รวมถึงกลุ่มอุปกรณ์) ในความหมายทั่วไปเกี่ยวกับ UX นั้น เรื่องราวมักจะเป็นรูปแบบที่ใช้แค่การแตะเป็นหลักสำหรับการดูบนอุปกรณ์เคลื่อนที่เท่านั้น การสมัครใช้บริการหลายรายการ เช่น ใน Instagram ผู้ใช้เปิดเรื่องราวของเพื่อน และดูภาพในนั้น พวกเขามักจะทำสิ่งนี้กับเพื่อนๆ จำนวนมากในเวลา การแตะที่ด้านขวาของอุปกรณ์จะเป็นการข้ามไปยังหน้าของเพื่อน ข่าวถัดไป การปัดไปทางขวาจะทำให้ผู้ใช้สามารถข้ามไปยังเพื่อนคนอื่นได้ คอมโพเนนต์เรื่องราวค่อนข้างคล้ายกับภาพหมุน แต่ช่วยให้ไปยังส่วนต่างๆ อาร์เรย์หลายมิติ ซึ่งตรงข้ามกับอาร์เรย์มิติเดียว เหมือนมีม้าหมุนอยู่ข้างใน ภาพสไลด์แต่ละภาพ 🤯

วันที่ อาร์เรย์แบบหลายมิติที่มองเห็นได้โดยใช้การ์ด ซ้ายไปขวาคือกลุ่มการ์ดเส้นขอบสีม่วง และภายในการ์ดแต่ละใบมีการ์ดที่มีเส้นขอบสีน้ำเงินหลายใบ รายการในรายการ
ภาพสไลด์แรกของเพื่อน
"ซ้อน" อันดับที่ 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;
}
การใช้ Chrome DevTools โหมดอุปกรณ์ เพื่อไฮไลต์คอลัมน์ที่สร้างโดย Grid

มาดูรายละเอียดกันว่าเลย์เอาต์ grid

ในโทรศัพท์มือถือ ให้คิดว่าขนาดแถวคือความสูงของวิวพอร์ตและ แต่ละคอลัมน์เท่ากับความกว้างของวิวพอร์ต มาต่อกันด้วยเรื่องราวของ 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 ทวีตให้ฉันเกี่ยวกับเวอร์ชันของคุณ แล้วฉันจะเพิ่มลงใน ส่วนรีมิกซ์ของชุมชนด้านล่าง

รีมิกซ์ในชุมชน