التسلسل الهرمي البصري والأولوية

1) ما هو التسلسل الهرمي البصري

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

الهدف: تقليل «التكاليف المعرفية» وزيادة حصة First Meannful Click من خلال العناصر اللازمة.

2) تأثير الأعمال ومؤشرات الأداء الرئيسية

• هدف تحويل CTA (التسجيل، الإيداع، إضافة إلى المفضلة)
• الوقت للقيمة
• معدل الارتباك
• ارتد، تمرير العمق وتمسك

• FMC (أول نقرة ذات معنى):٪ من المستخدمين الذين نقروا على مفتاح CTA ≤ N بعد ثوانٍ من التحميل.
• TTV (الوقت إلى القيمة): الوقت من الدخول إلى القيمة الرئيسية (على سبيل المثال البحث عن فتحة وتشغيلها).
• CTR للمفتاح CTA على الشاشات: المنزل، الكتالوج، صفحة اللعبة، شباك التذاكر.
• نسبة النقرات الأولية/الثانوية (انضباط الانتباه).
• قم بتمرير العمق للحظر مع العرض/البطولة.

3) مبادئ التسلسل الهرمي البصري (النواة)

1. التباين والنطاق: أكثر أهمية - أكبر وأكثر تباينًا.
2. ترتيب الموقع والقراءة: يحظى الجزء العلوي/الأيسر و «الشاشة الأولى» بالأولوية.
3. الفضاء الأبيض: الهواء = الأهمية. ضيق جدا - الأولوية ضاعت.
4. اللون والتشبع: لهجة اللون - «عملة الانتباه» ؛ أنقذها.
5. الشكل والأيقونات: يعزز شكل الأزرار والعلامات وأيقونات الحالة التميز.
6. الحركة والإحياء الدقيق: لهجات نادرة وموجزة وكاملة ؛ تجنب «عادل».
7. التجميع (gestalt): القرب، التشابه، الإغلاق، المحاذاة، المنطقة المشتركة.
8. كثافة المعلومات: على المسار الحرج - فقط المسار الصحيح، والباقي في الطبقات «الضعيفة».

4) مصفوفة الأولوية (P1-P4)

P1 (Critical-Primary): 1-2 CTA/العناصر لكل شاشة. حجم كبير، تباين ساطع، وضع ثابت.
P2 (دعم مهم): مرشحات، علامات سريعة، CTAs ثانوية. التباين المتوسط، بجانب P1.
P3 (المساعدة/السياق): تلميحات، تقييمات، بطاقات صغيرة. أسلوب هادئ، مضغوط.
ف-4 (معلومات أساسية/مرجع): المساعدة والروابط القانونية. تباين صغير وحجم.

القاعدة: لا أكثر من P1 واحد على شاشة واحدة. إذا P1s تنافسوا، فإنهم لم يعودوا P1s.

5) طبقات التسلسل الهرمي

عالمي: ملاحة رفيعة المستوى، بحث عالمي، إخطارات.
الصفحة: كتلة البطل، H1/H2، اللافتات/العروض الرئيسية.
المكون: بطاقات الألعاب، استمارات شباك التذاكر، طاولات البطولة.
المكون الداخلي: الترتيب الميداني، والتوقيعات، والأوضاع، والتلميحات الدقيقة.

6) السيناريوهات النموذجية (iGaming-filting)

• P1: «إنشاء حساب «/» تسجيل الدخول «(زر كبير، موضع ثابت).
• P2: تسجيل الدخول الاجتماعي، «إظهار كلمة المرور»، سياسة كلمة المرور.
• P3: روابط «نسيت كلمة المرور الخاصة بك ؟ «نصائح أمنية.

• P1: تعبئة/عرض + طريقة محددة.
• P2: المبلغ، الإعدادات المسبقة السريعة، الرسوم/الحدود القريبة.
• P3: وصف الطريقة المفصلة المخفية، التوقيت.

• P1: ابحث + مرشحات المفاتيح (المزود، التقلب، RTP، جديد/Hit).
• P2: Segements/Tags (Megaways، Jackpot، Buy Feature).
• P3: الفرز الثانوي، شارات البطاقة (جديد، ضرب، بطولات).

• P1: انضم/تفاصيل الجائزة.
• P2: Leaderboard (أول 5)، مؤقت العد التنازلي.
• P3: قواعد النقر/الدوران الكاملة.

7) الطباعة والشبكة

المقياس المعياري: 12-14 (النص)، 16 (الساق)، 20-24 (العناوين الفرعية)، 28-40 (H1/Hero).
خط الأساس: 4/8px خطوات ؛ الإيقاع الرأسي = سهولة القراءة.
طول السطر: 45-75 حرفا للنص ؛ 20-40 لأوصاف البطاقات.
الخط إلى الخط: 120-150٪ للنص، 110-120٪ للعناوين.

8) اللون والتباين

تباين النص: ليس أقل من معالم مستوى AA للنصوص على المسارات الرئيسية.
أدوار الألوان: Primary (CTA)، Accent (انتباه)، Info/Success/Warning/Danger (statuses).
الموضوع المظلم: تعزيز التناقضات بين الحدود والنصوص، للحد من تشبع المستويات اللونية الواسعة ؛ تجنب «ألم النيون».
حالات العناصر: الافتراضي/التحويم/التركيز/النشط/المعوق - قابلة للتمييز.

9) اللهجات والأزرار

CTA الأساسي: واحد لكل شاشة، لون/مقياس ملحوظ، حقول كافية (min-tap 44 × 44px).
ثانوي/ثالثي: نغمات ناعمة، أنماط كونتور.
التسلسل الهرمي ≠ Spinner: يعطي التقدم ملاحظات، ولكن لا ينبغي مقاطعة P1.

10) ميكانيكا الانتباه والسرعة

أنماط F-/Z: مكان P1 حيث من المتوقع أن تمر النظرة.
قانون هيك: أقل مساواة أسرع - اختصار خيارات الخطوة الأولى.
قانون التجهيزات: من الأسهل النقر على أكبر وأقرب ؛ زيادة مساحة الضربة الهامة.
مطالبات المسلسل: التدريس بالخطوات وليس «بجدار النص».

11) الشاشة الرئيسية/صفحات الهبوط

كتلة البطل: عرض قصير + فردي P1.
«ريكي» المرئي: 3-4 أقسام كحد أقصى للتمرير الأول (الفئات، العناصر الجديدة، البطولة).
الدليل الاجتماعي: شارات المزود، «ضربات الأسبوع» - P2، لا تقاطع P1.

12) لوحات القيادة والطاولات

الشاشة الأولى: 1-2 مؤشرات الأداء الرئيسية كبيرة، خطوط شرارة + شارات الاتجاه.
الجدول: محاذاة الأعمدة حسب الأهمية، «تجميد» الأعمدة الرئيسية، استخدام مفتاح الكثافة (مضغوط/قياسي).
الحالات الفارغة: اشرح الخطوة التالية (زر P1 + موجه).

13) الهاتف المحمول مقابل سطح المكتب

الهاتف المحمول: واحد P1 أعلى بدقة من خط التمرير، وشريط علامة التبويب ≤5 النقاط، CTA العائم مقبول للدخول/اللعب.
سطح المكتب: عرض الحاوية 1200-1440px ؛ الحد من طول الصفوف تجنب «التمدد» P1.

14) التوطين، الأرقام، RTL

مراعاة طول الخطوط (الألمانية/التركية) والعملات والدرجات المختلفة.
RTL: عكس ترتيب الشبكة واللهجة، ولكن احتفظ بالهيمنة P1.

15) ألف/باء ومقاييس التسلسل الهرمي

• زيادة 12-16٪ في حجم/تباين P1 → زيادة في FMC و CTR.
• تحريك المرشحات (P2) أقرب إلى البحث → تقليل بحث اللعبة TTV.
• تخفيض الخيارات في الخطوة الأولى من سجل النقدية → الإنجاز أعلاه.

المسار: FMC (N seconds)، CTR P1، تمرير العمق إلى الكتلة المستهدفة، TTV، معدل الارتباك (الأخطاء/العوائد)، نقرات الغضب.

16) إجراءات مراجعة الحسابات (قائمة مرجعية)

1. اسم P1 على كل شاشة رئيسية - هل يوجد واحد بالضبط ؟

2. عناصر P2 تدعم P1، لا تجادلها في اللون/التباين ؟

3. مسار البصر: P1 يضرب أول 3 تركيزات ؟

4. هل يكفي تباين النص/ACTA في الموضوعات الفاتحة/المظلمة ؟

5. تم تلبية الحد الأدنى من مناطق الضرب ؟

6. الضوضاء: هل يمكنك إزالة 20٪ من العناصر دون فقدان التحويل ؟

7. الدول الفارغة تؤدي إلى العمل ؟

8. هل الدول (تحوم/تركز/نشطة) قابلة للتمييز ويمكن الوصول إليها ؟

9. هل P1 مرئي دون التمرير على الهاتف المحمول ؟

10. هل المقاييس متصلة وقابلة للقراءة في القمع ؟

17) الأنماط المضادة

اثنين أو أكثر أولية على شاشة واحدة.
لافتات «براقة» متداخلة P1.
رمادي على الرمادي (تباين غير كاف).
أيقونات بدون نص على المسار الحرج.
البطاقات المحملة: 6 + شارات، 4 سطور من الوصف.
الرسوم المتحركة بدون هدف (وميض/لا نهاية له).

18) نظام التصميم: تحديد الأولويات

الرموز: "اللون. '،' اللون. اللهجة «،» الارتفاع. p1 '،' نصف القطر. lg '،' الفضاء. 8/12/16`.
أدوار البعد: 'btn. p1. lg '،' btn. p2. md'، 'النص. h1/h2/body '،' شارة. '.
الطبقات/مؤشر Z: P1 فوق وحدات المحتوى، ولكن أسفل نماذج النظام.
الدول: جدول الدولة مع أمثلة (دليل الشاشة).

19) خوارزمية تحديد الأولويات (زائفة)

1. تحديد الغرض من الشاشة (جملة واحدة).
2. تعيين P1 (عنصر واحد)، التصميم باعتباره الأكثر وضوحا.
3. النموذج P2 (2-5 عناصر) بجوار/بعد P1.
4. إخفاء/انهيار P3-P4.
5. إكمال قائمة مراجعة القدرة على تحمل التكاليف والتنقل.
6. تحقق من المسار time-to-P1 (انقر ≤3 ثانية).
7. ابدأ A/B، راقب FMC/TTV/CTR.

20) المجهريات والنصوص

عناوين H1 - مختصرة، فعل/قيمة: «ابدأ اللعب في 10 ثوانٍ».
CTA - الحركة والنتيجة: «تجديد في دقيقة»، «العب الآن».
نصائح - على العلبة، سطر واحد كحد أقصى، بدون مصطلحات.

21) معايير القبول لمهام التسلسل الهرمي

يتم تعريف P1 واحد على الشاشة ؛ انظر بدون تمرير (الهاتف المحمول/سطح المكتب).
ويتطابق التباين بين P1 والمبادئ التوجيهية ؛ في المنطقة ≥44×44px.
P2 أضعف بصريًا من P1 (بخطوات التباين/المقياس 1-2).
ويمكن التمييز بين حالات العناصر ؛ هناك أنماط تركيز لوحة المفاتيح.
أحداث التحليلات المتصلة لـ FMC/TTV/CTR/Scroll Depth.

22) موجز قصير (TL ؛ DR)

التسلسل الهرمي هو نظام الاهتمام. واحد صريح P1 لكل شاشة، دعم عبر P2، ضوضاء أقل، تباين كافٍ وطباعة قابلة للقراءة. اختبر نفسك بقائمة مرجعية، وقياس FMC/TTV/CTR، وتأكد من الفرضيات باستخدام اختبارات A/B.