Mobile-safe dizayn

1) Mobile-safe tamoyillari

1. Thumb-first: ta’sir zonalari - bosh barmoq doirasida (pastki navigatsiya, FAB/pastki o’ngda primary).
2. Touch-friendly: 40-48 px ≥ maqsadlar; masofa ≥ 8-12 px.
3. Safe-area by design: (’env (safe-area-inset-)’).
4. Tezlik «go’zallikdan» muhimroqdir: LCP ≤ 2. 5 c, INP ≤ 200 ms, CLS ≤ 0. 1 (p75).
5. Vazminlik: minimal modalkalar, minimal shakllar, maksimal avto toʻldirish.
6. Tarmoqlar va batareya: tejamkor trafik, oflayn rejim, savodli retraylar.

2) To’rlar, breakpointlar va safe-area

Breykpindlar: ≤ 480 (mobayl), 481-768 (planshet vertikal), 769-1024 (planshet gorizontal).
Max-width konteynyerlari, 1-2 ustunli egiluvchan kartochkalar.
Pastki panellar ≥ 56 px, imo-ishora navigatsiyasi uchun zaxira.

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) Matn, tugmalar va interaksiyalar

Matn: 16-18 px bazaviy, satrlararo 1. 4–1. 6, satr uzunligi 40-70 belgi.
Tugmalar: balandligi 44-52 px, aniq fokus/aktiv/disabled; belgi + matn, faqat belgi emas.
Imo-ishoralar har doim muqobil (tugma/menyu/issiq nuqta).
Animatsiyalar’transform/opacity’va’prefers-reduced-motion’ga hurmat qilinadi.

4) Shakllar, klaviatura va avtomobil to’ldirish

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

Niqoblar yumshoq (formatni koʻrsatamiz, lekin kiritishni buzmaymiz).

5) Navigatsiya va ekranlar arxitekturasi

Pastki navigatsiya (5 punktgacha) + «orqaga» imo-ishorasi.
Maqsadli ishlashgacha 3-5 tagacha.
Tanqidiy bo’limlar uchun «gamburger» dan qoching; tablar/segmented.
UI holatlari:’loading/empty/error/success’- aniq, harakatlar va tushuntirishlar bilan.

6) Unumdorlik va tejamkorlik

Code-split va dangasa vidjetlar; grafiklar/xaritalarni «talab bo’yicha» yuklaymiz.
Tanqidiy resurslar -’preload’, qolganlari -’defer ’/’ lazy’.
AVIF/WebP +’srcset/sizes’,’loading =’lazy’tasvirlari.
Shriftlar: 1 variable WOFF2,’font-display: swap’, preload faqat asosiy shriftlar.
Service Worker (PWA),’stale-while-revalidate’orqali kesh va oflayn.

7) Tarmoqlar, oflayn va retralar

3G/yuqori kechikish: so’rovlar limiti, batching, jittered backoff.
Muhim maʼlumotlar keshi va sinxronlash navbatiga ega oflayn ekran.
Maʼlumotlarni tejashni hurmat qiling: Client Hints/Save-Data → yengil tasvirlar, avto-videosiz.

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

8) Mobailda foydalanish imkoniyati (A11y)

Klaviatura/o’zgartirish moslamalari bilan to’liq boshqarilishi va o’qish mumkin bo’lgan fokus.
Kontrast ≥ WCAG AA, muqobil matn (’alt’,’aria-label’).
Katta targetlar va animatsiya pauzalari; imo-ishoralar tugmalar bilan takrorlanadi.
Diagrammalar uchun - qisqa matnli rezyume va ma’lumotlar jadvali.

9) Qorong’u mavzu, yorqinlik va haptics

Qorong’u mavzu shunchaki inversiya emas; kontrastlar va ranglarni tekshiring.
Tizim mavzusini hurmat qiling (’prefers-color-scheme’).
Haptics - dozalangan (muvaffaqiyat/xato), oʻchirish imkoniyati.

10) Maxfiylik, ruxsatnomalar va xavfsizlik

Ruxsatnomalar faqat qiymatli paytda (kamera → hujjat skaneri).
«Nima uchun» tushuntirish va ruxsatsiz fallback.
parol o’rniga WebAuthn/biometriya; maxfiy soʻz boshqaruvchilari qoʻllab-quvvatlanmoqda.
Yopilganda sezgir maydonlarni yashiring; ogohlantiruvchi taymautlar.

11) Push-bildirishnomalar va fon vazifalari

Aniq qiymat stsenariylari, bo’lmasin; jim soatlar.
One-tap unsubscribe va afzalliklar markazi.
Orqa fon sinki - kichik qismlarda, batareya/tarmoq bo’yicha cheklovlar bilan.

12) Tasvirlar, media va moslashuvchanlik

Belgilangan oʻlchamdagi Placeholder → nol CLS.
Andoza video avtopleysiz, subtitrlar va nazoratli; moslashuvchan bitratlar.
Ikonkalar - vektor (SVG) yoki sprayt; 1 MB to’plamlarni yuklamang.

13) Snippetlar va sozlamalar

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) Test-reja (minimal)

Qurilmalar: 1 iOS + 1 Android (kichik/o’rta/katta ekran), portret/landshaft.
Tarmoqlar: oflayn, 3G, 4G (throttle); Save-Data.
Foydalanish imkoniyati: VoiceOver/TalkBack skriptlari, klaviatura o’tish joyi, kontrast.
Perfomans: Web-Vitals (RUM), profillovchi; katta roʻyxatlar, kirish/skroll/imo-ishoralar.
Barqarorlik: rotatsiya, burilish/qaytish, jarayonni o’ldirish → holatni tiklash.
Xavfsizlik: ruxsatnomalar, sessiya vaqti, shaxsiy ma’lumotlarni yashirish, biometriya.

15) Mobile-safe metrikasi

LCP/INP/CLS (p75, faqat mobil).
Time-to-Action (birlamchi maqsadli bosishgacha).
Tap Accuracy (yaqin elementlarning soxta toplari ulushi).
Crash-free sessions/ANR rate (ilovalar/vebvyu).
Data per session va Battery impact (orqa fon/old plan).
Opt-in/opt-out mo’yna va engagement.

16) Anti-patternlar

28-32 px tugmalari, zich roʻyxatlar, maydonsiz «xaritalar» - xatolar.
Matn 12-14 px och kulrang fonda.
Modalkalar ustiga modalkalar; faqat imo-ishora bilan yopish.
Videoni/animatsiyani 3G/Save-Data.
«Faqat imo-ishora», tugmasi/menyusisiz.
Hisobga olinmagan safe-area → kontentni «chelka» yoki svayp paneli bilan yopish.

17) Ekranning chek-varaqasi

• Maqsadlar ≥ 48 px, cheklovlar ≥ 8-12 px
• Safe-area учтен (`viewport-fit=cover`, `env(safe-area-inset-)`)
• Matn ≥ 16 px, AA kontrast, fokus/aktiv koʻrinadi
• Shakllar: toʻgʻri’type/inputmode/autocomplete’, avtomatik toʻldirish ishlamoqda
• LCP ≤ 2. 5 c, INP ≤ 200 ms, CLS ≤ 0. 1 (mobayl)
• Og’ir bloklarni lazy-loading, downsampling ro’yxatlari
• Oflayn ekran, backoff retraalari, Save-Data rejimi
• Mo’ynalar va ruxsatnomalar - talab bo’yicha, tushuntirish va rad etish bilan
• Qorong’u mavzu va reduced-motion qo’llab-quvvatlandi
• Testlar: iOS/Android, portret/landshaft, 3G/oflayn, SR-o’tish

18) Joriy etish rejasi (3 ta iteratsiya)

• To’r va safe-area, 48 px targetlar, klaviatura/avto to’ldirish turlari, asosiy Web-Vitals, lazy tasvirlar, qorong’u mavzu.

• Code-split, content-visibility, oflayn + SW, Save-Data rejimi, retralar/navbatlar, holatni tiklash, A11y-audit.

• RUM-dashbordlar, trafik/batareya tahlili, haptics, ruxsatnoma ssenariylari, ro’yxatlarni yaxshilash (virtualizatsiya), mobil tarmoqlarning muntazam game-days.

19) Mini-FAQ

Alohida «mobil menyu» kerakmi?
Ha, lekin ustuvorlik - 3-5 bandli quyi navigatsiya; gamburger - ikkinchi darajali uchun.

Tugmalar boʻyicha xatolarni qanday kamaytirish mumkin?
Maqsadlarni 48 px ga ko’paytiring, atrofdagi maydonlarni qo’shing, vertikal chizing, «muvaffaqiyat/xato» uchun haptic’dan foydalaning.

Oflayn muhimmi?
Tanqidiy stsenariylar uchun - ha: kesh, harakatlar navbati va foydalanuvchiga halol maslahatlar.

Jami

Mobile-safe dizayn - bu teginish ergonomikasi, safe-area hisobi, unumdorlik, tarmoqlarga/batareyaga kirish va chidamlilik kombinatsiyasi. Chek-varaqlarga amal qiling, haqiqiy foydalanuvchilar bilan Web-Vitals o’lchang, maxfiylik va tizim sozlamalarini hurmat qiling - va sizning interfeysingiz har qanday mobil qurilmada qulay va ishonchli bo’ladi.