მობილური უსაფრთხოების დიზაინი

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 გ, INP - 200 ms, 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; ხატი + ტექსტი, არა მხოლოდ ხატი.
ჟესტებს ყოველთვის აქვთ ალტერნატივა (ღილაკი/მენიუ/ცხელი წერტილი).
ანიმაციები - „ტრანსფორმაცია/კომპაქტურობაზე“ და პატივს სცემენ „პრეფერენციულ-წამებას“.

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 ტაპამდე.
მოერიდეთ „ჰამბურგერს“ კრიტიკულ მონაკვეთებზე; გამოიყენეთ ტაბლეტები/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) ბნელი თემა, სიკაშკაშე და სიხარული

ბნელი თემა არ არის მხოლოდ ინვერსია; შეამოწმეთ კონტრასტები და ფერის აქცენტები.
პატივს სცემთ სისტემურ თემას ('prefers-color-scheme').
Haptics - დოზირებული (წარმატება/შეცდომა), გამორთვის შესაძლებლობა.

10) კონფიდენციალურობა, ნებართვები და უსაფრთხოება

ნებართვები მხოლოდ ღირებულების მომენტში (დოკუმენტის სკანირება).
ახსნა „რატომ“ და fallback ნებართვის გარეშე.
WebAuthn/ბიომეტრია პაროლის ნაცვლად; პაროლის მენეჯერები მხარს უჭერენ.
დამალეთ მგრძნობიარე ველები დაკეცვის დროს; ტაიმაუტები გაფრთხილებით.

11) შეტყობინებები და ფონური დავალებები

მკაფიო ღირებულებითი სცენარები, არ ვრცელდება; მშვიდი საათი.
One-tap unsubscribe და პრეფერენციების ცენტრი.
ფონის სისხლჩაქცევები - მცირე ნაწილი, ბატარეის/ქსელის შეზღუდვებით.

12) სურათები, მედია და ადაპტაცია

Placeholder მოცემული ზომით არის ნულოვანი CLS.
ნაგულისხმევი ვიდეო ავტოპლეის გარეშე, სუბტიტრებით და მაკონტროლებლებით; ადაპტირებული ბიტრეიტები.
ხატები - ვექტორი (SVG) ან სპრაიტი; არ დატვირთოთ 1 MB ნაკრები.

13) snippets და პარამეტრები

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, მობილური მხოლოდ).
დრო (პირველადი სამიზნე დაწკაპუნებამდე).
Tap Accuracy (ახლო ელემენტების ყალბი ტაპების წილი).
Crash-free sessions/ANR rate (პროგრამები/ვებ).
Datper session და Battery impact (ფონ/წინა).
Opt-in/opt-out იარაღი და ძალა.

16) ანტი შაბლონები

ღილაკები 28-32 px, მკვრივი სიები, „ბარათები“ ველის გარეშე - გამოტოვება.
ტექსტი 12-14 px ღია ნაცრისფერ ფონზე.
მოდალები მოდულების თავზე; დახურვა მხოლოდ ჟესტით.
ვიდეოკლიპი/ანიმაციები 3G/Save-Data.
ფუნქციები „მხოლოდ ჟესტით“, ღილაკის/მენიუს გარეშე.
მიუწვდომელი safe-area - შინაარსის გადახურვა „chell“ ან swipp-panel.

17) ეკრანის ჩეკის სია

• Targets - 48 px, უკან დახევა - 8-12 px
• Safe-area учтен (`viewport-fit=cover`, `env(safe-area-inset-)`)
• ტექსტი 16 px, AA კონტრასტი, ფოკუსი/აქტივი ჩანს
• ფორმები: სწორი 'ტიპი/inputmode/autocomplete', ბენზინგასამართი სადგური მუშაობს
• LCP ≤ 2. 5 გ, INP - 200 ms, CLS - 0. 1 (მობილური)
• მძიმე ბლოკების შემცირება, ჩამორთმევის სიები
• Offline ეკრანი, retrais backoff, Save-Data რეჟიმში
• იარაღი და ნებართვები - მოთხოვნით, ახსნა და უარი
• ბნელი თემა და მხარდაჭერილი მოძრაობა
• ტესტები: iOS/Android, პორტრეტი/ლანდშაფტი, 3G/ოფლაინი, SR გადასასვლელი

18) განხორციელების გეგმა (3 გამეორება)

• ბადე და safe-area, targets 48 px, კლავიატურების/ბენზინგასამართი სადგურების ტიპები, ბაზის Web-Vitals, lazy სურათები, ბნელი თემა.

• Code-split, შინაარსი-visibility, offline + SW, Save-Data რეჟიმი, retrai/ხაზები, სახელმწიფოს აღდგენა, A11y აუდიტი.

• RUM დაშბორდები, ტრაფიკის/ბატარეების ანალიზი, haptics, ნებართვის სცენარები, სიების გაუმჯობესება (ვირტუალიზაცია), მობილური ქსელების რეგულარული თამაშის დღეები.

19) მინი-FAQ

საჭიროა ცალკე „მობილური მენიუ“?
დიახ, მაგრამ პრიორიტეტია ქვედა ნავიგაცია 3-5 პუნქტით; ჰამბურგერი - მეორეხარისხოვანი.

როგორ შევამციროთ ღილაკების გამოტოვება?
გაზარდეთ მიზნები 48 px- მდე, დაამატეთ ველები გარშემო, განავითარეთ ვერტიკალურად, გამოიყენეთ haptic „წარმატება/შეცდომა“.

Offline სავალდებულოა?
კრიტიკული სცენარისთვის - დიახ: ქეში, მოქმედების ხაზი და გულწრფელი რჩევები მომხმარებელს.

შედეგი

Mobile-safe დიზაინი არის ერგონომიკის შეხების, safe-area- ს აღრიცხვის, ქსელის/ბატარეის შესრულების, ხელმისაწვდომობისა და წინააღმდეგობის ერთობლიობა. დაიცავით შემოწმების ფურცლები, გაზომეთ Web-Vitals რეალურ მომხმარებლებში, პატივი სცეთ კონფიდენციალურობას და სისტემურ პარამეტრებს - და თქვენი ინტერფეისი მოსახერხებელი და საიმედო იქნება ნებისმიერ მობილურ მოწყობილობაზე.