Зинанизоми визуалӣ ва афзалият

1) Зинанизоми визуалӣ чист

Иерархияи визуалӣ як системаи таваҷҷӯҳ дар интерфейс мебошад, ки диққати корбарро паҳн мекунад ва роҳро ба амали мақсаднок (имзо, амонат, ҷустуҷӯи бозӣ, филтр, баромад) зуд ва бидуни низоъ месозад. Иерархия тавассути контраст, миқёс, мавқеъ, ранг, зичии иттилоот, ҳаракат ва фазои сафед сохта мешавад.

Ҳадаф: кам кардани "хароҷоти маърифатӣ" ва зиёд кардани ҳиссаи Аввалин Маънӣ аз ҷониби унсурҳои зарурӣ.

2) Таъсири тиҷорат ва KPI

• Табдили мақсадноки CTA (бақайдгирӣ, амонат, илова ба мунтахаб)
• Вақти арзиш
• Меъёри нофаҳмиҳо
• Паридан, чуқурии ҳаракат ва нигоҳ доштан

• FMC (First Meaningful Click):% истифодабарандагоне, ки пас аз боркунӣ калиди CTA ≤ N сонияро пахш карданд.
• TTV (Вақт ба арзиш): вақт аз воридшавӣ ба арзиши асосӣ (масалан, ковокии ёфтан ва иҷро кардан).
• CTR калиди CTA дар экранҳо: хона, каталог, саҳифаи бозӣ, дафтари қуттӣ.
• Таносуби кликҳои ибтидоӣ/миёна (интизоми диққат).
• Чуқурии ҳаракат барои бастани пешниҳод/мусобиқа.

3) Принсипҳои иерархияи визуалӣ (аслӣ)

1. Муқоиса ва миқёс: муҳимтар - калонтар ва муқоисашаванда.
2. Вазифа ва тартиби хониш: боло/чап ва "экрани аввал" афзалият мегиранд.
3. Фазои сафед: ҳаво = аҳамият. Хеле зич - афзалият гум мешавад.
4. Ранг ва пуррагӣ: аксенти рангӣ - "асъори диққат"; ӯро наҷот диҳед.
5. Шакл ва иконография: Шакли тугма, нишонаҳо, нишонаҳои вазъ фарқиятро баланд мебардоранд.
6. Ҳаракат ва микроаниматсия: акцентҳои нодир, мухтасар, пурра; аз "одилона" канорагирӣ кунед.
7. Гурӯҳбандӣ (гесталт): наздикӣ, монандӣ, пӯшиш, ҳаммарказ, минтақаи умумӣ.
8. Зичии иттилоот: дар роҳи интиқодӣ - танҳо роҳи рост, боқимонда дар қабатҳои "заиф".

4) Матритсаи афзалиятнок (P1-P4)

P1 (Critical-Primary): 1-2 CTA/ашёҳо дар як экран. Андозаи калон, контрасти дурахшон, мавқеи собит.
P2 (Дастгирии муҳим): филтрҳо, барчаспҳои зуд, CTA-ҳои дуюм. Муқоисаи миёна, дар паҳлӯи P1.
P3 (Кӯмак/Контекст): маслиҳатҳо, рейтингҳо, мини-кортҳо. Услуби ором, паймон.
P4 (Замина/Истинод): кӯмак, пой, пайвандҳои ҳуқуқӣ. Муқоиса ва андозаи хурд.

Қоида: на бештар аз як P1 дар як экран. Агар P1s рақобат кунанд, онҳо дигар P1s нестанд.

5) Қабатҳои иерархия

Глобалӣ: паймоиш дар сатҳи боло, ҷустуҷӯи глобалӣ, огоҳиҳо.
Саҳифа: блоки қаҳрамон, H1/H2, баннерҳои калидӣ/пешниҳодҳо.
Компонент: кортҳои бозӣ, варақаҳои қуттӣ, мизҳои мусобиқа.
Компоненти дохилӣ: тартиби саҳроӣ, имзоҳо, статусҳо, микро-маслиҳатҳо.

6) Сенарияҳои маъмулӣ (IGaming-fitting)

• P1: "Эҷод кардани ҳисоб "/" Воридшавӣ "(тугмаи калон, мавқеи собит).
• P2: Вурудоти иҷтимоӣ, "Нишон додани парол", сиёсати парол.
• P3: Истинодҳо "Паролро фаромӯш кардед? ", Маслиҳатҳои амниятӣ.

• P1: Top Up/Display + усули интихобшуда.
• P2: Маблағ, пешпардохти зуд, пардохтҳо/маҳдудиятҳо дар наздикӣ.
• P3: Тавсифи муфассали метод, вақт.

• P1: Филтрҳои калидӣ Ҷустуҷӯ + (Провайдер, Ноустуворӣ, RTP, Нав/Хит).
• P2: Қисматҳо/барчаспҳо (Megaways, Jackpot, харидани хусусият).
• P3: навъбандии дуюмдараҷа, нишонаҳои кортӣ (нав, хит, мусобиқаҳо).

• P1: Ҳамроҳ/Тафсилоти ҷоиза.
• P2: Leaderboard (аввал 5), вақтсанҷи ҳисобкунӣ.
• P3: Қоидаҳои пурраи клик/гардиш.

7) Типография ва шабака

Ҷадвали модулӣ: 12-14 (матн), 16 (поя), 20-24 (сарлавҳаҳо), 28-40 (H1/Қаҳрамон).
Хати асосӣ: қадамҳои 4/8px; ритми амудӣ = хондан.
Дарозии сатр: 45-75 аломат барои матн; 20-40 барои тавсифи корт.
Сатр ба сатр: 120-150% барои матн, 110-120% барои унвонҳо.

8) Ранг ва контраст

Муқоисаи матн: на камтар аз нишонаҳои сатҳи АА барои матнҳо дар роҳҳои асосӣ.
Нақшҳои рангӣ: ибтидоӣ (CTA), Accent (диққат), Маълумот/Муваффақият/Огоҳӣ/Хатар (статусҳо).
Мавзӯи торик: мустаҳкам кардани муқоисаи сарҳадҳо ва матнҳо, кам кардани миқдори ҳавопаймоҳои васеъи рангӣ; аз "дарди неон" дурӣ ҷӯед.
Ҳолати элементҳо: пешфарз/hover/focus/active/маъюбон - фарқ мекунанд.

9) Аксентҳо ва тугмаҳо

CTA ибтидоӣ: як экран, ранг/миқёси намоён, майдонҳои кофӣ (min-tap 44 × 44px).
Дуюм/олӣ: оҳангҳои ҳамвор, услубҳои контурӣ.
Зинанизоми Spinner ≠: пешрафт фикру мулоҳизаҳо медиҳад, аммо набояд P1-ро боздорад.

10) Механикаи диққат ва суръат

Намунаҳои F-/Z: Ҷойгиркунии P1, ки дар он ҷо чашм интизор аст.
Қонуни Ҳик: Камтар баробар аст - имконоти қадами аввалро кӯтоҳ кунед.
Қонуни Фиттс: калонтар ва наздиктар клик кардан осонтар аст; зиёд кардани минтақаи зарба муҳим аст.
Пешниҳодҳои силсилавӣ: На бо "девори матн" бо қадамҳо таълим диҳед.

11) Саҳифаҳои экрани/фурудгоҳи хонагӣ

Блоки қаҳрамон: пешниҳоди кӯтоҳ + P1 ягона.
Визуалии "reiki": 3-4 қисмат то ҳадди аввал (категорияҳо, ашёҳои нав, мусобиқа).
Далели иҷтимоӣ: нишонаҳои провайдер, "хитҳои ҳафта" - P2, P1-ро халалдор накунед.

12) Панели панелҳо ва мизҳо

Экрани аввал: 1-2 калиди KPI-ҳои калон, дурахшон + нишонаҳои тамоюл.
Ҷадвал: сутунҳоро аз рӯи аҳамият ҳамоҳанг кунед, сутунҳои калидиро "ях кунед", калиди зичиро истифода баред (паймон/стандарт).
Ҳолати холӣ: қадами навбатиро фаҳмонед (тугмаи 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. Роҳи чашм: P1 3 фокуси аввалро мезанад?
4. Оё контрасти матн/ACTA дар мавзӯъҳои сабук/торик кифоя аст?
5. Минтақаҳои ҳадди аққал задашуда?
6. Ғавғо: оё шумо метавонед 20% элементҳоро бе гум кардани табдилдиҳӣ хориҷ кунед?
7. Ҳолатҳои холӣ ба амал оварда мерасонанд?
8. Оё давлатҳо (hover/focus/фаъол) фарқ мекунанд ва дастрасанд?
9. Оё P1 бе ҳаракат дар мобилӣ намоён аст?
10. Оё ченакҳо дар ҳалқа пайваст ва хонда мешаванд?

17) Анти-намунаҳо

Ду ё зиёда ибтидоӣ дар як экран.
Баннерҳои "дурахшон", ки P1-ро такрор мекунанд.
Хокистарӣ дар хокистарӣ (контрасти нокифоя).
Нишонаҳо бе матн дар роҳи интиқодӣ.
Кортҳои изофабор: 6 + нишонаҳо, 4 хатти тавсиф.
Аниматсияҳо бе ҳадаф (дурахшон/беохир).

18) Системаи тарроҳӣ: мушаххасоти афзалиятҳо

Токенҳо: 'ранг. ибтидоӣ ',' ранг. аксент ',' баландӣ. p1 ',' радиус. lg ',' фазо. 8/12/16`.
Нақшҳои андоза: 'btn. с1. lg ',' btn. p2 нест. md ',' матн. h1/h2/бадан ',' нишона. статус '.
Қабатҳо/Z-индекс: 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) Микрокопия ва матнҳо

Сарлавҳаҳои H1 - мухтасар, феъл/арзиш: "Бозиро дар 10 сония оғоз кунед".
CTA - амал ва натиҷа: "Дар як дақиқа пур кунед", "Ҳоло бозӣ кунед".
Маслиҳатҳо - аз рӯи ҳолат, ҳадди аксар як сатр, бе жаргон.

21) Меъёрҳои қабули вазифаҳои иерархӣ

Дар экран як P1 муайян карда мешавад; бе ҳаракат нигаред (мобилӣ/мизи корӣ).
Контрасти P1 ба дастурҳо мувофиқат мекунад; андоза ба майдони ≥ 44 × 44px расид.
P2 назар ба P1 заифтар аст (бо қадамҳои 1-2 контраст/миқёс).
Ҳолати унсурҳо фарқ мекунанд; услубҳои фокуси клавиатура мавҷуданд.
Рӯйдодҳои таҳлили пайвастшуда барои FMC/TTV/CTR/Чуқурии ҳаракат.

22) Хулосаи кӯтоҳ (TL; DR)

Иерархия интизоми таваҷҷӯҳ аст. Як P1-и возеҳ дар як экран, дастгирӣ тавассути P2, садои камтар, контрасти кофӣ ва типографияи хондан. Худро бо рӯйхати назоратӣ санҷед, FMC/TTV/CTR-ро чен кунед ва фарзияҳоро бо санҷишҳои A/B тасдиқ кунед.