ทำไมแถบความคืบหน้าการโหลดของ GitHub ถึงดูดีและวิธีสร้างมัน

บทนำ#

เมื่อคุณนำทางไปยังหน้าต่าง ๆ บน GitHub (รวมถึงเว็บไซต์นี้ด้วย) คุณจะเห็นแถบความคืบหน้าการโหลดที่ด้านบนของหน้า การเคลื่อนไหวของแถบนั้นราบรื่นและดูเป็นธรรมชาติ ฉันจะพูดคุยถึงประสบการณ์การใช้งานพื้นฐานและสร้างแถบแบบเดียวกันใน React

ในบทแนะนำนี้ ฉันจะใช้ Remix เป็นเฟรมเวิร์ก React อย่างไรก็ตาม คุณสามารถใช้เฟรมเวิร์กหรือไลบรารี React อื่น ๆ ได้ตราบที่สนับสนุนการติดตามสถานะการเปลี่ยนแปลงหน้า

ประสบการณ์ผู้ใช้#

คุณอาจสังเกตเห็นว่าแถบความคืบหน้าไม่เป็นเส้นตรง เริ่มต้นเร็วและช้าลงอย่างรวดเร็ว จากนั้นก้าวหน้าในขั้นตอนเล็ก ๆ เมื่อหน้าถูกโหลด แถบความคืบหน้าจะไปถึง 100% อย่างรวดเร็วและหายไป

ถ้าคุณตรวจสอบแท็บเครือข่ายในเครื่องมือสำหรับนักพัฒนาของเบราว์เซอร์ คุณจะเห็นว่าแถบความคืบหน้าไม่เกี่ยวข้องโดยตรงกับการขอเครือข่าย แต่มากกว่าเหมือนเป็นเอฟเฟกต์ภาพ

การออกแบบนี้ตั้งใจและเป็นจิตวิทยาความรู้สึกที่ทำให้ผู้ใช้รู้สึกว่าหน้ากำลังโหลดเร็วขึ้น มาเปรียบเทียบกับแถบความคืบหน้าแบบเส้นตรงและหมุนแบบดั้งเดิม:

ดังที่คุณเห็น แถบความคืบหน้าแบบเส้นตรงดูช้าไปหน่อย ขณะที่วงล้อหมุนไม่ให้ข้อเสนอแนะใดๆ เกี่ยวกับความคืบหน้า แถบความคืบหน้าของ GitHub ให้ความรู้สึกถึงความคืบหน้าแก่ผู้ใช้และทำให้ประสบการณ์การโหลดมากขึ้นเป็นที่พึงปรารถนา

แต่เพราะอะไร?#

ในปฏิสัมพันธ์ระหว่างมนุษย์กับคอมพิวเตอร์ มีแนวคิดที่เรียกว่า ประสิทธิภาพที่รู้สึกได้ มันเกี่ยวกับความรวดเร็วที่ผู้ใช้รู้สึกว่าระบบเป็น ไม่ใช่ความรวดเร็วที่มันเป็นจริง ๆ

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

การศึกษาพบว่าการเปลี่ยนแปลงที่ราบรื่นสามารถลดภาระทางจิต ลดความตึงเครียดและทำให้การใช้พร้อมประสบการณ์เป็นมิตรมากขึ้น สิ่งนี้มีประโยชน์ในการทำให้ระบบรู้สึกตอบรับได้

นอกจากนี้ Harrison et al. (2007) พบว่าผู้ใช้รับรู้ว่าแถบความคืบหน้าจะเร็วขึ้นเมื่อมีการใช้ฟังก์ชันการผ่อนคลาย "Power Fast" ซึ่งคล้ายกับแถบความคืบหน้าของ GitHub อย่างมาก

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

การสร้างแถบความคืบหน้า#

ตอนนี้มาเริ่มสร้างแถบความคืบหน้าใน React กัน เราจะใช้ Remix และ useNavigation hook ของมันเพื่อติดตามสถานะการเปลี่ยนแปลงหน้า หากคุณใช้เฟรมเวิร์ก React อื่น ๆ คุณสามารถใช้ API ที่คล้ายกันเพื่อให้ได้ผลเช่นเดียวกัน

จัดการการเคลื่อนไหว#

เพื่อให้มันดูเป็นธรรมชาติมากขึ้น เราจะใช้การเคลื่อนไหวสปริงจาก react-spring เพื่อสร้างแถบความคืบหน้า (ไลบรารีนี้เป็นตัวอย่างที่ดีอยู่แล้วเกี่ยวกับวิธีที่การเคลื่อนไหวตามฟิสิกส์สามารถปรับปรุงประสบการณ์ผู้ใช้ได้) เราสามารถแบ่งการเคลื่อนไหวออกเป็นสามขั้นตอน:

1. เริ่มต้นอย่างเร็วและช้าลงอย่างรวดเร็ว
2. ก้าวหน้าอย่างช้า ๆ และมั่นคง
3. ไปถึง 100% และหายไป

ด้วย imperative APIs ของ react-spring เราสามารถทำให้เกิดผลนี้ได้อย่างง่ายดาย นี่คือโค้ด:

มาลงในโค้ด:

เรามี spring ref api ไว้ควบคุมการเคลื่อนไหว เมื่อเราจำเป็นต้องเริ่มแถบความคืบหน้า เราเรียก start ด้วยการกำหนดค่า:

1. เริ่มต้นจากความกว้าง 0%
2. ใช้แรงตึงจำนวนมากและปรับแรงเสียดทานเพื่อให้แถบความคืบหน้าเริ่มต้นเร็วและช้าลงอย่างเร็วไปยัง 10% สังเกตว่าเราใช้ clamp: true เพื่อป้องกันแถบความคืบหน้าจากการกระโดดข้ามหรือแกว่งไปมา
3. ไปยัง 15% ด้วยความเร็ว 5 วินาที มันเป็นขั้นตอนกันชนเพื่อให้การเคลื่อนไหวดูเป็นธรรมชาติมากขึ้น
4. ไปยัง 100% ด้วยแรงตึงและแรงเสียดทานสูงเพื่อให้แถบความคืบหน้าเคลื่อนไหวช้า ๆ แบบสปริง (GitHub ใช้ความยาวจากขั้นตอนแบบสุ่มที่นี่ แต่ตัวฉันเองชอบการเคลื่อนไหวที่ราบรื่นมากกว่า)

เมื่อหน้าถูกโหลด เราเรียก end เพื่อ "สกัด" การเคลื่อนไหวและทำให้แถบความคืบหน้าไปถึง 100% และหายไปอย่างรวดเร็ว

การอัปเดตบนการเปลี่ยนผ่านหน้า#

Remix มี useNavigation hook เพื่อติดตามสถานะการเปลี่ยนผ่านหน้า เราสามารถใช้มันเพื่อเริ่มต้นและยุติแถบความคืบหน้า นี่คือโค้ด:

รู้สึกอิสระที่จะปรับแต่งสไตล์ของแถบความคืบหน้าให้ตรงกับการออกแบบเว็บไซต์ของคุณและปรับพารามิเตอร์การเคลื่อนไหวให้เข้ากับความชอบของคุณ ตราบใดที่คุณติดตามการผ่อนคลายในสไตล์ "Power Fast", คุณสามารถบรรลุเป้าหมายเดียวกันได้

บทสรุป#

ปฏิสัมพันธ์ระหว่างมนุษย์กับคอมพิวเตอร์เป็นสาขาที่น่าสนใจจริง ๆ แม้แต่รายละเอียดเล็ก ๆ อย่างเช่นแถบความคืบหน้าการโหลดก็สามารถส่งผลสำคัญต่อประสบการณ์ของผู้ใช้ได้ ใน Logto เราไม่เพียงแต่ให้ความสำคัญกับโครงสร้างพื้นฐานทางเทคนิคและการดำเนินการเท่านั้น แต่ยังให้ความสำคัญกับประสบการณ์ผู้ใช้และการออกแบบด้วย เราเชื่อว่าพวกมันเป็นส่วนที่สำคัญในการเป็นแพลตฟอร์มที่เป็นมิตรต่อผู้พัฒนา