الأنماط

حالات الشاشة

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

نمطمركّب من مكوناتاتجاه منطقي

نظرة عامة

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

الحالة

الطلبات

IRD 7,890,300قيد المعالجة

IRD 1,045,670تم التسليم

IRD 452,000تحتاج متابعة

من أي مكونات

الحالة	المكونات	المتى
محتوى	Order card · Badge	وصلت البيانات.
تحميل	هياكل عظمية (skeleton)	أثناء الجلب، بشكل يماثل المحتوى.
فارغة	Empty state · Button	لا بيانات بعد، مع إجراء أول.
خطأ	رسالة خطأ · Button	فشل التحميل، مع إعادة محاولة.

الهيكل العظمي يماثل المحتوى

حالة التحميل تأخذ شكل المحتوى نفسه (صفوف بالحجم نفسه)، لا دوّامة في المنتصف. هذا يمنع القفزة حين تصل البيانات.

افعل ولا تفعل

افعل

صمّم الحالات الأربع لكل شاشة بيانات قبل التسليم.
اجعل الحالة الفارغة والخطأ تحملان إجراء تعافٍ واحدا واضحا.
اجعل الهيكل العظمي بشكل المحتوى وحجمه.

لا تفعل

لا تعرض شاشة بيضاء أثناء التحميل.
لا تخلط رسالة الخطأ مع الحالة الفارغة؛ لكل منهما نبرة وإجراء مختلفان.
لا تكتب رسالة خطأ عامة؛ سمِّ ما فشل وكيف يتعافى المستخدم.

إمكانية الوصول

حالة التحميل تعرّف aria-busy وaria-live، فيعلن قارئ الشاشة وصول المحتوى.
رسالة الخطأ تسمّي ما فشل وكيف يتعافى المستخدم، لا لون أو أيقونة وحدهما.
إجراء التعافي زر حقيقي قابل للتركيز، بمساحة لمس ٤٤ بكسل.