Mikrointerakcje: 15 przykładów i jak je zaprojektować
Wyjaśniono mikrointerakcje: definicja, cztery części Dana Saffera, 15 rzeczywistych przykładów pogrupowanych według typów, zasady projektowania i sposób ich budowania w CSS, Framer Motion, GSAP lub ExodeUI.
Rdzeń na wynos
Mikrointerakcja to krótki, zamknięty moment w interfejsie, który robi jedną rzecz: polubienie wpisu, zmianę ustawień, potwierdzenie formularza lub wykonanie gestu. Termin i jego anatomia pochodzą od Dana Saffera, który definiuje cztery części. Uruchamia go wyzwalacz, reguły decydują, co się stanie, informacja zwrotna pokazuje wynik, a pętle lub tryby regulują to, co robi w czasie. Dobre mikrointerakcje są krótkie, odpowiadają na działania użytkownika i można je przerwać.
Co to jest mikrointerakcja?
Mikrointerakcja to najmniejsza pełna interakcja w produkcie: pojedyncze zadanie mające początek, zmianę i koniec. To nie jest cały przepływ. Polubienie postu to mikrointerakcja; pisanie i publikowanie komentarza to proces. Pomysł i jego struktura pochodzą z książki Dana Saffera Microinteractions, w której każdą z nich podzielono na cztery części.
Cztery części mikrointerakcji
Struktura Dana Saffera dzieli mikrointerakcję na cztery elementy. Nazywanie ich jest przydatne, ponieważ większość błędów i najgorszych ruchów występuje w jednym z czterech, a nie w całości.
Spust
Wydarzenie, które je rozpoczyna. Inicjowane przez użytkownika (dotknięcie, najechanie kursorem, długie naciśnięcie, przeciągnięcie) lub zainicjowane przez system (zakończenie pobierania, pojawienie się błędu sieci). Źródło: Dan Saffer.
Zasady
Co się dzieje po uruchomieniu: prawidłowe stany, ograniczenia, takie jak granice przeciągania lub wartości minimalne i maksymalne, oraz sekwencja zdarzeń. Źródło: Dan Saffer.
Informacja zwrotna
W jaki sposób produkt informuje użytkownika, co się stało: uspokojenie się wiosny, zmiana koloru, zmiana ikony, aktualizacja tekstu. To tutaj żyje większość projektów ruchu. Źródło: Dan Saffer.
Pętle i tryby
Jak interakcja zmienia się w czasie i jak tryby ją zmieniają. Ten sam przełącznik może zachowywać się inaczej w trybie ciemnym lub w układzie kompaktowym, bez zmiany jego logiki. Źródło: Dan Saffer.
Dlaczego mikrointerakcje mają znaczenie
Mikrointerakcja polega na tym, że interfejs odpowiada użytkownikowi bez akapitu tekstu. Potwierdza otrzymanie działania, pokazuje, że coś nadal działa lub wyjaśnia, co się właśnie zmieniło. Kiedy ich brakuje, ten sam produkt wydaje się cięższy: użytkownicy stukają dwa razy, ponieważ nic nie powiedziało im, że nastąpiło pierwsze dotknięcie, lub czekają na ekranie, który nie daje żadnych oznak postępu. Dobrzy są bardziej odczuwani niż zauważani i o to właśnie chodzi.
15 przykładów mikrointerakcji
Są one pogrupowane według tego, co komunikują. Tam, gdzie ExodeUI dostarcza pasujący przykład, podana jest nazwa, dzięki czemu można ją otworzyć i edytować.
Przyciski i przełączniki (naciśnij i ustaw)
1. Naciśnięcie przycisku: skalowanie do około 0,92 przy wskazówce w dół i powrót po zwolnieniu (przykład ExodeUI: Jelly Button). 2. Przełącznik dwustabilny: tłumaczenie oparte na sprężynie ze zmianą koloru po zatwierdzeniu (Gooey Toggle). 3. Przełącznik trybu: podzielony na segmenty element sterujący, który przesuwa wskaźnik i zmienia aktywną etykietę (przełącznik ruchu).
Formularz opinii (weryfikacja i przesłanie)
4. Nieprawidłowe drgania przy wprowadzaniu danych: krótkie poziome szturchnięcie z napisem „sprawdź to pole” bez okna dialogowego (Wiggle Text input). 5. Przesyłanie w toku: przycisk staje się wskaźnikiem postępu, dzięki czemu użytkownik nigdy nie traci swojego miejsca (animowany przycisk wysyłania). 6. Potwierdzenie sukcesu: mały, uroczysty wybuch na przycisku po zakończeniu akcji (przycisk wystrzelenia rakiety).
Ładowanie i postęp
7. Postęp okrężny: pierścień, który wypełnia się do wartości rzeczywistej i ustala się za pomocą sprężyny (wskaźnik promieniowy). 8. Miernik poziomu lub aktywności: pasek reagujący na żywo na przychodzące dane, takie jak poziom dźwięku (fala dźwiękowa).
Nawigacja
9. Przełączanie menu: ikona, która przełącza się między dwoma stanami i wyświetla menu na miejscu (Morph Nav). 10. Powiększenie stacji dokującej: elementy w pobliżu kursora podnoszą się i rosną, a następnie osiadają (Dok magnetyczny). 11. Wybór zakładek: wskaźnik, który przesuwa się pomiędzy zakładkami zamiast migać (pasek płynnych zakładek).
Stany puste i sukces
12. Stan pusty: mała ilustracja animowana jednorazowo, aby złagodzić pusty ekran. 13. Odkrycie nagrody: prezent lub odznaka, która otwiera się z oczekiwaniem po osiągnięciu kamienia milowego (pudełko z prezentem-niespodzianką).
Pociągnij, aby odświeżyć
14. Pociągnięcie w celu odświeżenia: elastyczne przewijanie śledzące opór, następnie cofa się i stabilizuje po zwolnieniu. Informacje zwrotne to rozciąganie, a nie spinner.
Informacje zwrotne w stylu dotykowym
15. Impuls potwierdzający: krótka skala i poświata na elemencie odzwierciedlającym dotykowe dotknięcie na telefonie komórkowym, dzięki czemu to samo działanie będzie takie samo na urządzeniu bez silnika wibracyjnego.
Zaprojektuj zasady, które sprawią, że będą dobre
Kilka zasad oddziela mikrointerakcję, która pomaga, od tej, która denerwuje.
- Krótko: większość ukończona w ciągu około 200–400 ms; dłuższy ruch na małym elemencie wydaje się powolny
- Rozpocznij w tej samej ramce co wejście; opóźniony start zaburza poczucie przyczyny i skutku
- Zapewnij możliwość przerwania: jeśli użytkownik odwróci akcję w połowie ruchu, przekieruj z większą prędkością, zamiast zaczynać od zera
- Szacunek preferuje ograniczony ruch: zapewnia statyczny lub płynny sygnał zastępczy, który nadal komunikuje zmianę
- Daj mu jedno zadanie: jeśli interakcja wymaga więcej niż jednej decyzji, jest to przepływ
Jak budować mikrointerakcje
Wybór odpowiedniego narzędzia zależy od tego, na ilu platformach ma odbywać się ta sama interakcja.
Tylko CSS
Dobre do prostych, samodzielnych przypadków: podniesienia wskaźnika myszy, pierścieni ostrości i przełączników sterowanych przez :checked lub zmianę klasy. Wystarczą przejścia i @klatki kluczowe i nie ma nic do dostarczenia poza arkuszem stylów.
Framer Motion lub GSAP (internet)
Dobrze, gdy ruch wymaga sprężyn, gestów lub orkiestracji i musi działać tylko w Internecie. Obydwa zapewniają przerywalne sprężyny i mogą być sterowane stanem React.
ExodeUI (internet, iOS i Android z jednego pliku)
Użyj tej opcji, jeśli ta sama interakcja musi zachowywać się identycznie w aplikacji React, aplikacji SwiftUI i Flutter. Tworzysz go raz w pliku .exode, a środowisko wykonawcze odtwarza go na każdej platformie, więc nie ma konieczności przepisywania dla każdej platformy.
Fragment wdrożenia produkcyjnego
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)}
/>
);
}Klucz Principles do zapamiętania
- Mikrointerakcja to jedno małe zadanie z wyzwalaczem, regułami, sprzężeniem zwrotnym i pętlami lub trybami, czyli czterema częściami nazwanymi przez Dana Saffera
- Większość dobrych kończy się w ciągu około 200–400 ms, zaczyna się w tej samej klatce co wejście i można je przerwać
- Informacja zwrotna działa: potwierdza działanie i wyjaśnia, co się zmieniło, często bez żadnego tekstu
- Zawsze udostępniaj preferowany tryb awaryjny o zmniejszonym ruchu, który przenosi te same informacje bez ruchu