Mikro-interaksjoner: 15 eksempler og hvordan du kan designe dem
Mikro-interaksjoner forklart: en definisjon, Dan Saffers fire deler, 15 virkelige eksempler gruppert etter type, designregler og hvordan man bygger dem i CSS, Framer Motion, GSAP eller ExodeUI.
Kjerne takeaway
En mikrointeraksjon er et lite, innesluttet øyeblikk i et grensesnitt som gjør én ting: å like et innlegg, veksle mellom en innstilling, bekrefte et skjema eller fullføre en gest. Begrepet og dets anatomi kommer fra Dan Saffer, som definerer fire deler. En trigger starter den, regler bestemmer hva som skjer, tilbakemelding viser resultatet, og looper eller moduser styrer hva den gjør over tid. Gode mikrointeraksjoner er korte, reagerer på brukerens egne innspill og forblir avbrytbare.
Hva er en mikrointeraksjon?
En mikro-interaksjon er den minste komplette interaksjonen i et produkt: en enkelt oppgave med en begynnelse, en endring og en slutt. Det er ikke en hel flyt. Å like et innlegg er en mikro-interaksjon; å skrive og publisere en kommentar er en flyt. Ideen og dens struktur kommer fra Dan Saffers bok Microinteractions, som deler hver enkelt i fire deler.
De fire delene av en mikro-interaksjon
Dan Saffers rammeverk bryter en mikro-interaksjon i fire komponenter. Det er nyttig å navngi dem fordi de fleste feilene og de fleste dårlige bevegelser lever i en av de fire, ikke i hele.
Avtrekker
Hendelsen som starter den. Brukerinitiert (et trykk, hover, langt trykk, dra) eller systeminitiert (en nedlasting avsluttes, en nettverksfeil kommer). Kreditt: Dan Saffer.
Regler
Hva skjer når den starter: gyldige tilstander, begrensninger som dragrenser eller minimums- og maksimumsverdier, og hendelsesforløpet. Kreditt: Dan Saffer.
Tilbakemelding
Hvordan produktet forteller brukeren hva som skjedde: våren satte seg, fargeendringen, ikonmorfen, tekstoppdateringen. Det er her det meste av bevegelsesdesignet bor. Kreditt: Dan Saffer.
Sløyfer og moduser
Hva interaksjonen gjør over tid, og hvordan modi endrer den. Den samme bryteren kan oppføre seg annerledes i mørk modus eller i en kompakt layout uten å endre logikken. Kreditt: Dan Saffer.
Hvorfor mikrointeraksjoner betyr noe
En mikro-interaksjon er hvordan et grensesnitt svarer brukeren uten et avsnitt med tekst. Den bekrefter at en handling ble mottatt, viser at noe fortsatt fungerer, eller forklarer hva som nettopp har endret seg. Når de mangler, føles det samme produktet tyngre: brukere trykker to ganger fordi ingenting fortalte dem at det første trykk landet, eller de venter på en skjerm som ikke ga noen tegn til fremgang. Gode føles mer enn lagt merke til, som er poenget.
15 eksempler på mikrointeraksjoner
Disse er gruppert etter hva de kommuniserer. Der ExodeUI sender et matchende eksempel, er navnet gitt slik at du kan åpne og redigere det.
Knapper og brytere (trykk og oppgi)
1. Knappetrykk: skaler til ca. 0,92 på pekeren ned og fjær tilbake ved utløsning (ExodeUI eksempel: Jelly Button). 2. Vippebryter: fjærbasert oversettelse med fargeendring ved commit (sletting). 3. Modusbryter: en segmentert kontroll som skyver indikatoren og forvandler den aktive etiketten (Motion Switch).
Skjematilbakemelding (validering og innsending)
4. Ugyldig input-shake: en kort horisontal dytt som sier "sjekk dette feltet" uten en dialogboks (Wiggle Text Input). 5. Send pågår: knappen blir fremdriftsindikatoren, slik at brukeren aldri mister plassen sin (Animert Send-knapp). 6. Suksessbekreftelse: et lite festlig utbrudd på knappen når handlingen lander (Rocket Launch Button).
Lasting og fremdrift
7. Sirkulær fremgang: en ring som fylles til den virkelige verdien og setter seg med en fjær (Radial Gauge). 8. Nivå- eller aktivitetsmåler: en linje som reagerer live på innkommende data som lydnivå (Sound Wave).
Navigasjon
9. Menyveksling: et ikon som endrer seg mellom to tilstander og viser menyen på plass (Morph Nav). 10. Dokkeforstørrelse: elementer nær markøren løftes og vokser, og setter seg så ned (magnetisk dokke). 11. Fanevalg: en indikator som glir mellom fanene i stedet for å blinke (Liquid Tab Bar).
Tomme og suksesstilstander
12. Tom tilstand: en liten illustrasjon som animerer én gang for å myke opp en tom skjerm. 13. Belønningsavsløring: en gave eller et merke som åpner med forventning når en milepæl er nådd (Surprise Gift Box).
Trekk for å oppdatere
14. Pull-to-refresh: elastisk overscroll som sporer draget, så springer tilbake og legger seg ved slipp. Tilbakemeldingen er strekningen, ikke en spinner.
Tilbakemelding i haptikkstil
15. Bekreftelsespuls: en kort skala og glød på elementet som speiler det haptiske trykk på mobil, slik at den samme handlingen føles den samme på en enhet uten vibrasjonsmotor.
Designregler som holder dem gode
Noen få regler skiller en mikrointeraksjon som hjelper fra en som irriterer.
- Hold det kort: mest komplett på omtrent 200–400 ms; lengre bevegelse på et lite element føles sakte
- Start i samme ramme som inngangen; en forsinket start bryter følelsen av årsak og virkning
- Hold den avbrytbar: hvis brukeren reverserer handlingen midt i bevegelsen, omdiriger med hastighet i stedet for å starte på nytt fra null
- Respekt foretrekker-redusert-bevegelse: gi en statisk eller cross-fade fallback som fortsatt kommuniserer endringen
- Gi det én jobb: Hvis interaksjonen trenger mer enn én beslutning, er det en flyt
Hvordan bygge mikrointeraksjoner
Det riktige verktøyet avhenger av hvor mange plattformer samme interaksjon må kjøres på.
Kun CSS
Bra for enkle, selvstendige saker: sveveløfter, fokusringer og veksler drevet av :checked eller et klasseskifte. Overganger og @keyframes er nok, og det er ingenting å sende utover stilarket.
Framer Motion eller GSAP (nett)
Bra når bevegelsen trenger fjærer, gester eller orkestrering og bare må kjøres på nettet. Begge gir deg avbrytbare fjærer og kan drives av React-tilstand.
ExodeUI (nett, iOS og Android fra én fil)
Bruk denne når den samme interaksjonen må oppføre seg likt i en React-app, en SwiftUI-app og Flutter. Du skriver den én gang i en .exode-fil og kjøretiden spiller den av på hver plattform, så det er ingen omskrivning per plattform.
Snippet for produksjonsimplementering
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 å huske
- En mikro-interaksjon er en liten oppgave med en trigger, regler, tilbakemelding og looper eller moduser, de fire delene navngitt av Dan Saffer
- De fleste gode fullføres på omtrent 200-400 ms, starter i samme ramme som inngangen, og forblir avbrytbare
- Tilbakemelding er det som gjør arbeidet: det bekrefter handlingen og forklarer hva som endret seg, ofte uten tekst
- Sørg alltid for en foretrekker-redusert bevegelse som har den samme informasjonen uten bevegelse