سلسله مراتب بصری و اولویت

1) سلسله مراتب بصری چیست

سلسله مراتب بصری یک سیستم تاکید در رابط است که توجه کاربر را توزیع می کند و مسیر را به عمل هدف (ثبت نام، سپرده، جستجوی بازی، فیلتر، خروجی) سریع و بدون درگیری می کند. سلسله مراتب از طریق کنتراست، مقیاس، موقعیت، رنگ، تراکم اطلاعات، حرکت و فضای سفید ساخته شده است.

هدف: کاهش «هزینه های شناختی» و افزایش سهم اولین کلیک معنی دار توسط عناصر لازم.

2) تاثیر کسب و کار و KPI ها

• تبدیل CTA هدف (ثبت نام، سپرده، اضافه کردن به علاقه مندی ها)
• زمان برای ارزش گذاری
• نرخ سردرگمی
• گزاف گویی، پیمایش عمق و نگه دارید

• FMC (اولین کلیک معنی دار):٪ از کاربران که بر روی کلید کلیک کرده اند CTA ≤ N ثانیه پس از بارگیری.
• TTV (Time to Value): زمان از ورود به سیستم به مقدار کلیدی (به عنوان مثال پیدا کردن و اجرای اسلات).
• CTR از کلید CTA در صفحه نمایش: خانه، کاتالوگ، صفحه بازی، دفتر جعبه.
• نسبت کلیک های اولیه/ثانویه (نظم و انضباط توجه).
• حرکت عمق برای مسدود کردن با پیشنهاد/مسابقات.

3) اصول سلسله مراتب بصری (هسته)

1. کنتراست و مقیاس: مهمتر - بزرگتر و متضاد تر.
2. ترتیب موقعیت و خواندن: بالا/چپ و «صفحه اول» اولویت دریافت می کنند.
3. فضای سفید: هوا = اهمیت بیش از حد تنگ - اولویت از دست داده است.
4. رنگ و اشباع: لهجه رنگ - «ارز توجه» ؛ نجاتش بده.
5. فرم و نماد: شکل دکمه، نشانگرها، آیکون های وضعیت، تمایز را افزایش می دهد.

6. حرکت و microanimation: نادر، مختصر، لهجه کامل ؛ اجتناب از «عدالت»

7. گروه بندی (گشتالت): نزدیکی، شباهت، بسته شدن، هم ترازی، منطقه مشترک.
8. تراکم اطلاعات: در مسیر بحرانی - فقط یک حق، بقیه در لایه های «ضعیف» است.

4) ماتریس اولویت (P1-P4)

P1 (بحرانی اولیه): 1-2 CTA/موارد در هر صفحه نمایش. اندازه بزرگ، کنتراست روشن، موقعیت ثابت.
P2 (پشتیبانی مهم): فیلترها، برچسب های سریع، CTA های ثانویه. کنتراست متوسط، در کنار P1.
P3 (راهنما/زمینه): نکات، رتبه بندی ها، مینی کارت ها. سبک آرام، جمع و جور.

P4 (پس زمینه/مرجع): کمک، پاورقی، لینک های حقوقی. کنتراست و اندازه کوچک

قانون: بیش از یک P1 در یک صفحه نمایش. اگر P1s رقابت کنند، دیگر P1s نیستند.

5) لایه های سلسله مراتب

جهانی: ناوبری سطح بالا، جستجوی جهانی، اطلاعیه ها.
صفحه: قهرمان بلوک، H1/H2، آگهی ها/پیشنهادات کلیدی.
کامپوننت: کارت های بازی، فرم های جعبه دفتر، جداول مسابقات.
درون جزء: نظم میدان، امضا، وضعیت، میکرو نکات.

6) سناریوهای معمولی (iGaming اتصالات)

• P1: «ایجاد حساب «/» ورود «(دکمه بزرگ، موقعیت ثابت).
• P2: ورود به سیستم اجتماعی، «نمایش رمز عبور»، سیاست رمز عبور.
• P3: لینک «رمز عبور خود را فراموش کرده اید ؟ «, راهنمایی های امنیتی.

• P1: Top Up/Display + روش انتخاب شده.
• P2: مقدار، ایستگاه از پیش تنظیم سریع، هزینه ها/محدودیت های نزدیک.
• P3: شرح روش دقیق پنهان، زمان بندی.

• P1: جستجو + فیلترهای کلیدی (ارائه دهنده، نوسانات، RTP، جدید/ضربه).
• P2: بخش/برچسب ها (Megaways, برنده تمام پولها, خرید ویژگی).
• P3: مرتب سازی ثانویه، مدالها کارت (جدید، ضربه، مسابقات).

• P1: عضویت/جزئیات جایزه.
• P2: رهبران (اول 5)، تایمر شمارش معکوس.
• P3: کامل کلیک کنید/قوانین نوبت.

7) تایپوگرافی و شبکه

مقیاس مدولار: 12-14 (متن)، 16 (ساقه)، 20-24 (زیرمجموعه)، 28-40 (H1/قهرمان).
خط پایه: مراحل 4/8px ؛ ریتم عمودی = خوانایی.
طول خط: 45-75 کاراکتر برای متن ؛ 20-40 برای توصیف کارت.
خط به خط: 120-150٪ برای متن، 110-120٪ برای عناوین.

8) رنگ و کنتراست

کنتراست متن: نه کمتر از نشانه های سطح AA برای متون در مسیرهای کلیدی.
نقش های رنگی: اولیه (CTA)، لهجه (توجه)، اطلاعات/موفقیت/هشدار/خطر (وضعیت).
تم تاریک: برای تقویت تضاد مرزها و متون، برای کاهش اشباع هواپیماهای رنگی گسترده ؛ اجتناب از «درد نئون».
حالت های عناصر: پیش فرض/شناور/تمرکز/فعال/غیر فعال - قابل تشخیص هستند.

9) لهجه ها و دکمه ها

CTA اولیه: یکی در هر صفحه، رنگ/مقیاس قابل توجه، زمینه های کافی (حداقل ضربه 44 × 44px).
ثانویه/سوم: تن های صاف، سبک های کانتور.
سلسله مراتب ≠ اسپینر: پیشرفت بازخورد می دهد، اما نباید P1 را قطع کند.

10) مکانیک توجه و سرعت

F/Z-patterns: محل P1 که در آن انتظار می رود که نگاه خیره شود.
قانون هیک: کمتر مساوی سریعتر است - گزینه های مرحله اول را کوتاه کنید.
قانون Fitts: بزرگتر و نزدیکتر برای کلیک آسان تر است. افزایش منطقه ضربه مهم است.
دستورالعمل های سریال: آموزش توسط مراحل، نه توسط «دیوار متن».

11) صفحه اصلی/صفحات فرود

بلوک قهرمان: پیشنهاد کوتاه + P1 تک.
ویژوال «ریکی»: 3-4 بخش حداکثر به اسکرول اول (دسته ها، آیتم های جدید، مسابقات).
اثبات اجتماعی: مدالها ارائه دهنده، «بازدید از هفته» - P2، انجام P1 را قطع نمی کند.

12) داشبورد و جداول

صفحه اول: 1-2 KPI های کلیدی بزرگ، جرقه + مدالها روند.
جدول: ستون ها را با اهمیت، ستون های کلیدی «freeze»، از سوئیچ تراکم (جمع و جور/استاندارد) استفاده کنید.
حالت های خالی: مرحله بعدی را توضیح دهید (دکمه P1 + فوری).

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

موبایل: یک P1 به شدت بالاتر از خط پیمایش، نوار تب ≤5 امتیاز، CTA شناور برای پرداخت/بازی قابل قبول است.
دسکتاپ: عرض ظرف 1200-1440px ؛ محدود کردن طول ردیف جلوگیری از «کشش» P1.

14) محلی سازی، اعداد، RTL

طول خطوط (آلمانی/ترکی)، ارزها و درجه های مختلف را در نظر بگیرید.
RTL: ترتیب شبکه و لهجه را نشان می دهد، اما تسلط P1 را حفظ می کند.

15) A/B و معیارهای سلسله مراتبی

• افزایش 12-16٪ در اندازه P1/کنتراست → افزایش FMC و CTR.
• فیلترهای متحرک (P2) نزدیکتر به جستجو → کاهش جستجوی بازی TTV.
• کاهش گزینه ها در مرحله اول ثبت نام نقدی → تکمیل بالا.

آهنگ: FMC (N ثانیه), CTR P1, عمق حرکت به بلوک هدف, TTV, نرخ سردرگمی (خطاها/بازده), کلیک خشم.

16) روش حسابرسی (چک لیست)

1. نام P1 در هر صفحه کلید - دقیقا یکی وجود دارد ؟

2. عناصر P2 از P1 پشتیبانی می کنند، آیا در رنگ/کنتراست با آن بحث نمی کنید ؟

3. Path of Sight: 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/بدن '،' نشان. وضعیت ".
لایه ها/Z-index: 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) Microcopies و متون

عناوین H1 - مختصر، فعل/ارزش: «شروع به بازی در 10 ثانیه».
CTA - عمل و نتیجه: «در یک دقیقه دوباره پر کنید»، «اکنون بازی کنید».
نکات - در مورد، حداکثر یک خط، بدون اصطلاحات مخصوص یک صنف.

21) معیارهای پذیرش برای وظایف سلسله مراتبی

P1 تنها بر روی صفحه نمایش تعریف شده است. دیدن بدون پیمایش (موبایل/دسکتاپ).
کنتراست P1 مطابق با دستورالعمل ها است ؛ ابعاد ضربه منطقه ≥44×44px.
P2 از نظر بصری ضعیف تر از P1 است (با گام های کنتراست/مقیاس 1-2).
حالات عناصر قابل تشخیص است ؛ سبک های تمرکز صفحه کلید وجود دارد.
رویدادهای تجزیه و تحلیل متصل برای FMC/TTV/CTR/عمق پیمایش.

22) خلاصه کوتاه (TL ؛ دکتر)

سلسله مراتب، انضباط توجه است. یک P1 صریح در هر صفحه، پشتیبانی از طریق P2، سر و صدای کمتر، کنتراست کافی و تایپوگرافی قابل خواندن است. خودتان را با یک چک لیست آزمایش کنید، FMC/TTV/CTR را اندازه گیری کنید و فرضیه ها را با آزمون A/B تایید کنید.