Mikrointerakciók: 15 példa és tervezésük
Mikrointerakciók magyarázata: egy definíció, Dan Saffer négy része, 15 valós példa típus szerint csoportosítva, tervezési szabályok és ezek felépítése a CSS, Framer Motion, GSAP vagy ExodeUI-ben.
Core Takeaway
A mikro-interakció egy kicsi, zárt mozzanat a felületen, amely egy dolgot tesz: kedvel egy bejegyzést, átvált egy beállítást, megerősít egy űrlapot vagy végrehajt egy gesztust. A kifejezés és anatómiája Dan Saffertől származik, aki négy részt határoz meg. Egy trigger indítja el, a szabályok határozzák meg, hogy mi történjen, a visszacsatolás megmutatja az eredményt, és hurkok vagy módok szabályozzák, hogy mit csinál az idő múlásával. A jó mikrointerakciók rövidek, reagálnak a felhasználó saját bevitelére, és megszakíthatóak.
Mi az a mikrointerakció?
A mikrointerakció a legkisebb teljes interakció egy termékben: egyetlen feladat kezdetével, változásával és végével. Ez nem egy teljes áramlás. Egy bejegyzés kedvelése mikro-interakció; megjegyzés írása és közzététele folyamat. Az ötlet és felépítése Dan Saffer Microinteractions című könyvéből származik, amely mindegyiket négy részre osztja.
A mikrointerakció négy része
Dan Saffer keretrendszere a mikrokölcsönhatást négy részre bontja. Az elnevezésük hasznos, mert a legtöbb hiba és a legtöbb rossz mozgás a négy közül az egyikben él, nem az egészben.
Kioldó
Az esemény, amely elindítja. Felhasználó által kezdeményezett (érintés, egérmutató, hosszan tartó megnyomás, húzás) vagy rendszer által kezdeményezett (letöltés befejezése, hálózati hiba érkezése). Köszönetnyilvánítás: Dan Saffer.
Szabályok
Mi történik, ha elindul: érvényes állapotok, megszorítások, például húzási határok vagy minimális és maximális értékek, valamint az események sorrendje. Köszönetnyilvánítás: Dan Saffer.
Visszacsatolás
Hogyan mondja el a termék a felhasználónak a történteket: a rugózást, a színváltást, az ikonok alakját, a szövegfrissítést. Itt él a mozgástervezés nagy része. Köszönetnyilvánítás: Dan Saffer.
Hurok és módok
Mit csinál az interakció idővel, és hogyan változtatják meg a módok. Ugyanaz a kapcsoló másként viselkedhet sötét módban vagy kompakt elrendezésben anélkül, hogy megváltoztatná a logikáját. Köszönetnyilvánítás: Dan Saffer.
Miért fontosak a mikrokölcsönhatások?
A mikro-interakció az, ahogy egy interfész szöveg bekezdés nélkül válaszol a felhasználónak. Megerősíti, hogy egy művelet érkezett, megmutatja, hogy valami még mindig működik, vagy elmagyarázza, hogy mi változott. Ha hiányoznak, ugyanaz a termék nehezebbnek érzi magát: a felhasználók kétszer koppintanak, mert semmi sem jelezte, hogy az első koppintás megérkezett, vagy olyan képernyőn várnak, amely semmi jelét nem adta a fejlődésnek. A jókat inkább érezni, mint észrevenni, ez a lényeg.
15 példa a mikro-kölcsönhatásokra
Ezeket aszerint csoportosítják, hogy mit kommunikálnak. Ahol a ExodeUI egy megfelelő példát szállít, ott a név megadásra kerül, így megnyitható és szerkeszthető.
Gombok és kapcsolók (lenyomás és állapot)
1. Gombnyomás: 0,92-ig skálázza a mutatót lefelé, majd ugorjon vissza az elengedéskor (ExodeUI példa: Jelly Button). 2. Váltókapcsoló: rugó alapú fordítás, színváltozással véglegesítéskor (Gooey Toggle). 3. Üzemmód kapcsoló: egy szegmentált vezérlő, amely elcsúsztatja a jelzőjét és átalakítja az aktív címkét (Motion Switch).
Űrlap visszajelzés (ellenőrzés és benyújtás)
4. Érvénytelen beviteli rázás: egy rövid vízszintes bökkenő, amely azt mondja, hogy "ellenőrizd ezt a mezőt" párbeszédpanel nélkül (Wiggle Text Input). 5. Beküldés folyamatban: a gomb állapotjelzővé válik, így a felhasználó soha nem veszíti el a helyét (Animált küldés gomb). 6. Siker megerősítése: egy kis ünneplő robbanás a gombon, amikor az akció leszáll (Rocket Launch Button).
Betöltés és haladás
7. Körkörös haladás: a valós értékig megtöltő, rugóval leülepedő gyűrű (Radial Gauge). 8. Szint- vagy aktivitásmérő: egy sáv, amely élőben reagál a bejövő adatokra, például a hangszintre (Sound Wave).
Navigáció
9. Menüváltás: egy ikon, amely két állapot között mozog, és felfedi a menüt a helyén (Morph Nav). 10. Dokkolás nagyítása: a kurzor közelében lévő elemek felemelkednek és növekednek, majd leülepszik (mágneses dokkoló). 11. Tabulátor kiválasztása: villogás helyett a fülek között csúszkáló jelző (Liquid Tab Bar).
Üres és sikeres állapotok
12. Üres állapot: egy kis illusztráció, amely egyszeri animációval lágyítja az üres képernyőt. 13. Jutalom felfedése: olyan ajándék vagy jelvény, amely várakozással nyílik ki egy mérföldkő elérésekor (Meglepetés ajándékdoboz).
Húzza a frissítést
14. Húzza a frissítéshez: rugalmas túlgörgetés, amely követi a húzást, majd visszaugrik és elengedéskor megáll. A visszacsatolás a nyújtás, nem a fonó.
Haptics stílusú visszajelzés
15. Megerősítő impulzus: egy rövid skála és fény az elemen, amely tükrözi a mobil tapintását, így ugyanaz a művelet ugyanaz a vibrációs motor nélküli eszközön is.
Tervezz olyan szabályokat, amelyek jónak tartják őket
Néhány szabály elválasztja a segítő mikrointerakciót a bosszantótól.
- Legyen rövid: a legteljesebb nagyjából 200-400 ms alatt; a hosszabb mozgás egy kis elemen lassúnak tűnik
- Kezdje ugyanabban a keretben, mint a bemenet; a késleltetett indítás megtöri az ok és okozat érzését
- Legyen megszakítható: ha a felhasználó megfordítja a műveletet a mozgás közben, irányítsa át sebességgel a nulláról való újraindítás helyett
- Tisztelet előnyben részesíti a csökkentett mozgást: biztosítson statikus vagy keresztfade visszaesést, amely továbbra is kommunikálja a változást
- Adj neki egy feladatot: ha az interakcióhoz egynél több döntésre van szükség, az egy folyamat
Hogyan építsünk mikro-interakciókat
A megfelelő eszköz attól függ, hogy hány platformon kell futnia ugyanannak az interakciónak.
Csak a CSS
Jó egyszerű, önálló esetekhez: lebegő emelők, fókuszgyűrűk és kapcsolók, amelyeket :checked vagy osztályváltás hajt. Az átmenetek és a @keyframes elegendőek, és a stíluslapon kívül nincs mit szállítani.
Framer Motion vagy GSAP (web)
Jó, ha a mozdulat rugókat, gesztusokat vagy hangszerelést igényel, és csak az interneten kell futnia. Mindkettő megszakítható rugókat ad, és React állapottal hajtható meg.
ExodeUI (web, iOS és Android egy fájlból)
Használja ezt, ha ugyanazon interakciónak azonos módon kell viselkednie egy React, egy SwiftUI és egy Flutter alkalmazásban. Egyszer írja be egy .exode fájlba, és a futási környezet minden platformon lejátssza, így nincs platformonkénti átírás.
Gyártási megvalósítási részlet
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)}
/>
);
}Kulcs Principle, amit meg kell jegyezni
- A mikro-interakció egyetlen kis feladat egy triggerrel, szabályokkal, visszacsatolásokkal és hurkokkal vagy módokkal, a Dan Saffer által elnevezett négy rész.
- A legtöbb jó körülbelül 200-400 ms alatt fejeződik be, ugyanabban a keretben kezdődik, mint a bemenet, és megszakíthatóak maradnak
- A visszajelzés az, ami működik: megerősíti a műveletet, és elmagyarázza, mi változott, gyakran szöveg nélkül
- Mindig adjon meg egy preferált-csökkentett mozgású tartalékot, amely ugyanazt az információt hordozza mozgás nélkül