Mikrovuorovaikutukset: 15 esimerkkiä ja niiden suunnittelu
Mikrovuorovaikutusten selitys: määritelmä, Dan Safferin neljä osaa, 15 todellista esimerkkiä tyypin mukaan ryhmiteltynä, suunnittelusäännöt ja niiden rakentaminen CSS-, Framer Motion-, GSAP- tai ExodeUI-muodoissa.
Core Takeaway
Mikrovuorovaikutus on pieni, hillitty hetki käyttöliittymässä, joka tekee yhden asian: tykkää julkaisusta, vaihtaa asetusta, vahvistaa lomakkeen tai suorittaa eleen. Termi ja sen anatomia ovat peräisin Dan Safferilta, joka määrittelee neljä osaa. Liipaisin käynnistää sen, säännöt päättävät, mitä tapahtuu, palaute näyttää tuloksen, ja silmukat tai tilat hallitsevat sen tekemistä ajan mittaan. Hyvät mikrovuorovaikutukset ovat lyhyitä, vastaavat käyttäjän omaan syötteeseen ja pysyvät keskeytettävissä.
Mikä on mikrovuorovaikutus?
Mikrovuorovaikutus on pienin täydellinen vuorovaikutus tuotteessa: yksi tehtävä, jolla on alku, muutos ja loppu. Se ei ole kokonaisuus. Viestistä tykkääminen on mikrovuorovaikutusta; kommentin kirjoittaminen ja julkaiseminen on virtaa. Idea ja sen rakenne ovat peräisin Dan Safferin kirjasta Microinteractions, joka jakaa jokaisen neljään osaan.
Mikrovuorovaikutuksen neljä osaa
Dan Safferin kehys jakaa mikrovuorovaikutuksen neljään osaan. Niiden nimeäminen on hyödyllistä, koska useimmat viat ja useimmat huonot liikkeet elävät yhdessä neljästä, ei kokonaisuudessa.
Laukaista
Tapahtuma, joka sen aloittaa. Käyttäjän käynnistämä (napautus, osoitin, pitkä painallus, vetäminen) tai järjestelmän käynnistämä (latauksen viimeistely, verkkovirheen saapuminen). Luotto: Dan Saffer.
säännöt
Mitä tapahtuu, kun se alkaa: kelvolliset tilat, rajoitukset, kuten vedon rajat tai minimi- ja maksimiarvot, ja tapahtumien järjestys. Luotto: Dan Saffer.
Palaute
Kuinka tuote kertoo käyttäjälle tapahtuneesta: jousilaskeuma, värinmuutos, kuvakkeen muodonmuutos, tekstin päivitys. Täällä suurin osa liikesuunnittelusta elää. Luotto: Dan Saffer.
Silmukat ja tilat
Mitä vuorovaikutus tekee ajan myötä ja miten tilat muuttavat sitä. Sama kytkin voi käyttäytyä eri tavalla pimeässä tilassa tai kompaktissa asettelussa muuttamatta sen logiikkaa. Luotto: Dan Saffer.
Miksi mikrovuorovaikutuksilla on merkitystä?
Mikrovuorovaikutus on tapa, jolla käyttöliittymä vastaa käyttäjälle ilman tekstikappaletta. Se vahvistaa, että toiminto on vastaanotettu, osoittaa, että jokin toimii edelleen, tai selittää, mikä juuri muuttui. Kun ne puuttuvat, sama tuote tuntuu raskaammalta: käyttäjät napauttavat kahdesti, koska mikään ei kertonut heille, että ensimmäinen napautus laskeutui, tai he odottavat näyttöä, joka ei antanut merkkejä edistymisestä. Hyvät tunnetaan enemmän kuin huomataan, mikä on pointti.
15 esimerkkiä mikrovuorovaikutuksesta
Nämä on ryhmitelty sen mukaan, mitä ne viestivät. Jos ExodeUI toimittaa vastaavan esimerkin, nimi annetaan, jotta voit avata ja muokata sitä.
Painikkeet ja kytkimet (paina ja tilaa)
1. Painikkeen painallus: skaalaa noin 0,92:een osoitin alaspäin ja jousta takaisin vapautettaessa (ExodeUI esimerkki: Jelly Button). 2. Vaihtokytkin: jousipohjainen käännös, jossa värinmuutos vahvistuksen yhteydessä (Gooey Toggle). 3. Tilakytkin: segmentoitu säädin, joka liukuu osoitinta ja muuttaa aktiivisen etiketin (Motion Switch).
Lomakepalaute (vahvistus ja lähettäminen)
4. Virheellinen syötteen tärinä: lyhyt vaakasuora nykäisy, jossa lukee "tarkista tämä kenttä" ilman valintaikkunaa (heiluttava tekstinsyöttö). 5. Lähetys käynnissä: painikkeesta tulee edistymisen ilmaisin, joten käyttäjä ei koskaan menetä paikkaansa (animoitu lähetyspainike). 6. Onnistumisen vahvistus: pieni juhlapurske painikkeessa, kun toiminta laskeutuu (Rocket Launch Button).
Ladataan ja edistytään
7. Pyöreä eteneminen: rengas, joka täyttyy todelliseen arvoon ja asettuu jousella (Radial Gauge). 8. Taso- tai aktiivisuusmittari: palkki, joka reagoi livenä saapuviin tietoihin, kuten äänen tasoon (Sound Wave).
Navigointi
9. Valikon vaihto: kuvake, joka liikkuu kahden tilan välillä ja paljastaa valikon paikallaan (Morph Nav). 10. Telakan suurennus: Kohdistimen lähellä olevat kohteet nostavat ja kasvavat, sitten asettuvat (Magnetic Dock). 11. Välilehden valinta: ilmaisin, joka liukuu välilehtien välillä vilkkumisen sijaan (Liquid Tab Bar).
Tyhjät ja menestystilat
12. Tyhjä tila: pieni kuva, joka animoituu kerran pehmentääkseen tyhjää näyttöä. 13. Palkinnon paljastaminen: lahja tai merkki, joka avautuu odotuksella, kun virstanpylväs saavutetaan (Yllätyslahjalaatikko).
Päivitä vetämällä
14. Vedä päivitykseen: joustava ylivieritys, joka seuraa vetoa, ponnahtaa sitten takaisin ja asettuu vapautuessa. Palaute on venytys, ei kehräys.
Haptics-tyylinen palaute
15. Vahvistuspulssi: lyhyt asteikko ja hohto elementissä, joka heijastaa mobiililaitteen haptista kosketusta, joten sama toiminta tuntuu samalta laitteessa, jossa ei ole tärinämoottoria.
Suunnittele säännöt, jotka pitävät ne hyvänä
Muutama sääntö erottaa mikrovuorovaikutuksen, joka auttaa, ärsyttävästä.
- Pidä se lyhyt: täydellisin noin 200-400 ms; pidempi liike pienellä elementillä tuntuu hitaalta
- Aloita samasta kehyksestä kuin syöte; viivästynyt käynnistys rikkoo syyn ja seurauksen tunteen
- Pidä se keskeytettävänä: jos käyttäjä kääntää toiminnon liikkeen keskellä, ohjaa uudelleen nopeudella sen sijaan, että aloitat uudelleen nollasta
- Respect mieluummin-vähennetty-liike: tarjoa staattinen tai ristiin häipyvä varmistus, joka silti viestii muutoksesta
- Anna sille yksi tehtävä: jos vuorovaikutus vaatii useamman kuin yhden päätöksen, se on virtausta
Kuinka rakentaa mikrovuorovaikutuksia
Oikea työkalu riippuu siitä, kuinka monella alustalla saman vuorovaikutuksen on suoritettava.
Vain CSS
Sopii yksinkertaisiin, itsenäisiin koteloihin: leijunnostimet, tarkennusrenkaat ja vaihtokytkimet, joita ohjaa :checked tai luokan muutos. Siirtymät ja @keyframes riittävät, eikä tyylisivun lisäksi ole lähetettävää mitään.
Framer Motion tai GSAP (verkko)
Hyvä, kun liike tarvitsee jousia, eleitä tai orkestrointia ja sen on suoritettava vain verkossa. Molemmat antavat sinulle katkeavat jouset ja niitä voidaan käyttää React-tilassa.
ExodeUI (verkko, iOS ja Android yhdestä tiedostosta)
Käytä tätä, kun saman vuorovaikutuksen on toimittava samalla tavalla React-, SwiftUI- ja Flutter-sovelluksessa. Kirjoitat sen kerran .exode-tiedostoon ja suoritusaika toistaa sen kullakin alustalla, joten alustakohtaista uudelleenkirjoitusta ei tarvitse tehdä.
Tuotannon toteutuskatkelma
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)}
/>
);
}Avain Principles muistettavat
- Mikrovuorovaikutus on yksi pieni tehtävä, jossa on liipaisin, säännöt, palaute ja silmukat tai tilat, Dan Safferin nimeämät neljä osaa
- Useimmat hyvät valmistuvat noin 200-400 ms, alkavat samasta kehyksestä kuin tulo ja pysyvät keskeytettävissä
- Palaute tekee työn: se vahvistaa toiminnan ja selittää, mikä muuttui, usein ilman tekstiä
- Anna aina etusijalle vähennetyn liikkeen varavaihtoehto, joka kuljettaa saman tiedon ilman liikettä