Motion დიზაინი და ინტერფეისის ანიმაცია

1) რატომ არის ანიმაცია პროდუქტში

• განმარტავს მიზეზობრივ კავშირებს (სადაც ის გაქრა, საიდან გაჩნდა ელემენტი),
• ყურადღებას ამახვილებს მთავარ მოქმედებაზე
• შედეგი ადასტურებს (feedback) და ამცირებს კოგნიტურ დატვირთვას,
• ხდის გადასვლები პროგნოზირებადი და „ხელშესახები“.

წესი 11: მნიშვნელობა> სტილი. ნებისმიერი ანიმაცია პასუხობს კითხვას "რა მოხდა და როგორ უკავშირდება ეს ჩემთან? ».

2) ძირითადი პრინციპები

1. მოძრაობის იერარქია: კონტეინერები, შემდეგ შინაარსი, შემდეგ ნაწილები ჯერ მოძრაობენ.
2. მუდმივი: იგივე ნიმუშები იგივე ქმედებებისთვის.
3. დაზოგვა: მინიმალური თვისებები, მინიმალური პერსონალი; უკეთესი უფრო მოკლე და ნათელი.
4. რეალისტური ფიზიკა: დასაწყისში აჩქარება, ბოლოს შენელება; არ არსებობს „მიღწევები“.
5. შექცევადობა: „უკან“ იგრძნობა სარკისებურად „წინ“.
6. ხელმისაწვდომობა: პატივი სცეთ ანიმაციის შემცირების სისტემურ პარამეტრებს.

3) ხანგრძლივობა და მრუდი (რეკომენდაციები)

3. 1 ხანგრძლივობა (desktop/mobile)

Hover: 120-180 ms

Focus/Pressed: 80–120 мс

Tooltip/Toast: შეყვანა 180-240 ms, გამომავალი 120-160 ms

მოდალები/drowers: 200-320 ms

ეკრანების გადასვლები: 240-360 ms

Scroll სავალდებულო/პარალელური: 200 ms თითო სეგმენტზე, თავიდან აიცილოთ უსასრულო ციკლები

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 შეზღუდვით 8px/8 °

წესი: ნუ გამოიყენებთ ხაზოვან ინტერპოლაციას ერთდროულად მოძრაობებისა და შესაძლებლობებისთვის - „მექანიზმის“ შეგრძნება.

4) გადასვლის ქორეოგრაფია

გამოჩენა: მარტივი მასშტაბი 0. 98→1. 0 + fade-in, ოფსეტური 8-16 px შემთხვევის ღერძის გასწვრივ.
გაუჩინარება: საპირისპირო ბრძანება, უფრო სწრაფი, ვიდრე შესვლა (− 20-30%).
ჩანართების გადაკეთება/შეცვლა: ზოგადი „საფუძველი“ (კონტეინერი) გადადის 16-24 px- ით; აქტიური ჩანართი ხაზგასმულია მოძრაობის დაწყებამდე.
სიები: შეასუსტეთ კასკადი (stagger 20-40 ms/ელემენტი, არაუმეტეს 6-8 ელემენტი).

5) მიკრო ურთიერთქმედება (patterns)

ღილაკი (hover/press): ჩრდილი + მსუბუქი scale/scale 0. 98; pressed გადახტა 80 ms.
ფოკუსი: კონტრასტული ბეჭედი ბლურის გარეშე; ამოიღეთ სისქე/გამჭვირვალეობა და არა დიდი.
Inputs: ველი/განათება ველი focus; შეცდომები - შერყევა 6 px, 140 ms, 1 ციკლი.
Toggle/Checkbox: ჭურვი საბოლოო პოზიციამდე, დაწკაპუნების შეფერხება არაუმეტეს 60-80 ms.
ჩონჩხი/დატვირთვა: shimmer 1200-1600 ms, სიკაშკაშის ამპლიტუდა - 20%, მკვეთრი ციმციმების გარეშე.

6) შინაარსის მდგომარეობა

Loading, Success/Empty/Error: მოძრაობის ერთი „არხი“; ნუ აურიეთ სხვადასხვა მიმართულებები.
Toast/Alerts: ისინი დაფრინავენ მოვლენის წყაროდან (მაგალითად, ქვემოთ მარჯვნივ მომხმარებლის ქმედებებისთვის).
Pull to refresh: გაჭიმვა ელასტიური მღელვარებით; დაბრუნების დრო 250 ms.

7) წვდომა (A11y) და უსაფრთხოება

შეინარჩუნეთ 'prefers-reduced-motion: reduce': შეცვალეთ მოძრაობები fade/scale 1% ან სტატიკური გადასასვლელით.
თავიდან აიცილეთ ციმციმები> 3 წამში და დიდი კონტრასტული შთანთქმის (ფოტოსენსიური ეპილეფსია).
არ გამოიყენოთ ძლიერი პარალელი/ზუმი მომხმარებლებში, რომლებსაც აქვთ ტუმბოს ისტორია; გამორთეთ.
ფოკუსის სტილი ყოველთვის ჩანს ანიმაციის გარეშე (არა მხოლოდ ფერი/მოძრაობა).

8) პროდუქტიულობა (60 FPS, როგორც მიზანი)

მხოლოდ ანიმაცია და ტრანსფორმაცია (ტრანსლაცია/სკალეტი/როტატი); მოერიდეთ 'საუკეთესო/მარცხენა/width/height'.
ჩართეთ კომპოზიცია: 'transform: translateZ (0)' ან 'will-change: transform, opacity' (ზომიერად).
მინიმუმამდე დაიყვანეთ repaint: არ გაანადგუროთ ჩრდილები დიდი ბლურით და ფილტრებით მრავალ ელემენტზე.
დაალაგეთ დიდი გადასვლები ბატიკებზე; გამოიყენეთ requestAnimation Frame.
სიებისთვის - ეკრანის გარეთ ვირტუალიზაცია/შეცვლა.

9) მოძრაობის ნიშნები დიზაინის სისტემაში

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

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 spinner- ის ნაცვლად, სადაც შინაარსის სტრუქტურა ცნობილია.
პროგრესი: დეტერმინის ბარი, თუ პროგრესი ცნობილია; indetermination - ერთიანი ტემპით, „მიღწევების“ გარეშე.
თავიდან აიცილეთ „მცურავი“ სკელეტონი რეკონსტრუქციის დროს - გაზარდეთ ზომები.

12) გვერდებს/ეკრანებს შორის გადასვლები

შეინარჩუნეთ ყურადღების წერტილი - ბარათი „იხსნება“ დეტალებში.
ნავიგაცია „ღრმად“ წინ მიიწევს/მარჯვნივ/ზემოთ, „უკან“ - უკან; მიმართულება ერთია პლატფორმისთვის.
ფონის სუბსტრატი შეფერხებულია 40-60% -მდე, ოვერლეებით.

13) iGaming სპეციფიკა

Spin/Reveal: ერთი მოკლე აჩქარება (200 ms) + ერთგვაროვანი ბრუნვა + რბილი ანაზღაურება; უსასრულო ციკლების აკრძალვა მოქმედების გარეშე.
Win/Jackpot: მსუბუქი სიჩქარე 500 ms, სტაგნაციის გარეშე; ორმაგი ხმა დაბალი მოცულობით; გამარჯვების ტექსტი არის ჩიტაბელენი (AAA კონტრასტით).
ტურნირები/რეიტინგები: ანგარიშის კვალი - მრიცხველი ფირფიტის ნომრებით და მსუბუქი ნაბიჯი 40-60 ms/ერთეული (ბრძოლები), „გადახტომის“ გარეშე.
პასუხისმგებელი თამაში: შეტყობინებები და ლიმიტები ყურადღების გარეშე; ანიმაცია მინიმალურია, აქცენტი წაკითხულზე.

14) ანტი შაბლონები

შეფერხებები> 120 ms პასუხის გაცემამდე.
„ლიფტი“ opacity + scale 0-დან. 9→1. 05→1. 0 თითოეული წვრილმანისთვის.
ფონის პარალელი, რომელიც ეწინააღმდეგება სკრიპტს.
გაუთავებელი ციმციმები/პულსაცია.
მრავალ ელემენტზე layout/paint ('height', 'left', 'filter: blur ()') თვისებების ანიმაცია.
არასტაბილური მრუდი და ხანგრძლივობა იმავე მოქმედებებში.

15) პროცესი და QA

• პროტოტიპები ტაიმინგებით/მრუდებით; ქორეოგრაფია ჩარჩოების დონეზე.
• მოძრაობის ნიშნების კატალოგი და კომპონენტების მაგალითები.

• ხილვადობის/სახელმწიფოების ერთეულის ტესტები (გადასვლები დასრულებულია როგორც მოსალოდნელი).
• ვიზუალური ტესტები (ანიმაციების დასრულების სლაიდები).
• პროფილირება (Performance/Timeline) სცენაზე მაქსიმალური დატვირთვით.

• მხარი დაუჭირა „prefers-reduced-motion“.
• მხოლოდ ტრანსფორმირება/კონტროლი.
• ხანგრძლივობა და მრუდი შეესაბამება ტენდენციებს.

არ არსებობს ციმციმები> 3/წმ და ძლიერი სტრესი.

• სკელეტონი სპინერის ნაცვლად, სადაც შესაძლებელია.
• გადასვლები ინვერსიული და პროგნოზირებადია.

16) დოკუმენტაცია დიზაინის სისტემაში

Motion ნიშნები: duration/easing/stagger მაგალითებით.
„გადასვლის ნიმუშები“: მოდულები, სიები, ჩანართები, გვერდები.
A11y & Performance: reduce-motion ჰაიდი და კომპოზიცია.
„Do/Don 't“: მოკლე კლიპები წარმატებული/წარუმატებელი მაგალითებით.

მოკლე რეზიუმე

Motion დიზაინი არის მიზეზებისა და შედეგების ენა. შეინარჩუნეთ დრო მოკლე, მრუდი შეთანხმებულია, ხოლო თვისებები იაფია რენდერისთვის. პატივს სცემთ წვდომას, შეამოწმეთ ნიშნები და შეამოწმეთ პროდუქტიულობა. შემდეგ ანიმაცია გააძლიერებს UX- ს და ხელს არ შეუშლის ინტერფეისის სიჩქარეს და სიცხადეს.