التسلسل الهرمي للمحتوى في واجهة المستخدم

1) سبب الحاجة إلى التسلسل الهرمي

• يجيب على ثلاثة أسئلة في 3-5 ثوان: ما هو ؟ → ما هو المهم ؟ → ماذا تفعل ؟ ؛
• يجعل الواجهة قابلة للتنبؤ وسهلة المسح
• يقلل من الأخطاء ويزيد من التحويل.

المبادئ: إشارات> ضوضاء، تسلسل> تنوع، سياق> قواعد مطلقة.

2) مستويات الأهمية والهيكل

1. سياق الملاحة (العلامة التجارية، القسم، الفتات/فتات الخبز).

2. H1 - هدف الشاشة (قصير قدر الإمكان، فعل إذا لزم الأمر).

3. الرصاص/العنوان الفرعي (خط واحد للاستحقاق أو المركز).

4. الإجراءات الأولية (1-2 من اتفاقات التجارة القطرية الرئيسية).

5. البيانات الأولية (مؤشرات الأداء الرئيسية، بطاقات الخط الأول).

6. بيانات ثانوية (أجزاء، مرشحات، جداول مساعدة).

7. Meta/Help (تلميحات، ملاحظات، نص قانوني).

القاعدة: على شاشة واحدة - واحدة H1، لا تزيد عن اثنين من CTA الأساسية.

3) الطباعة والإيقاع

مقياس الخط: H1 28-32، H2 22-24، H3 18-20، الجسم 14-16، مايكرو 12 (مكافئ px/pt في الويب).
تباعد الخط: 1. 3–1. 5 للجسم، 1. 2–1. 3 للعناوين.
إيقاع الفجوة: مضاعف الوحدة الأساسية (4/8 px). Zagolovok↔blok: 16-24 ؛ الفقرات 8-12.
على النقيض من ذلك: WCAG AA الحد الأدنى ؛ العنوان دائمًا أكثر تباينًا من التسميات التوضيحية/الفوقية.
اللون مقابل الوزن: اللون - اللهجة، وليس «العكاز» بدلاً من الحجم/الدهون.

4) الشبكة والتخطيط

الشبكة 12 أعمدة (سطح المكتب )/4-6 (متنقلة) مع بوابات ثابتة.
بصريًا أولاً = الأول في DOM: يساعد قراء الشاشة ومديري محركات البحث.
محور القراءة: من اليسار إلى اليمين (LTR) أو من اليمين إلى اليسار (RTL) - يعكس ترتيب الإشارات.
«مناطق الانتباه»: أعلى اليسار/الوسط - اللقب والرصاص ؛ «شريط العمل» - بالقرب منه/تحته.

5) إشارات الأولوية البصرية

الحجم والوزن (الطباعة) هي الإشارة الأساسية.
الموقع (أعلى/إلى اليسار = أكثر أهمية في LTR).
اللون (لهجة CTA، الحالات - وفقًا للوحة ثابتة).
Iconography (كدعم نصي فقط).
المسافات الفاصلة/الإطارات (البطاقة التي تحتوي على الكثير من «الهواء» أكثر أهمية).
ديناميكيات (الرسوم المتحركة ≤ 200 مللي ثانية لجذب الانتباه دون تهيج).

6) الكشف التدريجي

• فوق الحظيرة - فقط السياق والغرض والعمل الأساسي.
• أقسام الأكورديون/علامة التبويب هي بيانات ثانوية.
• Drill-down: card → panel → modal.
• تلميحات Inline بدلاً من «المساعدة» المثقلة.
• تحتفظ الهياكل العظمية/العناصر الفرعية بالهيكل طوال مدة الحمل.

7) التسلسل الهرمي في الشاشات النموذجية

7. 1 لوحة القيادة

مرشح الوقت H1 + في الأعلى.
شريط KPI (3-5 بطاقات) - الخط الأول.
الرسوم البيانية/الجداول - الخط الثاني، الفرز/المرشحات جنبًا إلى جنب.
الشذوذ/التنبيهات - عمود/شريط منفصل، لا تخلط مع مؤشر الأداء الكوري.

7. 2 فهرس/ردهة

H1 + مرشحات/رقائق سريعة.
الفرز بالقرب من العنوان، CTA «Play/Buy» في البطاقة.
العلامات (جديدة/أعلى/جائزة كبرى) - ثانوية بصريًا للاسم.

7. 3 بطاقة الكيان (لعبة/عنصر)

منطقة البطل: الاسم (H1)، الحقائق الرئيسية (RTP/التقلب/التصنيف)، CTA الأساسي.
التفاصيل: علامات تبويب الوصف/الخصائص/التعليقات.
البيانات الوصفية: الملصقات والنص القانوني - في الأسفل.

7. 4 نماذج/معالجات

رأسية الخطوة + تقدم قصير («2 دقيقة، لم يتم إيقاف تشغيل البطاقة»).
ترتيب الحقول حسب التردد/الإلزام.
CTA يمين/أسفل، إجراءات داعمة - روابط أسفل/يسار.
أخطاء - بجوار الميدان، لفترة وجيزة وفي القضية.

8) تحديد أولويات الدولة

• Norm → Load → Success/Expty → Error.
• في التحميل - احتفظ بالإطار (الهياكل العظمية)، لا تقفز CTA.
• في الخطأ - يتغير H1 إلى «ما حدث»، CTA - «تكرار/اتصال».

9) رموز المحتوى ونظام التصميم

• الخط. العنوان. xl ',' font. الجسد. md'، 'الفضاء. 200 '،' نصف القطر. md'، 'الارتفاع. sm '.
• أدوار النص: نص. العنوان '،' النص. الرصاص، النص. ثانوي '،' نص. ميتا، 'النص. مساعد '.
• أدوار الألوان: «لهجة/محايدة/نجاح/تحذير/خطر» + «مستويات» (100-900).
• المكونات: 'KPI. البطاقة/القسم. العنوان/Inline. مساعدة/ميتا. الخط '.

10) القياس والجودة

• وقت المسح (متوسط إلى أول نقرة/إجراء ذي معنى).
• ركز على أخطاء الطلب (كم مرة «يفتقد» المستخدم المظهر).
• CTA Visibility٪ (كم عدد الذين شاهدوا CTA مقابل النقر).
• INP/CLS (يجب ألا «يقفز» التسلسل الهرمي عند التحميل).
• A/B: أكبر H1 مقابل تباين أقوى ؛ مرشحات الرقائق في الأعلى مقابل في اللوحة الجانبية.

• "first _ focus _ target'," primary _ cta _ explished/clicked "," section _ allexse _ toggle "," help _ explayed ".

11) ممارسات iGaming (مثال)

لوبي الكازينو: H1 «Lobby»، رقائق «New/Live/Jackpots/Favourite»، ثم البلاط. تحتوي كل بطاقة على اسم، أيقونة المزود، CTA «Play» ؛ علامات الجائزة الكبرى الجديدة - ثانوية.
لوحة القيادة الخاصة بالمشغل: السطر الأول - NGR/GGR/DAU/CR، السطر الثاني - الاتجاهات والشذوذ، الجداول الثالثة.
خطوة الدفع: H1 «التجديد»، قيادة «لا عمولة، على الفور»، قائمة طرق التحويل، الحد الأدنى من نص المشط في الأعلى.

12) أنتيباترن

عشر لهجات بنفس القوة على الشاشة («صرخة بصرية»).
العناوين كصور/أيقونات بدون نص (يكسر إمكانية الوصول والبحث).
«ينتج عنه طباعة صغيرة» وإخطارات في لافتات عملاقة.
روابط مساعدة بجوار CTA الأولية بنفس الوزن البصري.
ترتيب غير متسق: اليوم «مرشحات من الأعلى» وغدًا «من اليسار».

13) قائمة التنفيذ المرجعية

1. حدد هدف الشاشة (H1 + 1-2 الإجراءات الأساسية).
2. تحديد المستويات: الابتدائية/الثانوية/الفوقية ؛ دبوس لرموز DS.
3. اجمع مقياس الطباعة وإيقاع المسافة الفاصلة الأساسي.
4. تنقيح (تمهيد/فارغ/خطأ) بدون STA/قفزات الرأس.
5. قم بإجراء «اختبار مسح» لمدة 5 دقائق مع 3-5 أشخاص: ما لاحظته، حيث نقرت.
6. قم بتوصيل القياس عن بعد (التعرض CTA، وقت المسح، ترتيب التركيز).
7. أصلح النمط في الأدلة مع أمثلة قبل/بعد.

14) خلاصة القول

التسلسل الهرمي للمحتوى ليس «خطًا كبيرًا للحلول الرئيسية»، ولكنه نظام حلول: الطباعة والشبكة واللون وإيقاع الفجوة والترتيب في DOM والسلوك في حالات مختلفة. عندما يكون لكل مستوى دوره ووزنه الخاص، تصبح الواجهة واضحة وسريعة ويمكن التنبؤ بها، والمستخدمون واثقون من أفعالهم.