5 Utruselige regler for UI-animasjon på nettet
Overganger er en kraftig måte å kommunisere en endring i et brukergrensesnitt på. De kan brukes i apper for å hjelpe offload mye av det kognitive arbeidet i visuell cortex: de hjelper transportere brukere mellom navigasjonskontekster, forklarer endringer i arrangementet av elementer på en skjerm og forsterker elementhierarkiet. Følgelig er de et viktig element i interaksjonsdesign.
Vellykket animert overgang har følgende fem egenskaper:
1. God UI-animasjon er naturlig
Statlige endringer i brukergrensesnittet involverer ofte hardt kutt som standard, noe som kan gjøre dem vanskelige å følge. I den virkelige verden ser de fleste ting ikke bare ut eller forsvinner umiddelbart. Når noe har to eller flere stater, vil endringer mellom stater være mye enklere for brukerne å forstå om overgangene er animerte i stedet for å være øyeblikkelige. La oss se på et eksempel nedenfor hvor brukeren velger et element i en liste for å zoome inn i detaljert visning. Under ekspansjonen beveger det lille kortet i en buet mot målet, da det utvides til et større kort. Denne bevegelsen er inspirert av de virkelige verdensstyrker.
2. Effektiv UI-animasjon er arrangert
En velfungert animert overgang styrer brukerens oppmerksomhet og klargjør endring av stater. Denne egenskapen er direkte relatert til brukerfokus og kontinuitet. En god overgang bidrar til å rette brukerens fokus til rett sted til rett tid, det legger vekt på de rette elementene avhengig av hva målet er. I eksemplet nedenfor forvandles den flytende handlingsknappen (FAB) til navigeringselementer som består av tre knapper. Første gangs bruker kan ikke egentlig forutsi en samhandling som skal skje, men en riktig animert overgang hjelper brukeren å holde seg orientert og ikke føler at innholdet plutselig har endret seg. Denne overgangen hjelper brukeren til neste trinn i samspillet.
3. De beste UI-animasjonene er tilknyttede
Overganger bør illustrere hvordan elementene er koblet sammen. Gode overganger knytter nyopprettede overflater til elementet eller handlingen som skaper dem. Logikken bak assosiativ tilkobling er å hjelpe brukeren å forstå forandringen som nettopp har skjedd i visningsoppsettet og hva som har utløst endringen.
Nedenfor kan du se to eksempler på en lagovergang. I det første eksemplet vises det nye laget langt borte fra berøringspunktet som utløste det, som bryter forholdet til inngangsmetoden.
I det andre eksempelet vises det nye laget rett fra berøringspunktet. Dermed binder elementet til berøringspunktet.
Et annet eksempel kan bli funnet i Mac OS, som bruker en animert overgang når du minimerer et vindu. Denne animasjonen knytter den første staten til den andre tilstanden.
4. Populære UI Animasjon er Quick
Hvis det bare er ett animasjonsprinsipp du bryr deg om, bør det definitivt være timing. Timing er uten tvil en av de viktigste overveiene når du designer overganger. Animasjonen skal være rask og presis, med liten eller ingen forsinkelsestid mellom brukerens initierende handling og begynnelsen av animasjonen. Dessuten må en bruker ikke vente på at animasjonen skal fullføres. I eksempel nedenfor skaper langsom animasjon unødvendig lagring og forlenger varigheten.
Når elementene beveger seg mellom stater, bør bevegelsen være rask nok til at den ikke venter, men langsom nok til at overgangen kan forstås. For en animasjon for å effektivt formidle et årsak og forhold mellom UI-elementene, må effekten begynne innen 0,1 sekunder etter den første brukerhandlingen for å opprettholde følelsen av direkte manipulasjon. Prøv å holde animasjonsvarigheten på eller under 300 ms, da hurtige overganger sparer mindre av brukernes tid. Test det med brukerne dine for å se hva som er tolerabelt.
5. Den beste UI-animasjonen er klar
Det er en vanlig feil å overbelaste brukergrensesnitt med animasjoner eller å lage for komplekse interaksjoner. For mye endring i et brukergrensesnitt kan føre til at en bruker blir desorientert, og det tar tid å gjenopprette fra. Husk at hver bevegelse på skjermen tiltrekker oppmerksomhet, slik at for mye animasjon samtidig skaper kaos.
Overganger bør unngå å gjøre for mye samtidig fordi de kan bli forvirrende når flere elementer må bevege seg i forskjellige retninger. Husk, mindre er mer med hensyn til animasjon og overganger spesielt. Alt som hvis fjernet ville gjøre et renere brukergrensesnitt, er nesten helt sikkert en god ide. Når en overflate endrer form og størrelse, må du opprettholde en klar bane til neste visning. Komplekse overganger bør holde et enkelt element synlig. Dette bidrar til å holde brukeren orientert.
Overganger og tilgjengelighet
Siden overganger handler om visuell kommunikasjon, er de som standard ikke tilgjengelige for brukere med synshemming. Du bør gi alternativt innhold for denne gruppen av brukere. webacessibility.com 'S beste praksis for animasjon gir forslag til når du skal gi alternativt innhold for hjelpeteknologi.
Konklusjon
Når du utformer overganger, fokuser bare på de praktiske tingene de gjør for brukeren. Enten din app eller nettsted er morsomt og lekfullt eller seriøst og greit, ved å bruke meningsfulle overganger, kan du hjelpe deg med å gi en klar og rask sammenhengende opplevelse.