Κατευθυντήρια γραμμή UX και πρότυπα διεπαφής

1) Αρχές

Σαφήνεια πριν την ομορφιά. Η σημασία και η δράση είναι προφανείς σε 1-2 δευτερόλεπτα.
Ένας στόχος ανά οθόνη. Όλα τα άλλα είναι δευτερεύοντα ή κρυμμένα.
Συνέπεια. Ίδια πρότυπα = ίδιες προσδοκίες.
Προκαθορισμένη διαθεσιμότητα. Αντίθεση, εστίαση, πληκτρολόγιο, φωνητική υποκριτική.
Πλαίσιο. Οι συμβουλές και τα κείμενα είναι ακριβώς εκεί που χρειάζονται.
Τοπικοποίηση πρώτα. Μήκη γραμμής, μορφές, πολιτισμός - στο σχεδιασμό αρχικά.
Αναστρεψιμότητα. Κάθε επικίνδυνη ενέργεια μπορεί να ακυρωθεί/επιβεβαιωθεί.
Μετρησιμότητα. Κάθε κανόνας είναι με ένα μετρικό (μετατροπή βήματος, χρόνος, σφάλματα).

2) Πλέγμα, περιπτώσεις και ρυθμός

Πλέγμα: 4/8-pt pitch. στήλες: 12 (επιφάνεια εργασίας), 6 (δισκίο), 4 (κινητό).
Εσωτερικά στοιχεία: πολλαπλάσια του 4. εξωτερικό - 8/ 12/16/24.
Κάθετος ρυθμός: τίτλος → υπότιτλος → περιεχόμενο → δράσης (CTA).
Σύνορα και διαχωριστές: οικονομικά· προτιμούν τον «αέρα» και την ιεραρχία της τυπογραφίας.

3) Τυπογραφία

Κλίμακα ακίδων: 12/14/ 16/20/24/32/40 (σώμα 16).
Ύψος γραμμής: 1. 4–1. 6 για το κείμενο, 1. 2–1. 3 για τίτλους.
Μήκος γραμμής: 45-75 χαρακτήρες (επιφάνεια εργασίας), 35-55 (κινητό).
Επισήμανση: έντονη για σημασιολογικές προφορές. καπάκια - μόνο σε ετικέτες.
Ευανάγνωστο: τα κείμενα πρέπει να ακούγονται φυσικά.

4) Χρώμα και αντίθεση

Σημασιολογία: 'επιτυχία/πληροφορίες/προειδοποίηση/σφάλμα/ουδέτερη'.
Αντίθεση: τουλάχιστον 2 WCAG. 1 ΑΑ (κείμενο/ιστορικό ≥ 4. 5:1; μεγάλες ≥ 3:1).
Το χρώμα ≠ το μοναδικό σήμα. Προσθήκη εικονιδίου/κειμένου/εντύπου.
Δακτύλιος εστίασης: πάντα ορατός (μη απενεργοποιημένος στο CSS).

5) Αρχιτεκτονική πλοήγησης και πληροφοριών

Διαδρομή χρήστη: "Πού βρίσκομαι Τι είναι εδώ Τι ακολουθεί" - προφανώς.
Ιεραρχία μενού: ≤ 2 επίπεδα στην κύρια πλοήγηση.
Ψίχουλα: για βαθιά τμήματα.
Αναζήτηση: διατίθεται παγκοσμίως σε πολύπλοκους καταλόγους. hotkey '/'.
Κατάσταση πλοήγησης: Η ενεργός καρτέλα/σελίδα τονίζεται με μάρκες.

6) Συστατικά μέρη και μοτίβα

Χρησιμοποιούμε τα συστατικά στοιχεία του συστήματος σχεδιασμού (χωρίς «σπιτικό»).
Ένα πρωτογενές CTA ανά οθόνη. τα υπόλοιπα είναι δευτεροβάθμια/τριτοβάθμια.
Δηλώνει: εξ ορισμού/hover/focus/active/disabled/loading - υποχρεωτική για κάθε διαδραστικό.
Κενές καταστάσεις: πλαίσιο + τιμή + CTA (+ δευτερεύων σύνδεσμος).
Κοινές καταχωρίσεις: μια σελίδα-συναγερμός ανά οθόνη + τοπικές inline κινήσεις.

7) Έντυπα, επικύρωση και σφάλματα

Η ετικέτα είναι υποχρεωτική. Ο κάτοχος θέσης είναι ένα παράδειγμα μορφής, όχι αντικατάστασης.
Inline επικύρωση για θολό, συνοπτικά σφάλματα προς υποβολή.
Μήνυμα σφάλματος: τι είναι λάθος + πώς να καθορίσετε + περιορισμό/μορφή.
Αυτόματη κύλιση και εστίαση στο πρώτο σφάλμα. 'aria-descripedby'.
Μάσκες και μορφότυποι: άμεση, αλλά δεν σπάνε την είσοδο (ο παϊστής είναι δυνατός).
Ασφάλεια δεδομένων: μην χάσετε τίποτα κατά την επανεκκίνηση/σφάλμα.

8) Όροι και ανάδραση

Επιτυχία: πρόποση 2-4 s, ουδέτερος-θετικός τόνος, CTA «τι ακολουθεί».
Πληροφορίες/ειδοποίηση: μαλακό πανό/τύπος, δεν εμποδίζει το ρεύμα.
Προειδοποίηση/Σφάλμα/Κρίσιμη: ιεραρχία οπτικά/σημασιολογικά. κρίσιμη - μέθοδος/πανό με ρητή δράση.
Φόρτωση: σκελετός> spinner. αξιολόγηση του χρόνου αναμονής> 3 s.

9) Περιεχόμενο και μικροσκόπηση

Ο κανόνας των τριών απαντήσεων: τι συμβαίνει → γιατί → τι να κάνουμε στη συνέχεια.
CTA: ρήμα δράσης + αντικείμενο («Αποθήκευση αλλαγών», «Επαλήθευση διέλευσης»).
Αριθμοί/ημερομηνίες/νομίσματα: τοπικές μορφές.
Τόνος: φιλικός. σε αγχωτικά βήματα (πληρωμή/ασφάλεια) - ουδέτερα.

10) Διαθεσιμότητα (A11y)

Πλήρης πλοήγηση σε πληκτρολόγιο. λογική σειρά καρτέλας.
Ρόλοι και 'άρια-' για διαδραστικές, ζωντανές περιοχές για τοστ/κατάσταση.
Αντιθέσεις, δακτύλιοι εστίασης, διαδραστικά μεγέθη ≥ 44 × 44 px.
Εναλλακτικές λύσεις κειμένου για εικονίδια/εικόνες. πίνακες με «th »/« πεδίο εφαρμογής».
Έλεγχοι: αυτόματο (χιτώνιο/σαρωτή) + χειροκίνητα σενάρια του αναγνώστη οθόνης.

11) Εντοπισμός και διεθνοποίηση

Όλες οι συμβολοσειρές είναι στο πλαίσιο i18n κλειδιά.
Δοκιμή «μακρών γλωσσών» (DE/TR), τρόπων RTL.
Αριθμοί/νομίσματα/χρόνοι - υπηρεσίες μορφοποίησης.
Τονικός χάρτης: βαθμός τυπικότητας/συναισθήματος ανά σενάριο (επιβίβαση/πληρωμές/ασφάλεια).

12) Ανταπόκριση και †

Σημεία διακοπής: 360/768/1024/1280 +.
Mobile-first: Κρίσιμη διαδρομή διαθέσιμη με το ένα χέρι, CTA στην περιοχή του αντίχειρα.
Χειρονομίες και πληκτρολόγιο: οι χειρονομίες αναπαράγονται με κουμπιά. στην επιφάνεια εργασίας - hotkeys.
Πυκνότητα: στην επιφάνεια εργασίας - «αέρας», σε κινητό - κατακόρυφη εξοικονόμηση χωρίς να διακυβεύεται η δυνατότητα κλικ.

13) Σκοτεινό θέμα

Διατηρείται η αντίθεση της WCAG. να αποφεύγεται το «καθαρό μαύρο» για το φόντο (σκούρο γκρι).
Λάμψη/σκιές - εξασθενημένη; εστίαση αντίθεσης δακτυλίου.
Εικονογραφήσεις και λογότυπα - με ανεστραμμένες εκδόσεις.
Μεταβατική πολιτική: αποθήκευση της επιλογής του χρήστη (σύστημα/φως/σκοτάδι).

14) Κινούμενα σχέδια και κίνηση

Διάρκεια: 120-200 ms (μικρά), 200-300 ms (μεταβατικά μέτρα).
Οι λειτουργίες επιτάχυνσης είναι φυσικές (κυβικό-bezier με ελαφρά επιβράδυνση).
Τα κινούμενα σχέδια δεν πρέπει να εμποδίζουν τη ροή και να μειώνουν την αναγνωσιμότητα.
Σεβασμός «προτιμά-μειωμένη κίνηση».

15) Επιδόσεις

LCP ≤ 2. 5s, TTI/TBT σε πράσινο· συγκόλληση κωδικών· τεμπέλης φόρτωση μέσων.
Εικονικοποίηση μακρών καταλόγων. αποθήκευση δεδομένων.
Σκελετός για αντίληψη ταχύτητας. ελαχιστοποίηση της διάταξης «σκουπίδια».

16) Ασφάλεια και προστασία της ιδιωτικής ζωής στον UI

Σαφείς εξηγήσεις των λόγων των αιτήσεων (φωτογραφική μηχανή, KYC, geo).
Διαφανείς προθεσμίες/επιτροπές/όρια· χωρίς «στιγμιαία» εφόσον είναι δυνατές καθυστερήσεις.
Εμπιστευτικά δεδομένα - κάλυψη, ρητή «εμφάνιση/απόκρυψη».
Επιβεβαίωση μη αναστρέψιμων ενεργειών. Καταγραφή δραστηριοτήτων/Γνωστοποιήσεις σύνδεσης.

17) Μετρήσεις ποιότητας UX

Μετατροπή βαθμίδας και χρόνος ολοκλήρωσης.
Ρυθμός σφάλματος ανά πεδία/βήματα και χρόνος-to-Fix.
CTR ανά CTA και επαναληψιμότητα σεναρίου.
Παράδοση μετά το σφάλμα/μετά τη φόρτωση> N δευτερόλεπτα.
Προσκλήσεις υποβολής προτάσεων ανά θέμα (πριν/μετά τις αλλαγές).
για απελευθέρωση (στόχος - 0 κρίσιμη).

18) Κατάλογοι ελέγχου

Οθόνη πριν την απελευθέρωση

• Ένας πρωταρχικός στόχος και ένας πρωτογενής CTA.

[Η] ναυσιπλοΐα και όπου-I-am κατάσταση είναι προφανής.

• Σύντομο περιεχόμενο: 1-2 προτάσεις ανά τετράγωνο.
• Κράτη: καλύπτεται η φόρτωση/κενό/σφάλμα/επιτυχία.
• A11y: Αντίθεση AA, εστίαση ορατή, 'aria-' στη διαδραστική.
• Εντοπισμός: μήκη συμβολοσειρών/μορφότυποι/RTL ελέγχθηκαν.
• Απόδοση: Δεν υπάρχουν «βαριά» μπλοκ άσκοπα.

Έντυπο προ της αποδέσμευσης

• Υπάρχουν ετικέτες και μορφότυποι δειγμάτων.
• Επικύρωση γραμμής + περίληψη προς υποβολή.
• Κύλιση στο πρώτο σφάλμα, εστίαση στο πλαίσιο.
• Μηνύματα: τι/πώς/γιατί; χωρίς κωδικούς 500/400 για τον χρήστη.
• Δεν χάνονται δεδομένα για σφάλματα/επανεκκίνηση.

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

«OK» ως CTA σε σημασιολογικά βήματα.
Ο κάτοχος της θέσης αντί της ετικέτας.
Χρώμα ως το μοναδικό σήμα κατάστασης.
Spinners χωρίς εκτίμηση χρόνου και καμία εναλλακτική λύση.
Παράθυρα χωρίς παγίδα εστίασης και κλείσιμο ESC.
Τύποι/εικονίδια ανάμειξης, στοιχεία αναπαραγωγής εκτός του συστήματος σχεδιασμού.
Χιούμορ/emoji σε κρίσιμα σενάρια (πληρωμή/ασφάλεια).

20) Πριν/μετά παραδείγματα

Σφάλμα μορφής

Πριν: «Σφάλμα 400»

Μετά: "Μη έγκυρη μορφή ημερομηνίας. Χρήση DD. MM. YYYY"

Κενή κατάσταση

Πριν: «Είναι άδειο εδώ»

Μετά: "Η ιστορία των πράξεων μετά την πρώτη αναπλήρωση θα εμφανιστεί εδώ. [Top Up]"

Μήνυμα επιτυχίας

Προς: «Έγινε»

Μετά: "Η πληρωμή έγινε δεκτή. Ισοζύγιο επικαιροποιημένο. [Προβολή της ιστορίας]"

Πλοήγηση

Πριν: Είναι ασαφές πού βρίσκεται ο χρήστης

Μετά: ενεργός καρτέλα + ψίχουλα ψωμιού + ρητός τίτλος σελίδας

21) Πρότυπα για επανεξέταση σχεδιασμού

Πλαίσιο οθόνης

Τίτλος → σύντομη περιγραφή → περιεχομένου/καταλόγου → ανάδραση/κατάσταση → δράσεων.

Πλαίσιο μούχλας

Κεφαλίδα άμεσο πεδίο (ετικέτα + βοηθός + σφάλμα) CTA δευτερεύουσες δράσεις σημειώσεις.

Πρότυπο μικροεπισκόπησης

Τίτλος (πρώην)

1-2 προτάσεις: πλαίσιο + επόμενο βήμα

CTA: δράση + αντικείμενο

Δευτερεύουσα σύνδεση: βοήθεια/κανόνες

22) Διαδικασίες και τήρηση προτύπων

Ορισμός του Done (UX): διάταξη + κείμενα + καταστάσεις + A11y + i18n + μετρήσεις.
Ανασκόπηση UX στις δημόσιες σχέσεις: κατάλογος σημείων 18-21.
Τεκμηρίωση: κάθε χαρακτηριστικό προσθέτει/ενημερώνει έναν οδηγό στο wiki/Storybook.
Έλεγχος μία φορά το τρίμηνο: περιεχόμενο, A11y, επιδόσεις, συνέπεια.

Τελικό φύλλο εξαπάτησης

Ένας στόχος, ένας κύριος CTA.
Τα κράτη και η ανατροφοδότηση έχουν σχεδιαστεί εκ των προτέρων.
και εντοπισμός - από το μηδέν, όχι «αργότερα».
Λιγότερα χρώματα - περισσότερη σημασιολογία και ρυθμός.
Μέτρο: μετατροπή, σφάλματα, χρόνος, αντιστροφές.
Μέσα από το σύστημα σχεδιασμού: οι ίδιοι κανόνες → τις ίδιες προσδοκίες → προβλέψιμο UX.

Μπορώ να συμπληρώσω αυτόν τον οδηγό με έτοιμα πρότυπα για τα βασικά σενάρια σας (εγγραφή/CUS, κατάθεση/απόσυρση, μπόνους/τουρνουά) και να συλλέξω καταλόγους για τη διαδικασία αναθεώρησής σας.