سوف نتحدث عن تجربة المستخدم لشريط التقدم في التحميل في GitHub ونقوم ببناء مثيل له في React.
عندما تتنقل إلى صفحة جديدة على GitHub (وأيضًا هذا الموقع)، سترى شريط التقدم في التحميل في أعلى الصفحة. تكون حركة الشريط سلسة وتبدو طبيعية. سأناقش تجربة المستخدم الأساسية وأبني مثيلًا له في React.
في هذا الدليل، سأستخدم Remix كإطار عمل React. ومع ذلك، يمكنك استخدام أي إطار أو مكتبة React أخرى طالما أنها تدعم تتبع حالة انتقال الصفحة.
قد تلاحظ أن التقدم في التحميل ليس خطيًا. يبدأ بسرعة ويبطئ بسرعة، ثم يتقدم بخطوات صغيرة. بمجرد تحميل الصفحة، يصل شريط التقدم بسرعة إلى 100٪ ويختفي.
إذا تفحصت علامة الشبكة في أدوات المطور في المتصفح، سترى أن شريط التقدم ليس متعلقًا مباشرة بالطلب الشبكي، بل هو أشبه بتأثير بصري.
هذا التصميم مقصود وحيلة نفسية لجعل المستخدم يشعر بأن الصفحة تُحمّل بشكل أسرع. دعونا نقارنها بشريط تقدم خطي ودوران تقليدي:
كما ترى، يبدو شريط التقدم الخطي بطيئًا قليلاً، بينما لا يقدم الدوران أي رد فعل عن التقدم. يمنح شريط التقدم في GitHub المستخدم إحساسًا بالتقدم ويجعل تجربة التحميل أكثر متعة.
في تفاعل الإنسان مع الكمبيوتر، هناك مفهوم يسمى الأداء المدرك. يتعلق الأمر بمدى شعور المستخدم بسرعة النظام، وليس بمدى سرعة النظام فعليًا.
بالنسبة للحركات الخطية، يمكن أن تبدو غالبًا مفاجئة وميكانيكية، مما يمكن أن يكون أكثر إرهاقًا ذهنيًا لتتبعها (زيادة الحمل المعرفي). الحركات الأكثر طبيعية، مثل التسهيل والارتداد، يمكن أن تبدو أكثر تنبؤًا وأسهل في المعالجة.
وجدت الدراسات أن الانتقالات السلسة يمكن أن تقلل الحمل المعرفي على المستخدمين، مما يجعل الواجهات أكثر سهولة في الاستخدام. هذا مفيد لجعل النظام يبدو أكثر استجابة.
بالإضافة إلى ذلك، هاريسون وآخرون (2007) وجدوا أن المستخدمين يدركون شريط التقدم كأسرع عندما يتبع دالة التسهيل "Fast Power"، وهو يشبه جدًا شريط التقدم في GitHub.
يمكننا أن نستنتج أن المفتاح لجعل شريط التقدم يبدو أسرع هو "البدء بسرعة، التباطؤ، ثم التسريع بطريقة أسية".
الآن دعونا نبني شريط تقدم مماثل في React. سنستخدم Remix و useNavigation لتعقب حالة انتقال الصفحة. إذا كنت تستخدم أطر عمل React أخرى، يمكنك استخدام APIs مشابهة لتحقيق نفس التأثير.
لجعله أكثر طبيعية، سنستفيد من حركة الزنبرك من react-spring لتحريك شريط التقدم (هذه المكتبة هي بالفعل مثال جيد على كيفية تحسين التحريكات القائمة على الفيزياء لتجربة المستخدم). يمكننا تقسيم التحريك إلى ثلاث مراحل:
باستخدام APIs الأمرية لـ react-spring، يمكننا تحقيق هذا التأثير بسهولة. هنا هو الكود:
لنقم بتفصيل الكود:
لدينا مرجع زنبركي api للتحكم في التحريك. عندما نحتاج إلى بدء شريط التقدم، نستدعي start مع التكوين التالي:
clamp: true لمنع شريط التقدم من تجاوز أو تذبذب.عندما يتم تحميل الصفحة، نستدعي end "لاعتراض" التحريك وجعل شريط التقدم يصل إلى 100% ويختفي بسرعة.
يوفر Remix الخطاف useNavigation لتعقب حالة انتقال الصفحة. يمكننا استخدامه لبدء وإنهاء شريط التقدم. هنا هو الكود:
لا تتردد في تخصيص نمط شريط التقدم ليتناسب مع تصميم موقعك وتعديل معلمات التحريك لتناسب تفضيلاتك. طالما تتبع أسلوب التسارع "Fast Power"، يمكنك تحقيق نفس الهدف.
يعد تفاعل الإنسان مع الكمبيوتر مجالًا مثيرًا للاهتمام حقًا. حتى التفاصيل الصغيرة مثل شريط التقدم في التحميل يمكن أن تؤثر بشكل كبير على تجربة المستخدم. في Logto، لا نهتم فقط بالبنية التحتية التقنية والتنفيذات، ولكن أيضًا بتجربة المستخدم والتصميم. نحن نؤمن بأنها أجزاء مهمة أيضًا من منصة صديقة للمطورين.