Mobile-safe дизайн

1) Mobile-safe принциптері

1. Thumb-first: әрекет ету аймағы - бас саусақтың шегінде (төменгі навигация, FAB/primary төменнен оң жақта).
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 мс. CLS ≤ 0. 1 (p75).
5. Ұстамдылық: минималды модалкалар, минималды пішіндер, максималды автотолтырулар.
6. Желілер мен батарея: үнемді трафик, офлайн режимі, сауатты ретрайлер.

2) Тор, брейк пункттері және safe-area

Брейкпоинттер: ≤ 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 және жалқау виджеттер; кестелерді/карталарды «талап ету бойынша» тиейміз.
Критикалық ресурстар - '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 → жеңіл бейнелер, автоматты бейне жоқ.

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

8) Мобильдегі қолжетімділік (A11y)

Пернетақта/ауыстырып қосқыштармен толық басқарылуы және оқылатын фокус.
Контраст ≥ WCAG AA, баламалар мәтіні ('alt', 'aria-label').
Үлкен таргеттер және анимация үзілісі; қимылдар түймешіктермен қайталанады.
Диаграммалар үшін - қысқаша мәтіндік түйіндеме және деректер кестесі.

9) Қараңғы тақырып, жарықтылық және haptics

Қараңғы тақырып - жай ғана инверсия емес; қарама-қайшылықтар мен түсті екпіндерді тексеріңіз.
Жүйелік тақырыпты құрметтеңіз ('prefers-color-scheme').
Haptics - дозаланған (жетістік/қате), ажырату мүмкіндігі.

10) Құпиялылық, рұқсаттар және қауіпсіздік

Тек құндылық сәтіндегі рұқсаттар (камера → құжат сканері).
«Не үшін» және рұқсатсыз fallback түсініктемесі.
WebAuthn/парольдің орнына биометрия; құпия сөз менеджерлеріне қолдау көрсетіледі.
Бұрау кезінде сезімтал өрістерді жасырыңыз; ескерту уақыты.

11) Пуш-хабарламалар және фондық міндеттер

Анық құнды сценарийлер, бөлуге болмайды; тыныш сағат.
One-tap unsubscribe және артықшылықтар орталығы.
Фонды синкалар - шағын порциялармен, батарея/желі бойынша шектеулермен.

12) Бейнелер, медиа және бейімделу

Берілген өлшемді Placeholder → нөлдік CLS.
Әдепкі бейне автоплейсіз, субтитрлері мен бақылаулары бар; бейімделетін битрейттер.
Иконалар - вектор (SVG) немесе спрайт; 1 МБ жинақтарды тиемеңіз.

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 сценарийлері, пернетақта жолы, қарама-қарсылық.
Перфоманс: Web-Vitals (RUM), кескіндеуші; үлкен тізімдер, енгізу/скролл/қимылдар.
Тұрақтылық: ротация, бұрылу/қайту, процесті өлтіру → қалпына келтіру.
Қауіпсіздік: рұқсаттар, сессияның таймауты, жеке деректерді жасыру, биометрия.

15) Mobile-safe өлшемдері

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 мс. CLS ≤ 0. 1 (мобайл)
• Ауыр блоктарды жүктеу, downsampling тізімдері
• Офлайн экран, backoff ретрайлері, Save-Data режимі
• Мылтықтар мен рұқсаттар - талап бойынша, түсініктемемен және бас тартумен
• Қараңғы тақырып және reduced-motion қолдау тапты
• Тесттер: iOS/Android, портрет/ландшафт, 3G/офлайн, SR-өту

18) Енгізу жоспары (3 итерация)

• Тор және safe-area, 48 px таргеттер, пернетақта түрлері/автотолтыру, негізгі Web-Vitals, lazy кескіндер, қараңғы тақырып.

• Code-split, content-visibility, офлайн + SW, Save-Data режимі, ретра/кезектер, жағдайды қалпына келтіру, A11y-аудит.

• RUM-дашбордтар, трафикті/батареяны талдау, haptics, рұқсат сценарийлері, тізімдерді жақсарту (виртуалдандыру), ұялы желілердің тұрақты game-days.

19) Шағын FAQ

Жеке «мобайл-мәзір» қажет пе?
Иә, бірақ басымдық - 3-5 тармақты төменгі навигация; гамбургер - екінші дәрежелі үшін.

Батырмалар бойынша қателерді қалай азайтуға болады?
Мақсаттарды 48 px-ке дейін ұлғайтыңыз, айналадағы өрістерді қосыңыз, тігінен бөліңіз, haptic-ті «табысқа/қатеге» пайдаланыңыз.

Офлайн міндетті бе?
Сыни сценарийлер үшін - иә: кэш, әрекет кезегі және пайдаланушыға адал кеңестер.

Жиынтық

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