Mobile-safe dizaýny

1) Mobile-safe ýörelgeleri

1. Thumb-first: hereket zolaklary - baş barmagyň içinde (aşaky nawigasiýa, FAB/ilkinji aşaky sag).
2. Touch-friendly: maksatlar ≥ 40-48 px meýdanlary bilen; aralyk ≥ 8-12 px.
3. Safe-area by design: kesilen/hereket zolaklaryny göz öňünde tutýarys ('env (safe-area-inset-)').
4. Tizlik "gözellikden" has möhümdir: LCP ≤ 2. 5 c, INP ≤ 200 ms, CLS ≤ 0. 1 (p75).
5. Çäklendirme: minimal modallar, minimal formalar, iň köp awto doldurmalar.
6. Torlar we batareýa: tygşytly traffik, awtonom re modeim, sowatly retralar.

2) Tor, arakesme nokatlary we safe-area

Breýkpointler: ≤ 480 (mobile), 481-768 (planşet dik), 769-1024 (planşet gorizontal).
Max-width bilen konteýnerler, çeýe kartoçkalar 1-2 sütün.
Aşaky paneller ≥ 56 px, hereket nawigasiýasy üçin ätiýaçlyk.

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, düwmeler we interaksiýalar

Tekst: 16-18 px esasy, hatara 1. 4–1. 6, setiriň uzynlygy 40-70 belgi.
Düwmeler: beýikligi 44-52 px, açyk fokus/aktiw/disabled; nyşan + tekst, diňe nyşan däl.
Yşaratlaryň elmydama alternatiwasy bar (düwme/menýu/gyzgyn nokat).
Animasiýa - 'transform/opacity' -de we 'prefers-reduced-motion' -a hormat goýýar.

4) Formalar, klawiatura we awtomatiki doldurmak

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

Maskalar ýumşak (formaty görkezýäris, ýöne girişi bozmaýarys).

5) Ekranlaryň nawigasiýasy we arhitekturasy

Aşaky nawigasiýa (5 nokada çenli) + "yza" yşaraty.
Maksatly herekete çenli 3-5 tapa çenli.
Möhüm bölümler üçin "gamburgerden" gaça duruň; tab/segmented.
UI ýagdaýlary: 'loading/empty/error/success' - hereketler we düşündirişler bilen aç-açan.

6) Öndürijilik we tygşytlamak

Code-split we ýalta widgetler; grafikleri/kartlary "talap boýunça" ýükleýäris.
Möhüm çeşmeler - 'preload', galanlary - 'defer '/' lazy'.
AVIF/WebP + 'srcset/sizes', 'loading =' lazy 'şekilleri.
Şriftler: 1 variable WOFF2, 'font-display: swap', preload diňe esasy.
Service Worker (PWA), 'stale-while-revalidate' arkaly kesmek we oflayn.

7) Torlar, awtonom we retra

3G/ýokary gijä galmak üçin dostluk: soraglaryň çäkleri, batching, jittered backoff.
Möhüm maglumatlar kesesi we senkronizasiýa nobaty bolan awtonom ekran.
Maglumatlary tygşytlamaga hormat goýuň: Client Hints/Save-Data → ýeňil şekiller, awto-wideo ýok.

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

8) Mobilde elýeterlilik (A11y)

Klawiatura/açarlaryň doly dolandyrylmagy we okalýan fokus.
WCAG AA ≥ kontrast, alternatiwalaryň teksti ('alt', 'aria-label').
Uly nyşanlar we animasiýa arakesmesi; yşaratlar düwmeler bilen köpeldilýär.
Diagrammalar üçin - gysgaça tekst rezýumesi we maglumatlar tablisasy.

9) Garaňky tema, ýagtylyk we haptics

Garaňky tema diňe bir tersine däl; gapma-garşylyklary we reňk aksentlerini barlaň.
Ulgam temasyna hormat goýuň ('prefers-color-scheme').
Haptics - dozada (üstünlik/ýalňyşlyk), öçürmek ukyby.

10) Gizlinlik, rugsatlar we howpsuzlyk

Diňe gymmatlyk pursatynda rugsat (kamera → resminama skany).
"Näme üçin" düşündirişi we fallback rugsatsyz.
Parolyň ýerine WebAuthn/biometrik; parol dolandyryjylary goldanýar.
Aýlanylanda duýgur ýerleri gizläň; duýduryş bilen wagt.

11) Push-bildirişler we fon meseleleri

Aýdyň gymmatlyk ssenariýalary, bölmek däl; asuda sagat.
One-tap unsubscribe we islegler merkezi.
Arka reňkler - batareýa/tor çäklendirmeleri bilen kiçi böleklerde.

12) Şekiller, metbugat we uýgunlaşma

Bellenen ölçegli Placeholder → nol CLS.
Awtopleýsiz, subtitrli we gözegçiliksiz wideo; adaptasiýa bitretleri.
Nyşanlar - wektor (SVG) ýa-da spraýt; 1 MB-den toplumlary ýüklemäň.

13) Snippetler we sazlamalar

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) Synag-meýilnama (iň az)

Enjamlar: 1 iOS + 1 Android (kiçi/orta/uly ekran), portret/landşaft.
Torlar: oflayn, 3G, 4G (throttle); Save-Data.
Elýeterlilik: VoiceOver/TalkBack ssenarileri, klawiatura geçişi, kontrast.
Çykyş: Web-Vitals (RUM), profilleýji; uly sanawlar, giriş/skroll/yşaratlar.
Durnuklylyk: aýlanmak, ýapmak/yzyna gaýtarmak, öldürmek → ýagdaýy dikeltmek.
Howpsuzlyk: rugsatlar, sessiýanyň wagty, şahsy maglumatlaryň gizlenmegi, biometriýa.

15) Mobile-safe metrikleri

LCP/INP/CLS (p75, diňe mobil).
Time-to-Action (ilkinji maksat basylýança).
Tap Accuracy (ýakyn elementleriň ýalan taplarynyň paýy).
Crash-free sessions/ANR rate (programmalar/webwiew).
Data per session we Battery impact (fon/öň).
Opt-in/opt-out toplar we engagement.

16) Anti-patternler

28-32 px düwmeleri, dykyz sanawlar, meýdançasyz "kartalar" - ýalňyşlyklar.
Açyk çal fonda 12-14 px tekst.
Modalkalaryň üstünde modallar; diňe yşarat bilen ýapmak.
Ekranda wideo/animasiýa 3G/Save-Data.
"Diňe yşarat" funksiýalary, düwmesiz/menýusyz.
Hasaba alynmadyk safe-area → mazmuny "bökmek" ýa-da aýlaw paneli bilen örtmek.

17) Ekranyň çek-sanawy

• Nyşanlar ≥ 48 px, girişdeler ≥ 8-12 px
• Safe-area учтен (`viewport-fit=cover`, `env(safe-area-inset-)`)
• 16 px ≥ tekst, AA kontrast, fokus/aktiw görünýär
• Formalar: dogry 'type/inputmode/autocomplete', awtomatiki doldurma işleýär
• LCP ≤ 2. 5 c, INP ≤ 200 ms, CLS ≤ 0. 1 (mobile)
• Agyr bloklary ýüklemek, downsampling sanawlary
• Awtonom ekran, backoff, Save-Data re modeimi
• Toplar we rugsatlar - talap boýunça, düşündiriş we ret etmek bilen
• Garaňky tema we reduced-motion goldanýar
• Synaglar: iOS/Android, portret/landşaft, 3G/awtonom, SR-geçiş

18) Durmuşa geçirmek meýilnamasy (3 iterasiýa)

• Tor we safe-area, 48 px nyşanlary, klawiatura/awtomatiki doldurma görnüşleri, esasy Web-Witals, lazy şekiller, garaňky tema.

• Code-split, content-visibility, offline + SW, Save-Data re modeimi, retra/nobatlar, ýagdaýy dikeltmek, A11y-audit.

• RUM-daşbordlar, traffigiň/batareýanyň derňewi, haptics, rugsat ssenarileri, sanawlary gowulandyrmak (wirtualizasiýa), ykjam torlaryň yzygiderli oýun günleri.

19) Mini-FAQ

Aýratyn "mobil menýu" gerekmi?
Hawa, ýöne ileri tutulýan ugur - 3-5 nokat bilen aşaky nawigasiýa; gamburger - ikinji derejeli üçin.

Düwmelerdäki ýalňyşlyklary nädip azaltmaly?
Maksatlaryňyzy 48 px çenli ýokarlandyryň, töweregiňizdäki meýdançalary goşuň, dik çyzyň, "üstünlik/ýalňyşlyk" üçin haptic ulanyň.

Awtonom hökmany?
Möhüm ssenariler üçin - hawa: keş, hereketleriň nobaty we ulanyja dogruçyl maslahatlar.

Jemi

"Mobile-safe" dizaýny ergonomikanyň, "safe-area" hasabynyň, öndürijiligiň, elýeterliligiň we torlara/batareýalara garşylygyň utgaşmasydyr. Çek sanawlaryny yzarlaň, hakyky ulanyjylardan Web-Witals ölçäň, gizlinlige we ulgam sazlamalaryna hormat goýuň - interfeýsiňiz islendik ykjam enjamda amatly we ygtybarly bolar.