Design în condiții de siguranță mobilă

1) Principii mobile-safe

1. Thumb-first: zone de acțiune - în degetul mare (navigație de jos, TAB/primar din dreapta de mai jos).
2. Touch-friendly: obiective ≥ 40-48 px cu câmpuri; distanta ≥ 8-12 px.
3. Zona de siguranță prin proiectare: luăm în considerare decupajele/zonele de gesturi ('env (safe-area-inset-)').
4. Viteza este mai importantă decât „frumusețea”: LCP ≤ 2. 5s, INP ≤ 200ms, CLS ≤ 0. 1 (p75).
5. Reținere: modale minime, formulare minime, autocomplete maxime.
6. Rețele și baterii: trafic economic, modul offline, retribuții competente.

2) Grilă, puncte de întrerupere și zonă de siguranță

Puncte de întrerupere: ≤ 480 (mobil), 481-768 (comprimat vertical), 769-1024 (comprimat orizontal).
Containere cu lățime maximă, carduri flexibile 1-2 coloane.
Panouri inferioare ≥ 56 px, stoc pentru navigarea prin gesturi.

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) Text, butoane și interacțiuni

Text: 16-18 px bază, linie-la-linie 1. 4–1. 6, lungime linie 40-70 caractere.
Butoane: înălțime 44-52 px, focalizare clară/activ/dezactivat; pictograma + text, nu numai pictograma.
Gesturile au întotdeauna o alternativă (buton/meniu/punct fierbinte).
Animațiile sunt pe „transformare/opacitate” și respect „preferă mișcarea redusă”.

4) Formulare, tastaturi și autocomplete

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" />

Măștile sunt moi (afișăm formatul, dar nu rupeți intrarea).

5) Navigare și arhitectura ecranului

Navigarea de jos (până la 5 puncte) + gestul „înapoi”.
Până la 3-5 robinete la acțiunea țintă.
Evitați „hamburgerul” pentru secțiunile critice; utilizare/file segmentate.
UI prevede: „încărcare/gol/eroare/succes” - explicit, cu acțiuni și explicații.

6) Performanță și economii

Widget-uri de cod și leneș; diagrame/carduri de încărcare „la cerere”.
Resurse critice - „preîncărcare”, restul - „amânare ”/„ leneș”.
Imagini AVIF/WebP +' srcset/mărimi', 'încărcare =” leneș”'.
Fonturi: 1 WOFF2 variabilă, 'font-display: swap', preîncărcare numai de bază.
Caching și offline prin intermediul Service Worker (PWA), „Stale-în timp ce-revalidate”.

7) Rețele, offline și retroactive

3G/high ușurință latență: cerere limită, butching, jittered backoff.
Ecran offline cu memorie cache de date critică și coadă de sincronizare.
Respectați economia de date: Sugestii client/Salvați-date → imagini ușoare, fără auto-video.

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

8) Disponibilitate (A11y) pe mobil

Control complet al tastaturii/comutatorului și focalizare lizibilă.
Contrast ≥ WCAG AA, text alternativ („alt”, „aria-label”).
Obiective mari și animații de pauză; gesturile sunt duplicate cu butoane.
Pentru diagrame - un scurt rezumat al textului și un tabel de date.

9) Temă întunecată, luminozitate și haptice

Tema întunecată nu este doar o inversiune; verificați contrastele și accentele de culoare.
Respectați tema sistemului („preferă schema de culori”).
Haptics - dozat (succes/eroare), capacitatea de a dezactiva.

10) Confidențialitate, permise și securitate

Permisiuni numai în momentul valorii (camera → scanare document).
Explicarea „de ce” și retragerea fără permisiune.
WebAuthn/biometrice în loc de parolă; managerii de parole sunt acceptate.
Ascundeți câmpurile sensibile la pliere; timpi de avertizare.

11) notificări push și sarcini de fundal

Scenarii de valoare clară, nu frecvente; ore liniştite.
Un singur robinet dezabonare și centru de preferințe.
Vânătăi de fundal - în porțiuni mici, cu restricții de baterie/rețea.

12) Imagini, medii și adaptabilitate

Înlocuitor specificat de dimensiuni → zero CLS.
Video în mod implicit fără autoplay, cu subtitrări și controale; bitrate adaptive.
Icoane - vector (SVG) sau sprite; Nu încărcați seturi de 1MB.

13) Fragmente și setări

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) Planul de încercare (minim)

Dispozitive: 1 iOS + 1 Android (ecran mic/mediu/mare), portret/peisaj.
Rețele: offline, 3G, 4G (accelerație); Activaţi Salvare-date.
Disponibilitate: scripturi VoiceOver/TalkBack, trecere tastatură, contrast.
Performanță: Web-Vitals (RUM), profiler; liste mari, tastare/derulare/gesturi.
Stabilitate: rotație, pliere/returnare, uciderea procesului → restabilirea stării.
Securitate: permisiuni, timp de sesiune, ascunderea datelor private, date biometrice.

15) Măsurători mobile sigure

LCP/INP/CLS (p75, numai pentru mobil).
Time-to-Action (înainte de clic țintă primară).
Atingeți Precizie (cota de robinete false ale elementelor de închidere).
Sesiuni fără crash/rata ANR (aplicații/webview).
Date pe sesiune și impactul bateriei.
Puful şi logodna opt-in/opt-out.

16) Anti-modele

Butoane 28-32 px, liste dense, „cărți” fără câmp - ratează.
Text 12-14 px pe un fundal gri deschis.
Modalități peste modale; închiderea numai prin gest.
Autoplay video/animații pe 3G/Save-Data.
Caracteristici numai gesturi, fără buton/meniu.
Neînregistrat pentru zona sigură → conținut suprapus cu „breton” sau un panou glisant.

17) Lista de verificare a ecranului

• Obiective ≥ 48 px, liniuțe ≥ 8-12 px
• Safe-area учтен ('viewport-fit = cover', 'env (safe-area-inset-)')
• Text ≥ 16 px, contrast AA, focus/activ vizibil
• Formulare: corecte „tip/inputmode/autocomplete”, lucrări autocomplete
• LCP ≤ 2. 5s, INP ≤ 200ms, CLS ≤ 0. 1 (mobil)
• Blocuri grele cu încărcare leneșă, liste de sub-eșantionare
• Ecran offline, retray cu backoff, modul Salvare-date
• Fluffs și permise - la cerere, cu explicație și refuz
• Temă întunecată și redusă-mișcare susținută
• Teste: iOS/Android, portret/peisaj, 3G/offline, SR pass

18) Planul de implementare (3 iterații)

• Grila și zona de siguranță, 48 obiective px, tipuri de tastatură/autocomplete, de bază Web-Vitals, imagini leneș, temă întunecată.

• Cod-split, conţinut-vizibilitate, offline + SW, Salvare-Data mod, Retray/cozi, stat de recuperare, A11y audit.

• Plăci ROM, analiza traficului/bateriei, haptice, scripturi de permisiune, îmbunătățirea listei (virtualizare), zile regulate de joc ale rețelelor mobile.

19) Mini-Întrebări frecvente

Am nevoie de un „meniu mobil” separat?
Da, dar prioritatea este navigarea de jos cu 3-5 puncte; hamburger - pentru secundar.

Cum de a reduce ratările butoanelor?
Creșteți obiectivele la 48 px, adăugați câmpuri în jur, răspândiți vertical, utilizați haptic pentru „succes/eroare”.

Offline necesar?
Pentru scenarii critice, da: cache, coadă de acțiuni și solicitări oneste către utilizator.

Rezultat

Designul mobil este o combinație între ergonomia tactilă, contabilitatea zonei sigure, performanța, disponibilitatea și rezistența la grilă/baterie. Urmăriți listele de verificare, măsurați semnele vitale web cu utilizatori reali, respectați confidențialitatea și setările sistemului - iar interfața dvs. va fi convenabilă și fiabilă pe orice dispozitiv mobil.