เราจะพูดคุยเกี่ยวกับประสบการณ์การใช้งานของแถบความคืบหน้าการโหลดของ GitHub และสร้างแบบคล้ายกันใน React
เมื่อคุณนำทางไปยังหน้าต่าง ๆ บน GitHub (รวมถึงเว็บไซต์นี้ด้วย) คุณจะเห็นแถบความคืบหน้าการโหลดที่ด้านบนของหน้า การเคลื่อนไหวของแถบนั้นราบรื่นและดูเป็นธรรมชาติ ฉันจะพูดคุยถึงประสบการณ์การใช้งานพื้นฐานและสร้างแถบแบบเดียวกันใน React
ในบทแนะนำนี้ ฉันจะใช้ Remix เป็นเฟรมเวิร์ก React อย่างไรก็ตาม คุณสามารถใช้เฟรมเวิร์กหรือไลบรารี React อื่น ๆ ได้ตราบที่สนับสนุนการติดตามสถานะการเปลี่ยนแปลงหน้า
คุณอาจสังเกตเห็นว่าแถบความคืบหน้าไม่เป็นเส้นตรง เริ่มต้นเร็วและช้าลงอย่างรวดเร็ว จากนั้นก้าวหน้าในขั้นตอนเล็ก ๆ เมื่อหน้าถูกโหลด แถบความคืบหน้าจะไปถึง 100% อย่างรวดเร็วและหายไป
ถ้าคุณตรวจสอบแท็บเครือข่ายในเครื่องมือสำหรับนักพัฒนาของเบราว์เซอร์ คุณจะเห็นว่าแถบความคืบหน้าไม่เกี่ยวข้องโดยตรงกับการขอเครือข่าย แต่มากกว่าเหมือนเป็นเอฟเฟกต์ภาพ
การออกแบบนี้ตั้งใจและเป็นจิตวิทยาความรู้สึกที่ทำให้ผู้ใช้รู้สึกว่าหน้ากำลังโหลดเร็วขึ้น มาเปรียบเทียบกับแถบความคืบหน้าแบบเส้นตรงและหมุนแบบดั้งเดิม:
ดังที่คุณเห็น แถบความคืบหน้าแบบเส้นตรงดูช้าไปหน่อย ขณะที่วงล้อหมุนไม่ให้ข้อเสนอแนะใดๆ เกี่ยวกับความคืบหน้า แถบความคืบหน้าของ GitHub ให้ความรู้สึกถึงความคืบหน้าแก่ผู้ใช้และทำให้ประสบการณ์การโหลดมากขึ้นเป็นที่พึงปรารถนา
ในปฏิสัมพันธ์ระหว่างมนุษย์กับคอมพิวเตอร์ มีแนวคิดที่เรียกว่า ประสิทธิภาพที่รู้สึกได้ มันเกี่ยวกับความรวดเร็วที่ผู้ใช้รู้สึกว่าระบบเป็น ไม่ใช่ความรวดเร็วที่มันเป็นจริง ๆ
สำหรับการเคลื่อนไหวเชิงเส้น มักจะปรากฏว่ามันขัดและใช้กลไก ซึ่งอาจทำให้มีภาระทางจิตเพิ่มเติม (ภาระความรู้สึก) การเคลื่อนไหวที่เป็นธรรมชาติ เช่นการผ่อนคลายและการเด้ง สามารถรู้สึกว่าคาดการณ์ได้และประมวลผลได้ง่ายขึ้น
การศึกษาพบว่าการเปลี่ยนแปลงที่ราบรื่นสามารถลดภาระทางจิต ลดความตึงเครียดและทำให้การใช้พร้อมประสบการณ์เป็นมิตรมากขึ้น สิ่งนี้มีประโยชน์ในการทำให้ระบบรู้สึกตอบรับได้
นอกจากนี้ Harrison et al. (2007) พบว่าผู้ใช้รับรู้ว่าแถบความคืบหน้าจะเร็วขึ้นเมื่อมีการใช้ฟังก์ชันการผ่อนคลาย "Power Fast" ซึ่งคล้ายกับแถบความคืบหน้าของ GitHub อย่างมาก
เราสามารถสรุปได้ว่ากุญแจในการทำให้แถบความคืบหน้าดูเร็วคือ "เริ่มต้นอย่างรวดเร็ว ช้าลง จากนั้นเร่งความเร็วในรูปแบบที่เอ็กซ์โพเนนเซียล"
ตอนนี้มาเริ่มสร้างแถบความคืบหน้าใน React กัน เราจะใช้ Remix และ useNavigation hook ของมันเพื่อติดตามสถานะการเปลี่ยนแปลงหน้า หากคุณใช้เฟรมเวิร์ก React อื่น ๆ คุณสามารถใช้ API ที่คล้ายกันเพื่อให้ได้ผลเช่นเดียวกัน
เพื่อให้มันดูเป็นธรรมชาติมากขึ้น เราจะใช้การเคลื่อนไหวสปริงจาก react-spring เพื่อสร้างแถบความคืบหน้า (ไลบรารีนี้เป็นตัวอย่างที่ดีอยู่แล้วเกี่ยวกับวิธีที่การเคลื่อนไหวตามฟิสิกส์สามารถปรับปรุงประสบการณ์ผู้ใช้ได้) เราสามารถแบ่งการเคลื่อนไหวออกเป็นสามขั้นตอน:
ด้วย imperative APIs ของ react-spring เราสามารถทำให้เกิดผลนี้ได้อย่างง่ายดาย นี่คือโค้ด:
มาลงในโค้ด:
เรามี spring ref api ไว้ควบคุมการเคลื่อนไหว เมื่อเราจำเป็นต้องเริ่มแถบความคืบหน้า เราเรียก start ด้วยการกำหนดค่า:
clamp: true เพื่อป้องกันแถบความคืบหน้าจากการกระโดดข้ามหรือแกว่งไปมาเมื่อหน้าถูกโหลด เราเรียก end เพื่อ "สกัด" การเคลื่อนไหวและทำให้แถบความคืบหน้าไปถึง 100% และหายไปอย่างรวดเร็ว
Remix มี useNavigation hook เพื่อติดตามสถานะการเปลี่ยนผ่านหน้า เราสามารถใช้มันเพื่อเริ่มต้นและยุติแถบความคืบหน้า นี่คือโค้ด:
รู้สึกอิสระที่จะปรับแต่งสไตล์ของแถบความคืบหน้าให้ตรงกับการออกแบบเว็บไซต์ของคุณและปรับพารามิเตอร์การเคลื่อนไหวให้เข้ากับความชอบของคุณ ตราบใดที่คุณติดตามการผ่อนคลายในสไตล์ "Power Fast", คุณสามารถบรรลุเป้าหมายเดียวกันได้
ปฏิสัมพันธ์ระหว่างมนุษย์กับคอมพิวเตอร์เป็นสาขาที่น่าสนใจจริง ๆ แม้แต่รายละเอียดเล็ก ๆ อย่างเช่นแถบความคืบหน้าการโหลดก็สามารถส่งผลสำคัญต่อประสบการณ์ของผู้ใช้ได้ ใน Logto เราไม่เพียงแต่ให้ความสำคัญกับโครงสร้างพื้นฐานทางเทคนิคและการดำเนินการเท่านั้น แต่ยังให้ความสำคัญกับประสบการณ์ผู้ใช้และการออกแบบด้วย เราเชื่อว่าพวกมันเป็นส่วนที่สำคัญในการเป็นแพลตฟอร์มที่เป็นมิตรต่อผู้พัฒนา