Mobile-safe dizayn

1) Mobile-safe prinsipləri

1. Thumb-first: hərəkət zonaları - baş barmaq daxilində (aşağı naviqasiya, FAB/alt sağ tərəfdə primary).
2. Touch-friendly: 40-48 px ≥ hədəfləri; məsafə ≥ 8-12 px.
3. Safe-area by design: kəsiklər/jest zonaları nəzərə alınır ('env (safe-area-inset-)').
4. Sürət «gözəllik» daha vacibdir: LCP ≤ 2. 5 c, INP ≤ 200 ms, CLS ≤ 0. 1 (p75).
5. Təmkinli: minimum modalka, minimum forma, maksimum avtomatik doldurma.
6. Şəbəkələr və batareya: qənaətli trafik, oflayn rejim, səriştəli retrajlar.

2) Mesh, breakpoint və safe-area

Breykpoint: ≤ 480 (mobil), 481-768 (planşet şaquli), 769-1024 (planşet üfüqi).
Max-width ilə konteynerlər, çevik kartlar 1-2 sütunlar.
Aşağı panellər ≥ 56 px, jestli naviqasiya üçün ehtiyat.

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) Mətn, düymələr və interaksiyalar

Mətn: 16-18 px əsas, sətir arası 1. 4–1. 6, sətir uzunluğu 40-70 işarədir.
düymələr: hündürlüyü 44-52 px, aydın fokus/aktiv/disabled; nişan + mətn, yalnız nişan deyil.
Jestlərin həmişə alternativi var (düymə/menyu/qaynar nöqtə).
Animasiyalar 'transform/opacity' -dədirlər və 'prefers-reduced-motion' -a hörmət edirlər.

4) Formalar, klaviatura və avtomatik doldurma

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 yumşaqdır (formatı göstəririk, lakin girişi sındırmırıq).

5) Naviqasiya və ekran arxitekturası

Aşağı naviqasiya (5 nöqtəyə qədər) + «geri» jest.
Məqsədli fəaliyyətə qədər 3-5 tapa qədər.
kritik bölmələr üçün «hamburger» qaçın; tab/segmented istifadə edin.
UI halları: 'loading/empty/error/success' - açıq, hərəkətləri və izahatları ilə.

6) Performans və qənaət

Code-split və tənbəl widget; qrafiklər/kartlar «tələb olunur».
Kritik resurslar - 'preload', qalanları - 'defer '/' lazy'.
AVIF/WebP + 'srcset/sizes', 'loading =' lazy 'şəkilləri.
Şriftlər: 1 variable WOFF2, 'font-display: swap', preload yalnız əsas.
Service Worker (PWA), 'stale-while-revalidate' vasitəsilə caching və oflayn.

7) Şəbəkələr, oflayn və retralar

3G/yüksək gecikmə dostu: sorğu limiti, batching, jittered backoff.
Kritik data cache və sinxronizasiya növbəsi ilə oflayn ekran.
Məlumatlara qənaət edin: Client Hints/Save-Data → yüngül görüntülər, avto video olmadan.

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

8) Mobaildə mövcudluq (A11y)

Klaviatura/açarların tam idarə olunması və oxunaqlı fokus.
Kontrast ≥ WCAG AA, mətn alternativləri ('alt', 'aria-label').
Böyük hədəflər və fasilə animasiyalar; jestlər düymələrlə təkrarlanır.
Diaqramlar üçün - qısa mətn xülasəsi və məlumat cədvəli.

9) Qaranlıq mövzu, parlaqlıq və haptics

Qaranlıq mövzu yalnız bir inversiya deyil; kontrastları və rəng vurğularını yoxlayın.
Sistem mövzusuna hörmət edin ('prefers-color-scheme').
Haptics - dozalı (uğur/səhv), söndürmək imkanı.

10) Gizlilik, icazə və təhlükəsizlik

Yalnız dəyər anında icazə (kamera → sənəd skan).
Izahat «niyə» və icazəsiz fallback.
WebAuthn/parol əvəzinə biometrik; parol menecerləri dəstəklənir.
Yığıldıqda həssas sahələri gizlətmək; xəbərdarlıq ilə taymaut.

11) Push bildirişləri və fon tapşırıqları

Aydın dəyər ssenariləri, bölmək deyil; sakit saat.
One-tap unsubscribe və üstünlük mərkəzi.
Fon sinkləri - kiçik hissələrdə, batareya/şəbəkə məhdudiyyətləri ilə.

12) Şəkillər, media və adaptasiya

Placeholder müəyyən ölçüləri ilə → sıfır CLS.
Video subtitrlər və nəzarət ilə avtoplay olmadan default; adaptiv bitratlar.
İkonlar - vektor (SVG) və ya sprayt; 1 MB dəsti yükləməyin.

13) Snippets və parametrlə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) Test planı (minimum)

Cihazlar: 1 iOS + 1 Android (kiçik/orta/böyük ekran), portret/landşaft.
Şəbəkələr: oflayn, 3G, 4G (throttle); Save-Data daxil edin.
Mövcud: VoiceOver/TalkBack scripts, klaviatura keçid, kontrast.
Performans: Web-Vitals (RUM), profil; böyük siyahılar, giriş/scroll/jestlər.
Dayanıqlıq: rotasiya, bükülmə/geri dönüş, qətl prosesi → vəziyyətin bərpası.
Təhlükəsizlik: icazələr, seans vaxtı, şəxsi məlumatların gizlədilməsi, biometriya.

15) Mobil-safe metriklər

LCP/INP/CLS (p75, yalnız mobil).
Time-to-Action (ilkin hədəf klik qədər).
Tap Accuracy (yaxın elementlərin saxta tapes payı).
Crash-free sessions/ANR rate (proqramlar/vebview).
Data per session və Battery impact (fon/ön plan).
Opt-in/opt-out top və engagement.

16) Anti-nümunələr

28-32 px düymələri, sıx siyahılar, sahəsiz «kartlar» - səhvlər.
Mətn 12-14 px açıq boz fonda.
Modalların üstündəki modalkalar; yalnız jest bağlamaq.
Video/animasiyaların 3G/Save-Data.
Funksiyalar «yalnız jest», heç bir düymə/menyu.
Hesaba alınmamış safe-area → məzmunun üst-üstə düşməsi.

17) Ekran çek siyahısı

• Hədəflər ≥ 48 px, girintilər ≥ 8-12 px
• Safe-area учтен (`viewport-fit=cover`, `env(safe-area-inset-)`)
• Mətn ≥ 16 px, kontrast AA, fokus/aktiv görünür
• Formalar: düzgün 'type/inputmode/autocomplete', avtomatik doldurma işləyir
• LCP ≤ 2. 5 c, INP ≤ 200 ms, CLS ≤ 0. 1 (mobil)
• Lazy-loading ağır bloklar, downsampling siyahıları
• Oflayn ekran, backoff ilə retrajlar, Save-Data rejimi
• Toplar və icazələr - tələb, izahat və imtina ilə
• Qaranlıq mövzu və reduced-motion dəstəklənir
• Testlər: iOS/Android, portret/landşaft, 3G/offline, SR-keçid

18) Tətbiq planı (3 iterasiya)

• Mesh və safe-area, 48 px hədəfləri, klaviatura/avtomatik doldurma növləri, əsas Web-Vitals, lazy görüntülər, qaranlıq mövzu.

• Code-split, content-visibility, oflayn + SW, Save-Data rejimi, retralar/növbələr, vəziyyətin bərpası, A11y-audit.

• RUM daşbordları, trafik/batareya analizi, haptics, icazə ssenariləri, siyahıların təkmilləşdirilməsi (virtuallaşdırma), mobil şəbəkələrin müntəzəm oyun günləri.

19) Mini-FAQ

Ayrı bir «mobil menyu» lazımdır?
Bəli, amma prioritet 3-5 nöqtə ilə aşağı naviqasiya; hamburger - ikinci dərəcəli üçün.

Düymələrdəki səhvləri necə azaltmaq olar?
Hədəfləri 48 px-ə qədər artırın, ətrafa sahələr əlavə edin, şaquli şəkildə ayırın, «uğur/səhv» üçün haptic istifadə edin.

Offline tələb olunur?
Kritik ssenarilər üçün - bəli: cache, hərəkət növbəsi və istifadəçiyə dürüst ipuçları.

Yekun

Mobile-safe dizayn erqonomik toxunuş, safe-area uçot, performans, əlçatanlıq və şəbəkə/batareya müqavimət birləşməsidir. Çek vərəqlərini izləyin, Web-Vitals-ı real istifadəçilərdən ölçün, məxfiliyə və sistem parametrlərinə hörmət edin - və interfeysiniz hər hansı bir mobil cihazda rahat və etibarlı olacaq.