Motion-դիզայն և ինտերֆեյսների անիմացիա

1) Ինչու՞ է անիմացիան սննդի մեջ

Անիմացիան ժամանակի ընթացքում ռոտացիա է։ Նա

բացատրում է պատճառահետևանքային կապերը (որտեղ անհետացել է, որտեղից է հայտնվել տարրը),

ուշադրություն է դարձնում հիմնական գործողությանը,

ապացուցում է արդյունքը (feedback) և նվազեցնում է ճանաչողական բեռը,

անցումներ է անում կանխատեսելի և «ցրված»։

Կանոն ՝ 1: Իմաստը> ոճ է։ Ցանկացած անիմացիա պատասխանում է "Ի՞ նչ տեղի ունեցավ և ինչպե՞ ս է դա կապված ինձ հետ։ ».

2) Հիմնական սկզբունքները

1. Շարժման հիերարխիա 'առաջին շարժվում են բեռնարկղերը, ապա պարունակությունը, ապա մանրամասները։

2. Կայունություն 'նույն փամփուշտները նույն գործողությունների համար։

3. Խնայողություններ 'նվազագույն հատկություններ, նվազագույն կադրեր։ ավելի կարճ և ավելի պարզ։

4. Իրատեսական ֆիզիկա 'արագացում սկզբում, դանդաղեցում վերջում։ «բացակայում են»։

5. Այսպիսով, «ետ» զգացվում է հայելային «առաջ»։

6. Հասանելիություն 'հարգեք անիմացիայի նվազեցման պարամետրերը։

3) Տևողությունը և կորերը (առաջարկություններ)

3. 1 Տևողությունը (desktop/mobile)

Hover: 120-180 ms

Focus/Pressed: 80–120 мс

Tooltip/To.ru: 35180-240 ms, դուրս 120-160 մզ

Մոդալկի/drowers: 200-320 մզ

Էկրանների անցումները ՝ 240-360 մզ

Skroll-2019/զուգահեռ '200 մզ սեգմենտով, խուսափել անվերջ ցիկլերից

3. 2 Ծեր

Հիմնական '"cubic-bezier (0. 2, 0. 0, 0. 2, 1) "բնական" նյութական "տեմպն է։

Ավելի արագ, ելքը ավելի մեղմ է '"cubic-bezier (0։ 05, 0. 7, 0. 1, 1)`

Ռուսական հյուրը (հազվադեպ, շեշտը) '"cubic-bezier (0։ 2, 0. 8, 0. 2, 1. 2) "overshoot 248px/8 ° սահմանափակումով։

Կանոն 'մի օգտագործեք գծային ինտերպոլացիա շարժման և opacity-ի համար միաժամանակ' «մեխանիզմի» զգացում։

4) Անցումային խորեոգրաֆիա

Հայտնվելը '0-ի թեթև մասշտաբը։ 98→1. 0 + fade-in, 248-16 px ըստ առաջացման առանցքի։

Անհետացումը 'հակառակը, ավելի արագ մուտքի (20-30%)։

Ավանդների վերափոխումը/փոփոխությունը 'ընդհանուր «հիմքը» (բեռնարկղը) տեղափոխվում է 16-24 px; ակտիվ ներդիրն իջնում է մինչև շարժման սկիզբը։

Ցուցակները ՝ թուլացրեք կասկադը (stagger 20-40 ms/տարր, ոչ ավելի քան 6-8 տարրեր)։

5) Միկրո փոխազդեցությունը (patterns)

Կոճակը (hover/press) 'ստվեր + թեթև սկրոլ/scale 0։ 98; pressed-ը ցատկում է 80 մզ։

Ֆոկուս 'հակառակ օղակը առանց բլուրի; անարատել հաստությունը/թափանցիկությունը, ոչ թե գլոուն։

Ինպուտներ 'focus/դաշտի լուսավորություն։ սխալները '246 px, 24140 ms, 1 ցիկլ։

Toggle/Nokbox: Մինչև վերջնական դիրքը, տեսահոլովակի ուշացումը ոչ ավելի, քան 60-80 մզ։

Սկելետոն/բեռնումը ՝ shimmer 1200-1600 ms, պայծառության ամպլիտուդը 20 տոկոսն է, առանց կտրուկ բռնկումների։

6) Բովանդակության վիճակը

Loading no Success/Empty/Error: Մեկ «ջրանցք» շարժման; մի խառնեք տարբեր ուղղություններ։

To.ru/Aler.ru: Նրանք գալիս են իրադարձության աղբյուրից (օրինակ ՝ ներքևից աջ օգտագործողի գործողությունների համար)։

Pox to refresh: Ձգումը հակադարձ միացման հետ; ժամանակը 250 մզ է։

7) Հասանելիությունը (A1y) և անվտանգությունը

Աջակցեք 'wwww.fers-reduced-motion: reduce': Փոխարինեք շարժումները fade/scale 241% կամ ստատիկ անցում։

Խուսափեք պայթյուններից> 3 վայրկյանում և մեծ հակասական միգրացիաներով (ֆոտոսենսիվ էպիլեպսիա)։

Մի օգտագործեք ուժեղ զուգահեռ/զում օգտագործողների մոտ, որոնք ունեն մեկուսացման պատմություն։ արեք ձեր ունեցվածքը։

Ֆոկուս ստիլները միշտ տեսնում են առանց անիմացիայի (ոչ միայն գույնը/շարժումը)։

8) Արտադրողականությունը (60 FPS որպես նպատակ)

Animiruret միայն opacity և transform (translate/scale/rotate); խուսափեք «top/left/width/height»։

Միացրեք կոմպոզիտինգը '«transform: Translance Z (0)» կամ «will-change: transform, opacity» (չափավոր)։

Նվազագույնի հասցրեք repaint: Մի անիմիրացված ստվերը մեծ բլուր և ֆիլտրեր բազմաթիվ տարրերի վրա։

Կոտրեք մեծ անցումները։ օգտագործեք requestAniment Frame-ը։

Ցուցակների համար վիրտուալիզացիա/փոխաբերություն էկրանից դուրս։

9) Tokena motion-ը դիզայնի համակարգում

json
{
"motion": {
"duration": { "xs": 100, "sm": 160, "md": 220, "lg": 280, "xl": 340 },
"easing": {
"standard": "cubic-bezier(0. 2, 0. 0, 0. 2, 1)",
"emphasis": "cubic-bezier(0. 05, 0. 7, 0. 1, 1)",
"decelerate": "cubic-bezier(0. 0, 0. 0, 0. 2, 1)",
"accelerate": "cubic-bezier(0. 4, 0. 0, 1, 1)"
},
"stagger": { "listItem": 30, "maxItems": 8 }
}
}

Именование: `motion.{duration|easing|stagger}.{role}` — `hover`, `focus`, `overlayIn`, `pageTransition`, `listItem`.

10) Մոսկվա (CSS/JS/React)

CSS-2019

css
:root {
--motion-dur-sm: 160ms;
--motion-dur-md: 220ms;
--motion-ease: cubic-bezier(0. 2, 0, 0. 2, 1);
}
@media (prefers-reduced-motion: reduce) {
{ animation: none! important; transition-duration: 0. 01ms! important; }
}

Բաղադրիչը (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, transition: { duration: 0. 22 } }}
exit={{ opacity: 0, transition: { duration: 0. 16 } }}
className="fixed inset-0 bg-black/50"
>
<motion. div initial={{ y: 16, scale: 0. 98, opacity: 0 }}
animate={{ y: 0, scale: 1, opacity: 1, transition: { duration: 0. 24, ease: [0. 2,0,0. 2,1] } }}
exit={{ y: 8, scale: 0. 99, opacity: 0, transition: { duration: 0. 18 } }}
className="m-auto max-w-lg rounded-2xl bg-white p-6"
>
{children}
</motion. div>
</motion. div>
)}
</AnimatePresence>
);
}

Lottie/SVG: օգտագործեք նկարագրական դատարկությունների և onboarding-ի համար։ քննադատական վերահսկողությունների համար չէ։ Օպտիմիզացրեք և քշեք։

11) Բեռնման պատրանքները

Skeleton-ի փոխարեն սպինների փոխարեն, որտեղ հայտնի է բովանդակության կառուցվածքը։

Progress: դետերմինացված բար, եթե հայտնի է առաջընթացը, ինդետերմինալ 'միատեսակ տեմպերով, առանց «թևերի»։

Խուսափեք «լողացող» skeleton-ից վերակառուցման ժամանակ, ամրացրեք չափերը։

12) Անցումներ էջերի/էկրանների միջև

Պահպանեք ուշադրության կետը (shared eline transitions) - քարտը «բացահայտվում է» մանրուքում։

«Ներքև» լուծումը գնում է առաջ/աջ/վեր, «ետ» 'ետ; ուղղությունը միասնական է պլատֆորմի համար։

Ֆոնային ենթատեսակը ձգվում է մինչև 40-60 տոկոսը օվերելներում։

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

Spin/Reveal: Մեկ կարճ արագություն (24200 մզ) + միատեսակ պտտումը + փափուկ թուլացում; անսահման ցիկլերի արգելքը առանց գործողությունների։

Win/Jackpot: Լույսի աճը 500 մզ է, առանց կառուցվածքի։ կրկնակի ձայնով ցածր բարձրախոսով; Հաղթանակի տեքստը ընթերցված է (AAA հակառակը)։

Գրանցումները/վարկանիշները 'հաշիվների գրանցումը հաշվարկն է' պլանշետային թվերով և թեթև քայլով 40-60 մգ/միավորով, առանց layout-ի «ցատկելու»։

Պատասխանատու խաղը 'ծանուցումներ և սահմաններ առանց շեղող էֆեկտների։ անիմացիան նվազագույն է, կենտրոնանում է ընթերցանության վրա։

14) Anti-patterna

Ձգձգումներ> 120 մզ մինչև տեսահոլովակի արձագանքը։

«Վերելակը» opacity + scale 0-ից։ 9→1. 05→1. 0 'overshoot յուրաքանչյուր մանրուքի համար։

Զուգահեռ ֆոնը, որը բախվում է սկրոլի հետ։

Անսահման չափումներ/իմպուլսացիա։

Layout/paint հատկությունների անիմացիան («height», «left», «porter: blur ()») բազմաթիվ տարրերի վրա։

Անկայուն կորերն ու տևողությունը նույն գործողությունների մեջ են։

15) Գործընթացը և QA-ն

Դիզայնի մեջ

Նախատիպերը թայմինգների/կորերի հետ։ խորեոգրաֆիա ֆրեյմերի մակարդակում։

Motion-tocens-ի կատալոգը և բաղադրիչների օրինակները։

Զարգացման մեջ

Unit-թեստերը տեսանելիության/վիճակների (անցումները ավարտվում են, ինչպես սպասվում է)։

Տեսողական թեստեր (անիմացիայի վերջի կեղտոտումներ)։

Ավելացումը (Performant/Timeline) ռուսական բեռի բեմերում։

Չեկ-թերթ

• Աջակցված է 'wwww.fers-reduced-motion "։
• Միայն transform/opacity.
• Տևողությունը և կորերը համապատասխանում են հոսանքներին։
• Ոչ մի բռնկում> 3/վայրկյան և ուժեղ կառուցվածք չկա։
• Skeleton փոխարեն, որտեղ հնարավոր է։
• Անցումները և կանխատեսելի են։

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

«Motion-tocens»: duration/easing/stagger օրինակներ։

«Անցման փամփուշտներ» 'մոդելներ, ցուցակներ, ներդրումներ, էջեր։

«A1y & Performae» ՝ reduce-motion և կոմպոզիտոր։

«Do/Don 't»: կարճ տեսահոլովակներ հաջողակ/անհաջող օրինակներով։

Live ռեզյումե

Motion-դիզայնը պատճառների և հետևանքների լեզուն է։ Պահեք թայմինգները կարճ, կորը համաձայնեցված, իսկ հատկությունները 'էժան ռենդերի համար։ Հարգեք հասանելիությունը, փաստարկները և ստուգեք արտադրողականությունը։ Այդ ժամանակ անիմացիան կբարձրացնի UX-ը և չի խանգարի ինտերֆեյսի արագությունն ու հստակությունը։