Тарҳи мобилии бехатар

1) Принсипҳои бехатарии мобилӣ

1. Ангушти аввал: минтақаҳои амал - дар доираи ангушти калон (паймоиши поёни, FAB/ибтидоӣ аз рост дар поён).
2. Ламс: ҳадафҳо ≥ 40-48 px бо майдонҳо; масофа ≥ 8-12 px.
3. Минтақаи бехатар аз рӯи тарҳ: мо буришҳо/минтақаҳои ишоратро ба назар мегирем ('env (минтақаи бехатар-inset-)').
4. Суръат аз "зебоӣ" муҳимтар аст: LCP ≤ 2. 5s, INP ≤ 200ms, CLS ≤ 0. 1 (с75).
5. Маҳдудият: ҳадди аққали модалҳо, шаклҳои ҳадди аққал, ҳадди аксар худкор.
6. Шабакаҳо ва батарея: трафики сарфакорона, реҷаи офлайнӣ, бозомӯзии салоҳиятнок.

2) Шабака, нуқтаҳо ва минтақаи бехатар

Нуқтаҳои бозист: ≤ 480 (мобилӣ), 481-768 (планшети амудӣ), 769-1024 (планшети уфуқӣ).
Зарфҳо бо паҳнои максималӣ, кортҳои фасеҳ 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 base, line-to-line 1. 4–1. 6, дарозии сатр 40-70 аломат.
Тугмаҳо: баландии 44-52 px, фокус/дороиҳо/маъюбон; нишона + матн, на танҳо тасвир.
Ишоратҳо ҳамеша алтернатива доранд (тугма/меню/нуқтаи гарм).
Аниматсияҳо дар "табдил/шаффофият" ҳастанд ва эҳтиром 'ба кам кардани ҳаракат'.

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 ламс ба амали мақсаднок.
Барои бахшҳои интиқодӣ аз "гамбургер" канорагирӣ кунед; ҷадвалҳои истифода/тақсимшуда.
UI мегӯяд: 'боркунӣ/холӣ/хато/муваффақият' - возеҳ, бо амалҳо ва шарҳҳо.

6) Иҷро ва пасандоз

Виджетҳои тақсимшуда ва танбал; диаграммаҳо/кортҳо "ба талабот".
Захираҳои интиқодӣ - 'preload', боқимонда - 'defer '/' танбалӣ'.
Тасвирҳои AVIF/WebP +' srcset/андоза', 'боркунӣ =" танбалӣ"'.
Ҳуруфҳо: 1 WOFF2 тағирёбанда, 'ҳуруф-дисплей: своп', пеш аз боркунӣ танҳо асосӣ.
Кэчинг ва офлайнӣ тавассути корманди хидматрасонӣ (PWA), 'кӯҳна-ҳангоми таҷдиди назар'.

7) Шабакаҳо, офлайн ва бозсозӣ

3G/high дӯстии дермонӣ: маҳдудияти дархост, қассоб, ақибнишинӣ.
Экрани офлайнӣ бо кэши интиқодӣ ва навбати ҳамоҳангсозӣ.
Ба иқтисодиёти маълумот эҳтиром гузоред: 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) Мавзӯи торик, равшанӣ ва хаптика

Мавзӯи торик танҳо инверсия нест; муқоисаҳо ва аксенти рангҳоро санҷед.
Мавзӯъи системаро эҳтиром кунед ('prefers-color-scheme').
Ҳаптика - дозия (муваффақият/хатогӣ), қобилияти ғайрифаъол кардан.

10) Махфият, иҷозатномаҳо ва амният

Иҷозатҳо танҳо дар лаҳзаи арзиш (камера → сканкунии ҳуҷҷат).
Шарҳи "чаро" ва бозгашт бидуни иҷозат.
Интернет Authn/биометрия ба ҷои парол; менеҷерони парол дастгирӣ карда мешаванд.
Пинҳон кардани майдонҳои ҳассос ҳангоми парпеч кардан; вақти огоҳӣ.

11) Огоҳиномаҳо ва вазифаҳои пасзаминаро пахш кунед

Сенарияҳои возеҳи арзиш, на зуд-зуд; соатҳои ором.
Маркази обуна ва афзалияти яктарафа.
Ҷароҳатҳои пасзамина - дар қисмҳои хурд бо маҳдудиятҳои батарея/шабака.

12) Тасвирҳо, ВАО ва мутобиқшавӣ

Ҷойгоҳе, ки бо андоза муайян шудааст → сифр CLS.
Видео бо нобаёнӣ бидуни худкор, бо субтитрҳо ва идоракунӣ; битҳои мутобиқшавӣ.
Нишонаҳо - вектор (SVG) ё sprite; Маҷмӯи 1MB-ро бор накунед.

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 (дроссел); фаъол кардани Захиракунии Маълумот.

Мавҷудият: Скриптҳои Voice

Иҷро: Web-Vitals (RUM), профилер; рӯйхатҳои калон, чопкунӣ/ҳаракат/имову ишора.
Устуворӣ: гардиш, печондан/баргаштан, куштани раванд → барқарор кардани давлат.
Амният: иҷозатҳо, танаффуси сессия, пинҳон кардани маълумоти хусусӣ, биометрия.

15) Нишондиҳандаҳои бехатар дар мобилӣ

LCP/INP/CLS (p75, танҳо мобилӣ).
Вақт ба амал (пеш аз пахш кардани ҳадафи асосӣ).
Дурустии клик (ҳиссаи лӯлаҳои бардурӯғи унсурҳои наздик).
Ҷаласаҳои бидуни садама/сатҳи ANR (барномаҳо/webview).
Маълумот дар як ҷаласа ва таъсири батарея.
Опт-дар/дасткашӣ ва ҷалб.

16) Анти-намунаҳо

Тугмаҳои 28-32 px, рӯйхатҳои зич, "кортҳо" бидуни майдон - пазмон мешаванд.
Матни 12-14 px дар заминаи хокистарии сабук.
Модулҳо аз болои модалҳо; пӯшидан танҳо бо имову ишора.
Autoplay видео/аниматсияҳо дар 3G/Save-Data.
Танҳо хусусиятҳои имову ишора, тугма/меню нест.
Барои минтақаи бехатар ба қайд гирифта нашуда, мундариҷаи такрорӣ бо "bangs" ё панели своп.

17) Рӯйхати экрани экран

• Ҳадафҳо ≥ 48 px, indents ≥ 8-12 px
• Минтақаи бехатар ('viewport-fit = cover', 'env (минтақаи бехатар-inset-)')
• Матн ≥ 16 px, контрасти АА, фокус/дороиҳои намоён
• Шаклҳо: корҳои дурусти 'намуди/inputmode/autocomplete', корҳои худкор
• LCP ≤ 2. 5s, INP ≤ 200ms, CLS ≤ 0. 1 (мобилӣ)
• Блокҳои вазнини танбал, рӯйхати downsampling
• Экрани офлайнӣ, бозсозӣ бо ақибмонӣ, Ҳолати захиракунии маълумот
• Шикорҳо ва иҷозатномаҳо - тибқи дархост, бо шарҳ ва рад
• Мавзӯи торик ва камшавии ҳаракат дастгирӣ карда мешавад
• Санҷишҳо: IOS/Android, портрет/манзара, 3G/offline, ағбаи SR

18) Нақшаи амалисозӣ (3 такрорӣ)

• Шабака ва минтақаи бехатар, 48 ҳадафи px, намудҳои клавиатура/автоматикӣ, веб-виталҳои асосӣ, тасвирҳои танбал, мавзӯи торик.

• Тақсимоти рамзҳо, намоёнии мундариҷа, офлайн + SW, режими захиракунӣ-додаҳо, бозсозӣ/навбатҳо, барқарорсозии давлатӣ, аудит A11y.

• Лавҳаҳои RUM, таҳлили трафик/батарея, хаптика, скриптҳои иҷозат, такмили рӯйхат (виртуализатсия), рӯзҳои муқаррарии бозиҳои шабакаҳои мобилӣ.

19) Мини-FAQ

Оё ба ман "менюи мобилӣ" -и алоҳида лозим аст?
Бале, аммо афзалият паймоиши поёни бо 3-5 хол аст; гамбургер - барои миёна.

Чӣ тавр кам кардани пазмонҳои тугма?
Ҳадафҳоро ба 48 px зиёд кунед, майдонҳоро илова кунед, амудӣ паҳн кунед, hapticро барои "муваффақият/хатогӣ" истифода баред.

Офлайн лозим аст?
Барои сенарияҳои интиқодӣ, ҳа: кэш, навбати амалҳо ва дархостҳои софдилона ба корбар.

Натиҷа

Тарҳи аз ҷиҳати мобилӣ бехатар маҷмӯи эргономикаи ламсӣ, баҳисобгирии минтақаи бехатар, фаъолият, мавҷудият ва муқовимат ба шабака/батарея мебошад. Рӯйхати назоратро пайгирӣ кунед, Web-Vitals-ро бо корбарони воқеӣ чен кунед, махфият ва танзимоти системаро эҳтиром кунед - ва интерфейси шумо дар ҳама гуна дастгоҳҳои мобилӣ қулай ва боэътимод хоҳад буд.