سلسله مراتب محتوا در UI

1) چرا سلسله مراتب مورد نیاز است

• سه سوال را در 3-5 ثانیه پاسخ می دهد: چه چیزی مهم است ؟ چه کاری باید انجام شود ؟
• رابط را قابل پیش بینی و آسان برای اسکن می کند
• کاهش اشتباهات و افزایش نرخ تبدیل

اصول: سیگنال> سر و صدا، توالی> تنوع، زمینه> قوانین مطلق.

2) سطح اهمیت و ساختار

1. زمینه ناوبری (نام تجاری، بخش، خرده/خرده نان).

2. H1 - هدف صفحه نمایش (به عنوان کوتاه که ممکن است، فعل در صورت لزوم).

3. سرب/زیرنویس (یک خط از سود و یا وضعیت).

4. اقدامات اولیه (1-2 CTA های کلیدی).

5. داده های اولیه (KPI های اصلی، کارت های خط اول).

6. داده های ثانویه (قطعات، فیلترها، جداول کمکی).

7. متا/راهنما (نکات، یادداشت ها، متن قانونی).

قانون: در یک صفحه - یک H1، بیش از دو CTA اصلی نیست.

3) تایپوگرافی و ریتم

مقیاس فونت: H1 28-32، H2 22-24، H3 18-20، بدن 14-16، میکرو 12 (معادل px/pt در وب).

فاصله خط: 1. 3–1. 5 برای بدن، 1. 2–1. 3 برای عنوان ها

ریتم تورفتگی: چندگانه واحد پایه (4/8 پیکسل). Zagolovok↔blok: 16-24 ؛ پاراگراف ها: 8-12.
کنتراست: حداقل WCAG AA ؛ عنوان همیشه متضاد تر از زیرنویس ها/متا است.
رنگ در مقابل وزن: رنگ - لهجه، نه «چوب زیر بغل» به جای اندازه/چربی.

4) شبکه و طرح

شبکه 12 ستون (دسکتاپ )/4-6 (تلفن همراه) با دروازه های ثابت.
Visually first = first در DOM: به خوانندگان صفحه نمایش و جستجوگرها کمک می کند.
محور خواندن: چپ به راست (LTR) یا راست به چپ (RTL) - ترتیب سیگنال ها را آینه می کند.
«مناطق توجه»: بالا سمت چپ/مرکز - عنوان و سرب ؛ «نوار عمل» - نزدیک/زیر آن.

5) سیگنال های اولویت بصری

اندازه و وزن (تایپوگرافی) سیگنال اصلی است.
موقعیت (بالا/سمت چپ = مهم تر در LTR).
رنگ (لهجه برای CTA، وضعیت - با توجه به یک پالت ثابت).
Iconography (فقط به عنوان پشتیبانی متن).
تورفتگی/فریم (کارت با مقدار زیادی از «هوا» مهم تر است).
دینامیک (انیمیشن ≤ 200 میلی ثانیه برای جلب توجه بدون تحریک).

6) افشای مترقی

• در بالای صفحه - تنها زمینه، هدف و اقدام اولیه.
• بخش های آکاردئون/زبانه داده های ثانویه هستند.
• مته پایین: کارت → پانل → مدال.
• نکات درون خطی به جای بیش از حد «کمک می کند».
• اسکلت/placeholders حفظ ساختار برای مدت زمان بار.

7) سلسله مراتب در صفحه نمایش معمولی

7. 1 داشبورد

H1 + فیلتر زمان در بالا.
نوار KPI (3-5 کارت) - خط اول.
نمودارها/جداول - خط دوم، مرتب سازی/فیلتر در کنار هم.
ناهنجاری ها/هشدارها - ستون/نوار جداگانه، با KPI مخلوط نکنید.

7. 2 کاتالوگ/لابی

H1 + فیلترهای سریع/تراشه ها.
مرتب سازی نزدیک به عنوان، CTA «بازی/خرید» در کارت.
برچسب ها (جدید/بالا/برنده تمام پولها) - بصری ثانویه به نام.

7. 3 کارت هویت (بازی/مورد)

منطقه قهرمان: نام (H1)، حقایق کلیدی (RTP/volatility/rating)، CTA اولیه.
جزئیات: توضیحات/مشخصات/برگه بازخورد.
متادیتا: برچسب ها و متن قانونی - در پایین.

7. 4 فرم ها/جادوگران

هدر گام + سرب کوتاه («2 دقیقه، کارت از بین نمی رود»).
سفارش زمینه ها با فرکانس/اجباری.
CTA راست/پایین، اقدامات پشتیبانی - لینک پایین/چپ.
خطاها - در کنار زمینه، به طور خلاصه و در مورد.

8) اولویت بندی دولت

• هنجار → بار → موفقیت/خالی → خطا.
• در حال بارگذاری - نگه داشتن قاب (اسکلت)، CTA پرش نیست.
• در خطا - H1 به «چه اتفاقی افتاد» تغییر می کند، CTA - «تکرار/تماس».

9) نشانه های محتوا و سیستم طراحی

• این طور نیست. به سمت. xl '،' فونت. بدن است. MD، فضا. شعاع 200. MD، ارتفاع. SM '
• نقشهای متن: "متن. عنوان، متن رهبری، متن. ثانویه، متن. متا، متن. کمک کننده.
• نقش های رنگی: «لهجه/خنثی/موفقیت/هشدار/خطر» + «سطح» (100-900).
• اجزاء: KPI. کارت/بخش عنوان/درون خطی راهنما/متا خط...

10) اندازه گیری و کیفیت

• زمان اسکن (متوسط تا اولین کلیک/اقدام معنی دار).
• خطاهای سفارش تمرکز (چند بار کاربر «نگاه» را از دست می دهد).
• CTA Visibility% (تعداد دفعات مشاهده CTA در مقابل کلیک).
• INP/CLS (سلسله مراتب نباید هنگام بارگیری «پرش» کند).
• A/B: H1 بزرگتر در مقابل کنتراست قوی تر ؛ فیلترهای تراشه در بالا در مقابل در پانل جانبی.

• 'first _ focus _ target', 'primary _ cta _ exposed/clicked', 'section _ collapse _ toggle', 'help _ show'.

11) تمرین برای iGaming (مثال)

لابی کازینو: H1 «لابی»، «جدید/زنده/Jackpots/مورد علاقه» تراشه، و سپس کاشی. هر کارت شامل یک نام، آیکون ارائه دهنده، CTA «بازی» ؛ جدید/برچسب برنده تمام پولها - ثانویه.
داشبورد اپراتور: خط اول - NGR/GGR/DAU/CR، دوم - روند و ناهنجاری، سوم - جداول.
مرحله پرداخت: H1 «Replenishment»، سرب «بدون کمیسیون، فورا»، لیست روش های تبدیل، حداقل metatext در بالا.

12) ضد گلوله

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

13) چک لیست پیاده سازی

1. هدف صفحه نمایش را تعریف کنید (اقدامات اولیه H1 + 1-2).
2. علامت گذاری سطوح: اولیه/ثانویه/متا ؛ پین به نشانه DS.
3. جمع آوری مقیاس تایپوگرافی و ریتم پایه پایه.
4. اشکال زدایی (بوت/خالی/خطا) بدون پرش STA/هدر.
5. یک «تست اسکن» 5 دقیقه ای با 3-5 نفر انجام دهید: آنچه متوجه شدید، جایی که روی آن کلیک کردید.
6. تله متری اتصال (CTA قرار گرفتن در معرض، زمان اسکن، سفارش تمرکز).
7. ثابت الگوی در راهنماهای با قبل/بعد از نمونه.

14) خط پایین

سلسله مراتب محتوا «فونت بزرگ برای اصلی» نیست، بلکه یک سیستم راه حل است: تایپوگرافی، شبکه، رنگ، ریتم تورفتگی، نظم در DOM و رفتار در حالت های مختلف. هنگامی که هر سطح نقش و وزن خود را دارد، رابط کاربری روشن، سریع و قابل پیش بینی می شود و کاربران در اقدامات خود اطمینان دارند.