Բովանդակության հիերարխիա UI

1) Ինչո՞ ւ է անհրաժեշտ հիերարխիա

Բովանդակության հիերարխիան ազդանշանների համակարգ է, որը ուղղում է հայացքը, նվազեցնում է ճանաչողական բեռը և արագացնում որոշումների ընդունումը։ Լավ հիերարխիա

երեք հարցի պատասխանն է 3-5 վայրկյանում ՝ ի՞ նչ է դա նշանակում։ Ի՞ նչ է կարևոր։

ինտերֆեյսը կանխատեսելի է դարձնում և հեշտությամբ սկանավորված։

նվազեցնում է սխալները և բարձրացնում ծրարը։

Սկզբունքներ ՝ ազդանշաններ> աղմուկ, հաջորդականություն> բազմազանություն, համատեքստը> բացարձակ կանոններ։

2) Կարևորության և կառուցվածքի մակարդակները

Առաջարկվող «անտառային» մակարդակները

1. Նավիգացիոն կոնտեքստը (բրենդը, բաժինը, նապաստակները/հացի նապաստակները)։

2. H1 էկրանի նպատակն է (հնարավորինս կարճ, բայական անհրաժեշտության դեպքում)։

3. Lead/ենթավերնագիր (մեկ տող օգուտ կամ կարգավիճակ)։

4. Primary acions (1-2 հիմնական CTA)։

5. Primary-ը (հիմնական KPI, «առաջին գծի» քարտերը)։

6. Secondary-ը (մանրամասները, ֆիլտրերը, աղյուսակը)։

7. Meta/Help (հուշումներ, գրառումներ, իրավաբանական տեքստը)։

Կանոն 'մեկ էկրանին մեկ H1 է, ոչ ավելի քան երկու primary CTA-ն։

3) Տպագրություն և ռիթմ

Տառատեսակների սանդղակը ՝ H1 28-32, H2 22-24, H3 18-20, body 14-16, micro 12 (px/pt համարժեք է վեբ)։

Միջտարածաշրջանային ընդմիջումները ՝ 1։ 3–1. 5 body, 1։ 2–1. 3 վերնագրերի համար։

Նահանջի ռիթմը 'կարճ ռուսական միավորը (4/8 px)։ Մոսկովյան բլոկի վերնագիրը '16-24; Աբզազի '8-12։

Հակադրություն 'առնվազն WCAG AA; վերնագիրը միշտ ավելի հակադրելի է, քան ստորագրությունը/meta։

Քաշը 'գույնը շեշտադրումն է, ոչ թե «ոսկրը»' չափի/ճարպակալման փոխարեն։

4) Ցանցը և մոդեթը

Ցանցը 12 (desktop )/4-6 (mobile) ֆիքսված գատերով։

Visually first = first in DLS: օգնում է սքրինդրիդներին և SEO-ին։

Կարդալու առանցքը 'ձախ կողմում (LTR) կամ աջ ձախ (RTL) - զոդեք ազդանշանների կարգը։

«Ուշադրության գոտիները» 'վերին ձախ/կենտրոն - վերնագիր և lead; «Գործողությունների ժապավենը» մոտ/նրա տակ է։

5) Տեսողական ազդանշաններ առաջնահերթություն

Չափը և քաշը (տպագրությունը) առաջնային ազդանշան է։

Դիրքը (ավելի բարձր/ձախ = ավելի կարևոր է LTR-ում)։

Գույնը (շեշտը CTA-ի համար, կարգավիճակները ֆիքսված պալիտրա վրա)։

Իկոնոգրաֆիա (միայն որպես տեքստի աջակցություն)։

Նահանջները/շրջանակները (մեծ «օդ» քարտը ավելի կարևոր է ընկալվում)։

Դինամիկան (անիմացիան 200 մզ է ուշադրություն գրավելու համար առանց բաժանման)։

6) Առաջադիմական բացահայտում

Թաքցրեք բարդությունը շերտերով

Above the fold-ը միայն համատեքստն է, նպատակը և առաջնային գործողությունը։

Ակորդեոնների/տաբայի բաժինները հիբրիդային տվյալներ են։

Կլիկի մանրամասները (wwww.ill-down) 'քարտը wwww.dal-ի վահանակ։

Inline-հուշումները գերագնահատված «helpov» -ի փոխարեն։

Սկելետոնները/պլեյշոլդերները պահպանում են կառուցվածքը բեռնման ժամանակ։

7) Հիերարխիա տիպիկ էկրաններում

7. 1 Դաշբորդ

H1 + ժամանակավոր ֆիլտրը վերևում։

KPI (3-5 քարտ) - առաջին գիծը։

Գրաֆիկները/աղյուսակները երկրորդ գիծն են, տեսակավորում/ֆիլտրեր մոտակայքում։

Anomali/alerta-ը առանձին սյունակ/ժապավեն է, չի խառնվում KPI-ի հետ։

7. 2 Կատալոգ/լոբբի

H1 + արագ ֆիլտրեր/չիպեր։

Տեսակավորումը ավելի մոտ է վերնագրին, CTA «Խաղալ/գնել» քարտում։

Պիտերբուրգը (նոր/ավելի բարձր/ջեքպոտ) տեսողական տարբերակն է անվան հետ։

7. 3 Էության քարտ (խաղ/ապրանք)

Հերոս գոտին 'անունը (H1), հիմնական փաստերը (RTP), primary CTA։

Մանրամասները 'ներդրումներ «Նկարագրություն/բնութագիր/Ակնարկներ»։

Մետատվյալներ ՝ ռուսական և իրավաբանական տեքստը ներքևում։

7. 4 Ձևեր/վարպետներ

Windows + կարճ lead («2 րոպե, քարտեզը չի գրվում»)։

Դաշտերի կարգը հաճախականությամբ/պարտադիր է։

CTA աջ/ներքևում, գործողությունը 'ներքևի/ձախ հղումները։

Սխալները մոտ են դաշտին, հակիրճ և գործին։

8) Պետության գերակայությունը

Հիերարխիան պետք է դիմակայի տարբեր վիճակներ

Նորմը հաստատվում է Burguard Windows/Puto International Windows

Բեռնման մեջ, պահպանեք շրջանակը (կմախքներ), CTA-ը չի նստում։

Սխալ, H1-ը փոխվում է «ինչ պատահեց», CTA-ը '«կրկնել/կապվել»։

9) Բովանդակության հոսանքները և դիզայնի համակարգը

Փակեք հիերարխիան տոքսեններում

`font. heading. xl`, `font. body. md`, `space. 200`, `radius. md`, `elevation. sm`.
Տեքստի դերերը '«07»։ title`, `text. lead`, `text. secondary`, `text. meta`, `text. helper`.

Գույնի դերերը ՝ "accent/neutral/success/warn/danger '+" մակարդակներ "(100-900)։

Բաղադրիչները ՝ "KPI։ Card/Section. Title/Inline. Help/Meta. Line`.

10) Չափումներ և որակներ

Ընթերցանության և հիերարխիայի մետրերը

Scan Time (մեդիան մինչև առաջին մտածված տեսահոլովակը/գործողությունը)։

Focus Order Errors (քանի անգամ օգտագործողը «արթնանում է» հայացքով)։

CTA Visibility% (որքան տեսանք CTA vs-ը)։

INP/CLS (հիերարխիան չպետք է «ցատկել» բեռնման ժամանակ)։

A/B 'ավելի մեծ քան H1 vs-ը ավելի ուժեղ է, քան հակադրությունը։ չիպ ֆիլտրեր վերևում vs կողային վահանակում։

Թելեմետրիա

`first_focus_target`, `primary_cta_exposed/clicked`, `section_collapse_toggle`, `help_shown`.

11) iGaming (օրինակ)

Լոբբի կազինո 'H1 «Լոբբի», չիպեր «Նոր/Մոսկվա/Ջեքպոտներ/Սիրված», հետո սալիկներ։ Յուրաքանչյուր քարտում անունն է, պրովայդերի իկոն, CTA «Խաղալ»։ «Նոր/ջեքպոտ» կոմպոզիցիան ոչ պաշտոնական է։

Օպերատոր 'առաջին տողը NGR/GGR/DAU/CR, երկրորդը' միտումներ և անոմալիաներ, երրորդը 'սեղաններ։

Հիբրիդային քայլը 'H1 «Համալրումը», lead «Առանց, անմիջապես», փոխադարձության մեթոդների ցանկը, առնվազն մետաթեքսը վերևում։

12) Անտիպատերնի

Տասը նույնական ակցենտներ էկրանին («տեսողական ճիչ»)։

Վերնագրերը որպես նկարներ/սրբապատկերներ առանց տեքստի (կոտրում են հասանելիությունը և որոնումը)։

«Արդյունքները փոքր տառատեսակով», իսկ ծանուցումները հսկա բանաններ են։

Նշված հղումները primary CTA-ի մոտ նույն տեսողական քաշով։

Չհամաձայնեցված կարգը 'այսօր «վերևից ֆիլտրեր», վաղը «ձախ»։

13) Ներդրման չեկի ցուցակ

1. Էկրանի հիմնական նպատակը (H1 + 1-2 առաջնային գործողություններ)։

2. Նշեք մակարդակները 'primary/secondary/meta; ամրացրեք DS հոսանքներում։

3. Հավաքեք տպագրության սանդղակը և հավատքի հիմնական ռիթմը։

4. Կարգավորել վիճակը (բեռնումը/դատարկ/սխալ) առանց STA/վերնագրերի։

5. Անցկացրեք 5 րոպե «սկան-թեստ» 3-5 մարդկանց հետ, որոնք նկատեցին, թե որտեղ են կլանվել։

6. Միացրեք հեռուստացույց (exposure CTA, scan time, focus order)։

7. Ամրացրեք փամփուշտը դելլիններում «մինչև/հետո» օրինակներով։

14) Արդյունքը

Բովանդակության հիերարխիան ոչ թե «հիմնական տառատեսակն է», այլ որոշումների համակարգը 'տպագրությունը, ցանցը, գույնը, հավատքի ռիթմը, DRC-ում կարգուկանոնը և վարքագիծը տարբեր միջավայրերում։ Երբ յուրաքանչյուր մակարդակ ունի իր դերը և քաշը, ինտերֆեյսը դառնում է հասկանալի, արագ և կանխատեսելի, իսկ օգտագործողները ՝ վստահ իրենց գործողություններում։