Mikrointerakcie: 15 príkladov a ako ich navrhnúť
Vysvetlenie mikrointerakcií: definícia, štyri časti Dana Saffera, 15 skutočných príkladov zoskupených podľa typu, pravidlá dizajnu a spôsob ich vytvorenia v CSS, Framer Motion, GSAP alebo ExodeUI.
Core Takeaway
Mikrointerakcia je malý, obsiahnutý moment v rozhraní, ktorý robí jednu vec: označí, že sa mi páči príspevok, prepne nastavenie, potvrdí formulár alebo dokončí gesto. Termín a jeho anatómia pochádzajú od Dana Saffera, ktorý definuje štyri časti. Spúšťač ho spustí, pravidlá rozhodujú, čo sa stane, spätná väzba ukazuje výsledok a slučky alebo režimy riadia, čo sa v priebehu času robí. Dobré mikrointerakcie sú krátke, reagujú na vlastný vstup používateľa a zostávajú prerušiteľné.
Čo je mikrointerakcia?
Mikrointerakcia je najmenšia úplná interakcia v produkte: jedna úloha so začiatkom, zmenou a koncom. Nie je to celý tok. Označenie príspevku, ktorý sa mi páči, je mikrointerakcia; písanie a publikovanie komentára je tok. Myšlienka a jej štruktúra pochádzajú z knihy Dana Saffera Microinteractions, ktorá rozdeľuje každú z nich na štyri časti.
Štyri časti mikrointerakcie
Rámec Dana Saffera rozdeľuje mikrointerakciu do štyroch komponentov. Ich pomenovanie je užitočné, pretože väčšina chýb a väčšina zlých pohybov žije v jednej zo štyroch, nie v celku.
Spúšť
Udalosť, ktorá to začína. Spustené používateľom (klepnutie, podržaním myšou, dlhým stlačením, potiahnutím) alebo systémom (dokončenie sťahovania, chyba siete). Poďakovanie: Dan Saffer.
pravidlá
Čo sa stane po spustení: platné stavy, obmedzenia, ako sú hranice ťahania alebo minimálne a maximálne hodnoty a postupnosť udalostí. Poďakovanie: Dan Saffer.
Spätná väzba
Ako produkt hovorí používateľovi, čo sa stalo: ustálenie pružiny, zmena farby, zmena ikony, aktualizácia textu. Tu žije väčšina motion dizajnu. Poďakovanie: Dan Saffer.
Slučky a režimy
Čo robí interakcia v priebehu času a ako ju menia režimy. Rovnaký prepínač sa môže správať odlišne v tmavom režime alebo v kompaktnom rozložení bez zmeny jeho logiky. Poďakovanie: Dan Saffer.
Prečo sú mikrointerakcie dôležité
Mikrointerakcia je spôsob, akým rozhranie odpovedá používateľovi bez odseku textu. Potvrdzuje prijatú akciu, ukazuje, že niečo stále funguje, alebo vysvetľuje, čo sa práve zmenilo. Keď chýbajú, ten istý produkt je ťažší: používatelia klepnú dvakrát, pretože im nič nepovedalo, že prvé klepnutie pristálo, alebo čakajú na obrazovke, ktorá nedáva žiadne známky pokroku. Dobré sú viac cítiť, ako si ich všímať, o čo ide.
15 príkladov mikrointerakcií
Tie sú zoskupené podľa toho, čo komunikujú. Tam, kde ExodeUI dodáva zodpovedajúci príklad, je uvedený názov, aby ste ho mohli otvoriť a upraviť.
Tlačidlá a prepínače (stlačiť a uviesť)
1. Stlačenie tlačidla: mierka na približne 0,92 pri ukazovateli nadol a po uvoľnení sa vráti späť (príklad ExodeUI: Jelly Button). 2. Prepínač: preklad založený na pružine so zmenou farby pri odovzdaní (Gooey Toggle). 3. Prepínač režimu: segmentovaný ovládací prvok, ktorý posúva svoj indikátor a mení aktívny štítok (Motion Switch).
Spätná väzba k formuláru (overenie a odoslanie)
4. Neplatné zatrasenie vstupu: Krátke horizontálne postrčenie, ktoré hovorí „skontrolovať toto pole“ bez dialógového okna (Wiggle Text Input). 5. Prebieha odoslanie: tlačidlo sa stane indikátorom priebehu, takže používateľ nikdy nestratí svoje miesto (animované tlačidlo odoslania). 6. Potvrdenie úspechu: malý slávnostný výbuch na tlačidle, keď akcia dopadne (tlačidlo spustenia rakety).
Načítavanie a postup
7. Kruhový postup: krúžok, ktorý sa naplní na skutočnú hodnotu a usadí sa s pružinou (Radial Gauge). 8. Merač úrovne alebo aktivity: lišta, ktorá naživo reaguje na prichádzajúce údaje, ako je úroveň zvuku (zvuková vlna).
Navigácia
9. Prepínanie ponuky: ikona, ktorá sa prepína medzi dvoma stavmi a odhaľuje ponuku na mieste (Morph Nav). 10. Zväčšenie doku: položky v blízkosti kurzora sa zdvihnú a zväčšia, potom sa ustália (magnetický dok). 11. Výber karty: indikátor, ktorý sa posúva medzi kartami namiesto blikania (Liquid Tab Bar).
Stavy prázdnoty a úspechu
12. Prázdny stav: malá ilustrácia, ktorá sa animuje, aby sa zjemnila prázdna obrazovka. 13. Odhalenie odmeny: darček alebo odznak, ktorý sa otvorí s očakávaním po dosiahnutí míľnika (darčeková krabička s prekvapením).
Potiahnutím obnovíte
14. Potiahnutím obnovíte: elastické pretáčanie, ktoré sleduje brzdenie, potom sa vráti späť a po uvoľnení sa usadí. Spätná väzba je úsek, nie spinner.
Spätná väzba v štýle haptiky
15. Potvrdzovací impulz: krátka stupnica a žiara na prvku, ktorý odzrkadľuje haptické klepnutie na mobile, takže rovnaká akcia je rovnaká aj na zariadení bez vibračného motora.
Navrhnite pravidlá, vďaka ktorým budú dobré
Niekoľko pravidiel oddeľuje mikrointerakciu, ktorá pomáha, od tej, ktorá otravuje.
- Nech je krátky: najúplnejší za približne 200 – 400 ms; dlhší pohyb na malom prvku pôsobí pomaly
- Začnite v rovnakom rámci ako vstup; oneskorený štart ruší zmysel pre príčinu a následok
- Udržujte ho prerušiteľným: ak používateľ počas pohybu obráti akciu, presmerujte radšej rýchlosťou ako reštart od nuly
- Rešpektujte preferencie-redukovaný pohyb: poskytnite statický alebo krížový prechod, ktorý stále oznamuje zmenu
- Dajte tomu jednu úlohu: ak interakcia vyžaduje viac ako jedno rozhodnutie, ide o tok
Ako vytvoriť mikrointerakcie
Správny nástroj závisí od toho, na koľkých platformách musí tá istá interakcia bežať.
Len CSS
Dobré pre jednoduché samostatné prípady: zdvíhacie plošiny, zaostrovacie krúžky a prepínače poháňané kontrolou alebo zmenou triedy. Postačia prechody a @keyframes a okrem šablóny so štýlmi nie je čo dodať.
Framer Motion alebo GSAP (web)
Dobré, keď pohyb potrebuje pružiny, gestá alebo orchestráciu a musí bežať iba na webe. Obe vám poskytujú prerušiteľné pružiny a môžu byť poháňané stavom React.
ExodeUI (web, iOS a Android z jedného súboru)
Použite to, keď sa rovnaká interakcia musí správať identicky v aplikácii React, SwiftUI a Flutter. Vytvoríte ho raz v súbore .exode a runtime ho prehrá na každej platforme, takže nedochádza k prepisovaniu podľa jednotlivých platforiem.
Snippet implementácie výroby
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)}
/>
);
}Kľúč Principle na zapamätanie
- Mikrointerakcia je jedna malá úloha so spúšťačom, pravidlami, spätnou väzbou a slučkami alebo režimami, štyri časti pomenované Danom Safferom
- Väčšina dobrých sa dokončí za približne 200 – 400 ms, začne v rovnakom rámci ako vstup a zostane prerušiteľná
- Spätná väzba je to, čo funguje: potvrdzuje akciu a vysvetľuje, čo sa zmenilo, často bez akéhokoľvek textu
- Vždy poskytnite záložný režim s obmedzením pohybu, ktorý nesie rovnaké informácie bez pohybu