Σχεδιασμός ασφαλούς κινητής τηλεφωνίας

1) Αρχές ασφάλειας των κινητών επικοινωνιών

1. Αντίχειρα-πρώτα: ζώνες δράσης - εντός του αντίχειρα (κάτω ναυσιπλοΐα, FAB/πρωτογενής από τα δεξιά παρακάτω).
2. Φιλικό προς την αφή: στόχοι ≥ 40-48 px με πεδία· απόσταση ≥ 8-12 px.
3. Περιοχή ασφαλείας κατά σχεδιασμό: λαμβάνουμε υπόψη τις περικοπές/ζώνες χειρονομιών («env (ασφαλής περιοχή - inset-)»).
4. Η ταχύτητα είναι πιο σημαντική από την «ομορφιά»: LCP ≤ 2. 5s, INP ≤ 200ms, CLS ≤ 0. 1 (p75).
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, γραμμή προς γραμμή 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) Επιδόσεις και εξοικονόμηση πόρων

Διαχωρισμός κωδικών και τεμπέληδες γραφικές παραστάσεις. τα διαγράμματα/κάρτες φορτώνουν «κατά παραγγελία».
Κρίσιμοι πόροι - «προφόρτωση», οι υπόλοιποι - «αναβολή »/« τεμπέλης».
AVIF/WebP εικόνες +' srcset/μεγέθη', 'φόρτωση =» τεμπέλης»'.
Γραμματοσειρές: 1 μεταβλητή WOFF2, 'font-display: swap', προφορτωμένη μόνο βασική.
Caching and offline via Service Worker (PWA), «stale-while-revalidate».

7) Δίκτυα, offline και retrays

αργοπορία φιλικότητα: όριο αιτήματος, butching, jittered backoff.
Offline οθόνη με κρίσιμη μνήμη δεδομένων και σειρά συγχρονισμού.
Σεβαστείτε την οικονομία δεδομένων: Client Hints/Save-Data → light images, no auto-video.

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) Προστασία της ιδιωτικής ζωής, άδειες και ασφάλεια

Άδειες μόνο κατά τη στιγμή της τιμής (σάρωση φωτογραφικής μηχανής → εγγράφου).
Εξήγηση του «γιατί» και επιστροφή χωρίς άδεια.
WebAuthn/βιομετρικά στοιχεία αντί κωδικού πρόσβασης; υποστηρίζονται οι διαχειριστές κωδικών πρόσβασης.
Απόκρυψη ευαίσθητων πεδίων κατά την αναδίπλωση. προειδοποιητικά χρονοδιαγράμματα.

11) Προώθηση των κοινοποιήσεων και των βασικών καθηκόντων

Σενάρια σαφούς αξίας, όχι συχνά. ήσυχες ώρες.
Ένα-tap unsubscribe και κέντρο προτίμησης.
Μελανιές υποβάθρου - σε μικρά τμήματα, με περιορισμούς μπαταρίας/δικτύου.

12) Εικόνες, μέσα και προσαρμοστικότητα

Καθορισμένος από το μέγεθος κάτοχος θέσης → μηδέν CLS.
Βίντεο εξ ορισμού χωρίς αυτόματη λειτουργία, με υπότιτλους και χειριστήρια. προσαρμοστικά bitrates.
Εικονίδια - διάνυσμα (SVG) ή sprite. Μη φορτώνετε σύνολα 1MB.

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 (μικρή/μεσαία/μεγάλη οθόνη), πορτρέτο/τοπίο.
Δίκτυα: offline, 3G, 4G (γκάζι). Ενεργοποίηση αποθήκευσης δεδομένων.
Διαθεσιμότητα: σενάρια Voice Over/TalkBack, πάσο πληκτρολογίου, αντίθεση.
Επιδόσεις: Web-Vitals (RUM), profiler. μεγάλες λίστες, πληκτρολόγηση/κύλιση/χειρονομίες.
Σταθερότητα: περιστροφή, αναδίπλωση/επιστροφή, θανάτωση της διαδικασίας → αποκατάσταση του κράτους.
Ασφάλεια: άδειες, χρονοδιάγραμμα συνεδρίασης, απόκρυψη ιδιωτικών δεδομένων, βιομετρικά στοιχεία.

15) Ασφαλείς μετρήσεις κινητής τηλεφωνίας

LCP/INP/CLS (p75, μόνο κινητά).
Χρόνος έως τη δράση (πριν από το αρχικό κλικ στόχου).
Ακρίβεια κλακέτας (μερίδιο ψευδών βρυσών στενών στοιχείων).
Συνεδρίες χωρίς σύγκρουση/ρυθμός ANR (εφαρμογές/webview).
Δεδομένα ανά συνεδρία και πρόσκρουση μπαταρίας.
Ρήτρα opt-in/opt-out χνουδωτή και εμπλοκή.

16) Αντι-μοτίβα

Κουμπιά 28-32 px, πυκνές λίστες, «φύλλα» χωρίς πεδίο - αστοχίες.
Κείμενο 12-14 px σε ανοιχτό γκρι φόντο.
Modals over modals· κλείσιμο μόνο με χειρονομία.
Autoplay video/animations on 3G/Save-Data.
Χαρακτηριστικά μόνο χειρονομίας, χωρίς κουμπί/μενού.
Μη ληφθέν για ασφαλές → επικαλυπτόμενο περιεχόμενο με «bangs» ή πάνελ swipe.

17) Κατάλογος ελέγχου οθόνης

• Στόχοι ≥ 48 px, περίπτωση ≥ 8-12 px
• учтен ασφαλούς περιοχής («viewport-fit = cover», «env (safe-area inset-)»)
• Κείμενο ≥ 16 px, αντίθεση AA, εστίαση/περιουσιακό στοιχείο ορατό
• Έντυπα: ορθά 'type/inputmode/autocplete', αυτοσυμπληρωμένα έργα
• LCP ≤ 2. 5s, INP ≤ 200ms, CLS ≤ 0. 1 (κινητό)
• Βαρέα τεμπέλικα φόρτωσης, κατέβασμα καταλόγων
• Offline screen, retray with backoff, Save-Data mode
• Εκρήξεις και άδειες - κατά παραγγελία, με επεξήγηση και απόρριψη
• Σκοτεινό θέμα και υποστηριζόμενη μειωμένη κίνηση
• Δοκιμές: iOS/Android, πορτρέτο/τοπίο, 3G/offline, SR pass

18) Σχέδιο εφαρμογής (3 επαναλήψεις)

• Πλέγμα και ασφαλής περιοχή, 48 px στόχοι, τύποι πληκτρολογίου/αυτόματη συμπλήρωση, βασικά Web-Vitals, τεμπέλικες εικόνες, σκοτεινό θέμα.

• Διαχωρισμός κωδικών, ορατότητα περιεχομένου, offline + SW, λειτουργία αποθήκευσης δεδομένων, retray/ουρές αναμονής, ανάκτηση κατάστασης, A11y έλεγχος.

• Πίνακες RUM, ανάλυση κυκλοφορίας/μπαταρίας, απτικά, σενάρια αδειών, βελτίωση λίστας (εικονοποίηση), κανονικές ημέρες παιχνιδιού των κινητών δικτύων.

19) Mini-FAQ

Χρειάζομαι ένα ξεχωριστό «κινητό μενού»

Ναι, αλλά προτεραιότητα είναι η πλοήγηση βυθού με 3-5 βαθμούς. χάμπουργκερ - για τη δευτεροβάθμια.

Πώς να μειώσετε τις αστοχίες του κουμπιού

Αύξηση στόχων σε 48 px, προσθήκη πεδίων γύρω, διάδοση κάθετα, χρήση απτικής για «επιτυχία/σφάλμα».

Απαιτείται offline

Για κρίσιμα σενάρια, ναι: κρυφή μνήμη, ουρά των ενεργειών και έντιμα κίνητρα προς τον χρήστη.

Αποτέλεσμα

Ο σχεδιασμός με ασφάλεια κινητής τηλεφωνίας είναι ένας συνδυασμός εργονομίας αφής, λογιστικής ασφαλούς περιοχής, επιδόσεων, διαθεσιμότητας και αντίστασης πλέγματος/μπαταρίας. Ακολουθήστε τους καταλόγους ελέγχου, μετρήστε τα Web-Vitals με πραγματικούς χρήστες, σεβαστείτε την ιδιωτικότητα και τις ρυθμίσεις του συστήματος - και η διεπαφή σας θα είναι βολική και αξιόπιστη σε οποιαδήποτε κινητή συσκευή.