export const Play = ({ for: forId }) => { const onClick = () => { document.querySelector(`#${forId}`).play(); }; return ; }; ## บทนำ เมื่อคุณนำทางไปยังหน้าต่าง ๆ บน GitHub (รวมถึงเว็บไซต์นี้ด้วย) คุณจะเห็นแถบความคืบหน้าการโหลดที่ด้านบนของหน้า การเคลื่อนไหวของแถบนั้นราบรื่นและดูเป็นธรรมชาติ ฉันจะพูดคุยถึงประสบการณ์การใช้งานพื้นฐานและสร้างแถบแบบเดียวกันใน React ในบทแนะนำนี้ ฉันจะใช้ Remix เป็นเฟรมเวิร์ก React อย่างไรก็ตาม คุณสามารถใช้เฟรมเวิร์กหรือไลบรารี React อื่น ๆ ได้ตราบที่สนับสนุนการติดตามสถานะการเปลี่ยนแปลงหน้า ## ประสบการณ์ผู้ใช้ คุณอาจสังเกตเห็นว่าแถบความคืบหน้าไม่เป็นเส้นตรง เริ่มต้นเร็วและช้าลงอย่างรวดเร็ว จากนั้นก้าวหน้าในขั้นตอนเล็ก ๆ เมื่อหน้าถูกโหลด แถบความคืบหน้าจะไปถึง 100% อย่างรวดเร็วและหายไป ถ้าคุณตรวจสอบแท็บเครือข่ายในเครื่องมือสำหรับนักพัฒนาของเบราว์เซอร์ คุณจะเห็นว่าแถบความคืบหน้าไม่เกี่ยวข้องโดยตรงกับการขอเครือข่าย แต่มากกว่าเหมือนเป็นเอฟเฟกต์ภาพ การออกแบบนี้ตั้งใจและเป็นจิตวิทยาความรู้สึกที่ทำให้ผู้ใช้รู้สึกว่าหน้ากำลังโหลดเร็วขึ้น มาเปรียบเทียบกับแถบความคืบหน้าแบบเส้นตรงและหมุนแบบดั้งเดิม:

ดังที่คุณเห็น แถบความคืบหน้าแบบเส้นตรงดูช้าไปหน่อย ขณะที่วงล้อหมุนไม่ให้ข้อเสนอแนะใดๆ เกี่ยวกับความคืบหน้า แถบความคืบหน้าของ GitHub ให้ความรู้สึกถึงความคืบหน้าแก่ผู้ใช้และทำให้ประสบการณ์การโหลดมากขึ้นเป็นที่พึงปรารถนา ### แต่เพราะอะไร? ในปฏิสัมพันธ์ระหว่างมนุษย์กับคอมพิวเตอร์ มีแนวคิดที่เรียกว่า [ประสิทธิภาพที่รู้สึกได้](https://developer.mozilla.org/en-US/docs/Learn/Performance/Perceived_performance) มันเกี่ยวกับความรวดเร็วที่ผู้ใช้รู้สึกว่าระบบเป็น ไม่ใช่ความรวดเร็วที่มันเป็นจริง ๆ สำหรับการเคลื่อนไหวเชิงเส้น มักจะปรากฏว่ามันขัดและใช้กลไก ซึ่งอาจทำให้มีภาระทางจิตเพิ่มเติม (ภาระความรู้สึก) การเคลื่อนไหวที่เป็นธรรมชาติ เช่นการผ่อนคลายและการเด้ง สามารถรู้สึกว่าคาดการณ์ได้และประมวลผลได้ง่ายขึ้น การศึกษาพบว่าการเปลี่ยนแปลงที่ราบรื่นสามารถลดภาระทางจิต ลดความตึงเครียดและทำให้การใช้พร้อมประสบการณ์เป็นมิตรมากขึ้น สิ่งนี้มีประโยชน์ในการทำให้ระบบรู้สึกตอบรับได้ นอกจากนี้ [Harrison et al. (2007)](https://chrisharrison.net/projects/progressbars/ProgBarHarrison.pdf) พบว่าผู้ใช้รับรู้ว่าแถบความคืบหน้าจะเร็วขึ้นเมื่อมีการใช้ฟังก์ชันการผ่อนคลาย "Power Fast" ซึ่งคล้ายกับแถบความคืบหน้าของ GitHub อย่างมาก แผนภูมิความคืบหน้า

เราสามารถสรุปได้ว่ากุญแจในการทำให้แถบความคืบหน้าดูเร็วคือ "เริ่มต้นอย่างรวดเร็ว ช้าลง จากนั้นเร่งความเร็วในรูปแบบที่เอ็กซ์โพเนนเซียล" ## การสร้างแถบความคืบหน้า ตอนนี้มาเริ่มสร้างแถบความคืบหน้าใน React กัน เราจะใช้ Remix และ `useNavigation` hook ของมันเพื่อติดตามสถานะการเปลี่ยนแปลงหน้า หากคุณใช้เฟรมเวิร์ก React อื่น ๆ คุณสามารถใช้ API ที่คล้ายกันเพื่อให้ได้ผลเช่นเดียวกัน ### จัดการการเคลื่อนไหว เพื่อให้มันดูเป็นธรรมชาติมากขึ้น เราจะใช้การเคลื่อนไหวสปริงจาก [react-spring](https://www.react-spring.dev/) เพื่อสร้างแถบความคืบหน้า (ไลบรารีนี้เป็นตัวอย่างที่ดีอยู่แล้วเกี่ยวกับวิธีที่การเคลื่อนไหวตามฟิสิกส์สามารถปรับปรุงประสบการณ์ผู้ใช้ได้) เราสามารถแบ่งการเคลื่อนไหวออกเป็นสามขั้นตอน: 1. เริ่มต้นอย่างเร็วและช้าลงอย่างรวดเร็ว 2. ก้าวหน้าอย่างช้า ๆ และมั่นคง 3. ไปถึง 100% และหายไป ด้วย imperative APIs ของ react-spring เราสามารถทำให้เกิดผลนี้ได้อย่างง่ายดาย นี่คือโค้ด: ```tsx import { useSpring, useSpringRef, animated } from 'react-spring'; export const ProgressBar = () => { const api = useSpringRef(); const props = useSpring({ ref: api, }); const start = useCallback(() => { void api.start({ from: { width: '0%' }, to: [ { width: '10%', config: { tension: 160, friction: 22, clamp: true } }, { width: '15%', config: { duration: 5000, easing: (value) => value } }, { width: '100%', config: { tension: 200, friction: 1000 } }, ], }); }, [api]); const end = useCallback(() => { void api.start({ to: [ { width: '100%', config: { duration: 300 } }, { opacity: 0, config: { duration: 300 } }, ], }); }, [api]); return ; }; ``` ```css .bar { pointer-events: none; position: fixed; top: 0; left: 0; height: 2px; background-color: #947dff; border-radius: 0 4px 4px 0; width: 0; z-index: 9999; } ``` มาลงในโค้ด: เรามี spring ref `api` ไว้ควบคุมการเคลื่อนไหว เมื่อเราจำเป็นต้องเริ่มแถบความคืบหน้า เราเรียก `start` ด้วยการกำหนดค่า: 1. เริ่มต้นจากความกว้าง 0% 2. ใช้แรงตึงจำนวนมากและปรับแรงเสียดทานเพื่อให้แถบความคืบหน้าเริ่มต้นเร็วและช้าลงอย่างเร็วไปยัง 10% สังเกตว่าเราใช้ `clamp: true` เพื่อป้องกันแถบความคืบหน้าจากการกระโดดข้ามหรือแกว่งไปมา 3. ไปยัง 15% ด้วยความเร็ว 5 วินาที มันเป็นขั้นตอนกันชนเพื่อให้การเคลื่อนไหวดูเป็นธรรมชาติมากขึ้น 4. ไปยัง 100% ด้วยแรงตึงและแรงเสียดทานสูงเพื่อให้แถบความคืบหน้าเคลื่อนไหวช้า ๆ แบบสปริง (GitHub ใช้ความยาวจากขั้นตอนแบบสุ่มที่นี่ แต่ตัวฉันเองชอบการเคลื่อนไหวที่ราบรื่นมากกว่า) เมื่อหน้าถูกโหลด เราเรียก `end` เพื่อ "สกัด" การเคลื่อนไหวและทำให้แถบความคืบหน้าไปถึง 100% และหายไปอย่างรวดเร็ว ### การอัปเดตบนการเปลี่ยนผ่านหน้า Remix มี `useNavigation` hook เพื่อติดตามสถานะการเปลี่ยนผ่านหน้า เราสามารถใช้มันเพื่อเริ่มต้นและยุติแถบความคืบหน้า นี่คือโค้ด: ```tsx import { useNavigation } from '@remix-run/react'; export const ProgressBar = () => { // ... const { state } = useNavigation(); // ... useEffect(() => { switch (state) { case 'navigating': case 'submitting': { start(); break; } default: { end(); break; } } }, [state, start, end]); }; ``` รู้สึกอิสระที่จะปรับแต่งสไตล์ของแถบความคืบหน้าให้ตรงกับการออกแบบเว็บไซต์ของคุณและปรับพารามิเตอร์การเคลื่อนไหวให้เข้ากับความชอบของคุณ ตราบใดที่คุณติดตามการผ่อนคลายในสไตล์ "Power Fast", คุณสามารถบรรลุเป้าหมายเดียวกันได้ ## บทสรุป ปฏิสัมพันธ์ระหว่างมนุษย์กับคอมพิวเตอร์เป็นสาขาที่น่าสนใจจริง ๆ แม้แต่รายละเอียดเล็ก ๆ อย่างเช่นแถบความคืบหน้าการโหลดก็สามารถส่งผลสำคัญต่อประสบการณ์ของผู้ใช้ได้ ใน Logto เราไม่เพียงแต่ให้ความสำคัญกับโครงสร้างพื้นฐานทางเทคนิคและการดำเนินการเท่านั้น แต่ยังให้ความสำคัญกับประสบการณ์ผู้ใช้และการออกแบบด้วย เราเชื่อว่าพวกมันเป็นส่วนที่สำคัญในการเป็นแพลตฟอร์มที่เป็นมิตรต่อผู้พัฒนา