01 watchOS
Ekrany zegarka
Pięć ekranów, każdy z jednym zadaniem i maksymalnie trzema poziomami informacji. Pole ekranu to 208 x 256 punktów, margines boczny 10 punktów, dolny 12. Godzina systemowa zostaje w prawym górnym rogu, bo watchOS i tak ją tam rysuje - aplikacja nigdy jej nie duplikuje.
Teraz
Zuzanna K.
Uzupełnienie hybrydy
00:42
zostało 33 min
W1 Teraz
Stylizacja w toku. Pierścień to czas usługi, nie licznik w górę - stylistka widzi, ile zostało, a nie ile minęło.
Następna
12:15
Alicja Nowicka
Uzupełnienie hybrydy 75 min
za 48 min
W2 Następna
Godzina dostaje największy stopień pisma, bo to jedyna liczba, którą stylistka porównuje z zegarem na ścianie.
- Zuzanna K.Uzupełnienie hybrydy
- Alicja N.Uzupełnienie hybrydy
- Patrycja G.Manicure hybrydowy + zdobienie x3
- Klaudia W.Manicure hybrydowy
- Magdalena L.Manicure japoński
W3 Dzień
Lista przewijana koronką. Wiersz bieżący ma trzypunktową krawędź akcentową zamiast wypełnienia, żeby nie zjadał kontrastu.
Karta w skrócie
Zuzanna Kaczmarek
- Alergiabrak
- KolorPuder 02
- Kształtsofcik, średnie
Cienka płytka - lekka baza.
W4 Karta w skrócie
Wywoływana z W1 i W2. Trzy fakty, które trzeba znać z rękami w rękawiczkach, plus ostrzeżenie, jeśli jest.
Podsumowanie dnia
W5 Podsumowanie dnia
Cztery liczby w siatce 2 x 2. Utarg i obłożenie w jednym rzucie oka, bez wchodzenia w finanse.
Pazy
Alicja potwierdziła wizytę
wt 8.09, 12:15 Uzupełnienie hybrydy, 75 min. Bez zaliczki, rozliczenie po wizycie.
Powiadomienie long look
Potwierdzenie od klientki. Nazwisko w tytule, szczegóły w drugim planie, dwie akcje - reszta czeka w telefonie.
Koronka cyfrowa
Koronka zawsze zmienia wartość, nigdy widok
Przewijanie palcem przełącza ekrany, koronka wyłącznie steruje wartością wewnątrz ekranu. Na liście dnia jeden zaskok to jedna wizyta, z haptyką .click na każdym wierszu - stylistka odlicza wizyty w kieszeni rękawiczki, bez patrzenia. Na rozliczeniu koronka skacze co 5 zł napiwku, przy przedłużeniu co 5 minut, a na skrajnych wartościach dostaje haptykę .stop zamiast cichego zatrzymania. Karta klientki przewija się płynnie, bez zaskoków, bo tam nie ma nic do wybierania.
Aplikacja na zegarku nie odpytuje serwera. Telefon wypycha stan przez WCSession.updateApplicationContext przy każdej zmianie grafiku i przy starcie stylizacji - to jedno źródło prawdy, nadpisywane, nigdy kolejkowane. Ekran W1 nie wywołuje przeliczeń: elapsed rysuje Text(timerInterval:), więc licznik chodzi bez wybudzania procesu.
Gdy telefon jest poza zasięgiem, zegarek pokazuje ostatni znany grafik z sygnaturą czasu i wygasza pierścień do --pz-on-ink-3 po 15 minutach bez synchronizacji. Nigdy nie pokazujemy pustego ekranu ani kręcącego się wskaźnika - stara godzina jest bardziej użyteczna niż brak godziny.
02 watchOS
Tarcze z komplikacjami Pazy
Komplikacja żyje w cudzej kompozycji, więc trzeba ją oglądać w miejscu, a nie na białym tle. Trzy tarcze, których używają stylistki: modularna na dzień pracy, infograficzna dla kogoś, kto lubi wskazówki, i minimalna dla kogoś, kto chce tylko wiedzieć, kto następny.
11:27
Tarcza modularna
Duży moduł to następna klientka, trzy małe u dołu to dzień w liczbach. Pogodę zastępuje liczba wizyt - w salonie to ważniejsza prognoza.
dzień4/13
następna12:15
utarg2 675 zł
w toku00:42
Tarcza infograficzna
Cztery komplikacje narożne plus łuk obwodowy. Wskazówki zostają cienkie, bo to one mają ustępować danym.
Tarcza cyfrowa minimalna
Jedna godzina, jedno nazwisko. Cała reszta czeka pod przewinięciem koronki.
Komplikacje dostają jeden budżet odświeżeń na dobę, więc nie odliczamy w nich minut. Oś czasu ma wpisy dokładnie w momentach zmiany stanu: start i koniec każdej wizyty plus 06:00 na reset dnia. Między wpisami tarcza rysuje statyczny tekst, a nie licznik.
Zmiana grafiku w aplikacji woła reloadTimelines(ofKind:) tylko dla rodzin, których dotyczy - przełożenie wizyty odświeża prostokątną i narożną, wpłata zaliczki wyłącznie kołową. widgetRenderingMode ustawiamy na .accented, żeby przyciemnione tarcze same przefarbowały warstwę akcentu.
03 watchOS
Rodziny komplikacji
Pięć rodzin, każda w rozmiarze rzeczywistym. Zasada podziału jest prosta: im mniej miejsca, tym bardziej liczba zastępuje zdanie. Kołowa nosi postęp dnia, narożna godzinę, prostokątna nazwisko, obwodowa jedną linię kontekstu, wielka wyłącznie licznik trwającej stylizacji.
Przycisk pod kafelkiem pokazuje, gdzie ta rodzina siada na tarczy powyżej.
Pazy 12:15 Alicja N.
00:42 Zuzanna K.
Wpisy osi czasu generujemy z grafiku, nie z zegara: po jednym na start i koniec każdej z trzynastu wizyt, plus wpis o 21:00 z podsumowaniem dnia i wpis o 06:00 z pierwszą wizytą jutra. Rodzina Extra Large ma relevance podniesioną tylko w czasie trwania stylizacji, żeby Smart Rotate podnosił ją sam.
Poza godzinami pracy studia oś kończy się jednym wpisem „10:00 Nadia W." i nic się nie odświeża do rana. Żadna rodzina nie odlicza sekund - to zabija budżet i baterię, a stylistce wystarcza dokładność do minuty.
04 watchOS
Widżet Smart Stack
Smart Stack to jeden ruch koronką w górę z tarczy. Karta Pazy ma jedno zadanie: powiedzieć, kto następna i za ile, zanim stylistka zdąży opuścić nadgarstek. Trzy linie, lewa krawędź akcentowa zamiast tła, znak marki w rogu - w stosie kart karta bez sygnatury ginie.
12:15 za 48 min
Alicja Nowicka
Uzupełnienie hybrydy
Smart Stack karta w stosie
Karta Pazy podnosi się na wierzch w oknie 60 minut przed wizytą i w trakcie stylizacji.
12:15 za 48 min
Alicja Nowicka
Uzupełnienie hybrydy
Smart Stack rozmiar rzeczywisty
184 x 84 pt, promień 22. Nazwisko dostaje krój dziełowy, godzina mono - dwa różne alfabety czytają się szybciej niż jeden.
Karta korzysta z tej samej osi co komplikacja prostokątna, ale dokłada RelevantContext: przedział od 60 minut przed wizytą do jej końca. Poza tym oknem karta nie wskakuje na wierzch stosu, nawet jeśli aplikacja była ostatnio otwierana.
Odwołanie wizyty musi wywołać natychmiastowe reloadTimelines - karta z nazwiskiem klientki, która właśnie odwołała, jest gorsza niż brak karty.
05 iOS
Widżety ekranu początkowego
Widżet ekranu początkowego jest jasny - to nadal aplikacja, tylko przycięta. Ciemne tło zarezerwowaliśmy dla szkła urządzenia: zegarka, blokady, StandBy i wyspy. Dzięki temu kafel Pazy czyta się jak kartka papieru położona na tapecie, a nie jak kolejna ikona.
Ekran początkowy strona 1
Widżet średni i mały obok ikon systemowych. Skala czyta się dopiero w takim sąsiedztwie.
Ekran początkowy strona 2
Widżet duży zajmuje cztery rzędy siatki, więc dostaje własną stronę i oś dnia z kwotami.
Mały 170 x 170
Kto następna i za ile. Jedna wizyta, zero nawigacji.
Średni 364 x 170
Następna wizyta plus trzy kolejne. Decyzja „czy zdążę na obiad" bez otwierania aplikacji.
Duży 364 x 382
Oś wokół godziny 11:27: jedna zamknięta, trzy w toku, dwie kolejne. Zamknięta gaśnie do połowy krycia, a kwota zostaje przekreślona.
Co dostaje największy znak
Godzina. Na wszystkich trzech rozmiarach 12:15 jest największym elementem, bo to jedyna dana, którą stylistka porównuje z czymś zewnętrznym - z zegarem na ścianie. Nazwisko jest drugie: rozpoznaje je po dwóch literach, więc nie potrzebuje stopnia pisma. Usługa jest trzecia i wolno jej się urwać wielokropkiem, bo z pary „12:15 Alicja" i tak wie, co robi.
Dlaczego kwota nie jest u góry
Utarg to liczba do sprawdzenia raz na jakiś czas, nie w biegu. Siedzi więc w stopce małego, w podsumowaniu średniego i w pasie dolnym dużego - zawsze poniżej linii wzroku, zawsze w tym samym miejscu. Widżet, który krzyczy pieniędzmi, nie nadaje się do pokazania klientce siedzącej naprzeciwko.
Ikona aplikacji
Kość słoniowa #F6F1E9 i jeden znak w Cynobrze 07. Kontur paznokcia zamiast sylwetki dłoni: czyta się przy 29 pt w Ustawieniach i nie zamienia się w plamę na ciemnej tapecie.
Jeden TimelineProvider dla wszystkich trzech rozmiarów, ta sama oś: wpis na start dnia, po jednym na koniec każdej wizyty i wpis o 21:00. Dzień z trzynastoma wizytami to około 15 wpisów - mieści się w budżecie systemu z zapasem, bo nic nie odświeżamy co kwadrans.
Zmiana grafiku, wpłata zaliczki i zamknięcie wizyty wołają WidgetCenter.shared.reloadTimelines(ofKind: "PazyDzien") natychmiast. Odliczanie „za 48 min" renderujemy przez Text(.timer), więc mija samo, bez ani jednego dodatkowego odświeżenia. Po 21:00 oś ma jeden wpis: pierwsza wizyta jutra.
06 iOS
Widżety ekranu blokady
Na blokadzie nie ma tła aplikacji, jest szkło. Widżety rysują się białym tuszem na tapecie klientki, więc jedyny kolor, na który możemy liczyć, to akcent w pierścieniu. Wszystko inne musi działać wyłącznie stopniem pisma i wagą.
wtorek, 8 września
11:27
Live Activity stylizacja w toku
Ekran blokady komplet
Kołowy i prostokątny w rzędzie pod zegarem, karta Live Activity nad kontrolkami.
11:27
Ekran blokady widżet inline
Wersja inline zajmuje wiersz daty, więc data znika. Wybiera się jedno albo drugie - i dlatego linia musi nieść nazwę aplikacji.
Circular 72 pt
Postęp dnia: cztery z trzynastu za nami, czyli jedna zamknięta i trzy w toku. Jedyna dana, która zmienia się rzadko i widać ją kątem oka.
Rectangular 160 x 72
Trzy linie: nazwa aplikacji, godzina z nazwiskiem, usługa. Tu mieści się kontekst, którego kołowy nie uniesie.
Inline wiersz nad zegarem
Jedna linia, ikona plus 28 znaków. Wszystko powyżej ucina system, więc nazwisko idzie skrótem.
Co dostaje największy znak
W kołowym wygrywa cyfra 4, nie mianownik: stylistka chce wiedzieć, ile ma za sobą, a nie ile ma łącznie - łączna liczba jest stała od rana. W prostokątnym wygrywa środkowa linia z godziną i nazwiskiem, bo etykieta „Pazy" jest tylko adresem nadawcy.
Kontrast bez koloru
Szkło blokady przepuszcza tapetę, więc każdy tekst leży na białym tuszu o pełnym kryciu, a drugoplanowe linie schodzą do 0,75 krycia - nigdy niżej. Pierścień jest jedynym elementem w akcencie i ma 6 pt grubości, żeby przetrwał na jasnym zdjęciu.
Ta sama oś co na ekranie początkowym, ale z jednym wyjątkiem: rodzina accessoryCircular dostaje wpis w chwili startu wizyty i drugi w chwili jej zamknięcia. Licznik 4/13 liczy wizyty za nami, więc rośnie już przy posadzeniu klientki - inaczej stałby w miejscu przez pół dnia przy trzech stanowiskach zajętych naraz.
Wszystkie trzy rodziny renderujemy w trybie .accented i sprawdzamy w widgetRenderingMode, czy telefon jest w trybie zawsze włączonym - wtedy odcinamy wypełnienia i zostawiamy sam kontur, bo ekran przygaszony dodaje własną warstwę.
07 iOS
StandBy
Telefon leży bokiem na blacie przy stanowisku, ładuje się między klientkami i pełni rolę zegara studia. Widok ma być czytelny z trzech metrów, przy przygaszonym ekranie i pod kątem. Stąd podział pół na pół: godzina po lewej, następna klientka po prawej, nic pomiędzy poza włoskowatą linią.
11:27
wtorek, 8 września
Następna klientka
12:15
Alicja Nowicka
Uzupełnienie hybrydy 75 min
Dziś 13 wizyt 2 675 zł
StandBy 520 x 300
Prawa kolumna ma krycie 0,92 - przy zawsze włączonym ekranie zbyt jasny biały wypala się w oczy po godzinie pracy.
Co dostaje największy znak
Godzina bieżąca, 128 punktów krojem dziełowym w wadze 300. Z trzech metrów czyta się ją bez skupiania wzroku, a to jedyny powód, dla którego telefon w ogóle stoi na blacie. Godzina następnej wizyty jest trzy razy mniejsza i w akcencie - to drugi rzut oka, nie pierwszy.
Dlaczego nie ma tu listy
StandBy widzi też klientka siedząca przy stanowisku. Pełna lista nazwisk na blacie to wyciek cudzych danych, więc pokazujemy jedno nazwisko - to, które i tak zaraz wejdzie przez drzwi. Utarg schodzi do stopki, 12 punktów, nieczytelny z drugiego końca pokoju.
Ten sam widżet co średni na ekranie początkowym, wariant .systemMedium z rodziną dopasowaną do StandBy. Oś czasu bez zmian, ale przy zawsze włączonym ekranie system ogranicza odświeżenia do jednego na minutę - dlatego żadna liczba tutaj nie ma sekund.
Po 21:00 widżet przechodzi na wpis „Jutro 10:00 Nadia W." i nie odświeża się do rana. Nocą tło zostaje czarne, a akcent schodzi na czerwony wariant systemowy - to robi iOS, my tylko nie przeszkadzamy jasnymi wypełnieniami.
08 iOS
Live Activity i Dynamic Island
Sesja: Zuzanna Kaczmarek, 10:45-12:00, uzupełnienie hybrydy. Aktywność startuje w chwili naciśnięcia „Rozpocznij" w aplikacji i gaśnie z rozliczeniem. Cztery prezentacje tej samej treści, każda z coraz mniejszym budżetem znaków - i tylko jedna decyzja o tym, co przetrwa do wersji najmniejszej: czas.
Compact leading i trailing
Ikona po lewej mówi która aplikacja, licznik po prawej ile trwa. Dwa elementy, zero słów.
Minimal druga aktywność w tle
Gdy równolegle biegnie inna aktywność, zostaje pierścień. Wypełniony w 56%, z kropką w środku - postęp bez ani jednej cyfry.
Expanded 370 x 160
Przyciski działają: przedłużenie przesuwa koniec o 15 minut i przelicza pierścień, pasek i zakres godzin.
Live Activity na blokadzie 364 x 116
Ta sama treść co expanded, ale przyciski schodzą pod pasek postępu - na blokadzie kciuk sięga tylko dolnej krawędzi karty.
Co przetrwa do najmniejszej wersji
Kolejność cięcia jest odwrotna do kolejności czytania. Expanded ma nazwisko, usługę, zakres godzin, licznik i dwa przyciski. Compact traci nazwisko - stylistka i tak wie, kto siedzi naprzeciwko. Minimal traci nawet cyfry i zostaje z pierścieniem, bo jedyne pytanie, na które odpowiada, brzmi „daleko jeszcze".
Dlaczego licznik rośnie, a pierścień maleje
Cyfry 00:42 liczą w górę, bo tyle trwa usługa i tyle wpisujemy potem do karty. Pierścień pokazuje pozostały czas do zaplanowanego końca, bo to jego pilnuje kolejna klientka w poczekalni. Dwie różne miary, dwa różne nośniki - nigdy dwie cyfry obok siebie.
Akcje w środku aktywności
Dwa przyciski, nie trzy. „Przedłuż 15 min" to najczęstsza korekta w salonie i musi być na jeden dotyk bez odblokowywania telefonu. „Zakończ" prowadzi do rozliczenia w aplikacji. Anulowania tu nie ma - to decyzja, której nie podejmuje się z ekranu blokady.
Aktywność nie jest odświeżana z zewnątrz. Licznik i pasek rysuje Text(timerInterval:) z zakresu 10:45-12:00, więc idą same, bez wypychania stanu. ContentState aktualizujemy wyłącznie przy realnej zmianie: przedłużenie, pauza, zamknięcie - w praktyce zero albo jeden raz na wizytę.
staleDate ustawiamy na zaplanowany koniec plus 20 minut. Po tym czasie karta blednie i pokazuje „Sprawdź w Pazy" zamiast kłamać rosnącym licznikiem. Po rozliczeniu wołamy end(dismissalPolicy: .after(2 min)) - wystarczy, żeby wzrok zdążył potwierdzić, że sesja zamknięta.
09 macOS
Widżet macOS
Ten sam widżet, inna sytuacja: laptop w zapleczu, otwarty na recepcji, sprawdzany między klientkami. Powierzchnia jest jasna jak w aplikacji, obrys włoskowaty zamiast cienia, a jedyna nowa informacja to wolne okno - bo przy komputerze zapada decyzja, komu je zaproponować.
- Patrycja G.
- Klaudia W.
- Magdalena L.
Średni 364 x 170
Następna klientka po lewej, trzy kolejne po prawej. Wersja do rzutu okiem między jedną a drugą wizytą.
- Patrycja G.
- Sandra K.
- Klaudia W.
- Magdalena L.
Wolne okno: 15:00-15:15 u Kaliny
Duży 364 x 382
Dokłada pas trzech liczb i jedyną informację, która wymaga działania: wolne okno do zapełnienia.
Co dostaje największy znak
Na macOS pierwszeństwo przejmuje godzina następnej wizyty, ale różnica stopni jest mniejsza niż na telefonie: monitor stoi bliżej i patrzy się na niego dłużej. Dlatego 12:15 ma 20 punktów zamiast 34, a zaoszczędzone miejsce idzie na czwarty wiersz listy.
Wolne okno jako jedyny alarm
Pas ostrzegawczy pojawia się tylko wtedy, gdy w grafiku jest luka krótsza niż 30 minut, której nie da się sprzedać jako pełna usługa. To jedyny element w całym zestawie widżetów, który używa koloru ostrzeżenia - gdyby świecił codziennie, przestałby cokolwiek znaczyć.
Widżet macOS dzieli kod i oś czasu z iOS, ale ma własny wyzwalacz: aplikacja desktopowa jest zwykle otwarta cały dzień, więc po każdym zapisie w kalendarzu woła reloadTimelines bezpośrednio, bez czekania na wpis z osi.
Wolne okno przeliczamy przy każdym odświeżeniu, nie trzymamy go w stanie - luka znika w sekundzie, w której ktoś ją zajmie, a widżet pokazujący nieaktualne wolne okno kosztuje telefon do klientki i niepotrzebną rozmowę.
10 Stany
Stany brzegowe
Widżet i zegarek żyją poza aplikacją, więc muszą umieć trzy rzeczy, których ekran główny nigdy nie robi: przyznać się, że nic jeszcze nie wiedzą, przyznać się, że nie ma czego pokazać, i zapytać, zanim skasują wizytę. To jedyne miejsca w wariancie A, w których wolno użyć cienia --pz-sh-3 i warstwy --pz-z-modal.
Wtorek, 8 września
Grafik dnia
- Zuzanna KaczmarekUzupełnienie hybrydy170 zł
- Alicja NowickaUzupełnienie hybrydy170 zł
- Patrycja GórskaManicure hybrydowy + zdobienie x3265 zł
Odwołać wizytę?
Alicja Nowicka, wtorek 8 września, 12:15, uzupełnienie hybrydy. Zaliczka 100 zł wróci na saldo klientki.
Arkusz potwierdzenia akcja niszcząca
Wjeżdża z dołu w 420 ms, uchwyt 36 x 4, tło przygaszone i rozmyte. Kwota zaliczki stoi w pytaniu, bo to ona decyduje o odpowiedzi.
Pustka 364 x 382
Nagłówek zostaje, bo widżet bez nazwy studia wygląda na zepsuty. Paznokieć jest wypełniony --pz-sand i to jedyny raz, kiedy rysunek jest większy od liczby.
Szkielet .placeholder
Ta sama siatka co w gotowym widżecie, tylko treść zastąpiona plamą --pz-sand. Żadnego kręcącego się kółka: widżet nigdy nie prosi o cierpliwość, tylko o chwilę.
Teraz
Zuzanna K.
Uzupełnienie hybrydy
00:42
bez telefonu od 11:12
Zegarek bez telefonu pierścień wygaszony
Po 15 minutach bez synchronizacji pierścień schodzi z Cynobru na --pz-on-ink-3, a cyfry zostają. Liczba przestaje być prawdą, więc przestaje być akcentem.
- Zuzanna K.Uzupełnienie hybrydy
- Alicja N.Uzupełnienie hybrydy
- Patrycja G.Manicure hybrydowy + zdobienie x3
- Klaudia W.Manicure hybrydowy
- Magdalena L.Manicure japoński
Ostatni znany grafik sygnatura czasu
Lista zostaje w całości, bo nieaktualny grafik jest wart więcej niż pusty ekran. Nagłówek zamienia licznik wizyt na godzinę ostatniego zapisu.
Sprawdź w Pazy
Live Activity po staleDate 364 x 116
Pierścień pusty, licznik zdjęty, przyciski zdjęte. Karta nie zgaduje, ile trwa wizyta, tylko odsyła tam, gdzie leży prawda.
Pytamy tylko przed skasowaniem
Potwierdzenia domagają się dwie akcje w całym wariancie: odwołanie wizyty i usunięcie klientki. Reszta idzie od razu i dostaje toast z „Cofnij", bo pytanie przy każdej zmianie uczy stukać w „Tak" bez czytania. Na desktopie ten sam tekst siedzi w modalu 560 px, na telefonie w arkuszu przyklejonym do dolnej krawędzi - kciuk nie sięga środka ekranu.
Szkielet ma kształt treści
Plamy w szkielecie mają te same szerokości co godzina, nazwisko i kwota, które za chwilę je zastąpią. Dzięki temu nic nie skacze przy pierwszym rysowaniu, a stylistka widzi kątem oka, że to jej widżet, zanim dane dojdą. Szkielet trwa jedno przemalowanie, nie animuje się i nie pulsuje.
Stare dane to nie awaria
Zegarek bez telefonu nie pokazuje komunikatu o błędzie, tylko ostatni znany grafik z godziną zapisu. Błąd oznacza „nie mogę pracować", a tu można: grafik sprzed pół godziny wystarczy, żeby wiedzieć, kto siedzi na fotelu. Znika tylko to, co kłamie - żywy licznik i akcent na pierścieniu.
Zegarek: 15 minut bez synchronizacji gasi pierścień i dokłada sygnaturę czasu. Live Activity: staleDate to zaplanowany koniec plus 20 minut, po nim karta blednie i odsyła do aplikacji. Widżet iOS: TimelineReloadPolicy na najbliższą zmianę stanu, a gdy system nie odświeży na czas, oś zostaje z ostatniej znanej wersji i nie udaje bieżącej.
Pustka i szkielet nigdy nie występują razem. Szkielet oznacza „nie wiem jeszcze", pustka oznacza „wiem i nie ma nic" - pomylenie tych dwóch stanów każe stylistce czekać na dane, których nie będzie.