Թայմինգ անիմացիաներ և UX ընկալում

1) Ինչո՞ ւ է թայմինգը քննադատում

Անիմացիան ոչ թե «զարդեր» է, այլ ընկալման ժամանակի մանիպուլյացիա։ Միլիսեքսունդները ազդում են

ակնթարթային արձագանքի և վստահության զգացում համակարգի նկատմամբ.

հետազոտական կապերի պատճառների պարզությունը (որտեղից/որտեղ է տեղափոխվել տարրը);

հոգնածություն և հարմարավետություն երկարատև ոլորտներում.

գործողության ճշգրտությունը (հատկապես բջջային և բարձր տոկոսադրույքով)։

Կանոն 'թայմինգը իմաստն է։ Եթե անիմացիան չի օգնում հասկանալ «ինչ է տեղի ունեցել», դա խանգարում է։

2) Հոգեֆիզիկա և շեմեր

Ապրանքային UI-ի ուղեցույցները

50 մգ - էխո մուտք (կնիք, կլիք-ազդեցություն); թվում է, թե ակնթարթային է։

100 ms - առաջին տեսողական ֆիբեկը գործողության մեջ (կոճակը «սեղմվեց»)։

120-180 մգ - hover/focus, «փափուկ» վիճակը։

180-280 մգ - մոդալներ/վահանակներ; ընկալվում է որպես «բնական» հայտնագործություն։

300-500 ms - ուշադիր շարժում (shared elect), առաջընթաց «առաջ»։

1200-1600 ms - skeleton/shimmer ցիկլը; ավելի երկար հոգնեցուցիչ է։

3) Արագացման կորերը (easing) և «քաշը»

«Քաշով» տարրը սկսում է ավելի արագ և «կպչում» վերջում։ Հիմնական կորերը

Իսպանիա: 'cubic-bezier (0։ 2, 0, 0. 2, 1) "- չեզոք" նյութական "դինամիկան։

Արագացում (pressed) '"cubic-bezier (0)։ 4, 0, 1, 1) - արագ պաշտպանիչ, կարճ կլիկ։

Դանդաղեցումը (overlay out) '"cubic-bezier (0, 0, 0)։ 2, 1) "փափուկ ելք է։

Ընդգծված շեշտը (հազվադեպ) '"cubic-bezier (0)։ 2, 0. 8, 0. 2, 1. 2)` с overshoot ≤ 8 px.

Քաշի գլանափաթեթը 'որքան մեծ է բաղադրիչը (քարտը, drower), այնքան երկար է (+ 40-80 ms մինչև)։

4) Փուլեր և խորեոգրաֆիա

Կիսեք շարժումը փուլերի վրա

1. Նախաձեռնություն (10-40 մզ) 'թեթև fade/scale 0։ 98 71 - սկզբից ազդանշան։

2. Տրանսպորտը (հիմնական ֆորումը) 'շարժումը/բացահայտումը։

3. Տեղումները (20-60 մզ) 'փոքրիկ արգելակ, ստվերի/ֆոկուսի օղակի կայունացում։

Կասկադ (stagger)

Ցուցակները ՝ 20-40 մզ/տարր, առավելագույնը 6-8 տարրեր անընդմեջ։

Ձևեր ՝ առանց կասկադի; ամեն ինչ հայտնվում է միևնույն ժամանակ, որպեսզի չխանգարի ներածությանը։

Այսպիսով, "առաջ" հայելիտ "և ավելի արագ 15-30 տոկոսով։

5) Taymings տեսակի փոխազդեցություն

6) Ժամանակի ընկալում. Ինչպես «արագացնել» առանց իրական արագացման

Instationafford.ru: cursors/pressed-2019-ի ակնթարթային փոփոխությունը 100 մզ նույնիսկ ցանցից առաջ։

Բարդության թաքցնում 'զուգահեռ բեռնման; տվյալների շատրվանը մինչև վահանակի բացումը։

Իմաստաբանական խարիսխը 'shared elect և շարժման ուղղությունը նվազեցնում են սպասման ճանաչողական արժեքը։

Լավատեսական նորարարությունները 'UI «պատրաստ» անմիջապես, սերվերը ապացուցում կամ արձագանքում է։

7) Անիմացիայի հոգնածությունն ու հիգիենան

Խուսափեք անսահման զարկերակներից. յուրաքանչյուր ցիկլ պետք է լինի ընդհատվող կամ անջատված։

Միկրո էֆեկտները տարրերի զանգվածների վրա (105, գրիդ) արեք առանց բլուր/brone-shadow յուրաքանչյուր վրա։

Աջակցեք 'wwww.fers-reduced-motion: reduce': Թողեք միայն fade 38100 ms կամ կարգավիճակի անջատիչ։

css
@media (prefers-reduced-motion: reduce) {
{ animation: none! important; transition-duration:.01ms! important; }
}

8) Թաիմինգների Տոկենները (դիզայնի համակարգը)

json
{
"motion": {
"duration": { "press": 90, "hover": 160, "focus": 160, "overlayIn": 240, "overlayOut": 180, "tab": 200, "shared": 280 },
"easing": {
"standard": "cubic-bezier(0. 2,0,0. 2,1)",
"accelerate": "cubic-bezier(0. 4,0,1,1)",
"decelerate": "cubic-bezier(0,0,0. 2,1)"
},
"stagger": { "listItem": 30, "maxItems": 8 }
}
}

Անունը 'motion։ duration.{role}` и `motion. easing: + role + "-ը բաղադրիչների շարժիչի և Figma-ի համար միասնական է։

9) Մոսկվա: CSS և Framer Motion

CSS ճնշումները

css
:root{
--dur-press:90ms; --dur-hover:160ms; --dur-overlay-in:240ms; --dur-overlay-out:180ms;
--ease-std:cubic-bezier(.2,0,.2,1);
--ease-acc:cubic-bezier(.4,0,1,1);
--ease-dec:cubic-bezier(0,0,.2,1);
}
.button{ transition: transform var(--dur-press) var(--ease-acc), box-shadow var(--dur-hover) var(--ease-std); }
.button:active{ transform: scale(.98); }
.modal-enter{ animation: modalIn var(--dur-overlay-in) var(--ease-std) both; }
.modal-exit { animation: modalOut var(--dur-overlay-out) var(--ease-dec) both; }
@keyframes modalIn{ from{opacity:0; transform:translateY(16px) scale(.98)} to{opacity:1; transform:none} }
@keyframes modalOut{ from{opacity:1} to{opacity:0; transform:translateY(8px) scale(.99)} }

Framer Motion (մոդալի օրինակ)

tsx import { motion, AnimatePresence } from "framer-motion";

export function Modal({ open, children }) {
return (
<AnimatePresence>
{open && (
<motion. div initial={{opacity:0}} animate={{opacity:1}} exit={{opacity:0}}
transition={{duration:.18, ease:[0. 2,0,0. 2,1]}} className="fixed inset-0 bg-black/50">
<motion. div initial={{y:16, scale:.98, opacity:0}}
animate={{y:0, scale:1, opacity:1, transition:{duration:.24, ease:[0. 2,0,0. 2,1]}}}
exit={{y:8, scale:.99, opacity:0, transition:{duration:.18, ease:[0,0,0. 2,1]}}}
className="m-auto max-w-lg rounded-2xl bg-white p-6">
{children}
</motion. div>
</motion. div>
)}
</AnimatePresence>
);
}

10) Ժամանակի պարամետրերը 'զուգահեռ vs հաջորդականությունը

Զուգահեռ (fade + translate միևնույն ժամանակ) ավելի արագ է զգացմունքով։

Հաջորդականությունը (սկզբում բեռնարկղը, ապա բովանդակությունը) ավելի պարզ կառուցվածք է, բայց ավելի երկար։ Կիրառիր, երբ կարևոր է հիերարխիա ցույց տալ։

Խուսափեք «քայլերից»> 60 ms սերտ կապված տարրերի միջև մեկ տարբերակում։

11) Թայմինգը և բովանդակությունը

Տեքստը 'մի անիմիրուալեք letter/word-by-word արտադրանքներում։ սա մարքեթինգային տեխնոլոգիա է։

Թվեր/հաշվիչներ '40-60 մզ մարտեր, առանց layout (tabular-nums)։

Գրաֆիկները '180-240 մզ, hover-highlight-120 մզ։

12) Հասանելիությունն ու ընկալման սխալը

Ֆոկուս ոճը պետք է հայտնվի առանց ուշացման։

Զգուշացումներ/սխալներ - անիմացիա նվազագույն (No. 120 ms), առանց ցնցումների, եթե օգտագործողը AT-ից (assistive tech)։

Խուսափեք բռնկումներից> 3/s և մեծ հակադրություններ։

13) iGaming հատկությունները

Տոկոսադրույքը/գնումը

Press 24100 մզ; կարգավիճակ 'buby' անմիջապես; գլանաձև երանգ/ցուցիչ 'առանց ուշացման։

UI-ի արձագանքի թայմինգը ավելի կարևոր է, քան հաստատման անիմացիան '120-160 մսի հաստատումը։

• Սկսելը 200 մզ է, միատեսակ ցիկլը, 300-500 մզ արգելակումը։ անսահման չափումներ չկան։
• Win-աճը 500 մզ է, առանց կառուցվածքի։ գումարի տեքստը AAA-ն է։
• Նախկին գործակիցները

Մարտերի նորարարությունները (250-1000 մզ); տեսողական տերմինալ 160 մզ; առանց կոճակի։

Hover/focus-ում 80-120 մսի լուսավորության դեբաունս է, որպեսզի ոչ թե «միգրալ»։

14) Anti-patterna

Գծային կորերը շարժումների համար («մեխանիզմի» զգացում)։

Տևողությունը> 400 մզ կոճակի պարզ վիճակների համար։

Կասկադ 100 + ms ցուցակով տասնյակ տարրերից (տրյագոմոտին)։

Ստենի/բլուր անիմացիայի հարյուրավոր տարրերի վրա։

Անհամաձայնություն 'նույն գործողությունները տարբեր թայմինգների հետ մեկ ապրանքում։

Հետաձգված ֆոկուսը կամ ստեղնաշարի ակտիվացման ուշացումը։

15) QA-chek-թերթ թայմինգների

Կոնսիստենտություն

• Թայմինգները և կորերը վերցնում են հոսանքներից, նույնն են նույն գործողությունների համար։

Արձագանք

• Press/hover/focus տեղադրվում են 80-180 զանգվածում։
• Առաջին տեսողական արձագանքը 100 մզ է։

Խորեոգրաֆիա

• Մոսկվան և ելքը սիմետրիկ են. ավելի արագ ելքը 15-30 տոկոսով։
• Կասկադը չի գերազանցում 8 տարրերը և 40 մզ քայլ։

A11y

• [wwww.fers-reduced-motion "աջակցվում է; ֆոկուս առանց ուշացման։
• Ոչ միգրանտներ> 3/վ։

Պերֆորանսը

• Անիմացվում են միայն «transform/opacity»; զանգվածային բլուր/ստվեր չկա։

16) Մոսկվա դիզայնի համակարգում

«Motion Tokens»: duration/easing/stagger + օգտագործման քարտեզը (button, overlay, tab, list)։

«Rhythm & Phasing» 'կասկադի և շրջադարձային սխեմաներ։

«Reduce Motion» 'քայքայման և օրինակների կանոնները։

«Do/Don 't»' կարճ տեսահոլովակներ թայմկոդներով և նպատակային մետրերով (INP/First Feedback)։

Live ռեզյումե

Լավ թայմինգը ակնթարթային արձագանք է, հասկանալի խորեոգրաֆիա և տնտեսական կորեր։ Պահեք կարճ տևողությունը միկրո-պետությունների համար, ձգեք միայն այն դեպքում, որտեղ դա ավելացնում է իմաստը, աջակցեք reduce-motion-ին և մի անիմիրուրացրեք «թանկ» հատկությունները։ Այդ ժամանակ ինտերֆեյսը զգում է կենդանի և հուսալի, հատկապես իրական ժամանակի սցենարներում և բարձր պարամետրերում։