واجهة الملاحة بنية
1) ما هي بنية الملاحة ولماذا هي مطلوبة
بنية الملاحة (NA) هي طريقة نظام لتوجيه المستخدم في المنتج: كيف يفهم مكانه وأين يمكنه الذهاب وكيفية العودة. جيد NA:- يربط أهداف المستخدم بهيكل/ميزة المحتوى.
- يقلل الحمل المعرفي من خلال أنماط يمكن التنبؤ بها.
- يسرع النتيجة (عدد أقل من النقرات/القفزات).
- المقاييس مع نمو المنتج.
المبادئ: الاتساق> الإبداع، الإرشادات الصريحة> الإيماءات الخفية، المسار أقصر من 3-4 إجراءات إلى الهدف الرئيسي.
2) طبقات الملاحة (مستويات IA)
1. المستوى العالمي - أقسام المنتجات (على سبيل المثال: Lobby، Live، Promotions، Wallet، Profile).
2. القسم/الفئة - الأقسام الفرعية والوظائف الرئيسية (الكتالوجات والتقارير والإعدادات).
3. الصفحة/عرض - كيانات محددة (لعبة، تقرير، شكل).
4. محلي/سياقي - علامات تبويب، مراسي، «أظهر المزيد»، الوثب.
5. التاريخ وطريق العودة - فتات الخبز، إلى الوراء، «إلى الأخير».
القاعدة: يجب أن يكون لكل مستوى صريح «أين أنا ؟» (توزيع البند النشط، H1/crumbs) و «ماذا بعد ؟» (CTA/المراجع/التوصيات).
3) نماذج الملاحة ومتى تختارها
أعلى الملاحة: 5-7 أقسام عالية المستوى. جيد لواجهات المستهلك والهاتف المحمول (يتحول إلى علامات تبويب منخفضة).
علامات التبويب السفلية (الهاتف المحمول): ما يصل إلى 5 عناصر، ثابتة، رمز + ملصق. الإجراءات الرئيسية دائما تحت الإبهام.
الشريط الجانبي الأيسر: مستويات العمق 2-3، يعمل في المنتجات والمسؤولين. انهيار/دبابيس للأشياء المتكررة.
القوائم الضخمة: كتالوجات كبيرة (متاجر، تجمعات محتوى). مجموعات حسب الموضوع، يضيف تلميحات وروابط سريعة.
فتات الخبز: للمسارات العميقة ومحتوى محركات البحث ؛ لا تحل محل H1 والملاحة العليا.
التنقل السياقي: علامات التبويب، مرشحات الرقائق، «ذات صلة»، جدول المحتويات (TOC) في الرحلات الطويلة.
لوحة الأوامر/البحث العالمي (⌘K): نقرات سريعة على أسماء الكيانات والإجراءات.
الاختصارات والإيماءات: مستخدمو الطاقة (hotkeys، swipes) - ولكن دائمًا مع مكافئ واجهة المستخدم.
يعتمد الاختيار على: عدد الفواصل والعمق وتواتر الاستخدام والأجهزة.
4) توجيه عنوان URL واستراتيجيته
عناوين URL قابلة للقراءة: '/games/slot/[ slug] '، '/reports/ngr ؟ = الربع الثالث '.
الاستقرار: لا تغير عناوين URL بدون إعادة توجيه ؛ الحفاظ على التوافق الخلفي.
المسارات ذات بارامترات الحالة: المرشحات/الفرز - في الاستعلام ؛ بطاقة الهوية في الطريق
لحفظ العرض، انقر فوق Copy Current Filter/Anchor Reference.
روابط عميقة: من الزغب/البريد - مباشرة إلى الهدف، مع إذن آمن.
خارج الإنترنت والاسترداد: عند العودة - استعادة الموقع/المرشحات.
5) معالم المعلومات والعلامات
الحالة النشطة للعنصر (اللون/الشريط، الأيقونة).
H1 والرصاص - تحدث عن سياق الصفحة.
محدد موقع القسم - الفتات، العلامات في الشريط الجانبي، تسليط الضوء على علامة التبويب.
الدول الفارغة - اقترح إلى أين تذهب بعد ذلك (CTA، روابط للمساعدة).
قاموس مستقر - نفس أسماء العناصر في جميع الأماكن.
6) لوحة البحث والأمر
البحث العالمي: فهرس الكيانات (الألعاب، مقدمو الخدمات، التقارير) + الإجراءات السريعة ("/الإيداع، "/kyc ").
الإنجاز التلقائي: استفسارات حديثة وشائعة، تلميحات ضيقة.
الدلالات: «أنواع» فردية من النتائج (الكيانات، صفحات المساعدة، الإعدادات).
لوحة الأوامر (⌘K): التوجيه بالأسماء والمفاتيح الساخنة، دعم المرادفات الروسية/الإنكليزية.
7) الدول والأدوار والوصول
RBAC: عرض الفواصل المتاحة فقط ؛ «أقفال» رمادية - اقتصاديًا وبتفسير.
وضع الضيف: عناصر قائمة محدودة، تؤدي CTAs إلى التسجيل/تسجيل الدخول.
الإيجار: المساحات حسب العلامة التجارية/المشغل - التخصيص في المحدد العالمي.
تصعيد الحقوق: بعد KYC/2FA - فتح طرق جديدة.
8) ميزات الهاتف المحمول
التنقل السفلي (≤5): Lobby، Live، Promotions، Wallet، Profile.
الوصلات المزدوجة: تؤدي إلى علامة التبويب/علامة التبويب/المرساة المرغوبة ؛ العودة - إلى الدولة السابقة.
الإيماءات مرة أخرى: لا تتعارض مع دائري التمرير (قفل محوري).
العناصر اللاصقة: لاعب صغير/لعبة حالية، "Deposit' - CTA عائمة.
9) التوافر والتوطين
يتوافق ترتيب التركيز مع التسلسل الهرمي البصري.
سمات ARIA للقوائم/الفتات/علامات التبويب. التوقيعات للرموز مطلوبة.
تنقل لوحة المفاتيح: سهام/علامة تبويب/أدخل ؛ التركيز الواضح.
RTL/اللغات: شبكة مرآة ونظام نقطة، توطين حقوق النشر الصغيرة.
التباين والأبعاد: الحد الأدنى لـ WCAG AA ؛ أهداف النقر ≥ 44px.
10) الأداء والاستقرار
التحميل التدريجي للملاحة: هياكل عظمية للشريط الجانبي/القائمة.
قائمة/تخزين القاموس: أقل سحب الشبكة، التنقل الفوري.
التحميل المسبق لأقرب الطرق: عن طريق التحليق/التركيز ؛ ميزانيات معقولة.
الاستقرار: لا تقفز أثناء إعادة التحميل (الأبعاد الثابتة).
الحماية من 404/403: صفحات ودية و «عودة» سريعة.
11) القياس عن بعد والمقاييس
الأحداث:- "nav _ click" (المصدر، العنصر، الموضع)، "route _ change"، "search _ query/select'،
- «breadcrumb _ click»، «deeplink _ open»، «back _ used»، «not _ found _ view».
- الوقت إلى الهدف.
- معدل خطأ الملاحة (404/403/أخطاء الحقوق).
- معدل العودة (كم عدد العائدين على الفور هو علامة على مسار غير واضح).
- Search Success% (نتيجة نقرات ≤2).
- لوحة أوامر التبني واختصارات لوحة المفاتيح.
- شريط جانبي مقابل قائمة ضخمة ؛ علامات تبويب من أعلى مقابل مرشحات الرقائق ؛ «البحث مرئي دائمًا» مقابل نقرة.
12) أنماط iGaming (أمثلة)
كازينو ويب المشغل (B2C):- عالميًا: Lobby/Live/Action/Tournaments/Purse/Profile.
- داخل الردهة: مرشحات الرقائق (جديدة، جوائز الجوائز الكبرى، مزودون، شراء مكافأة)، ابحث.
- الفتات - على صفحات مقدمي/مقالات، وليس في الردهة.
- الشريط الجانبي: لوحات المعلومات/المحتوى/الشركاء/التقارير/الامتثال/الإعدادات.
- داخل الأقسام - علامات التبويب (القائمة/الإصدارات/الشهادات).
- لوحة الأوامر: "Open game by ID"، "Create release"، "Export report'.
13) أنتيباترن
قائمة لأكثر من 20 عنصرًا بدون تجميع (ضوضاء بصرية).
أسماء مختلفة من نفس القسم في أماكن مختلفة.
التنقل الحرج المخفي فقط في قائمة البرجر (على سطح المكتب).
إعادة استخدام علامات التبويب كمرشحات (معاني مختلفة - نوع واحد).
التحولات التي تكسر الحالة (إعادة ضبط المرشحات عند «العودة»).
الألواح اللاصقة التي تتداخل مع المحتوى و CTA.
14) قائمة التنفيذ المرجعية (حسب سباقات السرعة)
Sprint 1 - الخريطة: جرد الأقسام، مسارات الهدف (المهام العليا)، قاموس المصطلحات.
Sprint 2 - IA: التجميع، المستويات، اختيار النموذج (أعلى الملاحة/الجانب/الضخم/علامات التبويب). نموذج أولي.
Sprint 3 - Routing/URL: مسارات قابلة للقراءة، مرشحات حفظ، diplinks، 404/403.
Sprint 4 - Poisk/⌘K: مؤشر الكيان، الإنجاز التلقائي، الإجراءات السريعة.
Sprint 5 - إمكانية الوصول/Locale: لوحة المفاتيح، ARIA، RTL، التباين.
Sprint 6 - Telemetry/A-B: Time-to-Target, Search Success, back-wounds; نماذج الاختبار.
Sprint 7 - الأداء: قاموس/قائمة مخبأ، مقدمة من الطرق المجاورة، هياكل عظمية.
15) مسرد
IA (بنية المعلومات) - الهيكل المنطقي للأقسام/المحتوى.
Top-nav/Side-nav/Tabs/Mega-menu - نماذج التنقل.
فتات الخبز - «فتات الخبز» لتسلسل هرمي عميق.
رابط عميق - ارتباط عميق بحالة/قسم معين.
لوحة الأوامر - بحث/عمل عالمي بواسطة hotkey.
الوقت إلى الهدف - الوقت للوصول إلى الشاشة/العمل المستهدف.
16) خلاصة القول
بنية الملاحة هي خريطة منتج تجعل مسار المستخدم قصيرًا ويمكن التنبؤ به. النجاح يتم من خلال:1. IA واضح المستوى،
2. عناوين URL ثابتة يمكن قراءتها والمثابرة،
3. نماذج الملاحة المجمعة (القائمة + علامات التبويب + poisk/⌘K)،
4. التوافر والتوطين،
5. والمقاييس ألف/باء للطحن المستمر.
لذلك تظل الواجهة واضحة وسريعة، حتى عندما تنمو الوظيفة.