Mobile-safe դիզայն

1) Mobile-safe սկզբունքները

1. Thumb-first: Գործողության գոտիները մեծ մատի սահմաններում են (ներքևի ռոտացիան, FAB/primary աջ կողմում)։

2. Touch-friendly: նպատակները 40-48 px են դաշտերով։ հեռավորությունը 368-12 px է։

3. Safe-area by design: Հաշվի առեք կտրվածքները/ժեստերի գոտիները («env (safe-area-insete-)»)։

4. Արագությունը ավելի կարևոր է, քան «գեղեցկությունը» 'LCP 242։ 5 c, INP 24200 ms, CLS 240։ 1 (p75).

5. Զսպվածություն 'նվազագույն մոդելներ, նվազագույն ձևեր, առավելագույն ինքնահարգումներ։

6. Ցանցերը և մարտկոցները 'տնտեսական ապահովագրություն, օֆլայնային ռեժիմ, գրագետ։

2) Սեթկա, բրեյքպոինտա և safe-area

Breikpoints: 35380 (Drail), 241-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 բարձրություն, հստակ ֆոկուս/www.abled; իկոնկա + տեքստ, ոչ միայն իկոն։

Ժեստերը միշտ ունեն այլընտրանք (կոճակ/մենյու/տաք կետ)։

Անիմացիաները '«transform/opacity» և հարգում են «wwww.fers-reduced-motion»։

4) Ձևեր, ստեղնաշարեր և բենզալցակայաններ

Նվազեցրեք դաշտերը, օգտագործեք inputmode/type և autocomplete։

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 taps մինչև ռուսական գործողությունը։

Խուսափեք «համբուրգեր» քննադատական բաժինների համար։ օգտագործեք տաբերը/segmented։

UI '«loading/empty/error/success» վիճակը ակնհայտ է, գործողությունների և բացատրությունների հետ։

6) Արտադրողականություն և խնայողություն

Code-split և ծույլ Wights; գրաֆիկները/քարտեզները բեռնում ենք «պահանջով»։

Կրիտիկական ռեսուրսները '«preload», մնացածը' «www.er »/« lazy»։

AVIF/SysteP + "www.cset/sizes", "loading =" lazy "։

Տառատեսակներ ՝ 1 variable WOF2, «font-play: swap», preload միայն հիմնական։

Cashing-ը և ofline Express Worker-ի միջոցով (PWA), «stale-while-revalidate»։

7) Ցանցեր, ակնոցներ և գետեր

Ընկերներ 3G/բարձր ուշացման համար 'հարցումների սահմանափակում, բատչինգ, jittered backoff։

Offline-էկրանը կրիտիկական տվյալների քեշով և համաժամացման հերթով։

Հարգեք տվյալների տնտեսությունը 'Client Hinault/Save-International-ը թեթև պատկերներ է, առանց մեքենայի տեսահոլովակի։

JS (տվյալների/ցանցի դետեկտոր)

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

8) Altaile-ում (A1y) հասանելիությունը (A1y)

Ստեղնաշարի/անջատիչների ամբողջական կառավարումը և ընթերցման ֆոկուսը։

Հակադրություն WCAG AA-ի, այլընտրանքների տեքստը («alt», «aria-label»)։

Մեծ թարգետներ և անիմացիաների դադար։ ժեստերը կրկնօրինակվում են կոճակներով։

Դիագրամի համար կարճ տեքստային ռեզյումե և տվյալների տեղադրում։

9) Մութ թեման, պայծառությունը և hapt.ru

Մութ թեման պարզապես հակադարձում չէ։ ստուգեք հակադրությունները և գունավոր շեշտադրումները։

Հարգեք համակարգային թեման («wwww.fers-color-scheme»)։

Hapt.ru-ը չափավոր է (հաջողություն/սխալ), անջատման հնարավորությունը։

10) Գաղտնիությունը, թույլատրությունը և անվտանգությունը

Թույլատրությունը միայն արժեքի պահին (փաստաթղթի տեսախցիկը)։

Բացատրությունը «ինչու» և fallback առանց թույլտվության։

Authn/կենսաչափությունը գաղտնաբառի փոխարեն։ գաղտնաբառերը աջակցվում են։

Թաքցրեք զգայուն դաշտերը փոխկապակցման ժամանակ։ թայմաուտները նախազգուշացումով։

11) Տեղեկատվական ծանուցումներ և ֆոնային առաջադրանքներ

Պարզ արժեքավոր սցենարներ, չմտնել։ հանգիստ ժամացույց։

One-tap unsubscribe-ը և նախընտրությունների կենտրոնը։

Ֆոնային կապերը փոքր հատվածներ են, որոնք սահմանափակվում են մարտկոցով/ցանցով։

12) Պատկերներ, լրատվամիջոցներ և հարմարվողականություն

Placeholder-ը նշված չափսերով զրոյական CLS-ն է։

Տեսահոլովակը լռելյայն առանց ավտոպլայի, ենթագրերով և վերահսկողություններով։ հարմարվողական բիթրետներ։

Իկոնկին վեկտոր է (SVG) կամ սպրեյթ; մի բեռնեք հավաքածուները 1 ՄԲ-ով։

13) Snipets և Windows

meta view.ru և ակցենտներ

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-Express-ը

Հասանելիություն ՝ VoicOver/TalkBack սցենարներ, ստեղնաշարային կոդեր, հակադրություն։

Պերֆոմանսը 'Web-Vitals (RUM), պրոֆիլատոր; մեծ ցուցակներ, մուտքագրում/սքրոլ/ժեստեր։

Կայունություն 'ռոտացիա, փոխկապակցվածություն/կայունություն, գործընթացի սպանությունը նպաստում է վիճակի վերականգնմանը։

Անվտանգություն 'թույլտվություն, նստաշրջանի թայմաուտ, մասնավոր տվյալների թաքցում, կենսաչափություն։

15) Մեթրիկի Mobile-safe

LCP/INP/CLS (P75, Drail-միայն)։

Time-to-Action (մինչև առաջնային ռուսական տեսահոլովակը)։

Tap Accuracy (մոտիկ տարրերի կեղծ տապերի մասը)։

Crash-free sessions/ANR rate (ծրագրեր/webwew)։

Corper session և Battery impact (ֆոն/առջևի պլան)։

Opt-in/opt-out թնդանոթներ և dragram։

16) Anti-patterna

Կոճակները 28-32 px, խիտ ցուցակները, «քարտեզները» առանց դաշտի 'բացթողումներ։

Տեքստը 12-14 px է բաց մոխրագույն ֆոնի վրա։

Մոդալները մոդալների վերևում։ միայն ժեստով։

Վիդեո/անիմացիաներ 3G/Save-Line-ում։

«Միայն ժեստով» գործառույթները, առանց կոճակի/ընտրացանկի։

Չբացահայտված safe-area-ն բացատրում է «մարդու» կամ swip-punel պարունակությունը։

17) Էկրանի թուղթ

• Targets 2448 px, նահանջներ 248-12 px
• Safe-area учтен (`viewport-fit=cover`, `env(safe-area-inset-)`)
• Տեքստը 3616 px, հակադրություն AA, ֆոկուս/220 տեսանելի են
• Ձևեր ՝ ճիշտ «type/inputmode/autocomplete», բենզալցակայանը աշխատում է։
• LCP ≤ 2. 5 c, INP 24200 ms, CLS 240։ 1 (Altail)
• Lazy-loading ծանր բլոկներ, downsampling ցուցակներ
• Offline-էկրանը, backoff, Save-International ռեժիմը
• Պուշին և թույլտվությունը 'պահանջով, բացատրությամբ և մերժմամբ։
• Մութ թեման և reduced-motion աջակցվում են
• Թեստեր ՝ iOS/Android, դիմանկարը/լանդշաֆտը, 3G/offline, SR-2019, SR-2019, SR-2019, դիմանկարը/լանդշաֆտը, 3G/Landshaft, 3G/ofline, SR

18) Իրականացման պլանը (3 իտացիա)

Իտերացիա 1 - Հիմքեր (1-2 շաբաթ)

Ցանցը և safe-area, targets 48 px, ստեղնաշարերի/բենզալցակայանների տեսակներ, Web-Vitals, lazy պատկերներ, մութ թեմա։

Iteration 2 - Արտադրողականություն և կայունություն (3-4 շաբաթ)

Code-split, content-visibility, ofline + SW, Save-International ռեժիմը, retray/հերթը, պետության վերականգնումը, A1y-աուդիտը։

Iteration 3 - Օպտիմիզացիա և մասշտաբներ (շարունակաբար)։

RUM-dashbords, կոդավորման/մարտկոցի վերլուծություն, hapt.ru, կոդավորման սցենարներ, ցուցակների բարելավում (վիրտուալացում), wwww.game-days բջջային ցանցեր։

19) Mini-FAQ

Արդյո՞ ք պետք է առանձին «altail-mente»։

Այո, բայց գերակայությունը ներքևի նավարկությունն է 3-5 կետերով։ համբուրգերը երկրորդական է։

Ինչպե՞ ս նվազեցնել կոճակները։

Ավելացրեք նպատակները մինչև 48 px, ավելացրեք դաշտերը շուրջը, բաժանեք ուղղահայաց, օգտագործեք haptic-ը «հաջողության/սխալի» համար։

Օֆլայնը պարտական է։

Քննադատական գործողությունների համար 'այո' քեշը, գործողությունների հերթը և օգտագործողի ազնիվ հուշումները։

Արդյունքը

Mobile-safe դիզայնը ժայռերի էրգոնոմիայի համադրություն է, հաշվի առնելով safe-area, արտադրողականությունը, հասանելիությունը և դիմադրությունը ցանցերին/մարտկոցին։ Հետևեք չեկի տերևներին, չափեք Web-Vitals-ը իրական օգտագործողների մոտ, հարգեք գաղտնիությունը և կոդավորումը, և ձեր ինտերֆեյսը հարմար և հուսալի կլինի ցանկացած բջջային սարքի վրա։