Multiplattforms App Store-skarmbilder: En mall, varje enhet

Problemet med multiplattforms-skarmbilder

Om du publicerar en app pa bade iOS och Android kanner du redan till den brutala skarmbildsmatematiken. Apple kraver skarmbilder for iPhone 6,7 tum, iPhone 6,5 tum, iPad 12,9 tum. Google Play vill ha telefonskarmbilder pa 1080x1920 och surfplatteskarmbilder pa 1600x2560. Varje butiksida behover mellan 4 och 10 skarmbilder per enhetstyp.

Lat oss rakna pa ett realistiskt scenario. Anta att du stodjer 10 sprak och behover 5 skarmbilder per enhetstyp over 4 kategorier (iPhone, iPad, Android-telefon, Android-surfplatta):

4 enhetstyper x 5 skarmbilder x 10 sprak = 200 individuella tillgangar.

Det ar 200 bilder att designa, exportera, granska och ladda upp. Varje gang du uppdaterar appens granssnittt, gor en omprofilering eller kor en sasongskampanj, upprepar du hela processen.

Varfor separata skarmbildsuppsattningar inte fungerar

Manuell design i Figma eller Sketch. En designer skapar varje skarmbild individuellt. Det ar det vanligaste och langsammaste tillvagagangssattet.

Mallbaserade verktyg med en mall per enhet. Vissa verktyg tillater mallar men kraver en separat for varje storlek.

Generisk skalning. Att ta en iPhone-skarmbild och skala den till Android-dimensioner ger suddiga bilder.

Hur Template Porting fungerar i Screenshots.live

Screenshots.live loser detta med en funktion som kallas template porting. Konceptet ar enkelt: designa din skarmbild en gang for en enhetstyp, och systemet konverterar den automatiskt till alla andra enhetstyper genom att proportionellt berakna om koordinater, teckensnittsstorlekar och elementpositioner.

Steg 1: Designa din basmall. Oppna den visuella editorn och skapa en mall for iPhone 6,7 tum (1290x2796 pixlar). Placera din enhetsram, app-skarmbild, rubrik, underrubrik och bakgrundselement.

Steg 2: Porta till andra enheter. Klicka pa portknappen och valj dina malenhetstyper: iPad 12,9 tum, Android-telefon, Android-surfplatta. Screenshots.live analyserar varje element och beraknar om position, storlek och proportioner.

Steg 3: Granska och finjustera. De portade mallarna visas i din dashboard. I de flesta fall ser de perfekta ut direkt.

Steg 4: Rendera alla variationer via API. Med dina mallar redo genererar ett enda API-anrop varje variation. En malluppsattning, ett API-anrop, alla 200 tillgangar levererade som ZIP-fil.

Tekniska detaljer om proportionell konvertering

Positionsmappning. X- och Y-koordinater beraknas om som proportionella positioner pa den nya ytan.

Storleksskalning. Elementdimensioner skalas proportionellt.

Teckensnittsjustering. Teckensnittsstorlekar beraknas om for att behalla relativ storlek.

Bildforhallandehantering. Nar kalla och mal har olika bildforhallanden justerar systemet vertikalt avstand intelligent.

Fore och efter: Den verkliga effekten

Fore Screenshots.live:

• 200 individuella Figma-ramar
• 40 timmars initialt designarbete
• 200 manuella exporter
• 8-12 timmar per uppdateringscykel

Efter Screenshots.live:

• 5 basmallar
• 4 timmars initialt designarbete
• Ettklicksporting till alla enhetstyper
• Ett API-anrop for att rendera alla 200 tillgangar
• 30 minuter per uppdateringscykel

Kom igang med multiplattforms-skarmbilder

1. Registrera dig pa Screenshots.live och skapa din forsta mall.
2. Perfektionera din design i den visuella editorn.
3. Porta mallen till andra enhetstyper med ett klick.
4. Koppla API:et till din byggpipeline.
5. Ladda upp till bada butikerna med Fastlane eller manuellt.