Kortversionen
- En animerad Instagram-story är en video i 1080×1920, oftast en kort loop, som används i stället för en stillbildsstory.
- De mest läsbara animerade storyerna låter bakgrunden röra sig långsamt och för in orden en gång, och håller dem sedan stilla.
- Den första sekunden betyder mest, så rubriken ska vara helt synlig inom ungefär en sekund efter att storyn öppnats.
- Ladda upp animerade storyer som MP4-video i 1080×1920 i stället för som GIF, så att gradienter förblir mjuka.
- Håll text och logotyper borta från rutans topp och botten, där Instagram ritar sitt eget gränssnitt.
På den här sidan
En animerad Instagram-story fungerar när en sak rör sig med ett syfte och allt annat förblir läsbart. I praktiken betyder det en bakgrund som glider långsamt, en rubrik som kommer in en gång med en kort animation och sedan står kvar, och inget viktigt i övre eller nedre delen av ramen på 1080×1920. Exportera den som MP4, inte GIF, och se till att allra första rutan redan läses som en färdig design, eftersom vissa bara någonsin kommer att se den rutan.
Vad som ska röra sig i en animerad story
En story tittas på i ett ögonblick, på armlängds avstånd, ofta med ljudet av. Rörelse drar ögat, så varje rörligt element konkurrerar med dina ord. De storyer som håller kvar uppmärksamheten väljer ett rörligt lager och gör det lugnt, och låter sedan texten göra sitt jobb. Stökiga storyer känns energiska i redigeraren och uttröttande på en telefon.
Tröttsamt att titta på
- Varje textrad animeras på ett olika sätt
- Orden fortsätter röra sig efter att de kommit
- En snabb bakgrund med hög kontrast bakom liten text
- Klistermärken, GIF och effekter staplade på en ruta
- Rubriken dyker upp efter tre sekunder
Håller kvar uppmärksamheten
- En textanimationsstil genom hela storyn
- Orden kommer in och står sedan helt stilla
- En långsam bakgrund med ett lugnt område bakom orden
- Ett rörligt element, valt med avsikt
- Rubriken går att läsa inom en sekund
Samma princip löper genom allt bra rörelsearbete, från logotyper till webbplatser. Vill du ha teorin bakom den tar rörelsedesignens principer upp timing, acceleration och hierarki på djupet.
Fyra textanimationer som fungerar i storyer
Textanimation är den mest användbara rörelsen i en story, eftersom den visar ögat var det ska börja. Håll den kort. En ingång som tar längre än ungefär en halv sekund börjar kännas som väntan, och folk trycker bort väntan.
Använd den till
Använd den till
Använd den till
Det här gör den
Använd den till
Stegra rader snarare än ord: rubriken först, stödraden ett ögonblick senare, länkuppmaningen sist. Den ordningen matchar hur folk läser, och den gör att storyn ger mening även om någon går halvvägs. För fler mönster, inklusive kinetisk text, se idéer för textanimation.
Rubriken lyfter in först, sedan detaljen. Båda ligger i mittbandet, fria från gränssnittet.
En nedräkning som poppar in en gång. Bakgrunden fortsätter röra sig, så storyn känns levande medan orden står kvar.
Timing av en animerad Instagram-story
En stillbildsstory ligger kvar på skärmen i ungefär fem sekunder innan Instagram går vidare. En videostory spelas så länge klippet pågår, men uppmärksamheten är frontladdad: är första sekunden tom blir resten sällan sedd. Planera tidslinjen baklänges utifrån det.
- 1
0 till 1 sekund: rubriken
Bakgrunden rör sig redan i första rutan. Rubriken är klar med sin ingång vid slutet av första sekunden.
- 2
1 till 2 sekunder: stödet
Andra raden eller produkten kommer in. Använd samma animation som rubriken, med något mindre rörelse.
- 3
2 till 3 sekunder: handlingen
Länkuppmaningen, datumet eller koden visas. Det är raden folk agerar på, så den behöver tid att läsas.
- 4
Resten: håll
Inget nytt kommer in. Bakgrunden fortsätter glida så att storyn loopar utan synlig omstart.
Sex till tio sekunder är en bekväm längd för en designad story med ett kort budskap. Längre klipp passar prat eller demonstration, inte en rubrik. Ska storyn loopa måste bakgrunden sluta där den började, vilket går igenom steg för steg i sömlös loopvideo.
Storlek, säkra zoner och exportinställningar
En animerad story använder samma ram som en stillbild: 1080×1920 pixlar, 9:16. Instagrams gränssnitt ligger över toppen och botten, så håll ord och logotyper i mittbandet. En vanlig arbetsregel är att lämna ungefär de översta och nedersta 250 pixlarna fria från text. Hela genomgången finns i storlek på Instagram-story.
Story och Reel 9:16
1080 × 1920
Flödesinlägg 4:5
1080 × 1350
Kvadrat 1:1
1080 × 1080
Varför
Varför
Rekommendation
Varför
Varför
Varför
GIF är det enda format du bör undvika här. Gränsen på 256 färger gör mjuka gradienter till ränder, och en rörlig story är video för Instagram, så ge den en. Jämförelsen finns i GIF eller MP4.
Gör animerade storyer som inte ser ut som allas
De flesta animerade storymallar använder samma handfull rörliga bakgrunder, så ett flöde fullt av dem flyter ihop. Bakgrunden är där ditt varumärke kan kännas igen innan någon läser ett ord. Ett rörligt färgfält som tillhör dig gör mer än en stocklopp någonsin kan.
I Gradiently börjar en story på en Mark: en levande gradient- och materialbakgrund som rör sig av sig själv och är unik. Lägg till din rubrik, välj lyft, pop, svep eller skrivmaskin, så håller Marken sitt lugnaste område bakom orden medan auto-bläck väljer ljus eller mörk text rad för rad. Samma design kan sedan ändras till ett flödesinlägg eller en Reels-bakgrund utan att byggas om. Videoexport ingår i Pro och sparar MP4 där din webbläsare stöder det.
En långsam Mark bakom en stilla rad. Bakgrunden rör sig, orden gör det aldrig.
Vanliga frågor
Hur gör jag en animerad Instagram-story?
Designa en ram på 1080×1920 med en rörlig bakgrund och en textanimation, håll orden i mittbandet, exportera den sedan som MP4 och ladda upp den som en story. De flesta designverktyg med videoexport kan göra det.
Vilket format ska en animerad Instagram-story ha?
MP4 i 1080×1920 pixlar. Undvik GIF: gränsen på 256 färger ger band i gradienter, och Instagram behandlar en rörlig story som video ändå.
Hur lång ska en animerad Instagram-story vara?
För en designad story med ett kort budskap är sex till tio sekunder bekvämt. Få rubriken på skärmen inom första sekunden, eftersom uppmärksamheten sjunker snabbt efter det.
Varför ser min animerade story suddig eller randig ut?
Oftast exporterades den som GIF, i fel storlek eller med låg bitrate. Exportera MP4 i exakt 1080×1920 så att Instagram inte behöver skala om något.
Ska texten röra sig hela tiden?
Nej. Låt orden animeras in en gång och stå stilla sedan. Rörlig text är svårare att läsa, och en långsamt rörlig bakgrund får redan storyn att kännas levande.
Skriven av Gradiently
Teamet bakom Gradiently, ett designverktyg byggt kring Marks: levande gradienter som får allt du gör att kännas som ditt.
Se vår profil