Multiplatformennye skrinshoty dlya App Store: Odin shablon, kazhdoe ustrojstvo

Problema multiplatformennykh skrinshotov

Esli vy publikuete prilozhenie i na iOS, i na Android, vy uzhe znaete brutalnuyu matematiku skrinshotov. Apple trebuet skrinshoty dlya iPhone 6,7 dyujma, iPhone 6,5 dyujma, iPad 12,9 dyujma. Google Play khochet skrinshoty telefona 1080x1920 i skrinshoty plansheta 1600x2560. Kazhdaya stranitsa magazina trebuet ot 4 do 10 skrinshotov na tip ustrojstva.

Podschitaem realistichnyj stsenarij. Dopustim, vy podderzhivaete 10 yazykov i vam nuzhno 5 skrinshotov na tip ustrojstva v 4 kategoriyakh (iPhone, iPad, telefon Android, planshet Android):

4 tipa ustrojstv x 5 skrinshotov x 10 yazykov = 200 individualnykh assetov.

Eto 200 izobrazhenij, kotorye nuzhno razrabotat, eksportirovat, proverit i zagruzit. Kazhdyj raz, kogda vy obnovlyaete interfejs prilozheniya, menyaete brending ili zapuskaete sezonnuyu aktsiyu, vy povtoryaete ves protsess.

Pochemu podderzhka otdelnykh naborov skrinshotov ne rabotaet

Ruchnoe proektirovanie v Figma ili Sketch. Dizajner sozdaet kazhdyj skrinshot individualno. Eto samyj rasprostranennyj i samyj medlennyj podkhod.

Instrumenty na osnove shablonov s otdelnym shablonom dlya kazhdogo ustrojstva. Nekotorye instrumenty pozvolyayut shablony, no trebuyut otdelnyj dlya kazhdogo razmera.

Obshchee masshtabirovanie. Vzyat skrinshot iPhone i masshtabirovat do razmerov Android daet razmytye izobrazheniya.

Kak rabotaet Template Porting v Screenshots.live

Screenshots.live reshaet etu problemu s pomoschyu funktsii pod nazvaniem template porting. Kontseptsiya prosta: sozdajte skrinshot odin raz dlya odnogo tipa ustrojstva, i sistema avtomaticheski konvertiruet ego dlya kazhdogo drugogo tipa, proportsionalno pereschjityvaya koordinaty, razmery shriftov i pozitsii elementov.

Shag 1: Sozdajte bazovyj shablon. Otkrojte vizualnyj redaktor i sozdajte shablon dlya iPhone 6,7 dyujma (1290x2796 pikselej). Razmestite ramku ustrojstva, skrinshot prilozheniya, zagolovok, podzagolovok i fonovye elementy.

Shag 2: Perenesite na drugie ustrojstva. Nazhmite knopku portirovaniya i vybierite tselevye tipy ustrojstv: iPad 12,9 dyujma, telefon Android, planshet Android. Screenshots.live analiziruet kazhdyj element i pereschjityvaet pozitsiyu, razmer i proportsii.

Shag 3: Proverite i nastrojte. Portirovannye shablony poyavlyayutsya v dashborde. V bolshinstve sluchaev oni vyglyadyat idealno srazu.

Shag 4: Otrisujte vse variatsii cherez API. S gotovymi shablonami odin vyzov API generiruet kazhduyu variatsiyu. Odin nabor shablonov, odin vyzov API, vse 200 assetov dostavleny kak ZIP-fajl.

Tekhnicheskie detali proportsionalnoj konvertatsii

Otobrazheniye pozitsij. Koordinaty X i Y pereschjityvayutsya kak proportsionalnye pozitsii na novom holste.

Masshtabirovanie razmerov. Razmery elementov masshtabiruyutsya proportsionalno.

Korrektirovka razmera shrifta. Razmery shriftov pereschjityvayutsya dlya sokhraneniya otnositelnogo razmera.

Obrabotka sootnosheniya storon. Kogda istochnik i tsel imeyut raznye sootnosheniya storon, sistema umno korrektiruet vertikalnye otstupy.

Do i posle: Realnyj effekt

Do Screenshots.live:

• 200 individualnykh frejmov Figma
• 40 chasov nachalnoy raboty po dizajnu
• 200 ruchnykh eksportov
• 8-12 chasov na kazhdyj tsikl obnovleniya

Posle Screenshots.live:

• 5 bazovykh shablonov
• 4 chasa nachalnoy raboty po dizajnu
• Portirovanie odnim klikom na vse tipy ustrojstv
• Odin vyzov API dlya renderinga 200 assetov
• 30 minut na kazhdyj tsikl obnovleniya

Nachalo raboty s multiplatformennymi skrinshotami

1. Zaregistrirujtes na Screenshots.live i sozdajte pervyj shablon.
2. Udovershenstujte dizajn v vizualnom redaktore.
3. Perenesite shablon na drugie tipy ustrojstv odnim klikom.
4. Podklyuchite API k vashemu pipeline sborki.
5. Zagruzite v oba magazina cherez Fastlane ili vruchnuyu.