5 Ubrydelige regler for UI-animation på nettet
Overgange er en kraftfuld måde at kommunikere en ændring i en brugergrænseflade til. De kan bruges i apps til at hjælpe offload meget af det kognitive arbejde i den visuelle cortex: de hjælper med at transportere brugere mellem navigationssammenhænge, forklare ændringer i arrangementet af elementer på en skærm og forstærke elementhierarkiet. Derfor er de et vigtigt element i interaktionsdesign.
Succesfuld animeret overgang besidder følgende fem karakteristika:
1. God UI Animation er naturligt
Statens ændringer i brugergrænsefladen indebærer ofte, at der ofte er hårde nedskæringer, hvilket kan gøre dem vanskelige at følge. I den virkelige verden virker de fleste ting ikke lige eller forsvinder med det samme. Når noget har to eller flere stater, vil ændringer mellem stater være meget lettere for brugerne at forstå, om overgangen er animeret i stedet for at være øjeblikkelig. Lad os se på et eksempel nedenfor, hvor brugeren vælger et emne på en liste for at zoome ind i den detaljerede visning. Under udvidelsen bevæger det lille kort sig i en buet mod dets destination, da det udvides til et større kort. Denne bevægelse er inspireret af de virkelige verdenskræfter.
2. Effektiv UI-animation er iscenesat
En velfungeret animeret overgang styrer din brugers opmærksomhed og præciserer statens forandring. Denne egenskab er direkte relateret til brugerfokus og kontinuitet. En god overgang hjælper med at rette brugerens fokus til det rette sted på det rigtige tidspunkt, det lægger vægt på de rigtige elementer afhængigt af, hvad målet er. I eksemplet nedenfor transformeres den flydende handlingsknap (FAB) til navigeringsnavigationselementer bestående af tre knapper. Første gangs bruger kan ikke rigtig forudsige en interaktion, der skal ske, men en korrekt animeret overgang hjælper brugeren med at holde sig orienteret og ikke føler, at indholdet pludselig er ændret. Denne overgang hjælper med at guide brugeren til det næste trin i en interaktion.
3. De bedste UI-animationer er associative
Overgange skal illustrere, hvordan elementer er forbundet. Gode overgange forbinder nyoprettede overflader med elementet eller handlingen, der skaber dem. Logikken bag associativ forbindelse er at hjælpe brugeren med at forstå den ændring, der netop er sket i visningens layout, og hvad der har udløst ændringen.
Nedenfor kan du se to eksempler på en lagovergang. I det første eksempel vises det nye lag langt væk fra det berøringspunkt, der udløste det, hvilket bryder dets forhold til indtastningsmetoden.
I det andet eksempel vises det nye lag lige fra berøringspunktet. Således binder elementet til berøringspunktet.
Et andet eksempel kan findes i Mac OS, der bruger en animeret overgang, når du minimerer et vindue. Denne animation forbinder den første tilstand med anden tilstand.
4. Populære UI Animation er Quick
Hvis der kun er et animationsprincip, skal du helt sikkert være timing. Timing er uden tvivl en af de vigtigste overvejelser ved udformning af overgange. Animationen skal være hurtig og præcis, med lille eller ingen forsinkelsestid mellem brugerens initierende handling og begyndelsen af animationen. En bruger behøver heller ikke at vente på, at animationen er færdig. I eksempel nedenfor skaber langsom animation unødvendig forsinkelse og forlænger varigheden.
Når elementer flytter mellem stater, skal bevægelsen være hurtig nok, at den ikke forårsager nogen ventetid, men langsom nok til, at overgangen kan forstås. For en animation til effektivt at formidle et årsag og forhold mellem UI-elementer, skal effekten begynde inden for 0,1 sekunder efter den første brugerhandling for at opretholde følelsen af direkte manipulation. Prøv at holde animationsvarigheden på eller under 300ms, da hurtige overgange spilder mindre af brugerens tid. Test det med dine brugere for at se, hvad der er acceptabelt.
5. Den bedste brugergrænseflade animation er klar
Det er en almindelig fejl at overbelaste brugergrænseflader med animationer eller at skabe for komplekse interaktioner. For meget ændring i en brugergrænseflade kan efterlade en bruger desorienteret, og det tager tid at genoprette fra. Husk at hver bevægelse på skærmen tiltrækker opmærksomhed, så for meget animation skaber samtidig kaos.
Overgange bør undgå at gøre for meget på én gang, fordi de kan blive forvirrende, når flere elementer skal bevæge sig i forskellige retninger. Husk, mindre er mere med hensyn til animation og overgange i særdeleshed. Alt, hvis fjernet ville gøre et renere brugerinterface, er næsten helt sikkert en god ide. Når en overflade ændrer form og størrelse, skal du holde en klar vej til den næste visning. Komplekse overgange bør holde et enkelt element synligt. Dette hjælper med at holde brugerorienteret.
Overgange og tilgængelighed
Da overgange handler om visuel kommunikation, er de som standard ikke tilgængelige for brugere med synshandicap. Du bør levere alternativt indhold til denne gruppe af brugere. webacessibility.com Bedste praksis til animation giver forslag til, hvornår man skal levere alternativt indhold til hjælpeteknologi.
Konklusion
Ved udformning af overgange skal man kun fokusere på de praktiske ting, de gør for brugeren. Uanset om din app eller dit websted er sjovt og legeligt eller seriøst og ligetil, ved brug af meningsfulde overgange, kan du give dig en klar og hurtig sammenhængende oplevelse.