القوائم والشبكات: مقارنة UX

1) عند القائمة، عندما تكون الشبكة (أسئلة القاعدة 5)

1. هدف المستخدم: قارن بسرعة المعلمات (القائمة) أو اختر بواسطة المرئي/الغلاف (الشبكة) ؟

2. نموذج البيانات: مجالات الهيكل (الجدول/النص) → القائمة ؛ الأشياء المرئية (الجلود والصور) → الشبكة.

3. نظرة عامة على الكثافة مقابل: هل تحتاج إلى أقصى قدر من العناصر لكل شاشة (قائمة) أو عرض موحد (شبكة) ؟

4. الإجراء الافتراضي: مفتوح/تفاصيل (قائمة) أو «تشغيل/شراء» فوري من البطاقة (الشبكة) ؟

5. سياق الجهاز: صورة محمولة - عادة ما تكون شبكة 2 في صف للبطاقات ؛ التقارير/الجداول على الحواسيب المكتبية - القائمة/الجدول.

اختصار: مقارنة - قائمة ؛ اختر بعينيك - الشبكة.

2) نموذج المحتوى و IA

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

3) تصميم العناصر: صف مقابل بطاقة

صف (صف القائمة)

الهيكل: أيقونة/صورة مصغرة (اختياري)، العنوان، 1-3 حقول رئيسية، ميتا (التاريخ/الحالة)، الإجراءات السياقية (⋮).
نقاط القوة: سهولة القراءة والكثافة العالية ومجموعة الأعمدة الجيدة القابلة للفرز.
نصائح UX: إصلاح الارتفاع ؛ اصطف لإخفاء الحقول الصغيرة في «الكشف».

بطاقة الشبكة

الهيكل: الغلاف، العنوان، التسمية التوضيحية/الملصقات (جديد/الجائزة الكبرى)، One Main CTA + Extra Action in.... «»

نقاط القوة: الاختيار المرئي، الحركة السريعة، السياق العاطفي.
نصائح UX: حافظ على النسبة إلى الارتفاع (على سبيل المثال 4: 3/1: 1)، نفس ارتفاعات العنوان، قص النص مع تلميح الأدوات.

4) الملاحة والفرز والفلاتر

عام: المرشحات والأنواع قريبة ومستقرة (بدون قفزات). ظروف نشطة - رقائق فوق النتائج.
القائمة: دعم العديد من الأعمدة + رؤوس «التجميد» ؛ الفرز بالنقر على الرأس.
الشبكة: الفرز حسب قائمة الأسفل ؛ المرشحات - بالرقائق/اللوحة. للبحث «المرئي» - معاينة التحليق/الضغط الطويل.

5) سطح مكتب متنقل مقابل سطح مكتب

• الشبكة: 2 على التوالي (الهاتف)، 3 على التوالي (الكمبيوتر اللوحي). CTAs كبيرة في منطقة الإبهام.
• القائمة: الخطوط المدمجة (56-72dp)، الحقول الفوقية القابلة للطي.

• الشبكة: 4-6 على التوالي في ≥1200px، املأ تلقائيًا بعرض بطاقة «min».
• القائمة: الجدول/الصفوف، تغيير حجم العمود، البحث السريع في الجدول.

6) الدول وعمليات التنزيل

الهياكل العظمية: خطوط الهيكل العظمي (3-5 على الأقل)، بطاقات الهيكل العظمي مع سدادات الغلاف والنص.
فارغ: اشرح لماذا فارغ واقترح المرشحات المسبقة/إزالة.
الأخطاء: حفظ اختيار المستخدم وموقعه ؛ أعد المحاولة.
إعادة التحميل: «إظهار المزيد» (هجين) أفضل من الشريط اللامتناهي في الكتالوجات ؛ للسجلات - يمكنك التمرير التلقائي باستخدام «وقفة».

7) الأداء

الأهداف: INP ≤ 200 ms، CLS ≤ 0. 1، scroll-jank <1٪.

القائمة: افتراضية السلسلة، الارتفاعات الثابتة، الحسابات المؤجلة.
الشبكة: صور كسولة (AVIF/WebP)، «srcset/sizes»، أحجام يمكن التنبؤ بها، في «دفعات» من 20-60 بطاقة.
العام: «رؤية المحتوى: تلقائي»، ذاكرة التخزين المؤقت، أولويات التحميل لعناصر البطل.

8) القدرة على تحمل التكاليف

القائمة: الجداول ذات الدلالات الصحيحة («الجدول/الثيد/الجسم»، «نوع الأريا»)، التركيز على الصفوف/الخلايا.
الشبكة: 'الدور =' الشبكة 'أو القائمة بـ' الدور = 'القائمة' ؛ الترتيب في DOM = البصرية ؛ تعليقات للصور.
لوحة المفاتيح: سهام/علامة تبويب ؛ أدخل - مفتوح ؛ الفضاء - «المفضلة» (إذا لزم الأمر).
أحجام النقر: ≥ 44px ؛ تباين AA ؛ التوقيعات الصريحة على الأيقونات.

9) المقاييس والقياس عن بعد

• 'view _ switch (list' grid', 'sort _ change', 'filter _ apple', 'card _ quick _ action',
• «row _ open», «compare _ open», «results _ load _ batche», «error _ retry».

• من الوقت إلى الإجراء الأول (TTFA)، نتائج qCTR، عمق التمرير، معدل النتيجة الصفرية،
• قارن المعدل (للقوائم)، معدل الحركة السريعة (للشبكات)، Latency p95.

10) تجارب A/B (ماذا تختبر)

العرض الافتراضي (القائمة/الشبكة) للجدد/العائدين.
عدد العناصر لكل شاشة، ارتفاع الصف، حجم البطاقة.
ترتيب المرشحات/الفرز ؛ رقائق مقابل شريط جانبي.
إجراءات سريعة على البطاقة (أيقونات/نص، واحد مقابل اثنين من CTAs).
Guardrails: INP/CLS، شكاوى حول تخطيط «القفزات»، نمو النتيجة الصفرية.

11) أمثلة على iGaming

لوبي الألعاب (B2C): الشبكة - الغطاء + اللعب/العرض التوضيحي، ملصقات جديدة/الجائزة الكبرى، مرشحات الرقائق (المزود/الفئة/الميكانيكا).
فهرس المزود: شبكة من الشعارات مع عدد الألعاب ؛ بالنقر - صفحة المزود (بالداخل - أيضًا شبكة ألعاب).
التقارير/المالية (B2B): القائمة/الجدول - أعمدة NGR/GGR/FTD/CR، تحديد الملكية، التصدير.
سجل المعاملات: القائمة - السلاسل الكثيفة، والحالات، والبحث حسب المبلغ/المعرف/التاريخ ؛ وسع سلسلة الأجزاء.
الترقيات/البطولات: شبكة لافتة مع التواريخ و CTAs، مرتبة بواسطة «Going Now/Coming Soon».

12) المفاتيح المرنة والتخصيص

امنح المستخدم زر الراديو «List ↔ Grid» وتذكر الاختيار (لكل مستخدم/مستأجر).
عرض العروض المسبقة للأداء: «ضيق»، «عادةً»، «كبير».
المنطق السياقي: لأول مرة - شبكة في الردهة ؛ من البحث - قائمة للمقارنة الدقيقة.

13) أنتيباترن

شبكة بدون نسبة عرض ثابتة → بطاقات «الرقص» و CLS عالية.
القائمة التي تحتوي على عدد كبير جدًا من الأعمدة هي لفة أفقية دون حاجة.
ازدواجية أزرار الحركة في كل من البطاقة وفي التحليق بسلوك مختلف.
خلط الأنواع/المرشحات في كل حمولة (فواصل التركيز).
المرشحات النشطة المخفية - المستخدمون «يفقدون» النتائج.

14) قائمة التنفيذ المرجعية (خطوة بخطوة)

1. حدد ما إذا كان يتم اختيار الشاشة عن طريق المقارنة المرئية أو مقارنة السمات.
2. تحديد النموذج: القائمة/الشبكة/الهجين ؛ الاتفاق أولا - ألف ومصادر البيانات.
3. صمم صفًا أو بطاقة بأبعاد منطقة المفاتيح الثابتة.
4. الفرز/المرشحات: رقائق مرئية، تحكم ثابت في الفرز.
5. التحميل/الفارغ/الخطأ: هياكل عظمية ونصوص ودية وإعادة المحاولة.
6. الأداء: كسول/افتراضية، «رؤية المحتوى»، p95 هدفًا.
7. A11y: الدلالات، لوحة المفاتيح، التباين، أحجام أهداف النقر.
8. القياس عن بعد: TTFA، qCTR، Zero-Result، Latency p95.

9. عرض افتراضي A/B، أبعاد، إجراءات سريعة

10. حدد الذاكرة: احتفظ بوضع العرض وآخر مرشحات.

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

القوائم والشبكات هي أدوات لمهام مختلفة.

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