Wieloplatformowe zrzuty ekranu App Store: Jeden szablon, kazde urzadzenie

Problem wieloplatformowych zrzutow ekranu

Jesli publikujesz aplikacje zarowno na iOS, jak i na Androida, znasz juz brutalna matematyke zrzutow ekranu. Apple wymaga zrzutow dla iPhone 6,7 cala, iPhone 6,5 cala, iPad 12,9 cala. Google Play chce zrzutow telefonu 1080x1920 i zrzutow tabletu 1600x2560. Kazda strona sklepu potrzebuje od 4 do 10 zrzutow na typ urzadzenia.

Policzmy realistyczny scenariusz. Zalozmy, ze obslugujesz 10 jezykow i potrzebujesz 5 zrzutow na typ urzadzenia w 4 kategoriach (iPhone, iPad, telefon Android, tablet Android):

4 typy urzadzen x 5 zrzutow x 10 jezykow = 200 indywidualnych assetow.

To 200 obrazow do zaprojektowania, wyeksportowania, sprawdzenia i przeslania. Za kazdym razem, gdy aktualizujesz interfejs aplikacji, zmieniasz branding lub uruchamiasz sezonowa promocje, powtarzasz caly proces.

Dlaczego utrzymywanie oddzielnych zestawow zrzutow nie dziala

Reczne projektowanie w Figma lub Sketch. Projektant tworzy kazdy zrzut indywidualnie. To najczestsze i najwolniejsze podejscie.

Narzedzia z szablonami per urzadzenie. Niektore narzedzia pozwalaja na szablony, ale wymagaja oddzielnego dla kazdego rozmiaru.

Ogolne skalowanie. Wzieciu zrzutu iPhone i przeskalowaniu do wymiarow Androida daje rozmyte obrazy.

Jak dziala Template Porting w Screenshots.live

Screenshots.live rozwiazuje to za pomoca funkcji zwanej template porting. Koncepcja jest prosta: zaprojektuj zrzut raz dla jednego typu urzadzenia, a system automatycznie konwertuje go na kazdy inny typ, proporcjonalnie przeliczajac wspolrzedne, rozmiary czcionek i pozycje elementow.

Krok 1: Zaprojektuj szablon bazowy. Otworz edytor wizualny i utworz szablon dla iPhone 6,7 cala (1290x2796 pikseli). Umies ramke urzadzenia, zrzut aplikacji, naglowek, podtytul i elementy tla.

Krok 2: Przenies na inne urzadzenia. Kliknij przycisk przenoszenia i wybierz docelowe typy urzadzen: iPad 12,9 cala, telefon Android, tablet Android. Screenshots.live analizuje kazdy element i przelicza pozycje, rozmiar i proporcje dla nowych wymiarow.

Krok 3: Przejrzyj i dostosuj. Przeniesione szablony pojawiaja sie w dashboardzie. W wiekszosci przypadkow wygladaja idealnie od razu.

Krok 4: Renderuj wszystkie warianty przez API. Z gotowymi szablonami, jedno wywolanie API generuje kazdy wariant zrzutu. Jeden zestaw szablonow, jedno wywolanie API, wszystkie 200 assetow dostarczone jako plik ZIP.

Szczegoly techniczne konwersji proporcjonalnej

Mapowanie pozycji. Wspolrzedne X i Y sa przeliczane jako pozycje proporcjonalne na nowym canvas.

Skalowanie rozmiaru. Wymiary elementow sa skalowane proporcjonalnie.

Dostosowanie rozmiaru czcionki. Rozmiary czcionek sa przeliczane dla zachowania wzglednego rozmiaru.

Obsluga proporcji ekranu. Gdy zrodlo i cel maja rozne proporcje, system inteligentnie dostosowuje odsteepy pionowe.

Przed i po: Rzeczywisty wplyw

Przed Screenshots.live:

• 200 indywidualnych ramek Figma
• 40 godzin poczatkowej pracy projektowej
• 200 recznych eksportow
• 8-12 godzin na kazdy cykl aktualizacji

Po Screenshots.live:

• 5 szablonow bazowych
• 4 godziny poczatkowej pracy projektowej
• Przenoszenie jednym kliknieciem na wszystkie typy urzadzen
• Jedno wywolanie API do renderowania 200 assetow
• 30 minut na kazdy cykl aktualizacji

Pierwsze kroki z wieloplatformowymi zrzutami

1. Zarejestruj sie w Screenshots.live i utworz pierwszy szablon.
2. Udoskonal projekt w edytorze wizualnym.
3. Przenies szablon na inne typy urzadzen jednym kliknieciem.
4. Podlacz API do pipeline'u budowania.
5. Przeslij do obu sklepow uzywajac Fastlane lub recznie.