Mobile-коопсуздук дизайн

1) Mobile-коопсуздук негиздери

1. Thumb-first: иш-аракет зоналары - баш бармактын ичинде (төмөнкү багыттоо, FAB/негизги төмөнкү оң).
2. Touch-friendly: максаттары ≥ 40-48 px талаалар менен; аралыгы ≥ 8-12 px.
3. Safe-area by design: кесип/белги зоналарын эске алуу ('env (safe-area-inset-)').
4. ылдамдыгы "сулуулук" маанилүү: LCP ≤ 2. 5 c, INP ≤ 200 ms, CLS ≤ 0. 1 (p75).
5. Токтоо: минималдуу модалдар, минималдуу формалар, максималдуу авто толуктоолор.
6. Тармактар ​ ​ жана батарея: үнөмдүү трафик, оффлайн режими, компетенттүү ретрациялар.

2) тор, breakpoint жана safe-area

Breakpoint: ≤ 480 (Мобайл), 481-768 (планшет тик), 769-1024 (планшет горизонталдуу).
Max-width менен контейнерлер, ийкемдүү карталар 1-2 колонка.
Төмөнкү панелдер ≥ 56 px, кадам багыттоо үчүн запастагы.

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) Текст, баскычтар жана кийлигишүү

Текст: 16-18 px негизги, саптар аралык 1. 4–1. 6, сап узундугу 40-70 белги.
Баскычтар: бийиктиги 44-52 px, так фокус/актив/disabled; сөлөкөт + текст, бир гана сөлөкөт эмес.
ишараттар ар дайым альтернатива бар (баскычы/меню/ысык чекит).
Анимациялар - 'transform/opacity' жана 'prefers-reduced-motion' сыйлайт.

4) Формалар, клавиатура жана авто толтуруу

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

Маскалар жумшак (форматы көрсөтүлөт, бирок кириш эмес).

5) Навигация жана экран архитектурасы

төмөнкү багыттоо (5 пунктка чейин) + ишарат "артка".
максаттуу иш-аракет 3-5 таптарга чейин.
критикалык бөлүмдөрү үчүн "гамбургер" качуу; tab/segmented колдонуу.
UI шарттары: 'loading/empty/error/success' - ачык, иш-аракеттер жана түшүндүрмөлөр менен.

6) Аткаруу жана үнөмдөө

Code-split жана жалкоо widget; графиктер/карталар "талап боюнча" жүктөлөт.
Критикалык ресурстар - 'preload', калганы - 'defer '/' lazy'.
AVIF/WebP сүрөттөрү + 'srcset/sizes', 'loading =' lazy ''.
Шрифттер: 1 variable WOFF2, 'font-display: swap', preload гана негизги.
Service Worker (PWA) аркылуу кэш жана оффлайн, 'stale-while-revalidate'.

7) Тармактар, оффлайн жана ретра

3G/жогорку кечигүү достук: сурам чеги, батчинг, jittered backoff.
Маанилүү маалыматтар кэш жана синхрондоштуруу кезеги менен оффлайн экран.
маалыматтарды сактоо урмат: Client Hints/Save-Data → жеңил сүрөттөр, эч кандай авто-Video.

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

8) Мобайл боюнча жеткиликтүү (A11y)

Толук Klaviatura/Switches башкаруу жана окулуучу Focus.
Контраст ≥ WCAG AA, текст альтернатива ('alt', 'aria-label').
Чоң максаттар жана анимация тыныгуу; ишараттар баскычтар менен кайталанат.
Диаграммалар үчүн - кыскача тексттик резюме жана маалыматтар таблицасы.

9) Караңгы тема, жарыктык жана haptics

Караңгы тема - жөн гана инверсия эмес; карама-каршылыктарды жана түстүү акценттерди текшериңиз.
Системалык теманы урматтоо ('prefers-color-scheme').
Haptics - дозалап (ийгилик/ката), өчүрүү мүмкүнчүлүгү.

10) Купуялык, уруксаттар жана коопсуздук

баалуулук учурда гана уруксат (камера → документ сканер).
түшүндүрмө "эмне үчүн" жана уруксатсыз fallback.
WebAuthn/парол ордуна биометрика; сырсөз менеджерлери колдоого алынат.
Бурулганда сезгич талааларды жашырыңыз; эскертүү менен убакыт.

11) Push-билдирүүлөр жана фон милдеттери

Так баалуулук жагдайлар, бөлүү эмес; тынч саат.
One-tap unsubscribe жана артыкчылык борбору.
Фон синктери - батареянын/тармактын чектөөлөрү менен чакан порцияларда.

12) Сүрөттөр, медиа жана адаптация

берилген өлчөмдөрү менен Placeholder → нөл CLS.
демейки Video Autoplay жок, субтитрлер жана контролдоолор менен; адаптивдүү битрейттер.
Иконалар - вектор (SVG) же спрайт; 1 MB топтомун жүктөп жок.

13) Сниппеттер жана жөндөөлөрү

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) Тест-план (минималдуу)

Түзмөктөр: 1 iOS + 1 Android (чакан/орто/чоң экран), портрет/пейзаж.
Тармактар: оффлайн, 3G, 4G (throttle); Save-Data кирет.
Жеткиликтүүлүгү: VoiceOver/TalkBack Script, Klaviatura өтүү, карама-каршы.
Аткаруу: Web-Vitals (RUM), профилдер; чоң тизмелери, киргизүү/scroll/кыймыл.
Туруктуулук: айлануу, кыскартуу/кайра, өлтүрүү жараяны → калыбына келтирүү.
Коопсуздук: уруксаттар, сессиянын тайм-аут, жеке маалыматтарды жашыруу, биометрия.

15) Мобилдик-коопсуздук Metrics

LCP/INP/CLS (p75, Мобайл гана).
Time-to-Action (баштапкы максаттуу чыкылдатуу чейин).
Tap Accuracy (жакын элементтердин жалган тапалар үлүшү).
Crash-free sessions/ANR rate (тиркемелер/вебвью).
Data per session жана Battery impact (фон/алдыңкы план).
Opt-in/opt-out мылтык жана engagement.

16) Анти-үлгүлөрү

28-32 px баскычтары, тыгыз тизмелери, "карталар" талаасыз - каталар.
Текст 12-14 px ачык боз фонунда.
Модалдардын үстүндөгү модалдар; бир гана ишарат менен жабуу.
Автоматтык видео/анимация 3G/Save-Data.
Функциялар "бир гана ишарат", баскычы/менюсу жок.
Эске алынбаган safe-area → мазмунду "челка" же свайп панели менен кайталоо.

17) Чек экраны

• Максаттуу ≥ 48 px, чегинүү ≥ 8-12 px
• Safe-area учтен (`viewport-fit=cover`, `env(safe-area-inset-)`)
• Текст ≥ 16 px, контраст AA, фокус/актив көрүнүп турат
• Формалар: туура 'type/inputmode/autocomplete', авто толтуруу иштейт
• LCP ≤ 2. 5 c, INP ≤ 200 ms, CLS ≤ 0. 1 (мобайл)
• Lasy-loading оор блоктору, downsampling тизмеси
• Оффлайн экран, backoff менен ретрайлер, Save-Data режими
• Мылтыктар жана уруксаттар - суроо-талап боюнча, түшүндүрмө жана баш тартуу менен
• Караңгы тема жана reduced-motion колдоого алынган
• Тесттер: IOS/Android, портрет/пейзаж, 3G/offline, SR өтүү

18) Ишке ашыруу планы (3 итерация)

• тор жана safe-area, 48 px максаттуу, клавиатура түрлөрү/Auto толуктоо, негизги Web-Vitals, lazy сүрөттөр, караңгы тема.

• Code-split, content-visibility, offline + SW, Save-Data режими, ретра/кезек, калыбына келтирүү, A11y-аудит.

• RUM-дашборддор, трафик/батареяны талдоо, haptics, уруксат сценарийлери, тизмелерди жакшыртуу (виртуалдаштыруу), мобилдик тармактардын үзгүлтүксүз оюндары.

19) Mini-FAQ

Өзүнчө "мобайл менюсу" керекпи?
Ооба, бирок артыкчылык - 3-5 пунктка төмөнкү багыттоо; гамбургер - экинчи даражадагы үчүн.

Кантип баскычтарында каталарды азайтуу үчүн?
Максаттарды 48 px чейин чоңойтуп, тегерегиндеги талааларды кошуп, вертикалга бөлүп, "ийгилик/ката" үчүн haptic колдонуңуз.

Оффлайн керек?
Критикалык сценарийлер үчүн - ооба: кэш, иш-аракеттердин кезеги жана колдонуучуга чынчыл кеңештер.

Жыйынтык

Mobile-safe дизайн - эргономикалык тийүү, коопсуз-аймакты эсепке алуу, аткаруу, жеткиликтүүлүк жана тармак/батарея туруктуулук айкалышы. Чек баракчаларды ээрчип, чыныгы колдонуучулардан Web-Vitals өлчөө, купуялуулукту жана системалык орнотууларды сыйлоо - жана сиздин интерфейс ар кандай мобилдик түзмөктө ыңгайлуу жана ишенимдүү болот.