5 Unbreakable Regler för UI Animation på webben
Övergångar är ett kraftfullt sätt att kommunicera en förändring i ett användargränssnitt. De kan användas i appar som hjälper till att offload mycket kognitivt arbete i visuell cortex: de hjälper till att transportera användare mellan navigationssammanhang, förklara förändringar i arrangemanget av element på en skärm och förstärka elementhierarkin. Följaktligen är de ett viktigt inslag i interaktionsdesign.
Framgångsrik animerad övergång har följande fem egenskaper:
1. Bra UI-animering är naturlig
Statliga förändringar i användargränssnittet innebär ofta hårda nedskärningar som kan göra dem svåra att följa. I den verkliga världen visas inte bara de flesta saker eller försvinner omedelbart. När något har två eller flera stater, blir förändringar mellan staterna mycket enklare för användarna att förstå om övergångarna är animerade istället för att vara momentana. Låt oss titta på ett exempel nedan där användaren väljer ett objekt i en lista för att zooma in i den detaljerade vyn. Under expansion går det lilla kortet i en båge mot dess destination, eftersom den expanderar till ett större kort. Denna rörelse är inspirerad av de verkliga världskrafterna.
2. Effektiv UI-animering är scenen
En välanpassad animerad övergång styr din användares uppmärksamhet och klargör ändringen av stater. Denna egenskap är direkt relaterad till användarens fokus och kontinuitet. En bra övergång hjälper användarens fokus till rätt plats vid rätt tidpunkt, det lägger tonvikten på de rätta elementen beroende på vad målet är. I exemplet nedan omvandlas den flytande åtgärdsknappen (FAB) till navigeringselement med tre knappar. Förste gången användare kan inte riktigt förutsäga en interaktion som håller på att hända, men en riktigt animerad övergång hjälper användaren att hålla sig orienterad och inte känna att innehållet plötsligt har förändrats. Övergången hjälper användaren till nästa steg i en interaktion.
3. De bästa UI-animationerna är associativa
Övergångar ska illustrera hur elementen är anslutna. Bra övergångar associerar nyskapade ytor till elementet eller åtgärden som skapar dem. Logiken bakom associativ anslutning är att hjälpa användaren att förstå förändringen som just har hänt i vyens layout och vad som har utlöst förändringen.
Nedan kan du se två exempel på en lagövergång. I det första exemplet visas det nya lagret långt bort från den beröringspunkt som utlöste det, vilket bryter mot förhållandet till inmatningsmetoden.
I det andra exemplet visas det nya lagret direkt från beröringspunkten. Således binder elementet till beröringspunkten.
Ett annat exempel finns i Mac OS, som använder en animerad övergång när du minimerar ett fönster. Denna animering förbinder det första tillståndet med det andra tillståndet.
4. Populär UI-animering är snabb
Om det bara finns en animationsprincip du bryr dig om det borde definitivt vara timing. Timing är förmodligen en av de viktigaste övervägandena när man utformar övergångar. Animationen ska vara snabb och exakt, med liten eller ingen fördröjningstid mellan användarens initieringsåtgärd och animationens början. Dessutom behöver en användare inte vänta på att animationen ska slutföras. I exempel nedan skapar långsam animering onödig fördröjning och förlänger varaktigheten.
När element flyttar mellan stater, bör rörelsen vara tillräckligt snabb så att den inte orsakar några väntar, men långsamt nog att övergången kan förstås. För att en animation effektivt ska förmedla ett orsak och effekt-samband mellan UI-elementen måste effekten inledas inom 0,1 sekunder efter den första användaråtgärden för att upprätthålla känslan av direkt manipulation. Försök att hålla animationens varaktighet vid eller under 300ms, eftersom snabba övergångar slänger mindre av användarnas tid. Testa det med dina användare för att se vad som är tolerabelt.
5. Den bästa UI-animationen är klar
Det är ett vanligt misstag att överbelasta användargränssnitt med animeringar eller att skapa för komplexa interaktioner. För mycket förändring i ett användargränssnitt kan lämna en användare desorienterad och det tar tid att återhämta sig från. Kom ihåg att varje rörelse på skärmen lockar uppmärksamhet, så för mycket animering skapar samtidigt kaos.
Övergångar bör undvika att göra för mycket på en gång, eftersom de kan bli förvirrande när flera saker behöver flyttas i olika riktningar. Kom ihåg, mindre är mer med avseende på animering och övergångar i synnerhet. Något som om borttaget skulle göra ett renare användargränssnitt är nästan säkert en bra idé. När en yta ändrar form och storlek, måste du behålla en klar väg till nästa vy. Komplexa övergångar bör hålla ett enda element synligt. Detta hjälper till att hålla användaren orienterad.
Övergångar och tillgänglighet
Eftersom övergångar handlar om visuell kommunikation, är de som standard inte tillgängliga för användare med synskada. Du bör tillhandahålla alternativt innehåll för den här gruppen av användare. webacessibility.com Bästa metoder för animering erbjuder förslag om när man ska tillhandahålla alternativt innehåll för hjälpteknik.
Slutsats
Vid utformning av övergångar, fokusera bara på de praktiska sakerna de gör för användaren. Om din app eller webbplats är rolig och lekfull eller seriös och okomplicerad, med hjälp av meningsfulla övergångar kan du hjälpa dig att ge en tydlig och snabb sammanhållen upplevelse.