Micro-interacțiuni: 15 exemple și cum să le proiectați
Micro-interacțiuni explicate: o definiție, cele patru părți ale lui Dan Saffer, 15 exemple reale grupate după tip, reguli de proiectare și cum să le construiți în CSS, Framer Motion, GSAP sau ExodeUI.
Core Takeaway
O micro-interacțiune este un moment mic, conținut într-o interfață, care face un singur lucru: aprecierea unei postări, comutarea unei setari, confirmarea unui formular sau completarea unui gest. Termenul și anatomia lui provin de la Dan Saffer, care definește patru părți. Un declanșator îl pornește, regulile decid ce se întâmplă, feedback-ul arată rezultatul, iar buclele sau modurile guvernează ceea ce face în timp. Micro-interacțiunile bune sunt scurte, răspund la propriile informații ale utilizatorului și rămân întreruptibile.
Ce este o micro-interacțiune?
O micro-interacțiune este cea mai mică interacțiune completă dintr-un produs: o singură sarcină cu un început, o schimbare și un sfârșit. Nu este un întreg flux. Aprecierea unei postări este o micro-interacțiune; scrierea și publicarea unui comentariu este un flux. Ideea și structura ei provin din cartea lui Dan Saffer Microinteractions, care împarte fiecare în patru părți.
Cele patru părți ale unei micro-interacțiuni
Cadrul lui Dan Saffer descompune o micro-interacțiune în patru componente. Numirea lor este utilă, deoarece majoritatea erorilor și cele mai multe mișcări proaste trăiesc într-unul dintre cele patru, nu în totalitate.
Trigger
Evenimentul care îl declanșează. Inițiat de utilizator (o atingere, trecere cu mouse-ul, apăsare lungă, glisare) sau inițiat de sistem (finalizarea descărcării, sosirea unei erori de rețea). Credit: Dan Saffer.
Reguli
Ce se întâmplă odată ce începe: stări valide, constrângeri precum limitele de tragere sau valorile minime și maxime și succesiunea evenimentelor. Credit: Dan Saffer.
Feedback
Cum produsul spune utilizatorului ce sa întâmplat: așezarea primăverii, schimbarea culorii, transformarea pictogramei, actualizarea textului. Aici trăiește cea mai mare parte a designului în mișcare. Credit: Dan Saffer.
Bucle și moduri
Ce face interacțiunea în timp și cum o schimbă modurile. Aceeași comutare se poate comporta diferit în modul întunecat sau într-un aspect compact, fără a-și schimba logica. Credit: Dan Saffer.
De ce contează micro-interacțiunile
O micro-interacțiune este modul în care o interfață răspunde utilizatorului fără un paragraf de text. Confirmă că a fost primită o acțiune, arată că ceva încă funcționează sau explică ceea ce tocmai sa schimbat. Când lipsesc, același produs se simte mai greu: utilizatorii ating de două ori pentru că nimic nu le-a spus că prima atingere a aterizat sau așteaptă pe un ecran care nu dă niciun semn de progres. Cele bune sunt simțite mai mult decât observate, care este ideea.
15 exemple de micro-interacțiuni
Acestea sunt grupate după ceea ce comunică. Acolo unde ExodeUI livrează un exemplu de potrivire, numele este dat, astfel încât să îl puteți deschide și edita.
Butoane și comută (apăsați și stare)
1. Apăsați butonul: scalați până la aproximativ 0,92 pe indicatorul în jos și restrângeți la eliberare (exemplu ExodeUI: Buton Jelly). 2. Comutator comutator: traducere bazată pe primăvară cu o schimbare de culoare la comitere (Toggle Gooey). 3. Comutator de mod: un control segmentat care glisează indicatorul său și transformă eticheta activă (Comutator de mișcare).
Feedback de formular (validare și trimitere)
4. Agitație de introducere nevalidă: un scurt deplasare orizontală care spune „verificați acest câmp” fără dialog (Wiggle Text Input). 5. Trimitere în curs: butonul devine indicatorul de progres, astfel încât utilizatorul să nu-și piardă niciodată locul (Butonul de trimitere animat). 6. Confirmarea succesului: o mică explozie de sărbătoare pe buton când acțiunea aterizează (Butonul de lansare a rachetei).
Încărcare și progres
7. Progres circular: un inel care se umple la valoarea reală și se așează cu un arc (Radial Gauge). 8. Contor de nivel sau activitate: o bară care reacționează în direct la datele primite, cum ar fi nivelul audio (Sound Wave).
Navigare
9. Comutare meniu: o pictogramă care se transformă între două stări și dezvăluie meniul în loc (Morph Nav). 10. Mărire dock: elementele din apropierea cursorului se ridică și cresc, apoi se stabilesc (Magnetic Dock). 11. Selectare filă: un indicator care alunecă între file în loc să clipească (Liquid Tab Bar).
Stare goale și de succes
12. Stare goală: o ilustrație mică care se anima o dată pentru a înmuia un ecran gol. 13. Dezvăluirea recompensei: un cadou sau o insignă care se deschide cu anticipare când este atins un punct de referință (Cutie cadou surpriză).
Trageți pentru a reîmprospăta
14. Trage pentru a reîmprospăta: suprascroll elastic care urmărește tragerea, apoi se întoarce înapoi și se stabilește la eliberare. Feedback-ul este întindere, nu un spinner.
Feedback în stil haptic
15. Puls de confirmare: o scară scurtă și strălucire pe elementul care oglindește robinetul haptic de pe mobil, astfel încât aceeași acțiune se simte la fel pe un dispozitiv fără motor de vibrație.
Reguli de proiectare care le mențin bune
Câteva reguli separă o micro-interacțiune care ajută de una care enervează.
- Păstrați-l pe scurt: cel mai complet în aproximativ 200-400 ms; mișcarea mai lungă pe un element mic se simte lentă
- Începeți în același cadru cu intrarea; o pornire întârziată rupe sensul cauzei și efectului
- Păstrați-l întreruptibil: dacă utilizatorul inversează acțiunea în mijlocul mișcării, redirecționați cu viteză în loc să reporniți de la zero
- Respectați mișcarea redusă a preferințelor: oferiți o alternativă statică sau cu decolorare încrucișată care comunică în continuare schimbarea
- Dă-i o singură slujbă: dacă interacțiunea necesită mai multe decizii, este un flux
Cum să construiți micro-interacțiuni
Instrumentul potrivit depinde de câte platforme trebuie să ruleze aceeași interacțiune.
Numai CSS
Bun pentru cazuri simple, autonome: ascensoare de tip hover, inele de focalizare și comutatoare comandate de :checked sau de o schimbare de clasă. Tranzițiile și @keyframes-urile sunt suficiente și nu există nimic de livrat dincolo de foaia de stil.
Framer Motion sau GSAP (web)
Bun atunci când mișcarea are nevoie de arcuri, gesturi sau orchestrare și trebuie să ruleze doar pe web. Ambele vă oferă arcuri întreruptibile și pot fi conduse de starea React.
ExodeUI (web, iOS și Android dintr-un singur fișier)
Utilizați acest lucru atunci când aceeași interacțiune trebuie să se comporte identic într-o aplicație React, o aplicație SwiftUI și Flutter. Îl creați o dată într-un fișier .exode și timpul de execuție îl redă pe fiecare platformă, deci nu există rescriere pe platformă.
Fragment de implementare a producției
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)}
/>
);
}Cheie Principles de reținut
- O micro-interacțiune este o sarcină mică cu un declanșator, reguli, feedback și bucle sau moduri, cele patru părți numite de Dan Saffer
- Cele mai bune se finalizează în aproximativ 200-400 ms, încep în același cadru cu intrarea și rămân întreruptibile
- Feedback-ul este ceea ce funcționează: confirmă acțiunea și explică ceea ce s-a schimbat, adesea fără niciun text
- Furnizați întotdeauna o alternativă cu mișcare redusă, care să poarte aceleași informații fără mișcare