Mikro-interaktioner: 15 eksempler og hvordan man designer dem
Mikro-interaktioner forklaret: en definition, Dan Saffers fire dele, 15 rigtige eksempler grupperet efter type, designregler og hvordan man bygger dem i CSS, Framer Motion, GSAP eller ExodeUI.
Core Takeaway
En mikro-interaktion er et lille, indeholdt øjeblik i en grænseflade, der gør én ting: at like et opslag, skifte mellem en indstilling, bekræfte en formular eller fuldføre en gestus. Udtrykket og dets anatomi kommer fra Dan Saffer, som definerer fire dele. En trigger starter den, regler bestemmer, hvad der sker, feedback viser resultatet, og loops eller modes styrer, hvad den gør over tid. Gode mikro-interaktioner er korte, reagerer på brugerens egne input og forbliver afbrydelige.
Hvad er en mikro-interaktion?
En mikro-interaktion er den mindste fuldstændige interaktion i et produkt: en enkelt opgave med en begyndelse, en ændring og en slutning. Det er ikke et helt flow. At like et opslag er en mikro-interaktion; at skrive og udgive en kommentar er et flow. Idéen og dens struktur kommer fra Dan Saffers bog Microinteractions, som deler hver enkelt op i fire dele.
De fire dele af en mikro-interaktion
Dan Saffers ramme bryder en mikro-interaktion i fire komponenter. Det er nyttigt at navngive dem, fordi de fleste fejl og de fleste dårlige bevægelser lever i en af de fire, ikke i det hele.
Udløser
Den begivenhed, der starter den. Brugerinitieret (et tryk, svæv, langt tryk, træk) eller systeminitieret (en download-afslutning, en netværksfejl ankommer). Kredit: Dan Saffer.
Regler
Hvad sker der, når det starter: gyldige tilstande, begrænsninger såsom trækgrænser eller minimums- og maksimumværdier og rækkefølgen af begivenheder. Kredit: Dan Saffer.
Feedback
Hvordan produktet fortæller brugeren, hvad der skete: forårets afvikling, farveændringen, ikonets morph, tekstopdateringen. Det er her det meste af motion-designet bor. Kredit: Dan Saffer.
Sløjfer og tilstande
Hvad interaktionen gør over tid, og hvordan tilstande ændrer den. Den samme skifte kan opføre sig anderledes i mørk tilstand eller i et kompakt layout uden at ændre dens logik. Kredit: Dan Saffer.
Hvorfor mikro-interaktioner betyder noget
En mikro-interaktion er, hvordan en grænseflade svarer brugeren uden et tekstafsnit. Det bekræfter, at en handling er modtaget, viser, at noget stadig fungerer, eller forklarer, hvad der lige har ændret sig. Når de mangler, føles det samme produkt tungere: Brugere trykker to gange, fordi intet fortalte dem, at det første tryk landede, eller de venter på en skærm, der ikke gav tegn på fremskridt. Gode mærkes mere end bemærket, hvilket er pointen.
15 eksempler på mikrointeraktion
Disse er grupperet efter, hvad de kommunikerer. Hvor ExodeUI sender et matchende eksempel, er navnet givet, så du kan åbne og redigere det.
Knapper og skift (tryk og indstil)
1. Knaptryk: skaler til ca. 0,92 ved pointer down og spring tilbage ved frigivelse (ExodeUI eksempel: Jelly Button). 2. Vippekontakt: Fjederbaseret oversættelse med farveskift ved commit (Gooey Toggle). 3. Mode switch: en segmenteret kontrol, der forskyder sin indikator og ændrer den aktive etiket (Motion Switch).
Formularfeedback (validering og indsendelse)
4. Ugyldig inputrystelse: et kort vandret skub, der siger "tjek dette felt" uden en dialogboks (Wiggle Text Input). 5. Send i gang: knappen bliver statusindikatoren, så brugeren aldrig mister sin plads (Animeret Send-knap). 6. Succesbekræftelse: et lille festligt udbrud på knappen, når handlingen lander (Rocket Launch Button).
Indlæsning og fremskridt
7. Cirkulær fremgang: en ring, der fyldes til den reelle værdi og afregner med en fjeder (Radial Gauge). 8. Niveau- eller aktivitetsmåler: en bjælke, der reagerer live på indgående data såsom lydniveau (Sound Wave).
Navigation
9. Menuskift: et ikon, der skifter mellem to tilstande og afslører menuen på plads (Morph Nav). 10. Dock-forstørrelse: elementer i nærheden af markøren løftes og vokser og sætter sig derefter (magnetisk dock). 11. Fanevalg: en indikator, der glider mellem fanerne i stedet for at blinke (Liquid Tab Bar).
Tomme og succestilstande
12. Tom tilstand: en lille illustration, der animerer én gang for at blødgøre en tom skærm. 13. Afsløring af belønning: en gave eller et badge, der åbner med forventning, når en milepæl er nået (Surprise Gift Box).
Træk for at opdatere
14. Pull-to-refresh: elastisk overscroll, der sporer træk, derefter springer tilbage og sætter sig ved frigivelse. Feedbacken er strækket, ikke en spinner.
Haptics-stil feedback
15. Bekræftelsespuls: en kort skala og glød på elementet, der afspejler det haptiske tryk på mobilen, så den samme handling føles det samme på en enhed uden vibrationsmotor.
Design regler, der holder dem gode
Nogle få regler adskiller en mikro-interaktion, der hjælper, fra en, der irriterer.
- Hold det kort: mest komplet på ca. 200-400ms; længere bevægelse på et lille element føles langsom
- Start i samme ramme som inputtet; en forsinket start bryder følelsen af årsag og virkning
- Hold det afbrydeligt: Hvis brugeren vender handlingen midt i bevægelsen, skal du omdirigere med hastighed i stedet for at genstarte fra nul
- Respekt foretrækker-reduceret-bevægelse: Giv en statisk eller cross-fade fallback, der stadig kommunikerer ændringen
- Giv det ét job: Hvis interaktionen har brug for mere end én beslutning, er det et flow
Hvordan man opbygger mikro-interaktioner
Det rigtige værktøj afhænger af, hvor mange platforme den samme interaktion skal køre på.
Kun CSS
God til simple, selvstændige sager: svæveløfter, fokusringe og skifter drevet af :checked eller et klasseskift. Overgange og @keyframes er nok, og der er ikke noget at sende ud over stilarket.
Framer Motion eller GSAP (web)
God, når bevægelsen har brug for fjedre, fagter eller orkestrering og kun skal køre på nettet. Begge giver dig afbrydelige fjedre og kan drives af React tilstand.
ExodeUI (web, iOS og Android fra én fil)
Brug dette, når den samme interaktion skal opføre sig identisk i en React-app, en SwiftUI-app og Flutter. Du skriver den én gang i en .exode-fil, og kørselstiden afspiller den på hver platform, så der er ingen omskrivning pr. platform.
Snippet til produktionsimplementering
import { ExodeUICanvas } from 'exodeui';
// Springs, states and timing live in the .exode file (designed in the
// editor). Your code passes inputs in and hears events back.
export function SendButton() {
return (
<ExodeUICanvas
src="/send_button.bexode"
onTrigger={(name) => console.log('ExodeUI event:', name)}
/>
);
}Tast Principles for at huske
- En mikro-interaktion er én lille opgave med en trigger, regler, feedback og loops eller modes, de fire dele navngivet af Dan Saffer
- De fleste gode afslutter på omkring 200-400 ms, starter i samme ramme som inputtet og forbliver afbrydelige
- Feedback er det, der gør arbejdet: det bekræfter handlingen og forklarer, hvad der ændrede sig, ofte uden nogen tekst
- Angiv altid en foretrukken-reduceret-bevægelse-tilbagegang, der bærer den samme information uden bevægelse