لیست ها و شبکه ها: مقایسه UX

1) هنگامی که لیست، زمانی که شبکه (قانون 5 سوال)

1. هدف کاربر: به سرعت مقایسه پارامترها (لیست) و یا را انتخاب کنید توسط بصری/پوشش (شبکه) ؟

2. فرم داده: زمینه های ساختار (جدول/متن) → لیست ؛ اشیاء بصری (پوست، عکس) → شبکه.

3. تراکم در مقابل مرور: نیاز به حداکثر موارد در هر صفحه (لیست) یا ویترین یکنواخت (شبکه) ؟

4. عمل پیش فرض: باز کردن/جزئیات (لیست) یا فوری «بازی/خرید» از کارت (شبکه) ؟

5. زمینه دستگاه: پرتره تلفن همراه - معمولا یک شبکه 2 در یک ردیف برای کارت ؛ گزارش ها/جداول در دسکتاپ - لیست/جدول.

کوتاه: مقایسه - لیست ؛ با چشمان خود انتخاب کنید - شبکه.

2) مدل محتوا و IA

row-first-سیگنال اصلی متن/فیلدها است. مناسب برای: سیاهههای مربوط، تاریخچه معاملات، گزارش ها، نتایج جستجوی ویژگی.
کارت اول: سیگنال اصلی پوشش/پیش نمایش است. مناسب برای: بازی ها/محصولات، رسانه ها، مجموعه ها.
ترکیبی: «کارت خط تطبیقی» (در تلفن همراه - یک کارت، بر روی یک دسکتاپ - یک خط با ستون) با همان منبع داده.

3) طراحی عناصر: ردیف در مقابل کارت

ردیف) ردیف فهرست (

ساختار: آیکون/تصویر بند انگشتی (اختیاری)، عنوان، 1-3 زمینه های کلیدی، متا (تاریخ/وضعیت)، اقدامات متنی (⋮).
نقاط قوت: خوانایی، چگالی بالا، مجموعه ای مناسب از ستون ها.
نکات UX: ارتفاع را ثابت کنید همتراز کردن برای توری مخفی کردن حوزههای جزئی در «آشکارسازی».

کارت شبکه

ساختار: پوشش، عنوان، عنوان/برچسب (جدید/برنده تمام پولها)، یکی اصلی CTA + اقدام فوق العاده در "..
نقاط قوت: انتخاب بصری، اقدام سریع، زمینه عاطفی.
نکات UX: نسبت ابعاد را حفظ کنید (به عنوان مثال 4: 3/1: 1)، همان ارتفاع عنوان، قطع متن با راهنمای ابزار.

4) ناوبری، مرتب سازی و فیلتر

عمومی: فیلترها و انواع نزدیک و پایدار هستند (بدون پرش). شرایط فعال - تراشه بیش از نتایج.
لیست: پشتیبانی از بسیاری از ستون ها + سرصفحه های «freeze» ؛ مرتب سازی با کلیک بر روی هدر.
شبکه: مرتب سازی بر اساس لیست کشویی ؛ فیلترها - توسط تراشه/پانل. برای جستجوی «بصری» - پیش نمایش در شناور/مطبوعات طولانی.

5) موبایل در مقابل دسکتاپ

• شبکه: 2 در یک ردیف (تلفن)، 3 در یک ردیف (قرص). CTA های بزرگ در ناحیه انگشت شست
• لیست: خطوط جمع و جور (56-72dp)، متا فیلدهای قابل جمع شدن.

• شبکه: 4-6 در یک ردیف در ≥1200px، خودکار پر کردن با عرض کارت «min».
• لیست: جدول/ردیف، تغییر اندازه ستون، جستجوی سریع جدول.

6) ایالات و دانلود

اسکلت: خطوط اسکلت (حداقل 3-5)، کارت های اسکلت با پوشش و شاخه های متن.
خالی: توضیح دهید که چرا خالی و پیشنهاد ایستگاه از پیش تنظیم/حذف فیلتر.
خطاها: انتخاب و موقعیت کاربر را ذخیره کنید دوباره تلاش کن.
بارگذاری مجدد: «نمایش بیشتر» (ترکیبی) به نوار بی پایان در کاتالوگ ترجیح داده می شود ؛ برای سیاهههای مربوط - شما می توانید خودکار پیمایش با «مکث».

7) عملکرد

اهداف: INP ≤ 200ms، CLS ≤ 0. 1، اسکرول جک <1٪.

لیست: مجازی سازی رشته، ارتفاع ثابت، محاسبات معوق.
Grid: تصاویر تنبل (AVIF/WebP)، «srcset/اندازه»، اندازه های قابل پیش بینی، در «دسته» کارت های 20-60.
عمومی: 'محتوا دید: خودکار'، پیش نمایش کش، اولویت بار برای عناصر قهرمان.

8) قیمت مناسب

لیست: جداول با معانی صحیح ('table/thead/tbody'، 'aria-sort')، تمرکز بر ردیف/سلول.

Grid: 'نقش =' شبکه '' یا لیست با 'نقش =' لیست '؛ ترتیب در DOM = بصری ؛ کپشن هایی برای تصاویر

صفحه کلید: فلش/تب ؛ را وارد کنید - باز کردن; Space - «به علاقه مندی ها» (در صورت لزوم).

اندازه کلیک کنید: ≥ 44px ؛ کنتراست AA ؛ امضای صریح بر روی آیکون ها

9) متریک و تله متری

• 'view _ switch (list' greid) ',' sort _ change ',' filter _ apply ',' card _ quick _ action ',
• 'row _ open'، 'compare _ open'، 'results _ load _ batch'، 'error _ retry'.

• زمان به اولین اقدام (TTFA)، نتایج qCTR، عمق پیمایش، نرخ نتیجه صفر،
• مقایسه نرخ (برای لیست)، نرخ اقدام سریع (برای شبکه)، p95 تاخیر.

10) آزمایش A/B (چه چیزی را آزمایش کنید)

نمای پیشفرض) فهرست/توری (برای تازه/بازگشتگان.
تعداد موارد در هر صفحه، ارتفاع ردیف، اندازه کارت.
سفارش فیلترها/مرتب سازی ؛ چیپس در مقابل نوار کناری.
اقدامات سریع بر روی کارت (آیکون/متن، یکی در مقابل دو CTA).
Guardrails: INP/CLS، شکایت در مورد طرح «جهش»، رشد صفر نتیجه.

11) نمونه هایی برای iGaming

بازی لابی (B2C): شبکه - پوشش + بازی/نسخه ی نمایشی, جدید/برچسب برنده تمام پولها, فیلتر تراشه (ارائه دهنده/رده/مکانیک).
کاتالوگ ارائه دهنده: شبکه ای از آرم ها با تعداد بازی ها ؛ با کلیک - صفحه ارائه دهنده (در داخل - همچنین یک شبکه از بازی ها).
گزارش/امور مالی (B2B): لیست/جدول - NGR/GGR/FTD/CR ستون، تثبیت عنوان، صادرات.
تاریخچه معامله: لیست - سری متراکم، وضعیت، جستجو بر اساس مقدار/شناسه/تاریخ ؛ گسترش رشته برای قطعات.
تبلیغات/مسابقات: شبکه بنر با تاریخ و CTA، مرتب شده بر اساس «رفتن در حال حاضر/به زودی».

12) سوئیچ های انعطاف پذیر و شخصی سازی

دکمه رادیویی «List ↔ Grid» را به کاربر بدهید و انتخاب (برای هر کاربر/مستاجر) را به خاطر بسپارید.
پیش تنظیمات عملکرد را ارائه دهید: «تنگ»، «معمولا»، «بزرگ».
منطق متنی: برای اولین بار - یک شبکه در لابی ؛ از جستجو - یک لیست برای مقایسه دقیق.

13) ضد گلوله

شبکه بدون نسبت ابعاد ثابت → کارت های «رقص» و CLS بالا.
یک لیست با تعداد زیادی ستون یک اسکرول افقی بدون نیاز است.
تکرار دکمه های عمل هر دو در کارت و در شناور با رفتار های مختلف.
مخلوط کردن انواع/فیلتر در هر بار (تمرکز تمرکز).
پنهان فیلتر فعال - کاربران «از دست دادن» نتایج.

14) چک لیست پیاده سازی (گام به گام)

1. تعیین اینکه آیا صفحه با مقایسه بصری یا ویژگی انتخاب شده است.
2. تعریف مدل: لیست/شبکه/ترکیبی ؛ IA و منابع داده را قبول دارم.
3. یک ردیف یا کارت با ابعاد منطقه کلیدی ثابت طراحی کنید.
4. مرتب سازی/فیلتر: تراشه های قابل مشاهده، کنترل مرتب سازی پایدار.
5. بارگذاری/خالی/خطا: اسکلت، متون دوستانه و تلاش مجدد.
6. عملکرد: تنبل/مجازی سازی، «محتوا دید»، اهداف p95.
7. A11y: معانی، صفحه کلید، کنتراست، اندازه ضربه بزنید.
8. تله متری: TTFA، qCTR، نتیجه صفر، تاخیر p95.

9. نمای پیش فرض A/B، ابعاد، اقدامات سریع

10. گزینه Memory: Keep view mode and last filters را انتخاب کنید.

15) خط پایین

لیست ها و شبکه ها ابزارهایی برای وظایف مختلف هستند.

هنگامی که ویژگی ها و مقایسه مهم هستند، یک لیست تهیه کنید.
هنگامی که بصری تصمیم می گیرد و اقدامات سریع - شبکه را.
یک هدف را تعریف کنید، ابعاد و رفتار را ضبط کنید، رابط کاربری را سریع و قابل دسترس نگه دارید - و کاربران بدون سر و صدای شناختی غیر ضروری در مراحل کمتری به نتایج می رسند.