Вақти аниматсия ва дарки UX

1) Чаро вақт муҳим аст

• ҳисси вокуниши фаврӣ ва эътимод ба система;
• возеҳии сабаб ва натиҷа (аз он унсур ба он ҳаракат кардааст);
• хастагӣ ва тасаллӣ дар ҷаласаҳои дароз;
• саҳеҳии амалҳо (хусусан дар мобилӣ ва бо нархҳои баланд).

Қоида: вақт ба мақсад хизмат мекунад. Агар аниматсия барои фаҳмидани "чӣ рӯй дод" кӯмак накунад, он халал мерасонад.

2) Психофизика ва ҳудудҳо

• ≤ 50 м - вуруди echo (чоп, эффекти клик); ба назар фаврӣ.
• ≤ 100 мс - аввалин фикру мулоҳизаҳои визуалӣ бо амал (тугмаи "пахш карда шуд").
• 120-180 мс - ховер/фокус, гузариши ҳолати мулоим.
• 180-280 мс - модал/панел; ҳамчун намуди "табиӣ" қабул карда мешавад.
• 300-500 мс - унсури муштарак, қадам ба пеш.
💡 700 мс - хавфҳои "сустӣ"; танҳо агар маъно дошта бошад, тарк кунед (масалан, тасдиқи бурд).
• ≈ 1200-1600 мс - сикли скелетӣ/тобнок; дарозтар - хаста.

3) Хатҳои сабук ва вазн

• Стандарт: 'кубик-безиер (0. 2, 0, 0. 2, 1) '- динамикаи бетарафи "моддӣ".
• Пахш карда шуд: 'кубик-безер (0. 4, 0, 1, 1) '- воридшавии зуд, клики кӯтоҳ.
• Такрор кунед: 'кубик-безиер (0, 0, 0. 2, 1) '- баромади мулоим.
• Аксенти зеркардашуда (нодир): 'кубик-безиер (0. 2, 0. 8, 0. 2, 1. 2)'s overshoot ≤ 8 px.

Оптикаи вазн: компонент (корт, кашиш) калонтар, давомнокии дарозтар (+ 40-80 мс ба пойгоҳ).

4) Марҳилаҳо ва хореография

1. Ташаббус (10-40мс): пажмурда/миқёси 0. 98 → 1 - сигнали оғоз.

2. Нақлиёт (марҳилаи асосӣ): ҳаракат/кушодан.

3. Тарҳ (20-60 мс): тормози хурд, устувории ҳалқаи соя/фокус.

• Рӯйхатҳо: 20-40 мс/ашё, ҳадди аксар 6-8 адад дар як саф.
• Шаклҳо: каскад нест; ҳама чиз дар як вақт пайдо мешавад, то ба вуруд халал нарасонад.

Бозсозӣ: оинаҳои "қафо" ба пеш "ва тезтар 15-30%.

5) Вақт аз рӯи намуди ҳамкорӣ

6) Дарки вақт: чӣ гуна бидуни шитоби воқеӣ "суръат бахшидан"

Дастрасии фаврӣ: тағироти фаврии курсорҳо/услуби фишурда ≤ 100 мс ҳатто пеш аз шабака.
Пинҳон кардани мураккабӣ: зеркашиҳои мувозӣ; Ҷамъоварии маълумоти пасзамина пеш аз кушодани панел.
Лангари ҳассос: унсури муштарак ва самти ҳаракат арзиши маърифатии интизориро коҳиш медиҳад.
Навсозиҳои оптимистӣ: UI фавран "омода" аст, сервер тасдиқ мекунад ё бозмегардад.

7) Хастагӣ ва гигиенаи аниматсионӣ

Аз пульсатсияҳои беохир канорагирӣ кунед; ҳар як давра бояд фосилавӣ ё ҷудошаванда бошад.
Таъсири микро ба массиви элементҳо (ҷадвал, шабака) бидуни норавшан/қуттии сояи ҳар як гиреҳ.
Дастгирии 'prefers-коҳиш-ҳаракат: кам кардан': танҳо пажмурда шудан ≤ 100 мм ё тугмаи статикӣ.

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 }
}
}

Номгузорӣ: 'ҳаракат. давомнокии. {нақш} 'i' ҳаракат. осон кардан. {нақш} '- ҷузъҳо ва Figma барои муҳаррик якхелаанд.

9) Татбиқ: CSS ва Framer Motion

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)} }

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 пайдарпай

Параллел (пажмурда шудан + дар як вақт тарҷума кардан) - тезтар дар эҳсос.
Пайдарпаӣ (аввал контейнер, баъд мундариҷа) сохтори равшантар, аммо дарозтар аст. Вақте ки нишон додани иерархия муҳим аст, татбиқ кунед.
Аз қадамҳои> 60 мс байни унсурҳои ба ҳам наздик дар як блок канорагирӣ кунед.

11) Вақт ва мундариҷа

Матн: ҳарф/калимаи калимаро дар маҳсулот зинда накунед; ин як усули маркетинг аст.
Рақамҳо/ҳисобкунакҳо: қадами 40-60 мс батчами, тарҳбандии ҷиттер (ҷадвал-рақамҳо).
Графика: кушодани силсилаи 180-240 мс, hover-таъкид ≤ 120 мс.

12) Хатогии дастрасӣ ва дарк

Услубҳои фокус бояд бидуни таъхир пайдо шаванд.
Огоҳӣ/хатогиҳо - аниматсияи ҳадди аққал (≤ 120 мс), ларзиш нест, агар корбар бо AT (технологияи ёрирасон) бошад.
Аз дурахши> 3/s ва дурахши контрасти калон дурӣ ҷӯед.

13) Хусусиятҳои IGaming

• Пахш кардани ≤ 100 мс; мақоми 'бебаҳо; тост/нишондиҳандаи ниҳоӣ - таъхир нест.
• Вақти посухи UI аз аниматсияи тасдиқ муҳимтар аст: тасдиқ кӯтоҳ 120-160 мс аст.

• Оғози ≤ 200 м, сикли ягона, боздорӣ 300-500 мс; чароғҳои беохир.
• Win-burst ≤ 500 ms, нест strobe; миқдори матн AAA аст.

• Навсозиҳо аз рӯи маҷмӯаҳо (250-1000 мс); visual diff ≤ 160 мс; бе ҷаҳиши тарҳ.
• Дар hover/focus - чароғаки bebunk 80-120 мс, то ки "чашм напӯшед".

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

Хатҳои хатӣ барои ҳаракатҳо (эҳсоси "механикӣ").
Давомнокии> 400 мс барои ҳолати тугмаи оддӣ.
Каскад 100 + мс аз рӯи рӯйхати даҳҳо унсурҳо (тарозу).
Сояҳо/садҳо унсурҳо дар аниматсия.
Номутобиқатӣ: амалҳои якхела бо мӯҳлатҳои гуногун дар як маҳсулот.
Фокус ё таъхир дар фаъолсозии клавиатура.

15) Рӯйхати санҷиши вақти QA

Мутобиқат

• Вақтҳо ва хатҳо аз нишонаҳо гирифта мешаванд, барои амалҳои якхела.

Ҷавоб

• Матбуот/hover/фокус ба миқёси 80-180 мс мувофиқат мекунад.
• Аввалин вокуниши визуалӣ ≤ 100 мс.

Хореография

• Вуруд ва баромад симметрӣ мебошанд; баромад нисбат ба вуруд 15-30% тезтар аст.
• Каскад аз 8 унсур ва қадами 40 мс зиёд нест.

A11y

• 'дастгирии-кам-кам' дастгирӣ; фокус бе таъхир.
• Не чашмак мезанад> 3/s.

Иҷро

• Танҳо 'табдил/шаффофият' мутаҳаррик аст; нест массаи/сояҳо.

16) Ҳуҷҷатгузорӣ дар системаи тарроҳӣ

"Токенҳои ҳаракат": давомнокӣ/сабукӣ/stagger + харитаи барнома (тугма, сарпӯш, ҷадвал, рӯйхат).
"Ритм ва Фазинг": схемаҳои каскад ва баръакс.
"Кам кардани ҳаракат": қоидаҳо ва намунаҳои таназзул.
"Иҷро кунед/накунед": клипҳои кӯтоҳ бо вақтҳо ва ченакҳои мақсаднок (INP/First First Freedback).

Хулосаи мухтасар

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