Зинанизоми мундариҷа дар 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, micro 12 (эквиваленти px/pt дар веб).
Фосилаи хат: 1. 3–1. 5 барои бадан, 1. 2–1. 3 барои унвонҳо.
Ритми вуруд: якчанд воҳиди асосӣ (4/8 px). Zagolovok↔blok: 16-24; сархатҳо: 8-12.
Муқоиса: ҳадди аққали WCAG AA; унвон ҳамеша нисбат ба сарлавҳаҳо/мета фарқ мекунад.
Ранг ва вазн: ранг - аксент, на "асо" ба ҷои андоза/равған.

4) Шабака ва тарҳ

Grid 12 сутун (мизи корӣ )/4-6 (мобилӣ) бо дарвозаҳои собит.
Ба таври визуалӣ аввал = аввал дар DOM: ба хонандагони экран ва SEO кӯмак мерасонад.
Меҳвари хониш: аз чап ба рост (LTR) ё аз рост ба чап (RTL) - тартиби сигналҳоро инъикос кунед.
"Минтақаҳои диққат": чап/маркази болоӣ - унвон ва сурб; "бари амал" - наздик/поёнтар аз он.

5) Сигналҳои афзалиятноки визуалӣ

Андоза ва вазн (типография) сигнали асосӣ аст.
Вазифа (дар боло/ба чап = дар LTR муҳимтар аст).
Ранг (аксент барои CTA, статусҳо - мувофиқи палитраи собит).
Иконография (танҳо ҳамчун дастгирии матн).
Нишонаҳо/чаҳорчӯбаҳо (корт бо миқдори зиёди "ҳаво" муҳимтар аст).
Динамика (аниматсия ≤ 200 мс барои ҷалби диққат бидуни хашм).

6) Ифшои прогрессивӣ

• Дар боло - танҳо контекст, мақсад ва амали аввалия.
• Қисмҳои аккордеон/ҷадвал маълумоти дуюмдараҷа мебошанд.
• Машқ ба поён: корт → панел → модалӣ.
• Маслиҳатҳои Inline ба ҷои изофабори "кӯмак мекунад".
• Скелетҳо/ҷойгузинҳо сохторро дар тӯли сарборӣ нигоҳ медоранд.

7) Иерархия дар экранҳои муқаррарӣ

7. 1 панели панел

Филтри вақти H1 + дар боло.
Бари KPI (3-5 корт) - сатри аввал.
Графҳо/ҷадвалҳо - сатри дуюм, навъбандӣ/филтрҳо паҳлӯ ба паҳлӯ.
Аномалия/огоҳиҳо - сутун/лентаи алоҳида, бо KPI омехта нашавед.

7. 2 Каталог/Лобби

H1 + филтрҳои тез/микросхемаҳо.
Ҷойгиркунӣ ба унвон, CTA "Play/Buy" дар корт.
Барчаспҳо (нав/боло/jackpot) - ба таври визуалӣ ба ном.

7. 3 Корти субъект (Бозӣ/Ашё)

Минтақаи қаҳрамон: ном (H1), далелҳои асосӣ (RTP/ноустуворӣ/рейтинг), CTA ибтидоӣ.
Тафсилот: Тавсиф/Хусусиятҳо/Ҷадвалҳои бозгашт.
Метамаълумот: тамғакоғазҳо ва матни ҳуқуқӣ - дар поён.

7. 4 Шаклҳо/ҷодугарон

Сарлавҳаи қадам + пешсафи кӯтоҳ ("2 дақиқа, корт аз кор бароварда намешавад").
Тартиби майдонҳо аз рӯи басомад/ҳатмӣ.
CTA рост/поён, амалҳои дастгирикунанда - пайвандҳои поён/чап.
Хатогиҳо - дар паҳлӯи майдон, мухтасар ва дар бораи парванда.

8) Афзалияти давлатӣ

• Norm → Load → Муваффақият/Хатои холӣ
• Ҳангоми боркунӣ - чаҳорчӯбро нигоҳ доред (скелетҳо), CTA ҷаҳида намешавад.
• Дар хатогӣ - H1 ба "чӣ рӯй дод" тағир меёбад, CTA - "такрор/тамос".

9) Нишонаҳои мундариҷа ва системаи тарроҳӣ

• 'фон. сарлавҳа. xl ',' ҳуруф. бадан. md ',' фазо. 200 ',' радиус. md ',' баландӣ. см '.
• Нақшҳои матнӣ: 'матн. унвон ',' матн. пешбари ',' матн. миёна ',' матн. мета ',' матн. мададгор '.
• Нақшҳои рангӣ: 'accent/бетараф/муваффақият/огоҳӣ/хатар' + 'сатҳҳо' (100-900).
• Компонентҳо: 'KPI. Корт/бахш. Унвон/Inline. Кӯмак/Мета. Сатр '.

10) Андозагирӣ ва сифат

• Вақти скан (медиан ба аввал клик/амали пурмазмун).
• Хатогиҳои фармоишии Фокус (корбар чанд маротиба намуди зоҳириро "пазмон" мекунад).
• Намоиши CTA% (чӣ қадар CTA vs кликро дидаанд).
• INP/CLS (иерархия набояд ҳангоми боркунӣ "ҷаҳида" шавад).
• A/B: H1 калонтар против муқовимати қавитар; филтрҳои чип дар боло ва дар панели паҳлӯ.

• 'first _ focus _ target', 'primary _ cta _ exposed/clicked', 'section _ collasse _ toggle', 'help _ нишон дода шудааст'.

11) Амалияҳо оид ба IGaming (мисол)

Лобби казино: H1 "Lobby", "New/Live/Jackpots/Favorite" чипҳо, пас сафолҳо. Ҳар як корт дорои ном, тасвири провайдер, CTA "Play" мебошад; барчаспҳои нав/jackpot - миёна.
Панели оператор: хати аввал - NGR/GGR/DAU/CR, дуюм - тамоюлҳо ва аномалияҳо, сеюм - ҷадвалҳо.
Қадами пардохт: H1 "Пуркунӣ", роҳбари "Не комиссия, фавран", рӯйхати усулҳои табдилдиҳӣ, ҳадди аққали метатекст дар боло.

12) Антипаттернҳо

Даҳ аксенти ҳамон қувват дар экран ("фарёди визуалӣ").
Унвонҳо ҳамчун тасвирҳо/нишонаҳо бе матн (дастрасӣ ва ҷустуҷӯро мешикананд).
"Натиҷаҳо дар чопи хурд" ва огоҳиҳо дар баннерҳои азим.
Пайвандҳои ёрирасон дар назди CTA ибтидоӣ бо вазни визуалӣ.
Тартиби номувофиқ: имрӯз "филтрҳо аз боло", фардо "аз чап".

13) Рӯйхати санҷиши амалисозӣ

1. Ҳадафи экранро муайян кунед (амалҳои ибтидоии H1 + 1-2).
2. Сатҳҳоро қайд кунед: ибтидоӣ/миёна/мета; PIN ба токенҳои DS.
3. Ҷамъоварии миқёси типография ва ритми асосӣ.
4. Ҳолати ислоҳи хатоҳо (пурбор/холӣ/хато) бидуни STA/сарлавҳа.
5. 5 дақиқа "санҷиши скан" -ро бо 3-5 нафар гузаронед: он чизе ки шумо пайхас кардед, дар куҷо пахш кардед.
6. Телеметрияро пайваст кунед (таъсири CTA, вақти скан, фармоиши фокус).
7. Намунаро дар дастурҳо бо намунаҳои пеш/баъд ислоҳ кунед.

14) Сатри поён

Иерархияи мундариҷа "ҳуруфи калон барои асосӣ" нест, балки системаи ҳалли: типография, шабака, ранг, ритми вуруд, тартиб дар DOM ва рафтор дар давлатҳои гуногун. Вақте ки ҳар як сатҳ нақш ва вазни худро дорад, интерфейс равшан, зуд ва пешгӯишаванда мегардад ва корбарон ба амалҳои худ эътимод доранд.