حالة التحميل هي المنتج
حالات التحميل هي الشاشة الأكثر مشاهدة بين كل ما تطلقه. خمسة أنماط، وأمثلة حقيقية من Linear وVercel وStripe وCursor وClaude وFigma، إضافة إلى تدقيق من ست أسئلة يمكنك تنفيذه اليوم.
اجمع كل حالة تحميل يعرضها منتجك في سنة كاملة. كل مستخدم، وكل جلسة، وكل تحديث للصفحة. هذا الرقم، محسوبًا بساعات المستخدمين، هو الشاشة الأكثر مشاهدة بين كل ما تطلقه. ومعظم الفرق تتعامل معها كأن أحدًا لا ينظر.
لوحة التحكم تحصل على مراجعة تصميم. والحالة الفارغة، إن كنت قد قرأت الحالات الفارغة هي المنتج، تحصل على مراجعة تصميم. أما حالة التحميل فتحصل على مؤشر دوّار بحجم 16 بكسل من ملف أنماط يعود لعام 2012 ودعوة بالتوفيق. إنها الشاشة الوحيدة التي يراها المستخدم دائمًا، والوحيدة التي لا يصممها أحد.
حالة التحميل هي انطباع عن العلامة التجارية
كل حالة تحميل هي عقد ثقة. المنتج يقول للمستخدم: "أنا أعمل، لم أنهَر، والانتظار مقصود." وما تقوله الشاشة بعد ذلك يصبح هو الطريقة التي تتصرف بها العلامة تحت الضغط.
حالات التحميل في Linear تشبه Linear. صفوف هيكلية على شكل قائمة المهام، وإنشاء فوري يُثبَّت قبل أن يؤكد الخادم، وانتقالات بإيقاع مدروس. وحالات Stripe تشبه Stripe. لمعة زر الدفع، والهياكل على شكل بطاقات في لوحة التحكم، والإيصال الذي يستقر في حالته النهائية. كلاهما يعامل الانتظار على أنه المنتج.
أما النسخة السيئة فهي صورة gif دوّارة قديمة على خلفية بيضاء. لا شكل للمحتوى، ولا إشارة تقدم، ولا علامة تجارية. المستخدم يسمع: "انشغلنا ونسينا أنك هنا." وهذا انطباع عن العلامة بلا شك، لكنه ليس الانطباع الذي أراد الفريق إطلاقه.
الأنماط الخمسة لحالة التحميل
معظم الفرق تعتبر "حالة التحميل" مشكلة تصميم واحدة. هي في الحقيقة خمس. كل نمط يناسب نوعًا مختلفًا من الانتظار، ويفشل لسبب مختلف.
1. شاشة الهيكل العظمي (Skeleton)
تخطيط بديل يحاكي شكل المحتوى النهائي. صفوف حيث ستكون الصفوف، وبطاقات حيث ستكون البطاقات. تتعلق العين بالبنية قبل وصول المحتوى، فيبدو الانتظار كأنه يكتمل لا كأنه يبدأ.
قائمة المهام في Linear تُطلق هياكل على شكل صفوف تطابق القائمة النهائية بالبكسل. ولوحة Stripe تُطلق هياكل على شكل بطاقات في قسم المقاييس تتحول إلى البطاقات المعبأة. وNotion تُطلق عناصر بديلة على شكل كتل تتحول إلى كتل حقيقية عند تحميل المستند. الوعد نفسه: شكل التحميل يتنبأ بالشكل النهائي.
استخدمه عندما تكون البنية معروفة. تجاوزه عندما يكون التخطيط ديناميكيًا لدرجة أن الهيكل سيكذب بشأن ما سيأتي.
2. واجهة المستخدم التفاؤلية (Optimistic UI)
اعرض فعل المستخدم فورًا، قبل أن يؤكد الخادم. وسوِّ الأمر في الخلفية. إن وافق الخادم فلا تومض الواجهة. وإن خالف تتراجع الواجهة مع مسار تراجع ظاهر.
إنشاء المهام المباشر في Linear هو المعيار الذهبي. اضغط C، اكتب عنوانًا، اضغط Enter، فتكون المهمة في القائمة قبل أن تنتهي رحلة الشبكة. والمؤشر وتحريك التحديد في Figma تفاؤليان على امتداد جلسة التعاون كلها. المستخدم لا يشعر بالشبكة أبدًا.
استخدمه عندما يكون الفشل نادرًا وقابلًا للتراجع. تجاوزه عندما يكون الإجراء مدمرًا أو يحتاج المستخدم إلى جواب الخادم قبل المتابعة.
3. العرض الجزئي المتدفق (Streaming)
اعرض الجزء الأول بينما لا يزال الباقي في الطريق. يختفي الانتظار داخل المخرجات لأن المستخدم يستهلك النتيجة أصلًا.
تدفق الرموز في Claude هو أنقى مثال مُطلق، بإيقاع مهذب يُقرأ بسرعة بشرية. وCursor يبث الفروقات رمزًا برمز، فيقرأ المستخدم الشيفرة قبل أن ينتهي النموذج من كتابتها. وVercel يبث سجل النشر مباشرة، فيشاهد المستخدم البناء بدل أن ينتظره. والمقال عن التصميم لزمن استجابة الذكاء الاصطناعي يغطي استراتيجية زمن الاستجابة بشكل أوسع.
استخدمه عندما يكون للنتيجة إيقاع طبيعي. تجاوزه عندما لا تكون الأجزاء مفيدة بمفردها.
4. التقدم بوصفه محتوى
الانتظار نفسه هو القيمة. سجل النشر، وخط البناء، وأثر استدلال الوكيل. المستخدم لا ينتظر النتيجة. إنه يقرأ النتيجة.
شاشة النشر في Vercel هي المثال الكلاسيكي. سجل النشر هو حالة التحميل، وهو أكثر شاشات المنصة إطلاقًا. وGitHub Actions تفعل الشيء نفسه بمخرجات التشغيل خطوة بخطوة. ولوحة الوكيل في Cursor تعرض أثر الاستدلال أثناء العمل، فتبدو المهمة التي تستغرق دقائق هادفة لا متوقفة. وv0 وLovable يطلقان هذا على واجهات تحويل الأمر إلى تطبيق، حيث بث البناء هو حالة التحميل والمعاينة هي المكافأة.
استخدمه عندما يكون الانتظار هو القيمة. تجاوزه عندما لا تفيد الخطوات مستخدمًا لا يهمه سوى الحالة النهائية.
5. المؤشر الدوّار المميز بالعلامة
النبضة الصغيرة، والتدرج، واللمعان. اللحظة التي يكسب فيها المنتج رمز شخصيته. لمعة زر الدفع في Stripe، وشريط التقدم المتدرج في Vercel، والنبضة الدقيقة في Linear عند الانتظارات الانتقالية. لا أحد منها يؤدي العمل وحده. إنها تركب فوق أحد الأنماط الأربعة الأولى، وتضيف لمسة علامة إلى انتظار له بنية أصلًا.
استخدمه عندما يكون الانتظار قصيرًا والسطح عالي الأهمية. تجاوزه عندما لا يوجد هيكل أو تدفق خلفه. المؤشر المميز بلا أحد الأنماط الأربعة الأولى تحته هو مؤشر من 1996 بلون hex من 2026.
الهياكل تهزم المؤشرات الدوّارة في أغلب الأحيان
الهيكل يتنبأ بشكل القادم. أما المؤشر الدوّار فيكتفي بالإشارة إلى أن شيئًا ما يحدث في مكان ما. الانتظار نفسه، وتجربتان مختلفتان.
هيكل لوحة Stripe بالكاد أسرع على الساعة من نسخة بمؤشر دوّار، لكن فجوة السرعة المُدرَكة أكبر بكثير. يرى المستخدم تخطيطًا على شكل بطاقات ويبدأ في التوجه قبل وصول البيانات. وحين تظهر المقاييس تكون العين في موضعها أصلًا. أما مع المؤشر الدوّار فيحدق المستخدم في منتصف الشاشة منتظرًا إذنًا للنظر إلى أي مكان آخر. إن كنت تستطيع توقع التخطيط فاطلق هيكلًا. وإن لم تستطع فاطلق سطر حالة.
الواجهة التفاؤلية هي شيفرة الغش
يصبح الانتظار غير مرئي لأن الإجراء يُثبَّت قبل أن يبدأ الانتظار.
أطلقت Linear التفاؤلية في كل مكان. إنشاء المهمة، وتغيير الحالة، وتبديل المكلَّف، وإضافة وسم، ونقل الدورة. كل واحد يكتب في المخزن المحلي عند النية ويُسوّى بعد استجابة الخادم. التعاون في Figma تفاؤلي في حركة المؤشر والتحديد ومعظم التعديلات. وNotion تفاؤلي في تعديلات المستندات. كل منتج يبدو كبرنامج محلي لأن الشبكة أُخفيت تحت الطبقة التفاؤلية.
يعمل هذا بشرطين. يجب أن يكون الفشل نادرًا وقابلًا للتراجع، وإلا وَمضت الواجهة وفقد المستخدم ثقته. ويجب أن تكون الأخطاء مرئية. الإجراء التفاؤلي الذي يبتلع خطأ الخادم بصمت أسوأ من انعدام التفاؤل، لأنه يعلّم المستخدم أن الإجراء نجح وهو لم ينجح. كل كتابة تفاؤلية تحتاج إلى تراجع، أو إشعار، أو استرجاع يراه المستخدم.
خمس قواعد لحالات تحميل رائعة
حقق أربعًا من خمس فيبدو الانتظار مصممًا. حقق ثلاثًا فتبدأ حالة التحميل بالظهور كفكرة لاحقة.
- شكل التحميل يتنبأ بالشكل النهائي. صفوف هيكلية للصفوف، وبطاقات هيكلية للبطاقات. لا قفزة في التخطيط عند ظهور المحتوى.
- يُعطى الانتظار محتوى حيثما أمكن. ابثّ الرموز، وأطلق السجل، واعرض الجزء المتاح. المستخدم القارئ لا ينتظر.
- كل انتظار يتجاوز 800 مللي ثانية يحصل على تغذية راجعة. تحت 800 مللي ثانية يكفي انتقال نظيف. وفوقها يحتاج المستخدم إشارة إلى أن النظام حي، ولو كانت كشفًا تدريجيًا للبنية أولًا ثم المحتوى.
- الإجراءات التفاؤلية تحتاج مسار تراجع مرئيًا. إشعار، أو استرجاع، أو حالة خطأ واضحة. التفاؤل بلا تعافٍ هو تضليل.
- لا مؤشر دوّار بلا سبب يخص العلامة. المؤشرات المميزة تركب فوق أحد الأنماط الأربعة الأولى ولا تحل محلها أبدًا. إن كان المؤشر وحده على الشاشة فالتصميم لم ينتهِ.
السياق الأعمق موجود في تحليل مبادئ تصميم الويب الأوسع، وفي الطريقة التي تعامل بها core web vitals انزياح التخطيط كفشل في الأداء المُدرَك.
الأنماط المضادة التي تقتل حالات التحميل
ست حالات فشل تُطلق أكثر مما ينبغي. كل منها قابل للإصلاح، وكل منها موجود الآن في الإنتاج في مكان ما.
المؤشر الدوّار اللانهائي بلا تقدم. مؤشر يدور منذ خمس عشرة ثانية بلا أي إشارة. المستخدم لا يعرف إن كان الطلب حيًا أم ميتًا أم عالقًا. استبدله بسطر حالة أو شريط تقدم أو سطح متدفق.
النافذة المنبثقة الحاجبة التي لا تُغلق. نافذة تحميل تختطف الشاشة كلها وترفض السماح للمستخدم بالتمرير أو النسخ أو قراءة بقية المنتج. يتحول الانتظار إلى أزمة رهائن.
التخطيط الذي يقفز عند اكتمال الهيكل. هيكل لا يطابق التخطيط الحقيقي. الصفوف تنزاح، والبطاقات تُعاد ترتيبها، والرأس يتحرك. الهيكل ليس تصميمًا مختلفًا، إنه التصميم نفسه بلا محتوى.
نص "جارٍ التحميل..." الذي يدور إلى الأبد. ثلاث نقاط تدور، بلا تقدم ولا حالة. يتعلم المستخدم خلال جلستين تجاهلها، وهذا يقتل القناة لأي حالة حقيقية يطلقها السطح لاحقًا.
الواجهة التفاؤلية التي تبتلع الأخطاء بصمت. الإجراء يُثبَّت في الواجهة، ويفشل الخادم، ولا يخبر المنتج المستخدم أبدًا. الحل إشعار مرئي أو زر تراجع أو استرجاع.
مؤشرات مميزة على انتظار مدته 100 مللي ثانية. لمعان لانتظار ينتهي قبل أن يلاحظه المستخدم. عبء خالص. الأسطح السريعة تستحق تلاشيًا. والأسطح البطيئة تستحق بنية.
تصميم الاحتكاك عن قصد يغطي الحالات النادرة التي ينبغي فيها أن يكون الانتظار ظاهرًا عمدًا. وحالات التحميل ليست منها. إنها الانتظارات التي يجب أن تكون غير مرئية، أو مصممة، أو محوّلة إلى محتوى.
تدقيق حالة التحميل
ست أسئلة. مرّر كل سطح تحميل عليها قبل الإصدار القادم.
- هل يتنبأ شكل التحميل بالشكل النهائي؟ هياكل للتخطيطات القابلة للتوقع، وأسطر حالة لغير القابلة. لا قفزة في التخطيط عند الاكتمال.
- هل يحمل الانتظار معلومة؟ هيكل، أو تدفق، أو سجل تقدم، أو سطر حالة. أي انتظار فوق 800 مللي ثانية بلا شيء عليه هو تسرّب.
- هل توجد رسالة أساسية واحدة لكل انتظار؟ "جارٍ تحميل لوحة التحكم" أفضل من أربع إشارات متداخلة. إشارة واحدة، والتسلسل البصري يؤدي العمل.
- هل تتطابق حالة التحميل مع صوت العلامة؟ اقرأ نص التحميل بجانب الشاشة المعبأة. إن تغيرت النبرة فحالة التحميل ترتدي علامة مختلفة.
- هل الإجراءات التفاؤلية قابلة للتراجع ومرئية عند الفشل؟ كل كتابة تفاؤلية لها تراجع أو إشعار أو استرجاع. لا إخفاقات صامتة.
- هل ستبيع شاشة التحميل المنتج لغريب؟ لو كانت الشاشة الوحيدة التي رآها هي حالة التحميل، هل ستبدو كالمنتج الذي اشترك فيه؟ إن لا، فأكثر شاشة مشاهدة في تطبيقك هي أيضًا الأسوأ تصميمًا.
المنتج الذي تجتاز كل حالات تحميله هذه الأسئلة الست يبدو سريعًا حتى على شبكة بطيئة.
اختر النمط ثم أطلق الانتظار
حالات التحميل ليست طبقة التلميع. إنها طبقة العلامة، وطبقة الثقة، وطبقة الأداء المُدرَك مضغوطة في الشاشة التي يراها المستخدم أكثر من أي شاشة أخرى. كل انتظار هو خيار تصميمي، سواء اتخذ الفريق القرار عن قصد أم لا.
هيكل حيث البنية معروفة. تفاؤلي حيث الفشل قابل للتراجع. متدفق حيث للنتيجة إيقاع. تقدم كمحتوى حيث الانتظار هو القيمة. ومؤشر مميز فقط حين تؤدي الأنماط الأربعة الأولى عملها فعلًا. وتحليل مبادئ تصميم صفحات الهبوط هو نسخة الصفحات التسويقية من هذا الانضباط.
توقف عن معاملة حالة التحميل كأنها اعتذار عن البطء. في المحصلة هي المنتج. اجعل الانتظار يستحق وقتهم.
الأسئلة الشائعة
ما الفرق بين شاشة الهيكل والمؤشر الدوّار؟
الهيكل يتنبأ بشكل المحتوى النهائي بتخطيط بديل، فيبدأ المستخدم بالتوجه قبل وصول البيانات. أما المؤشر الدوّار فيكتفي بالإشارة إلى أن شيئًا يحدث، بلا شكل ولا بنية ولا معاينة. الهياكل تقلّص الانتظار المُدرَك. المؤشرات لا تفعل.
متى أستخدم الواجهة التفاؤلية ومتى الاستجابة المتدفقة؟
الواجهة التفاؤلية حين يكون فعل المستخدم هو العمل، كإضافة مهمة أو تبديل حالة أو نقل بطاقة. والتدفق حين يقوم الخادم بالعمل وللنتيجة إيقاع طبيعي، كتوليد النص أو مخرجات السجل أو خط النشر. والاثنان يمكن دمجهما.
هل يجوز يومًا إطلاق مؤشر دوّار عادي؟
فقط كحل احتياطي لأقل من ثانية، وفقط حين يكون التخطيط غير قابل للتوقع فعلًا، وفقط مع سبب يخص العلامة. الهيكل أو سطر الحالة أو السطح المتدفق يتفوق على المؤشر في كل مقياس أداء مُدرَك. اجعل المؤشر الخيار الأخير.
صمم الانتظار، وأطلق المنتج
الانتظار هو الشاشة التي يراها المستخدم أكثر من غيرها. هو انطباع العلامة الذي يحصل عليه أكثر من غيره، وإشارة الثقة التي يقرؤها أكثر من غيرها، واختبار الأداء المُدرَك الذي يجريه في كل تحميل صفحة. فريق يصمم لوحة التحكم ستة أسابيع وحالة التحميل بعد ظهر يوم واحد يوزع جهده بنسبة خاطئة عن المكان الذي يعيش فيه المستخدم فعلًا.
إن أردت فريقًا يصمم حالات التحميل كجزء من المنتج لا كآخر سبرنت قبل الإطلاق، وظّف Brainy. نطلق منتجات يكون فيها الانتظار جزءًا من العلامة والأداء المُدرَك يتفوق على الأداء الفعلي.
Want a product where the loading states sell instead of apologize? Brainy designs perceived-performance systems and loading surfaces as part of the product, not as the last sprint before launch.
Get Started
