لماذا شريط التقدم في التحميل لـ GitHub يبدو جيدًا وكيفية بنائه

مقدمة#

عندما تتنقل إلى صفحة جديدة على GitHub (وأيضًا هذا الموقع)، سترى شريط التقدم في التحميل في أعلى الصفحة. تكون حركة الشريط سلسة وتبدو طبيعية. سأناقش تجربة المستخدم الأساسية وأبني مثيلًا له في React.

في هذا الدليل، سأستخدم Remix كإطار عمل React. ومع ذلك، يمكنك استخدام أي إطار أو مكتبة React أخرى طالما أنها تدعم تتبع حالة انتقال الصفحة.

تجربة المستخدم#

قد تلاحظ أن التقدم في التحميل ليس خطيًا. يبدأ بسرعة ويبطئ بسرعة، ثم يتقدم بخطوات صغيرة. بمجرد تحميل الصفحة، يصل شريط التقدم بسرعة إلى 100٪ ويختفي.

إذا تفحصت علامة الشبكة في أدوات المطور في المتصفح، سترى أن شريط التقدم ليس متعلقًا مباشرة بالطلب الشبكي، بل هو أشبه بتأثير بصري.

هذا التصميم مقصود وحيلة نفسية لجعل المستخدم يشعر بأن الصفحة تُحمّل بشكل أسرع. دعونا نقارنها بشريط تقدم خطي ودوران تقليدي:

كما ترى، يبدو شريط التقدم الخطي بطيئًا قليلاً، بينما لا يقدم الدوران أي رد فعل عن التقدم. يمنح شريط التقدم في GitHub المستخدم إحساسًا بالتقدم ويجعل تجربة التحميل أكثر متعة.

ولكن لماذا؟#

في تفاعل الإنسان مع الكمبيوتر، هناك مفهوم يسمى الأداء المدرك. يتعلق الأمر بمدى شعور المستخدم بسرعة النظام، وليس بمدى سرعة النظام فعليًا.

بالنسبة للحركات الخطية، يمكن أن تبدو غالبًا مفاجئة وميكانيكية، مما يمكن أن يكون أكثر إرهاقًا ذهنيًا لتتبعها (زيادة الحمل المعرفي). الحركات الأكثر طبيعية، مثل التسهيل والارتداد، يمكن أن تبدو أكثر تنبؤًا وأسهل في المعالجة.

وجدت الدراسات أن الانتقالات السلسة يمكن أن تقلل الحمل المعرفي على المستخدمين، مما يجعل الواجهات أكثر سهولة في الاستخدام. هذا مفيد لجعل النظام يبدو أكثر استجابة.

بالإضافة إلى ذلك، هاريسون وآخرون (2007) وجدوا أن المستخدمين يدركون شريط التقدم كأسرع عندما يتبع دالة التسهيل "Fast Power"، وهو يشبه جدًا شريط التقدم في GitHub.

يمكننا أن نستنتج أن المفتاح لجعل شريط التقدم يبدو أسرع هو "البدء بسرعة، التباطؤ، ثم التسريع بطريقة أسية".

بناء شريط التقدم#

الآن دعونا نبني شريط تقدم مماثل في React. سنستخدم Remix و useNavigation لتعقب حالة انتقال الصفحة. إذا كنت تستخدم أطر عمل React أخرى، يمكنك استخدام APIs مشابهة لتحقيق نفس التأثير.

تنظيم التحريك#

لجعله أكثر طبيعية، سنستفيد من حركة الزنبرك من react-spring لتحريك شريط التقدم (هذه المكتبة هي بالفعل مثال جيد على كيفية تحسين التحريكات القائمة على الفيزياء لتجربة المستخدم). يمكننا تقسيم التحريك إلى ثلاث مراحل:

1. البدء بسرعة والتباطؤ بسرعة
2. التقدم ببطء وثبات
3. الوصول إلى 100% والاختفاء

باستخدام APIs الأمرية لـ react-spring، يمكننا تحقيق هذا التأثير بسهولة. هنا هو الكود:

لنقم بتفصيل الكود:

لدينا مرجع زنبركي api للتحكم في التحريك. عندما نحتاج إلى بدء شريط التقدم، نستدعي start مع التكوين التالي:

1. البدء من عرض 0%.
2. استخدام شد كبير وضبط الاحتكاك لجعل شريط التقدم يبدأ بسرعة ويبطئ سريعًا إلى 10%. لاحظ أننا نستخدم clamp: true لمنع شريط التقدم من تجاوز أو تذبذب.
3. التقدم إلى 15% مع مدة خمس ثوانٍ. إنها مرحلة مؤقتة لجعل التحريك يبدو أكثر طبيعية.
4. التقدم إلى 100% مع شد واحتكاك أعلى لجعل شريط التقدم يتحرك بحركة زنبركية بطيئة (تستخدم GitHub طول خطوات عشوائية هنا، ولكن شخصيًا أفضل حركة سلسة).

عندما يتم تحميل الصفحة، نستدعي end "لاعتراض" التحريك وجعل شريط التقدم يصل إلى 100% ويختفي بسرعة.

تحديث عند انتقال الصفحة#

يوفر Remix الخطاف useNavigation لتعقب حالة انتقال الصفحة. يمكننا استخدامه لبدء وإنهاء شريط التقدم. هنا هو الكود:

لا تتردد في تخصيص نمط شريط التقدم ليتناسب مع تصميم موقعك وتعديل معلمات التحريك لتناسب تفضيلاتك. طالما تتبع أسلوب التسارع "Fast Power"، يمكنك تحقيق نفس الهدف.

الخلاصة#

يعد تفاعل الإنسان مع الكمبيوتر مجالًا مثيرًا للاهتمام حقًا. حتى التفاصيل الصغيرة مثل شريط التقدم في التحميل يمكن أن تؤثر بشكل كبير على تجربة المستخدم. في Logto، لا نهتم فقط بالبنية التحتية التقنية والتنفيذات، ولكن أيضًا بتجربة المستخدم والتصميم. نحن نؤمن بأنها أجزاء مهمة أيضًا من منصة صديقة للمطورين.