Mikrointerakce: 15 příkladů a jak je navrhnout
Vysvětlení mikrointerakcí: definice, čtyři části Dana Saffera, 15 skutečných příkladů seskupených podle typu, pravidla návrhu a jak je vytvořit v CSS, Framer Motion, GSAP nebo ExodeUI.
Core Takeaway
Mikrointerakce je malý, uzavřený okamžik v rozhraní, který dělá jednu věc: lajkování příspěvku, přepínání nastavení, potvrzení formuláře nebo dokončení gesta. Termín a jeho anatomie pochází od Dana Saffera, který definuje čtyři části. Spouští jej spouštěč, pravidla rozhodují o tom, co se stane, zpětná vazba ukazuje výsledek a smyčky nebo režimy určují, co se děje v průběhu času. Dobré mikrointerakce jsou krátké, reagují na vlastní vstup uživatele a zůstávají přerušitelné.
Co je mikrointerakce?
Mikrointerakce je nejmenší úplná interakce v produktu: jeden úkol se začátkem, změnou a koncem. Není to celý tok. Označení příspěvku jako To se mi líbí je mikrointerakce; psaní a publikování komentáře je tok. Myšlenka a její struktura pochází z knihy Dana Saffera Microinteractions, která každou rozděluje na čtyři části.
Čtyři části mikrointerakce
Rámec Dana Saffera rozděluje mikrointerakci do čtyř složek. Jejich pojmenování je užitečné, protože většina chyb a většina špatných pohybů žije v jedné ze čtyř, nikoli v celku.
Spoušť
Událost, která to začíná. Spuštěno uživatelem (klepnutí, podržením, dlouhým stisknutím, přetažením) nebo systémem (dokončení stahování, příchod chyby sítě). Kredit: Dan Saffer.
Pravidla
Co se stane, jakmile začne: platné stavy, omezení, jako jsou hranice přetažení nebo minimální a maximální hodnoty a posloupnost událostí. Kredit: Dan Saffer.
Zpětná vazba
Jak produkt říká uživateli, co se stalo: usazení pružiny, změna barvy, změna ikony, aktualizace textu. Tady žije většina motion designu. Kredit: Dan Saffer.
Smyčky a režimy
Co interakce dělá v průběhu času a jak ji režimy mění. Stejný přepínač se může chovat jinak v tmavém režimu nebo v kompaktním rozložení, aniž by se změnila jeho logika. Kredit: Dan Saffer.
Proč záleží na mikrointerakcích
Mikrointerakce je způsob, jakým rozhraní odpovídá uživateli bez odstavce textu. Potvrzuje přijatou akci, ukazuje, že něco stále funguje, nebo vysvětluje, co se právě změnilo. Když chybí, stejný produkt je těžší: uživatelé klepnou dvakrát, protože jim nic neřeklo, že první klepnutí přistálo, nebo čekají na obrazovce, která nedává žádné známky pokroku. Dobré jsou více cítit než postřehnutelné, o což jde.
15 příkladů mikrointerakcí
Ty jsou seskupeny podle toho, co komunikují. Tam, kde ExodeUI dodává odpovídající příklad, je uveden název, abyste jej mohli otevřít a upravit.
Tlačítka a přepínače (stiskněte a uveďte)
1. Stisk tlačítka: stupnice na přibližně 0,92 na ukazateli dolů a návrat zpět po uvolnění (příklad ExodeUI: Jelly Button). 2. Přepínač: překlad založený na pružině se změnou barvy při odevzdání (Gooey Toggle). 3. Přepínač režimu: segmentovaný ovladač, který posouvá svůj indikátor a mění aktivní štítek (pohybový přepínač).
Zpětná vazba k formuláři (ověření a odeslání)
4. Invalid input shake: Krátké horizontální šťouchnutí, které říká „check this field“ bez dialogu (Wiggle Text Input). 5. Odeslání probíhá: tlačítko se stane indikátorem průběhu, takže uživatel nikdy neztratí své místo (animované tlačítko odeslání). 6. Potvrzení úspěchu: malý slavnostní výbuch na tlačítku, když akce dopadne (tlačítko startu rakety).
Načítání a postup
7. Kruhový postup: prstenec, který se naplní na skutečnou hodnotu a usadí se s pružinou (Radial Gauge). 8. Měřič úrovně nebo aktivity: ukazatel, který živě reaguje na příchozí data, jako je úroveň zvuku (zvuková vlna).
Navigace
9. Přepínání nabídky: ikona, která přechází mezi dvěma stavy a odhaluje nabídku na místě (Morph Nav). 10. Zvětšení doku: položky v blízkosti kurzoru se zvedají a rostou, pak se usazují (magnetický dok). 11. Výběr karty: indikátor, který se posouvá mezi kartami místo blikání (Liquid Tab Bar).
Prázdné a úspěšné stavy
12. Prázdný stav: malá ilustrace, která se jednou animuje, aby změkčila prázdnou obrazovku. 13. Odhalení odměny: dárek nebo odznak, který se otevře s očekáváním při dosažení milníku (dárková krabička s překvapením).
Vytažením obnovíte
14. Vytažením k obnovení: elastické přetáčení, které sleduje brzdný účinek, poté se vrátí zpět a po uvolnění se usadí. Zpětná vazba je protažení, ne spinner.
Zpětná vazba ve stylu haptiky
15. Potvrzovací impuls: krátká stupnice a záře na prvku, který zrcadlí haptické klepnutí na mobilu, takže stejná akce je stejná na zařízení bez vibračního motoru.
Navrhněte pravidla, která je udrží v pořádku
Několik pravidel odděluje mikrointerakci, která pomáhá, od té, která obtěžuje.
- Nechte to krátké: nejúplnější za zhruba 200-400 ms; delší pohyb na malém prvku působí pomalu
- Začněte ve stejném rámci jako vstup; opožděný start narušuje smysl pro příčinu a následek
- Zajistěte, aby bylo přerušitelné: pokud uživatel během pohybu obrátí akci, přesměrujte s rychlostí, nikoli restartováním od nuly
- Respektujte preferenci-redukovaný pohyb: poskytněte statický nebo křížový přechod, který stále komunikuje změnu
- Dejte tomu jednu práci: pokud interakce vyžaduje více než jedno rozhodnutí, jde o tok
Jak budovat mikrointerakce
Správný nástroj závisí na tom, na kolika platformách musí stejná interakce běžet.
Pouze CSS
Dobré pro jednoduché, samostatné případy: zvedací plošiny, zaostřovací kroužky a přepínače řízené :checked nebo změnou třídy. Stačí přechody a @klíčové snímky a kromě šablony stylů není co dodat.
Framer Motion nebo GSAP (web)
Dobré, když pohyb potřebuje pružiny, gesta nebo orchestraci a musí běžet pouze na webu. Oba poskytují přerušitelné pružiny a mohou být poháněny stavem React.
ExodeUI (web, iOS a Android z jednoho souboru)
Toto použijte, když se stejná interakce musí chovat identicky v aplikaci React, SwiftUI a Flutter. Vytvoříte jej jednou v souboru .exode a běhové prostředí jej přehraje na každé platformě, takže nedochází k žádnému přepisování pro jednotlivé platformy.
Fragment implementace 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)}
/>
);
}Klíč Principle k zapamatování
- Mikrointerakce je jeden malý úkol se spouštěčem, pravidly, zpětnou vazbou a smyčkami nebo režimy, čtyři části pojmenované Danem Safferem.
- Většina dobrých se dokončí asi za 200–400 ms, začne ve stejném rámci jako vstup a zůstane přerušitelná
- Zpětná vazba je to, co funguje: potvrzuje akci a vysvětluje, co se změnilo, často bez jakéhokoli textu
- Vždy poskytněte nouzový režim se sníženým pohybem, který přenáší stejné informace bez pohybu