Wzornik, app preview. A1, natywny iOS
Kasownik
Podgląd aplikacji z biletami komunikacji miejskiej: wersja do App Store, trzy formaty na social media i lekkie pętle na stronę. Wszystko z jednego projektu, w jednym rytmie.
- Wersja sklepowa
- 23 s, 886×1920, 30 kl./s
- Formaty social
- 9:16, 1:1 i 16:9
- Pętle web
- WebM i MP4, każda do 4 MB
- Dźwięk
- brak, wszystko czytelne bez niego
01 Klient i zadanie
Bilet kupiony i skasowany, zanim tramwaj ruszy
Kasownik to aplikacja z Poznania, w której kupuje się i kasuje bilety na tramwaj i autobus. Przed premierą w sklepach zespół potrzebował podglądu aplikacji, który w pierwszych dwóch sekundach pokaże najważniejsze: skasowany bilet widać od razu i trudno go podrobić zrzutem ekranu.
Zadanie: wersja do App Store zgodna ze specyfikacją Apple, trzy formaty na kampanię w mediach społecznościowych, pętle na stronę i storyboard, który zespół może pokazać inwestorom. Wszystko bez dźwięku, bo podgląd w sklepie startuje wyciszony.
- Użytkownik
- dojeżdżający do pracy i szkoły, telefon w jednej ręce, kilka sekund na przystanku
- Miasto
- Poznań, strefa A; przystanki prawdziwe, trasy i ceny zmyślone
- Trzy funkcje
- bilet proponowany na trasę, kasowanie, które ożywia bilet, i widok przesiadki
- Ton
- spokojny i rzeczowy, bez hałasu i bez obietnic, których aplikacja nie spełni
02 Kierunek
Interfejs, który wygląda jak część telefonu
Bilet kupuje się w biegu, w słońcu, często jedną ręką. Interfejs w stylu systemu nie wymaga nauki i budzi zaufanie przy płaceniu, dlatego kierunek to natywny iOS: duże tytuły, karty, arkusze wysuwane od dołu i dużo bieli.
Jedynym kolorem jest zieleń tramwaju. Dzięki temu, gdy pasek ważności zaczyna płynąć, oko od razu wie, gdzie patrzeć. Ruch naśladuje przedmioty: arkusz dojeżdża miękko, a karta biletu rośnie do pełnego ekranu jako ten sam element. Nic nie wskakuje i nic nie miga.
- Biel
- Jeden kolor
- Sprężyny
- Element współdzielony
Onest, jeden krój w pięciu wagach
Bilety800, tytuł duży 34/41
Bilet 45 minut700, tytuł 22/28 i zegar 56
Zapłać 4,60 zł600, przyciski i nagłówki 17/22
Strefa A · kupiony 7:47500, objaśnienia 16/21
Zażółć gęślą jaźń, Rondo Śródka400, tekst 17/22
Jeden kolor marki i szarości systemu
- Zieleń tramwaju#00864Fprzyciski, pasek ważności, ikona
- Zieleń głęboka#006B3Fstan wciśnięcia, mały tekst na tincie
- Tinta#E3F4ECzaznaczone wiersze, tło ważnego biletu
- Atrament#101418tekst główny
- Grafit#5B6470tekst drugorzędny
- Szary#8A929Cpodpowiedzi, tylko duży tekst
- Linia#E4E7EBseparatory list
- Tło grupowane#F2F4F6tło ekranów z listami
- Biel#FFFFFFkarty, arkusze, pasek kart
Kontrast na bieli: zieleń tramwaju 4,64:1, zieleń głęboka 6,61:1, atrament 18,50:1, grafit 6,00:1. Szary #8A929C służy tylko do dużych znaków i elementów nieaktywnych.
03 Storyboard
23 sekundy, osiem ujęć, jeden ciągły ruch
Osiem ujęć w 690 klatkach. Hak to od razu skasowany bilet, bo pierwsza klatka w sklepie musi sprzedawać bez dźwięku. Potem trzy funkcje w kolejności, w jakiej używa się aplikacji, i na końcu ekran startowy z ikoną i nazwą.
- Cztery napisy, każdy najwyżej sześć słów i co najmniej półtorej sekundy na ekranie.
- Napisy omijają górne 120 i dolne 160 pikseli, gdzie sklep kładzie własne elementy.
- Plakat sklepowy to klatka 360: żywy bilet z pełnym kodem. Domyślna klatka z piątej sekundy, arkusz płatności, też się broni.
| Ujęcie | Klatki | Czas | Co się dzieje | Napis |
|---|---|---|---|---|
| 1. Hak | 0 do 59 | 0,0 s do 2,0 s | Od pierwszej klatki skasowany bilet na pełnym ekranie: pasek ważności płynie, zegar odlicza, przez kod przechodzi fala. | „Widać, że bilet ważny.” klatki 0 do 63 |
| 2. Bilety | 60 do 134 | 2,0 s do 4,5 s | Bilet zjeżdża w dół i odsłania ekran główny. Przewinięcie zwija duży tytuł, karta proponowanego biletu dostaje obwódkę. | bez napisu |
| 3. Zakup | 135 do 224 | 4,5 s do 7,5 s | Stuknięcie w kartę wysuwa arkusz zakupu. Drugie stuknięcie płaci, przycisk zwija się w znacznik, arkusz odjeżdża. | „Dwa stuknięcia, bez kolejki” klatki 140 do 204 |
| 4. Moje bilety | 225 do 314 | 7,5 s do 10,5 s | Nowy bilet ląduje na stosie. Przytrzymanie przycisku napełnia pierścień przez sekundę i kasuje bilet. | bez napisu |
| 5. Bilet ożywa | 315 do 419 | 10,5 s do 14,0 s | Element współdzielony: karta rośnie do pełnego ekranu, kod ożywa falą od środka, zegar rusza od 45:00. | „Kasujesz przy wejściu” klatki 328 do 392 |
| 6. Przesiadka | 420 do 539 | 14,0 s do 18,0 s | Arkusz trasy: linia 16, przesiadka na Rondzie Kaponiera, linia 5. Wiersze wchodzą kolejno, plakietka odlicza minuty biletu. | „Przesiadka? Zostanie 27 minut” klatki 430 do 494 |
| 7. Kontrola | 540 do 614 | 18,0 s do 20,5 s | Pokaż kontrolerowi: kod rośnie na środek, ekran rozjaśnia się, zegar jest duży i czytelny z odległości. | bez napisu |
| 8. Zakończenie | 615 do 689 | 20,5 s do 23,0 s | Ekran startowy aplikacji: ikona wchodzi na sprężynie, pod nią nazwa. | bez napisu |
04 Zasady ruchu
Sprężyny zamiast stopera
Każdy ruch ma nazwę i wartość zapisaną w tokenach projektu. Te same liczby napędzają wideo i ten przykład obok.
Po lewej arkusz na sprężynie sheet, po prawej ten sam arkusz na zwykłej krzywej. Sprężyna rusza szybciej i dojeżdża miękko, bez twardego zatrzymania. Przesuń suwak, żeby zobaczyć, co robi zbyt małe tłumienie.
- push · przejście między ekranami
sprężyna: masa 1, sztywność 300, tłumienie 32- bez widocznego przestrzelenia, około 380 ms
- sheet · arkusze od dołu
sprężyna: masa 1, sztywność 260, tłumienie 28- arkusz dojeżdża miękko, tło przyciemnia się krzywą 400 ms
- hero · karta biletu rośnie do pełnego ekranu
sprężyna: masa 1, sztywność 220, tłumienie 26- element współdzielony, przestrzelenie poniżej 2%
- press · wciśnięcie przycisku i wiersza
cubic-bezier(0.25, 0.1, 0.25, 1), 120 ms- skala 0,97, powrót na sprężynie push
- fade · tekst i treść drugorzędna
cubic-bezier(0.25, 0.1, 0.25, 1), 250 ms- kolejne wiersze co 40 ms
- scrim · przyciemnienie pod arkuszem
cubic-bezier(0.32, 0.72, 0, 1), 400 ms- czerń od 0 do 30%
- live · pasek ważności i fala kodu
cubic-bezier(0.45, 0, 0.55, 1), 667 ms- pasek przesuwa się w cyklu 2,4 s, fala kodu od środka w 20 klatek
- Bez cięć w interfejsie
- każda zmiana ekranu jest ruchem ciągłym: push, arkusz albo element współdzielony
- Stopniowanie
- wiersze trasy wchodzą co 40 ms, nigdy wszystkie naraz
- Bez liniowego easingu
- wyjątkiem jest tylko stały przepływ paska ważności, napędzany cyklem 2,4 s
- Kamera w wersji marketingowej
- powolny najazd o 6% w każdym akcie i boczny przejazd między aktami
05 Ekrany
Siedem ekranów z jednego systemu
Siedem ekranów zbudowanych jako komponenty z jednego mini design systemu: kolory, skala typograficzna, odstępy, promienie i cienie. Projekt w kanwie 443×960, render w skali 2, czyli dokładnie 886×1920.
06 Wersja sklepowa i formaty
Sklep pokazuje aplikację, social sprzedaje
Apple wymaga, żeby podgląd w sklepie pokazywał prawdziwy interfejs, dlatego powstały dwie odrębne wersje. Sklepowa to sam ekran aplikacji. Marketingowa ma własną ramkę telefonu, linię tramwajową z czterema przystankami zamiast osobnych etykiet, ruch kamery i zakończenie w kształcie biletu z perforacją, a w chwili kasowania bilet wychodzi poza telefon.
07 Co dostaje klient
Pliki gotowe do wgrania, z parametrami
Klient dostaje pliki gotowe do wgrania, z parametrami sprawdzonymi przez ffprobe. Wersje pełnej jakości są za duże na stronę, dlatego tutaj odtwarzają się lekkie pętle bez dźwięku, w formacie WebM i MP4.
| Plik | Do czego | Wymiary | Długość | Kodek | Bitrate | Rozmiar |
|---|---|---|---|---|---|---|
| kasownik-store-886x1920.mp4Wersja sklepowa | App Store Connect, podgląd aplikacji na iPhone | 886×1920, 30 kl./s | 23,0 s, 690 klatek | H.264, High, yuv420p, cicha ścieżka AAC, stereo, 48 kHz | 11,4 Mb/s | 31,3 MB |
| kasownik-social-1080x1920.mp4Wersja marketingowa 9:16 | Reels, TikTok i Shorts | 1080×1920, 30 kl./s | 21,0 s, 630 klatek | H.264, High, yuv420p, cicha ścieżka AAC, stereo, 48 kHz | 2,1 Mb/s | 5,2 MB |
| kasownik-social-1080x1080.mp4Wersja marketingowa 1:1 | post w kanale | 1080×1080, 30 kl./s | 21,0 s, 630 klatek | H.264, High, yuv420p, cicha ścieżka AAC, stereo, 48 kHz | 1,9 Mb/s | 4,9 MB |
| kasownik-social-1920x1080.mp4Wersja marketingowa 16:9 | YouTube, link w Google Play | 1920×1080, 30 kl./s | 21,0 s, 630 klatek | H.264, High, yuv420p, cicha ścieżka AAC, stereo, 48 kHz | 1,8 Mb/s | 4,4 MB |
| Pętla | Wymiary | Długość | WebM, VP9 | MP4, H.264 |
|---|---|---|---|---|
| Nagłówek strony, 16:9kasownik-hero | 1280×720 | 21,5 s | 1,6 MB | 1,4 MB |
| Nagłówek na telefonie, 9:16kasownik-hero-9x16 | 540×960 | 21,5 s | 1,2 MB | 1,1 MB |
| Kwadrat, 1:1kasownik-social-1x1 | 720×720 | 21,5 s | 1,3 MB | 1,2 MB |
| Wersja sklepowakasownik-store | 442×960 | 23,5 s | 1012 KB | 1,0 MB |
| Kafel z pętląkasownik-tile | 480×600 | 5,0 s | 213 KB | 174 KB |
- Ikona
- 1024×1024 PNG bez przezroczystości i podgląd z zaokrągleniem
- Storyboard
- tabela ujęć z klatkami i plansza klatek kluczowych w PNG
- Ekrany
- siedem ekranów interfejsu w 886×1920
- Projekt ruchu
- tokeny kolorów, typografii i ruchu, opisane jak tutaj
Masz aplikację do pokazania?
Napisz, co robi Twoja aplikacja i kto jej używa. Zaproponuję storyboard, styl ruchu i komplet plików do App Store, Google Play i mediów społecznościowych.
Zobacz ofertę dla klientów