Mikrointeraktioner: 15 exempel och hur man designar dem
Mikrointeraktioner förklaras: en definition, Dan Saffers fyra delar, 15 verkliga exempel grupperade efter typ, designregler och hur man bygger dem i CSS, Framer Motion, GSAP eller ExodeUI.
Core Takeaway
En mikrointeraktion är ett litet, inneslutet ögonblick i ett gränssnitt som gör en sak: att gilla ett inlägg, växla mellan en inställning, bekräfta ett formulär eller slutföra en gest. Termen och dess anatomi kommer från Dan Saffer, som definierar fyra delar. En trigger startar den, regler bestämmer vad som händer, feedback visar resultatet och loopar eller lägen styr vad den gör över tiden. Bra mikrointeraktioner är korta, svarar på användarens egna input och förblir avbrottsbara.
Vad är en mikrointeraktion?
En mikrointeraktion är den minsta kompletta interaktionen i en produkt: en enskild uppgift med en början, en förändring och ett slut. Det är inte ett helt flöde. Att gilla ett inlägg är en mikrointeraktion; att skriva och publicera en kommentar är ett flöde. Idén och dess struktur kommer från Dan Saffers bok Microinteractions, som delar upp var och en i fyra delar.
De fyra delarna av en mikrointeraktion
Dan Saffers ramverk bryter en mikrointeraktion i fyra komponenter. Att namnge dem är användbart eftersom de flesta buggar och de flesta dåliga rörelser lever i en av de fyra, inte i hela.
Utlösare
Händelsen som startar den. Användarinitierad (en tryckning, hovring, långtryckning, drag) eller systeminitierad (en nedladdning avslutas, ett nätverksfel kommer). Kredit: Dan Saffer.
Regler
Vad händer när det väl startar: giltiga tillstånd, begränsningar som draggränser eller minimi- och maximivärden och händelseförloppet. Kredit: Dan Saffer.
Feed-back
Hur produkten berättar för användaren vad som hände: våren satte sig, färgbytet, ikonens morf, textuppdateringen. Det är här det mesta av rörelsedesignen bor. Kredit: Dan Saffer.
Slingor och lägen
Vad interaktionen gör över tid och hur lägen ändrar den. Samma växlare kan bete sig annorlunda i mörkt läge eller i en kompakt layout utan att ändra dess logik. Kredit: Dan Saffer.
Varför mikrointeraktioner är viktiga
En mikrointeraktion är hur ett gränssnitt svarar användaren utan ett stycke text. Den bekräftar att en åtgärd har tagits emot, visar att något fortfarande fungerar eller förklarar vad som just ändrats. När de saknas känns samma produkt tyngre: användare trycker två gånger eftersom ingenting berättade för dem att den första kranen landade, eller så väntar de på en skärm som inte gav några tecken på framsteg. Bra känns mer än märkt, vilket är poängen.
15 exempel på mikrointeraktion
Dessa grupperas efter vad de kommunicerar. Där ExodeUI skickar ett matchande exempel, ges namnet så att du kan öppna och redigera det.
Knappar och växlar (tryck och ange)
1. Knapptryckning: skala till cirka 0,92 på pekaren nedåt och fjädra tillbaka vid släpp (ExodeUI exempel: Jelly Button). 2. Vippomkopplare: fjäderbaserad översättning med en färgbyte vid commit (Slååååg). 3. Lägesomkopplare: en segmenterad kontroll som skjuter sin indikator och omformar den aktiva etiketten (Motion Switch).
Formulärfeedback (validering och inlämning)
4. Ogiltig inmatningsskakning: en kort horisontell knuff som säger "kontrollera detta fält" utan en dialogruta (vicka textinmatning). 5. Skicka pågår: knappen blir förloppsindikatorn, så att användaren aldrig förlorar sin plats (Animerad sändknapp). 6. Framgångsbekräftelse: ett litet högtidligt utbrott på knappen när åtgärden landar (Rocket Launch Button).
Lastning och framsteg
7. Cirkulär framsteg: en ring som fylls till det verkliga värdet och sätter sig med en fjäder (Radial Gauge). 8. Nivå- eller aktivitetsmätare: en stapel som reagerar live på inkommande data som ljudnivå (Sound Wave).
Navigering
9. Menyväxling: en ikon som växlar mellan två tillstånd och visar menyn på plats (Morph Nav). 10. Dockningsförstoring: objekt nära markören lyfts och växer och sätter sig sedan (Magnetic Dock). 11. Val av flikar: en indikator som glider mellan flikarna istället för att blinka (Liquid Tab Bar).
Tom och framgång tillstånd
12. Tomt tillstånd: en liten illustration som animeras en gång för att mjuka upp en tom skärm. 13. Belöningsavslöjande: en gåva eller märke som öppnar med förväntan när en milstolpe är nådd (Surprise Gift Box).
Dra för att uppdatera
14. Dra för att uppdatera: elastisk överrullning som spårar draget, sedan fjädrar tillbaka och lägger sig vid släpp. Feedbacken är sträckan, inte en spinner.
Haptics-stil feedback
15. Bekräftelsepuls: en kort skala och glöd på elementet som speglar det haptiska trycket på mobilen, så samma åtgärd känns likadant på en enhet utan vibrationsmotor.
Designregler som håller dem bra
Några regler skiljer en mikrointeraktion som hjälper från en som irriterar.
- Håll det kort: mest komplett på ungefär 200-400 ms; längre rörelse på ett litet element känns långsamt
- Börja i samma ram som ingången; en försenad start bryter känslan av orsak och verkan
- Håll det avbrottsbart: om användaren vänder åtgärden mitt i rörelsen, omdirigera med hastighet istället för att starta om från noll
- Respekt föredrar-reducerad rörelse: ge en statisk eller korsfade fallback som fortfarande kommunicerar förändringen
- Ge det ett jobb: om interaktionen behöver mer än ett beslut är det ett flöde
Hur man bygger mikrointeraktioner
Rätt verktyg beror på hur många plattformar samma interaktion måste köras på.
Endast CSS
Bra för enkla, fristående fall: svävarlyft, fokusringar och växlar som drivs av :checked eller ett klassbyte. Övergångar och @keyframes räcker, och det finns inget att skicka utöver stilmallen.
Framer Motion eller GSAP (webb)
Bra när rörelsen behöver fjädrar, gester eller orkestrering och bara måste köras på webben. Båda ger dig avbrottsbara fjädrar och kan drivas av React-tillstånd.
ExodeUI (webb, iOS och Android från en fil)
Använd detta när samma interaktion måste bete sig identiskt i en React-app, en SwiftUI-app och Flutter. Du skapar den en gång i en .exode-fil och körtiden spelar upp den på varje plattform, så det finns ingen omskrivning per plattform.
Produktionsimplementeringsutdrag
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)}
/>
);
}Nyckel Principles att komma ihåg
- En mikrointeraktion är en liten uppgift med en trigger, regler, feedback och loopar eller lägen, de fyra delarna namngivna av Dan Saffer
- De flesta bra slutförs på cirka 200-400 ms, startar i samma ram som ingången och förblir avbrottsbara
- Återkoppling är vad som fungerar: den bekräftar handlingen och förklarar vad som förändrats, ofta utan någon text
- Ge alltid en föredrar-reducerad rörelse-backup som bär samma information utan rörelse