Mîkro danûstandin, anîmasyonên piçûk û baldar in ku peywireke yekane ya bikarhêner piştgirî dikin. Anîmasyona dil a bişkoja “hez kirin”, bandora pejirandinê ya di şandina formê de an jî tevgera pull-to-refresh — ev hemû mîkro danûstandin in. Her çend wekî hûragahiyên piçûk xuya dikin jî, ezmûna bikarhêner bi awayekî wateyî dewlemend dikin.
Anatomiya Mîkro Danûstandinan
Çar pêkhateyen ku Dan Saffer diyar kiriye:
- Trigger (Tetikker): Çalakiya bikarhêner an bûyera sîstemê ku danûstandinê destpê dike
- Rules (Rêgez): Mantiqê ku diyar dike danûstandin çawa tevbigere
- Feedback (Bertekdayîn): Bersiva dîtbarî/dengî ku ji bikarhêner re tê dayîn
- Loops & Modes: Dubarekirin û rewşên guhêrbar
Cureyên Mîkro Danûstandinê
| Cure | Ravekirin | Mînak |
|---|---|---|
| Guherîna Rewşê | Dîtbarkirina rewşa hêmanê | Anîmasyona toggle switch |
| Bertekdayîn | Agahdarkirina encama çalakiyê | Bandora şandina formê ya serkeftî |
| Barkirin | Birêvebirina dema bendewariyê | Skeleton screen, progress bar |
| Navîgasyon | Nermkirina derbasbûna rûpelan | Page transition, scroll reveal |
| Balkêşandin | Rêvekirina ber bi hêmanên girîng | Bandora pulse, anîmasyona bounce |
Teknîkên Anîmasyonê yên CSS û JavaScript
CSS Transitions û Animations
Ji bo guherînên rewşê yên hêsan CSS transitions îdeal e — performansdar, hêsan û lênêrîna wê bêzehmet e. Ji bo anîmasyonên tevlihev CSS @keyframes tê bikaranîn.
Pirtûkxaneyên Anîmasyonê yên JavaScript
- GSAP: Pirtûkxaneya anîmasyonê ya herî bihêz û performansdar
- Framer Motion: Anîmasyona deklaratîf ji bo sepanên React
- Lottie: Veguhestina anîmasyonên After Effects bo webê
- Three.js: Anîmasyonên webê yên 3D
Anîmasyonên Bi Scroll Tetikkirî
Anîmasyonên bi Intersection Observer API û scroll tetikkirî, beşek jênebawerî ya ezmûna webê ya nûjen in. Gava bikarhêner rûpelê dişkîne hêman xuya dibin, dişûştin an vediguhêzin.
Hevsengiya Performans û Gihîştinê
prefers-reduced-motion ji bo bikarhênerên ku hestiyariya tevgerê hene anîmasyonan ji kar bixin. Di hilberên TAGUM de ev prensîb bi baldarî têne sepandin.
- transform û opacity: Bi bilezkirina GPU, performansdar
- width, height, margin: Layout tetik dike, hêdî ye — jê dûr bikevin
- will-change: Ji gerokê re îşaretê bidin ku anîmasyon heye
- requestAnimationFrame: Ji bo anîmasyonên JS yên bêkêmasî
Beşdariya mîkro danûstandinan di razîbûna bikarhêneran de
Çavkanî: UXPin Research, 2025
Encam
Mîkro danûstandin, ezmûna dîjîtal ji pêvajoyek mekanîkî vediguherîne rêwîtiyeke xweş. Gava di dozê rast de û li cihê rast de bên bikaranîn, razîbûna bikarhêneran û têgihîştina markayê xurt dikin. Tîma dîzaynê ya TAGUM, dîzaynên danûstandinê yên ku hilberên we zindî dikin diafirîne.