Konstrukcja mobilna bezpieczna

1) Zasady bezpieczeństwa mobilnego

1. Kciuk-pierwszy: strefy działania - w obrębie kciuka (nawigacja dolna, FAB/podstawowa od prawej poniżej).
2. Przyjazne dla dotyku: cele ≥ 40-48 px z polami; odległość ≥ 8-12 px.
3. Obszar bezpieczny według projektu: bierzemy pod uwagę kawałki/strefy gestów („(bezpieczny-obszar-wkład-)”).
4. Prędkość jest ważniejsza niż „piękno”: LCP ≤ 2. 5s, INP ≤ 200 ms, CLS ≤ 0. 1 (p75).
5. Urządzenie przytrzymujące: minimalne moduły, minimalne formy, maksymalnie autokompletne.
6. Sieci i akumulator: ruch ekonomiczny, tryb offline, kompetentne przekładki.

2) Siatka, punkty przełomowe i bezpieczna strefa

Punkty graniczne: ≤ 480 (mobilne), 481-768 (tabletki pionowe), 769-1024 (tabletki poziome).
Pojemniki o maksymalnej szerokości, elastyczne karty 1-2 kolumny.
Dolne panele ≥ 56 px, zapasy do nawigacji gestowej.

css
:root { --inset-b: env(safe-area-inset-bottom); --inset-t: env(safe-area-inset-top); }
.app { padding-bottom: calc(16px + var(--inset-b)); padding-top: calc(8px + var(--inset-t)); }

3) Tekst, przyciski i interakcje

Tekst: 16-18 px base, line-to-line 1. 4–1. 6, długość linii 40-70 znaków.
Przyciski: wysokość 44-52 px, jasne ostrość/aktywa/wyłączone; ikona + tekst, nie tylko ikona.
Gesty zawsze mają alternatywę (przycisk/menu/hot spot).
Animacje są na „transformacji/nieprzezroczystości” i szacunek „preferuje zredukowany ruch”.

4) Formy, klawiatury i autokomplete

html
<input type="email" inputmode="email" autocomplete="email">
<input type="tel" inputmode="tel" autocomplete="tel">
<input type="number" inputmode="numeric" pattern="[0-9]">
<input type="text" autocomplete="one-time-code" />

Maski są miękkie (pokazujemy format, ale nie łamiemy wejścia).

5) Nawigacja i architektura ekranu

Nawigacja dolna (do 5 punktów) + gest „z powrotem”.
Do 3-5 kranów do działania docelowego.
Unikać „hamburgera” dla odcinków krytycznych; używać/segmentowane zakładki.
UI stwierdza: „załadowanie/puste/błąd/sukces” - jednoznacznie, z działaniami i wyjaśnieniami.

6) Wyniki i oszczędności

Dzielone i leniwe widżety; mapy/karty ładować „na żądanie”.
Zasoby krytyczne - 'preload', reszta - 'defer '/' leniwy'.
Obrazy AVIF/WebP + 'srcset/sizes',' loading = 'leniwy'.
Czcionki: 1 zmienna WOFF2, 'font-display: swap', preload only basic.
Buforowanie i offline za pośrednictwem pracownika serwisowego (PWA), „stale-while-revalidate”.

7) Sieci, offline i przekładnie

3G/high opóźnienia: limit żądania, butching, jittered backoff.
Ekran offline z krytyczną pamięcią podręczną danych i kolejką synchronizacji.
Szanuj gospodarkę danych: Wskazówki klienta/Zapisz-dane → obrazy światła, brak auto-video.

js const saveData = navigator.connection?.saveData;
const slow = ['slow-2g','2g'].includes(navigator.connection?.effectiveType);
if (saveData          slow) enableLiteMode(); // менее тяжелые ресурсы

8) Dostępność (A11y) na telefonie komórkowym

Pełna klawiatura/przełącznik sterowania i czytelny ostrość.
Kontrast ≥ WCAG AA, tekst alternatywny ("alt'," aria-label ").
duże cele i animacje pauzy; gesty są powielane guzikami.
Dla diagramów - krótkie podsumowanie tekstu i tabelę danych.

9) Ciemny motyw, jasność i haptics

Ciemny motyw nie jest tylko inwersją; sprawdź kontrasty i akcenty kolorów.
Przestrzegaj tematu systemu („preferuje kolorystykę”).
Haptics - dawkowanie (sukces/błąd), możliwość wyłączenia.

10) Prywatność, zezwolenia i bezpieczeństwo

Uprawnienia tylko w momencie wartości (kamera → skanowanie dokumentów).
Wyjaśnienie „dlaczego” i upadek bez pozwolenia.
WebAuthn/biometria zamiast hasła; Menedżerowie haseł są obsługiwani.
Ukryj pola wrażliwe podczas składania; Czas ostrzegawczy.

11) Push powiadomienia i zadania podstawowe

Jasne scenariusze wartości, nie częste; spokojne godziny.
One-tap unsubscribe i centrum preferencji.
Siniaki tła - w małych porcjach, z ograniczeniami baterii/sieci.

12) Obrazy, media i zdolność adaptacji

Rozmiar określony przez rolnika → zero CLS.
Video domyślnie bez autoplay, z napisami i sterownikami; adaptacyjne bitraty.
Ikony - wektor (SVG) lub sprite; Nie ładuj zestawów 1MB.

13) Snippets i ustawienia

html
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<meta name="theme-color" content="#11131A">

css
.card { content-visibility: auto; contain-intrinsic-size: 600px 400px; }

css
@media (prefers-reduced-motion: reduce) { { animation: none!important; transition: none!important; } }

14) Plan badania (minimum)

Urządzenia: 1 iOS + 1 Android (mały/średni/duży ekran), portret/krajobraz.
Sieci: offline, 3G, 4G (przepustnica); Włącz zapisywanie danych.
Dostępność: Skryptów Vo, pass klawiatury, kontrast.
Wydajność: Web-Vitals (RUM), profiler; duże listy, pisanie/przewijanie/gesty.
Stabilność: rotacja, składanie/powrót, zabijanie procesu → przywracanie stanu.
Bezpieczeństwo: uprawnienia, czas sesji, ukrywanie danych prywatnych, biometria.

15) Metryki mobilne bezpieczne

LCP/INP/CLS (p75, tylko mobilne).
Czas do działania (przed kliknięciem głównego celu).
Dotknij Dokładność (udział fałszywych kranów elementów zamkniętych).
Sesje bez awarii/wskaźnik ANR (aplikacje/webview).
Dane na sesję i uderzenie baterii.
Opt-in/opt-out puszek i zaangażowanie.

16) Anty-wzory

Przyciski 28-32 px, gęste listy, „karty” bez pola - brakuje.
Tekst 12-14 px na jasnoszarym tle.
Modale nad modalami; zamykanie tylko przez gest.
Autoplay wideo/animacje na 3G/Save-Data.
Funkcje tylko do gestów, brak przycisku/menu.
Brak dostępu do bezpiecznej strefy → nakładanie się zawartości z "bangs' lub panelu skręcania.

17) Lista kontrolna ekranu

• Cele ≥ 48 px, tiret ≥ 8-12 px
• Bezpieczne pole („viewport-fit = cover”, „(safe-area-inset-)”)
• Tekst ≥ 16 px, kontrast AA, widoczne ognisko/aktywa
• Formularze: poprawne 'typ/inputmode/autocomplete', autocomplete works
• LCP ≤ 2. 5s, INP ≤ 200 ms, CLS ≤ 0. 1 (mobilny)
• Leniwe ładowanie ciężkich bloków, listy downsampling
• Ekran offline, przekaźnik z backoff, tryb zapisu danych
• Strumienie i pozwolenia - na żądanie, z wyjaśnieniem i odmową
• Ciemny motyw i ograniczony ruch
• Testy: iOS/Android, portret/krajobraz, 3G/offline, SR pass

18) Plan realizacji (3 iteracje)

• Siatka i bezpieczna strefa, cele 48 px, typy klawiatury/autokompletne, podstawowe Web-Vitals, leniwe obrazy, ciemny motyw.

• Podział kodu, widoczność treści, offline + SW, tryb zapisu danych, retrasy/kolejki, odzyskiwanie stanu, audyt A11y.

• Tablice RUM, analiza ruchu/baterii, haptics, skrypty uprawnień, poprawa listy (wirtualizacja), regularne dni gry w sieciach mobilnych.

19) Mini-FAQ

Czy potrzebuję oddzielnego „menu mobilnego”?
Tak, ale priorytetem jest nawigacja dolna z 3-5 punktów; hamburger - dla drugorzędnego.

Jak zmniejszyć braki przycisków?
Zwiększyć cele do 48 px, dodać pola wokół, rozłożyć pionowo, użyć haptyka dla „sukces/błąd”.

Wymagane offline?
W przypadku scenariuszy krytycznych tak: pamięć podręczna, kolejka akcji i uczciwe zapytania do użytkownika.

Wynik

Konstrukcja mobilna jest połączeniem ergonomii dotykowej, rachunkowości bezpiecznej przestrzeni, wydajności, dostępności i odporności na siatkę/baterie. Śledź listy kontrolne, zmierz Web-Vitals z prawdziwymi użytkownikami, szanuj prywatność i ustawienia systemu - a Twój interfejs będzie wygodny i niezawodny na każdym urządzeniu mobilnym.