Så planerar du en husdjursanimation som reagerar på ett tryck

Skriv en regel för interaktionen i en mening innan du skissar på poser: ”När husdjuret trycks på märker det personen och hälsar kort.” Se till att trycket alltid får samma resultat. Om samma tryck ibland matar, leker med och hälsar på karaktären kan animationen inte på ett tillförlitligt sätt visa vad som hände.

Dela upp inmatningen i två ögonblick: när fingret trycks ned och när det släpps. En liten förändring av trycktillståndet när fingret trycks ned bekräftar att tryckytan registrerade det. Husdjurets huvudsakliga reaktion kan sedan följa när trycket godkänns vid släppet. Apples vägledning om responsivitet beskriver tryck och släpp på pekskärmar som separata interaktioner med varsin visuell respons. Den här skillnaden hjälper trycket att kännas bekräftat även om karaktärens större animation tar längre tid att slutföra. Förstå gränssnittets responsivitet

Välj en huvudsaklig rörelse som tydligt förmedlar avsikten i karaktärens visningsstorlek. En hälsning kan bestå av att blicken vänds mot personen följt av en liten huvudlutning; en lekfull bekräftelse kan vara ett snabbt kroppshopp. Det här är designexempel, inte föreskrivna mönster. Välj en förändring av silhuetten eller ansiktsuttrycket som fortfarande går att känna igen när karaktären är liten, och undvik att stapla flera gester innan betraktaren hinner förstå den första.

Bygg upp reaktionen med förväntan, handling och återgång. Förväntan kan vara en kort blick mot platsen där trycket skedde. Handlingen är den utmärkande gesten. Återgången för karaktären till en bekväm viloposition utan ett ryckigt hopp. Den här sekvensen är en praktisk designslutsats utifrån plattformsvägledning om att göra återkoppling realistisk, kort och precis: rörelsen ska förstärka handlingen, inte konkurrera med den. Apples riktlinjer för mänskliga gränssnitt: Rörelse

Den första synliga förändringen är viktigare än hela reaktionens längd. Som en utgångspunkt bör karaktären eller tryckytan förändras direkt när fingret trycks ned – genom en diskret sammanpressning, markering eller ögonrörelse – och sedan övergå till den uttrycksfulla responsen när fingret släpps. Se den exakta tajmingen som något att finjustera i sitt sammanhang, inte som ett universellt värde.

Om animationen startar först efter att tillgångar har lästs in, fjärrdata har kontrollerats eller orelaterat arbete har slutförts kan det verka som om interaktionen missades. Håll bekräftelsen fristående från tidskrävande arbete när det går. Apple beskriver märkbara fördröjningar i diskreta interaktioner som låsningar och skiljer dem från hack, som är avbrott i en jämn rörelse. I praktiken bör du kontrollera både om karaktären börjar reagera snabbt och om den rör sig jämnt när reaktionen väl börjar. Förstå gränssnittets responsivitet

Använd den kortaste sekvens som låter betraktaren förstå reaktionen och se hur den återgår. En snabb öronryckning kan vara över snabbt; en huvudvridning behöver mer tid för att gå att uppfatta. Om animationen känns trög bör du korta ned fördröjningen innan den utmärkande rörelsen börjar, innan du komprimerar varje pose. Om den känns abrupt bör du justera övergången in i eller ut ur handlingen i stället för att lägga in en lång paus.

Ge rörelsen ett medvetet hastighetsförlopp. En respons kan börja snabbt och mjukna in i den slutliga posen, medan ett litet hopp kan gå en aning förbi slutpositionen och sedan landa. Det här är exempel på möjliga val: rätt kurva beror på karaktärens stil och rörelsens omfattning. Apple rekommenderar kort och precis återkoppling och avråder från att låta människor vänta tills rörelsen är färdig innan de kan fortsätta. Apples riktlinjer för mänskliga gränssnitt: Rörelse

Testa ett andra tryck medan den första reaktionen spelas upp. Välj en tydlig regel: starta om reaktionen, lägg nästa respons i kö, övergå till en ny pose eller ignorera fler tryck tills ett lämpligt ögonblick. I en enkel husdjursinteraktion kan en omstart av en kort reaktion eller en övergång till den nya posen få karaktären att kännas tillgänglig. Om flera fullständiga reaktioner läggs i kö kan husdjuret verka ligga efter personen.

Undvik oavsett vilken regel du väljer att lämna animationen i ett halvfärdigt tillstånd. Kontrollera tryck under förväntan, huvudgesten och återgången. Testa också ett tryck som börjar med att fingret hålls ned men slutar utanför tryckytan, om plattformen skiljer det från ett fullbordat tryck. Apples vägledning för knappar anger att en beröring som avslutas inom kontrollens gränser utlöser dess åtgärd. Anpassad hantering av tryck bör tydligt definiera ett motsvarande beteende. Förstå låsningar i din app

Gör reaktionen valfri där plattformen har inställningar för rörelse och bevara vid behov informationen som trycket förmedlar genom en tillståndsändring utan rörelse. För webbgränssnitt använder en dokumenterad W3C-teknik mediefrågan prefers-reduced-motion för att stänga av eller ersätta rörelse som utlöses av interaktion när användaren begär mindre rörelse. W3C-sidan beskriver en teknik, inte ett krav på att använda just den implementeringen. W3C-teknik C39: Använd CSS-frågan prefers-reduced-motion för att förhindra rörelse

Om du lägger till ljud eller haptisk återkoppling ska den motsvara den synliga responsen direkt och användas med avsikt. Apples vägledning om haptik säger att återkopplingen ska stämma överens med en visuell förändring eller svara på en användaråtgärd, och varnar för att överanvändning kan minska dess betydelse. En husdjursanimation behöver inga extra återkopplingskanaler om rörelsen redan gör resultatet tydligt. Apples riktlinjer för mänskliga gränssnitt: Spela upp haptik

Testa på den avsedda enheten och i den faktiska visningsstorleken i stället för att bara bedöma animationen i en tidslinjeredigerare. Ställ några praktiska frågor: syns det att trycket registreras, går det att förstå vad husdjuret gjorde, återgår posen till ett interaktivt tillstånd och fungerar upprepade tryck förutsägbart? Titta först i normal hastighet. Långsam uppspelning kan hjälpa dig att granska poseövergångar, men visar inte om tajmingen känns responsiv vid användning.

Testa sedan olika ytterfall: tryck snabbt flera gånger, tryck nära tryckytans kant och aktivera enhetens inställning för reducerad rörelse. Leta efter fördröjda starter, frysta bildrutor, abrupta omstarter och reaktioner som överlappar tills betydelsen blir oklar. Apple påpekar att även en fördröjning på en enda uppdateringscykel för skärmen kan orsaka ett hack i rörelsen, så granska både jämnheten och den upplevda starttiden. Förbättra appens responsivitet

En tillförlitlig plan är enkel: definiera vad trycket betyder, bekräfta det snabbt, bygg upp en tydlig reaktion, återgå till en tillgänglig pose och bestäm hur avbrott ska hanteras. Finjustera sekvensen på enheten och upprepa sedan samma kontroller med reducerad rörelse. Det färdiga beteendet ska göra sambandet mellan trycket och husdjurets respons lätt att följa.

• Förstå gränssnittets responsivitet — Apples utvecklardokumentation

• Rörelse — Apples riktlinjer för mänskliga gränssnitt

• Förstå låsningar i din app — Apples utvecklardokumentation

• Teknik C39: Använd CSS-frågan prefers-reduced-motion för att förhindra rörelse — W3C WAI

• Spela upp haptik — Apples riktlinjer för mänskliga gränssnitt

• Förbättra appens responsivitet — Apples utvecklardokumentation