Multiplattform App Store-skjermbilder: En mal, hver enhet

Problemet med multiplattform-skjermbilder

Hvis du publiserer en app pa bade iOS og Android, kjenner du allerede den brutale skjermbildematematikken. Apple krever skjermbilder for iPhone 6,7 tommer, iPhone 6,5 tommer, iPad 12,9 tommer. Google Play vil ha telefonskjermbilder pa 1080x1920 og nettbrettskjermbilder pa 1600x2560. Hver butikkoppforing trenger mellom 4 og 10 skjermbilder per enhetstype.

La oss regne pa et realistisk scenario. Anta at du stotter 10 sprak og trenger 5 skjermbilder per enhetstype over 4 kategorier (iPhone, iPad, Android-telefon, Android-nettbrett):

4 enhetstyper x 5 skjermbilder x 10 sprak = 200 individuelle ressurser.

Det er 200 bilder du ma designe, eksportere, gjennomga og laste opp. Hver gang du oppdaterer appens grensesnitt, gjor en rebranding eller kjorer en sesongkampanje, gjentar du hele prosessen.

Hvorfor separate skjermbildesett ikke fungerer

Manuell design i Figma eller Sketch. En designer lager hvert skjermbilde individuelt. Dette er den vanligste og tregeste tilnaermingen.

Malbaserte verktoy med en mal per enhet. Noen verktoy tillater maler men krever en separat for hver storrelse.

Generisk skalering. A ta et iPhone-skjermbilde og skalere det til Android-dimensjoner gir uskarpe bilder.

Hvordan Template Porting fungerer i Screenshots.live

Screenshots.live loser dette med en funksjon kalt template porting. Konseptet er enkelt: design skjermbildet ditt en gang for en enhetstype, og systemet konverterer det automatisk til alle andre enhetstyper ved a proporsjonalt beregne koordinater, skriftstorrelser og elementposisjoner pa nytt.

Steg 1: Design din basismal. Apne den visuelle editoren og opprett en mal for iPhone 6,7 tommer (1290x2796 piksler). Plasser enhetsrammen, app-skjermbildet, overskriften, undertittelen og bakgrunnselementene.

Steg 2: Porter til andre enheter. Klikk pa porteringsknappen og velg dine malenhetstyper: iPad 12,9 tommer, Android-telefon, Android-nettbrett. Screenshots.live analyserer hvert element og beregner posisjon, storrelse og proporsjoner pa nytt.

Steg 3: Gjennomga og finjuster. De porterte malene vises i dashboardet ditt. I de fleste tilfeller ser de perfekte ut umiddelbart.

Steg 4: Render alle variasjoner via API. Med malene klare genererer et enkelt API-kall hver variasjon. Ett malsett, ett API-kall, alle 200 ressurser levert som ZIP-fil.

Tekniske detaljer om proporsjonal konvertering

Posisjonskartlegging. X- og Y-koordinater beregnes pa nytt som proporsjonale posisjoner.

Storrelsesskalering. Elementdimensjoner skaleres proporsjonalt.

Skriftstorrelsesjustering. Skriftstorrelser beregnes pa nytt for relativ storrelse.

Sideforholdshandtering. Nar kilde og mal har forskjellige sideforhold, justerer systemet vertikal avstand intelligent.

For og etter: Den reelle effekten

For Screenshots.live:

• 200 individuelle Figma-rammer
• 40 timer initialt designarbeid
• 200 manuelle eksporter
• 8-12 timer per oppdateringssyklus

Etter Screenshots.live:

• 5 basismaler
• 4 timer initialt designarbeid
• Ettklikkportering til alle enhetstyper
• Ett API-kall for a rendere alle 200 ressurser
• 30 minutter per oppdateringssyklus

Kom i gang med multiplattform-skjermbilder

1. Registrer deg pa Screenshots.live og opprett din forste mal.
2. Perfeksjoner designet i den visuelle editoren.
3. Porter malen til andre enhetstyper med ett klikk.
4. Koble API-et til byggepipelinen din.
5. Last opp til begge butikkene med Fastlane eller manuelt.