Փոխարկումը և բովանդակության կառավարումը

1) Ինչո՞ ւ մտածենք, թե ինչու պետք է մտածենք փոխարկումների մասին։

Պտտումը ժամանակակից ինտերֆեյսերում նավարկելու հիմնական միջոցն է։ Լավ նախագծված առաջընթաց

արագացնում է ճիշտ բովանդակության որոնումը (ավելի քիչ կլինիկաներ 'ավելի շատ սկրոլներ),

տալիս է վերահսկման զգացում (խարիսխ, «վերադառնալ դեպի սկիզբը» ֆիլտրեր ավելացնելով),

խնայում է ռեսուրսները (ծույլ բեռնումը, վիրտուալիզացիան),

ավելացնում է ծրարը (բովանդակությունը տեսանելի է ավելի վաղ, CTA-ն '«մեծ մատի գոտում»)։

Սկզբունքներ ՝ արագություն> խտություն; համատեքստը> աղմուկ; կանխատեսելիություն> «մոգություն»։

2) Պտտման մոդելներ. Երբ ընտրեք ինչ-որ բան ընտրելիս

1. Դասական սագինացիա

Հարմար է որոնման, սեղանների, հաշվետվությունների արդյունքների համար։ Պլյուսներ 'վերահսկողություն, կայուն URL, հեշտ պաշտպանություն էջերում։ Մինուսները 'ավելի շատ կլինիկաներ, «կոտրվածքներ» ուշադրություն։

2. Անսահման ժապավենը (infinite scrope)

Ֆիդների և օրինագծերի համար սխալի ցածր գին (նորություններ, բովանդակության քարտեր)։ Պլյուսներ 'ներգրավում, ավելի քիչ կլինիկաներ։ Մինուսները ՝ «կորցրած ֆուտեր», դժվար է վերադառնալ, բարդ հասցեագրում։

3. Հիբրիդ ՝ «Ցույց տալ «/« Բեռնել ավելին »

Փոխզիջում. Տեսիլքները սեղմում են կոճակը։ Առավելությունները 'ռենդերների վերահսկումը, ֆուտերի հասանելիությունը, կանխատեսելիությունը։ Մինուսներ 'դեռ գծային է։

4. Սեգմենտացված թռիչք (բաժակներ/խարիսխ)

Երկար հոդվածներ, վկայագրեր և wiki-ի համար։ Պլյուսներ 'փաստաթղթի քարտեզը, արագ ցատկերը։ Մինուսները 'նավիգացիայի բարդությունը և առաջնորդությունը։

Լուծումը

Դելեյը/լոբբին հիբրիդ է կամ անվերջ + «վերադառնալ սկիզբին»։

Որոնում/սեղաններ - էջերի չափսեր և արագ ֆիլտրեր։

Express/longrid - հատվածներ TOC-ի և առաջընթաց-բարի հետ։

3) Տեղեկատվական ճարտարապետությունը և դասավորությունը

Վերին գլխարկը (sticky) 'որոնում, արագ ֆիլտրեր, տեսակավորում; չի արգելափակում բովանդակությունը երբ հայտնվում է։

Կողային վահանակ (desktop) 'գլխավորում (TOC), ֆիլտրեր; www.ayle - հեռացող sheet.

Sticky-տարրերը 'վերին ֆիլտրերը, խարիսխը, կարդալու առաջընթացը, «Back to Top» -ը։

Բովանդակության քարտերը 'կանխատեսելի բարձրությունը ավելի քիչ է, քան մոդելը։

Դատարկ վիճակներ 'կմախքներ/շիմերներ, ոչ թե «դատարկ էկրաններ»։

4) Խթանման վարքագիծը (միկրոմեխանիկա)

Իներցիան և ֆիզիկան 'արտանետումը պետք է թվա «ոչ»։ մի կոտրեք փամփուշտները։

Առանցքային ճառագայթը, հորիզոնական (կարուսել), արգելափակեք ուղղահայաց առանցքը շարժման շեմից հետո։

Diap-կետերը 'հարմար են կարուսելների, քարտերի և վարպետի քայլերի համար։ Մի չարաշահեք երկար ժապավենները։

Anchored scroling: Երբ բեռնաթափեք, պահպանեք օգտագործողի ֆոկուսը և հարաբերական դիրքը։

Scrome-chaining: Սահմանափակեք ներդրված բեռնարկղերի իրադարձությունների «հոսքը», որպեսզի չփորձեք «ցատկել» էջի վրա։

5) Ուշադրության կառավարումը

Լողացող STA/« Դեպոզիտ »/» Խաղալ »'մեծ մատի գոտում, չի արգելափակում բովանդակությունը։

Առաջադիմական բար 'վերևի գիծ, համաժամեցված խարիսխների հետ։

Ղեկավարումը (TOC) 'ընթացիկ հատվածը ծածկված է, արագ հղումները, կոճակը «վերևում»։

Վերնագրերի խարիսխ 'կայուն հեշեր URL-ում; շաղ տվեց գլխարկի բարձրության փոխհատուցմամբ։

Համատեքստային «կպչուն» ֆիլտրեր 'համախմբել 1-2 էկրանների արտանետումից հետո։

6) Մեծ ժապավենի բեռնումը և ռենդերինգը

Լենինի բեռնումը (lazy) 'նկարներ, տեսահոլովակներ, բլոկներ։ Ենթածրագրի շեմն առջևում գտնվող թիվ 1-2 էկրան է։

Վիրտուալիզացիա/պատուհանի ռենդեր (sporing) 'նկարեք միայն տեսանելի տարածքը + բուֆերը։

Պլեյշոլդերներ/կմախքներ 'կանխատեսելի չափսեր, առանց «ցատկելու»։

Կուսակցության բեռնումը '20-60 տարրերի քայլ; հավասարակշռություն պահանջների և ռենդերների միջև։

Քեշը հատվածներ է, որ վերադառնալիս վերականգնեք դիրքերը և բեռնված չանկերը։

7) Բովանդակության կառավարումը ժապավենի մեջ

Խմբավորում 'ամսաթվերով/կատեգորիաներով; բաժանող վերնագրերը կպչում են։

Տեսակավորումը և ֆիլտրերը 'տեսանելի և մատչելի, ակտիվ պայմանների ինդիկացիայի հետ։

«Ցույց տալ ավելին» երկար նկարագրությունների համար։

Լրատվամիջոցները բղավում են, որ տեսանելի տարածքից դուրս վիդեո-դադար է։ Avto-2019-ը միայն առանց ձայնի և ակնհայտ կառավարման։

Սխալների վիճակը '«Ցանցի կորուստ», «Չհաջողվեց բեռնել»' retry-ից և դիրքի պահպանումից։

8) Հասանելիությունը և տեղայնացումը

Բոլոր գործողությունները հասանելի են առանց ժեստերի '«Բեռնել» կոճակը, «Սկզբում», «Բացել TOC»։

Ֆոկուս-կառավարումը 'խարիսխների նավիգացիայի ժամանակ, կենտրոնացման փոխանցումն է դեպի վերնագիր։

Էկրանի ընթերցողները 'արտանետման կոճակների նկարագրությունը/TOS, կարգուկանոնի տրամաբանությունը։

RTL 'չորացրեք հորիզոնական կարուսելները և անջատիչները։

Reduced motion 'անջատեք «բարդ» անիմացիաները և զուգահեռները նրանց համար, ովքեր նախընտրում են պարզեցված էֆեկտներ։

9) Պերֆորմանս ՝ նպատակներ և չափումներ

INP (Interaction to Next Paint) հիմնական ժեստերը/scroll: 24200 ms։

Scrome-jank (կադրերի բացթողում սկրոլլում): <անձնակազմի 1 տոկոսը> 16,7 մգ տիպիկ սարքերի վրա։

CLS (կուտակային մոդելի տեղաշարժը): 360,1 (հատկապես ավելացման ժամանակ)։

TBT/Blocking: խուսափեք ծանր սինխրոն հաշվարկներից սկրոլլի ժամանակ։

Հիշողությունը 'կայուն օգտագործումը երկար հաճախականությամբ (վիրտուալիզացիայի դեպքում արտահոսք չկա)։

Պրակտիկա

պասիվ լսողները բղավեցին, հետաձգված հաշվարկները '«requeStaniment Frame»;

«Թեթև» ստվերներ/առանց բարդ բլուր թափման ժամանակ.
ֆիքսված կամ կանխատեսելի քարտերի չափերը.

նկարների խնայողությունները (batched contates)։

10) Թելեմետրիա և իրադարձություններ

Իրադարձությունները

«scrome _ start »/« scrome _ end» (աղբյուրը, արագությունը, ուղղությունը),

«entente _ load _ request/success/fail» (պաչկա, չափսը),

«viewice _ item _ exposed» (id, տեսանելիության ժամանակը),

`toc_click`, `anchor_navigate`, `back_to_top_click`,

«list _ restore» (դիրքը, վերականգնման ժամանակը)։

• Depth Reached (քանի էկրաններ/տարրեր դիտվում են),
• Exposure Time per Item (միջին/միջին),
• Load Error Rate, Retry Rate,
• Scrome Abandonics (դուրս եկան մինչև հաջորդ խմբաքանակի բեռնումը),
• Return-to-Position Success.

11) Տարբեր տեսակի բովանդակության համար

Ստանդարտ և խաղեր/ապրանքներ 'հիբրիդային ժապավեն, sticky ֆիլտրեր, վիրտուալացում, կոճակ «Ցույց տալ ավելին»։

Longrids/wiki: TOC, առաջընթաց բար, խարիսխ, «պատճենել հղումը հատվածի վրա»։

Նորությունների ֆիդը 'անվերջ ժապավենը բաժանողների հետ, «վերադառնալ վերջին»։

Աղյուսակներ/դիմահարդարումներ ՝ «ցույց տալ N», վերնագրերի սառեցումը և հիմնական զանգվածները, հորիզոնական ժայռը անհրաժեշտության դեպքում։

System/log-strims: Auto-sprolle-ից «դադար/բռնել», ածխածնի սահմանափակում։

12) Բջջային հատկություններ

Մեծ մատի գոտիները 'CTA և «սկզբում»' ներքևում։ ֆիլտրերը շարժվող sheet-ում են։

«Ձգող» ֆուտեր 'ցույց տալ միայն կանգառում։ չխանգարել սկրոլին։

Ժեստերը 'հորիզոնական քարուսելները' առանցքային լոկով։ pox-to-refresh - միայն այնտեղ, որտեղ դա սպասվում է։

Լողի '60 FPS ստուգումը «ծանր» ցուցակներում։ նվազեցրեք ազդեցության խտությունը։

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

«Անվերջ ժապավենը + թաքնված ֆուտեր առանց ելքի» (ոչ մի հղում/կոնտակտներ/կանոններ)։

Վերամշակումը, որը փոխում է կարդացածը, ենթատեքստի կորուստ է։

Լողացող վահանակները, որոնք ծածկում են տեքստը և CTA-ը։

Քարտերի անսահմանափակ բարձրությունը կոչվում է «թափառող» layout-shift 'a։

Լրատվամիջոցների ինքնորոշումը ձայնով, երբ տեսանելի է։

Դիրքի վերականգնման բացակայությունը «ետ» դեպքում։

14) Ներդրման թուղթ (սպրինտով)

Սպրինտ 1: մոդելի ընտրություն (պագինացիա/հիբրիդ/անվերջ), հիմնական սկրոլային տարաներ, sticky-գլխարկ/ֆիլտրեր, «Back to Top»։

Սպրինտ 2: Ծույլ պատկերներ/բլոկներ, կմախքներ, կանխատեսելի քարտերի չափեր։

Սպրինտ 3 'ցուցակների վիրտուալիզացիա, դիրքի պահպանում և պաչեկ, խարսխում/TOS։

Սպրինտ 4: հեռուստացույցի և էքսպոնիզացիայի, ինչպես նաև scrope-jank ալտերտերը։

Սպրինտ 5: հասանելիություն (ֆոկուս/ընթերցողներ), RTL, reduced motion, ստեղնաշարի ռոտացիա (desktop)։

Սպրինտ 6: բարակ օպտիմիզացիան 'առանցքային ճառագայթը, ալյումինե կետերը, UX լրատվամիջոցների բարելավումը ժապավենի մեջ։

15) Գլոսարիա

Infinite Scrope-ը տարրերի անվերջ բեռնումն է։

Dising/Virtualization-ը միայն տեսանելի ցուցակի տարրերի ռենդեր է։

Anchored Scroling-ը հարաբերական դիրքի պահպանումն է ավելացման ժամանակ։

Scrome-jank-ը «derganya» է, քանի որ կադրերը բաց են թողնում արտանետման ժամանակ։

TOC (Table of Systents) - խարիսխների գլխամաս։

CLS/INP-ը մակետի և պատասխանունակության կայունության չափումներ են։

16) Արդյունքը

Խթանումը ոչ միայն «էջի շարժումը» է, այլ ուշադրության և ռեսուրսների կառավարման ռազմավարությունը։ Հաղթում է այն ինտերֆեյսը, որը

1. ընտրում է հոսքի հարմար մոդել (պագինացիա/հիբրիդ/անվերջ),

2. վերահսկում է (խարիսխ, TOC, sticky ֆիլտրեր, «սկզբում»),

3. Այն արագ և կայուն է (ծույլ բեռնումը, վիրտուալացումը, առանց հերթափոխի),

4. մնում է մատչելի և կանխատեսելի,

5. չափում է հեռաչափությունը և բարելավում UX-ը տվյալների հիմքում։