Γλώσσα ενιαίας διεπαφής

1) Τι είναι μια ενιαία γλώσσα διεπαφής και γιατί χρειάζεται

Η Unified Interface Language (NEI) είναι ένα κοινό σύστημα εννοιών, οπτικών κανόνων και αλληλεπιδράσεων που μοιράζονται σχεδιαστές, μηχανικοί, αναλυτές και συγγραφείς περιεχομένου.

• Συνέπεια - Ίδια στοιχεία και όροι μεταξύ προϊόντων και ομάδων.
• Ταχύτητα: ταχεία κατασκευή, λιγότερα ολιβάρ, ταχύτερη επιβίβαση.
• Ποιότητα: συνεπή πρότυπα UX, διαθεσιμότητα «εξ ορισμού».
• Επεκτασιμότητα: ασφαλής εξέλιξη χωρίς να χωριστεί σε «ζωολογικό κήπο UI».

2) Στρώματα μιας μόνο γλώσσας

1. Μάρκες (χρώμα, τυπογραφία, διαστάσεις, σκιές, περιπτώσεις, ακτίνες, κινούμενα σχέδια).
2. Συστατικά μέρη (κουμπιά, πεδία εισόδου, πίνακες, γραφήματα, μοντάλες, τοστ, καρτέλες).
3. Πρότυπα (έντυπα, επικύρωση, βήμα προς βήμα μάγοι, κατάλογοι/πίνακες, κοινοποιήσεις).
4. Περιεχόμενο (μικρο-αντιγραφή, ορολογία, μηνύματα σφάλματος).
5. Εικονογραφία και εικονογραφήσεις (οικογένεια, στυλ, διαστάσεις και γραμμές).
6. Διαθεσιμότητα και i18n/RTL (A11y κανόνες, δυνατότητα μετάφρασης, τοπικοί τόποι).
7. Διαδικασίες (εκδόσεις, οδηγοί, ανασκοπήσεις, χιτώνια, προβολές και παραδείγματα).

3) Μάρκες σχεδιασμού (βάση εκφραστικότητας)

Οι μάρκες ονομάζονται τιμές που επαναχρησιμοποιούνται σε όλα τα προϊόντα.

3. 1 συμβολική δομή (παράδειγμα)

json
{
"color": {
"bg": { "base": "#FFFFFF", "subtle": "#F7F8FA" },
"fg": { "primary": "#11131A", "muted": "#656D76" },
"accent": { "primary": "#2F6BFF", "warning": "#FF9F1A", "critical": "#E53935", "success": "#2EAE60" }
},
"space": { "xs": 4, "sm": 8, "md": 12, "lg": 16, "xl": 24, "2xl": 32 },
"radius": { "sm": 8, "md": 12, "lg": 16, "pill": 1000 },
"shadow": { "sm": "0 1px 2px rgba(0,0,0,.08)", "md": "0 4px 12px rgba(0,0,0,.10)" },
"font": { "family": "Inter, system-ui", "size": { "sm": 12, "md": 14, "lg": 16, "xl": 20 } },
"motion": { "duration": { "fast": 120, "base": 200, "slow": 320 }, "curve": { "inout": "ease-in-out" } }
}

3. 2 μάρκες ονομασίας

Από γενικό σε συγκεκριμένο: 'χρώμα. προφορά. πρωτογενής ", не" μπλε ".
Χωρίς να είναι συνδεδεμένο με μια μάρκα στην ονομασία (η μάρκα είναι ένα θέμα, όχι ένα συμβολικό όνομα).
Διαβαθμίσεις: 'fg. muted ',' fg. πρωτογενής ',' fg. αντίστροφα '. Μη κωδικοποιήσετε τη φωτεινότητα στο όνομα ('blue500') χωρίς σύστημα.

3. 3 Μάρκες θέματος

Φως, σκούρο, αντίθετο: αλλαγή τιμών, όχι ονομάτων.
Θέματα - παράκαμψη του επιπέδου, η ΚΠΕ παραμένει συνεπής.

4) Συνιστώσες: Σύμβαση, κράτη, διαθεσιμότητα

Συστατικό = Οπτική + Συμπεριφορά + Συμβόλαιο Props + A11y.

4. Παράδειγμα σύμβασης κουμπιού

ts type ButtonProps = {
kind: "primary"      "secondary"      "tertiary"      "danger";
size: "sm"      "md"      "lg";
icon?: "plus"      "download"      "trash";
disabled?: boolean;
loading?: boolean;
ariaLabel?: string;
onClick?: (e: MouseEvent) => void;
};

Δηλώνει: «εξ ορισμού/hover/active/focus/disabled/loading».
Διαθεσιμότητα: δακτύλιος εστίασης, μεγέθη στόχου ≥ 40-48 px, 'aria-pressed' για εναλλαγή.

4. 2 Εγγυήσεις συνιστωσών

Σταθερές διαστάσεις (ύψος γραμμής, πλακίδια).
Δυνατότητα πρόσβασης εκτός του πλαισίου (ρόλοι/άρια, πληκτρολόγιο, αντίθεση).
Αναλλοίωτες: σφάλμα μέσα στο πεδίο πάντα στο κάτω μέρος και με 'aria-descripedby'.

5) UX μοτίβα (επαναλαμβανόμενη λογική)

Έντυπα: αριστερή/επάνω ετικέτα, ετικέτα κατόχου θέσης, πλάι-πλάι + συνοπτικά σφάλματα, μάσκες εισόδου και κίνητρα.
Τρόποι μεταφοράς: ένα κύριο CTA, το «Esc» κλείνει, εστιάζει την παγίδα, εστιάζει την επιστροφή.
Πίνακες/κατάλογοι: διαλογή, κολλώδης κεφαλίδα, σελιδοποίηση, εξαγωγή.
Φίλτρα: ρητή εφαρμογή κουμπιού, επαναφορά, αποθηκευμένες προεπιλογές.
Κοινοποιήσεις: τοστ ≤ 3-5 s, παύση εστίασης, 'ρόλος = «κατάσταση/συναγερμός»'.
Dashboards: κορυφαίες ιδέες → πλαίσιο → γραφικών → CTA.

6) Κοινή ορολογία και μικροαντιγραφικά

6. 1 Γλωσσάριο

Διατήρηση ενιαίου γλωσσαρίου επιχειρηματικών και UX όρων. Κάθε άρθρο διεπαφής το αναφέρει.
Για τα διπλά - επιλέξτε μία λέξη («πορτοφόλι» έναντι «ισορροπία»), τη δεύτερη - ως συνώνυμο στην αναζήτηση.

6. 2 Κανόνες κειμένου

Εν συντομία και σχετικά με την υπόθεση. αποφύγετε την ορολογία.
Σφάλματα - εξηγήστε τι πρέπει να κάνετε: «Προσδιορίστε την ημερομηνία στο μορφότυπο ΕΕΕΕ-ΜΜ-ΗΗ».
Οι τίτλοι είναι ουσιαστικοί. κουμπιά - ρήματα («Αποθήκευση», «Ακύρωση»).
Σταθερές μονάδες: ημερομηνία/ώρα σε UTC ή σε τοπικό επίπεδο, νομίσματα με κωδικό (EUR, USD).

7) Εικονογραφία και εικονογραφήσεις

Η οικογένεια είναι ισομορφική: μία γωνία, πάχος γραμμής, πλέγμα 24 × 24.
Κατάσταση και σημασιολογία: χρώμα - δευτερεύον; σχήμα/εικονίδιο + κείμενο - πρωτογενές.
Κλίμακα: τα εικονογράμματα δεν «επιπλέουν» σε διαφορετικές πυκνότητες (1 ×/2 ×/3 ×).

8) Διαθεσιμότητα (A11y) και τοπική προσαρμογή (i18n/RTL)

Τα εξαρτήματα υποβάλλονται σε WCAG AA: αντίθεση, πλοήγηση πληκτρολογίου, εστίαση, 'προτιμά-μειωμένη κίνηση'.
Μεταφρασμένες συμβολοσειρές - σε πόρους, όχι σε κωδικό. Οι κάτοχοι θέσεων και ο αριθμός/μορφότυπος ημερομηνίας μπορούν να εντοπιστούν.
RTL: αντικατοπτρίζοντας εικονίδια, σωστή σειρά καρτέλας, DnD λογική από το πληκτρολόγιο.

9) Αριθμοί, ημερομηνίες, νομίσματα και μορφότυποι

Ημερομηνίες/ώρα: ISO-8601, πραγματικό χρονικό σημείο - UTC· χρήστης - τοπικός.
Νόμισμα: μονάδες ήσσονος σημασίας/δεκαδικές συμβολοσειρές. να προσδιορίζει πάντα έναν κωδικό (για παράδειγμα ", €12. 34» ή «12. 34 ευρώ" - ανά τόπο).
Ενδιαφέρον: '12. 3% 'και σημεία' + 1. 2 pp 'cleary διάκριση.
Στρογγυλοποίηση: σε σημαντικά ψηφία. «k/m» για μεγάλους αριθμούς.

10) Διακυβέρνηση: Ρόλοι, τεχνουργήματα, δίαυλοι

Design Language Council (DLC): Token/ιδιοκτήτες κατασκευαστικών στοιχείων, ισχυρισμοί RFC.

• Κέντρο περιεχομένου (Figma/Code) + ζωντανός κατάλογος με παραδείγματα.
• Τεκμηρίωση: οδηγοί, μοτίβα, A11y, οδηγός περιεχομένου.
• Changelog με ημερομηνίες, επίπεδα (προστίθεται/αλλάζει/διαγράφεται/αφαιρείται/καθορίζεται).
• Κανάλια: εβδομαδιαίος νεροχύτης σχεδιασμού, κανάλι Slack, εκθέσεις υλοποίησης.

11) Έκδοση και εξέλιξη

SemVer για τη συσκευασία συστατικών: 'MAJOR. MINOR. PATCH '.
MINOR - πρόσθετο: νέες μάρκες, στηρίγματα με προεπιλογές, νέα συστατικά.
MAJOR - σπάσιμο: αφαίρεση σκηνικών, αλλαγή σημασιολογίας → οδηγών μετανάστευσης.
Μειώσεις: προειδοποιήσεις, παράθυρο ≥ 90 ημέρες, σημαίες συμβατότητας.

12) Τακτικές γραμμές και αυτόματοι έλεγχοι

UI-linter: απαγορευμένα χρώματα εκτός μαρκών, αντι-μοτίβα (diva-κουμπί, περίγραμμα με αναπηρία).
: αντίθεση, ρόλοι/άρια, εστίαση, πληκτρολόγιο.
i18n-linter: «σκληρές» γραμμές στον κώδικα, εσφαλμένοι κάτοχοι θέσης.
Δοκιμές στιγμιότυπου οθόνης: οπτικές παλινδρόμηση κατασκευαστικών στοιχείων.
Συμβάσεις API οπτικοποίησης (εάν υπάρχουν): τύποι δεδομένων, κλίμακες, υπογραφές.

13) Παρουσίαση συστατικών στοιχείων (storybook/sandbox)

Ζωντανά παραδείγματα με τα στηρίγματα ελέγχου, κώδικα, καταστάσεις, A11y-checker.
«Συνταγές»: μορφή καταχώρισης, βήμα 3 μάγος, πίνακας + φίλτρα, μοντάλκα + τοστ.
«Sandbox of locales»: γλώσσα/μορφές αλλαγής/RTL.

14) Πρότυπα ονομασίας και δομής

14. 1 Στοιχεία (BEM/σημασιολογία, παράδειγμα CSS)

.btn/basic/
.btn--primary/view/
.btn--danger
.btn--lg/size/
.btn __ icon/part/

Στον κώδικα - μονότονες ονομασίες των υποστρωμάτων: 'μέγεθος', 'είδος', 'απενεργοποιημένο', 'onClick'.

14. 2 Δομή αρχείου βιβλιοθήκης

/tokens
/components
/button
/input
/modal
/patterns
/docs
/changelog

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

«Ελεύθερα» χρώματα/περιπτώσεις εκτός μαρκών.
Διπλά στοιχεία: « » « New».
Ο κάτοχος της θέσης ως η μόνη ετικέτα πεδίου.
Περίγραμμα απενεργοποίησης και div-κουμπιά.
Απρόβλεπτο hover/ενεργό/απενεργοποιημένο.
Μεταγραφή όρων αντί της κανονικής μετάφρασης.
Έλλειψη οδηγών μετανάστευσης κατά τις επικαιροποιήσεις.

16) Μετρήσεις ποιότητας μιας γλώσσας

Κάλυψη - το ποσοστό των οθονών που χρησιμοποιούν τη βιβλιοθήκη περιεχομένου.
Δείκτης συνέπειας: Επαναχρησιμοποίηση σημάτων έναντι «χειροκίνητων» στυλ.
Pass Rate - ποσοστό των συστατικών που περνούν WCAG AA.
Ελαττωματική διαφυγή: ελαττώματα UI/περιεχομένου σε πωλήσεις 1k.
Χρόνος έως το πλοίο - χρόνος για την εφαρμογή τυπικής οθόνης πριν/μετά το DLS.
Έγκριση: επιδείξεις DAU, αριθμός δημοσίων σχέσεων με συστατικά στοιχεία/πρότυπα.

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

• Χρησιμοποιημένες μάρκες (χρώμα/περίπτωση/ακτίνες), όχι σκληρές τιμές.
• Εξαρτήματα της βιβλιοθήκης. προσαρμοσμένο - μόνο RFC.
• Προσβασιμότητα: πληκτρολόγιο/εστίαση/αντίθεση/ρόλοι/άρια.
• Μονάδες: ημερομηνίες/νομίσματα/ποσοστά - ανά οδηγό μορφοτύπου.
• Μικροεπισκοπίες: κουμπιά = ρήματα, σφάλματα = διορθωτικές ενέργειες.
• Οι τοποθεσίες/RTL δεν σπάνε τη διάταξη.
• Δηλώνει: παρέχονται φορτία/κενό/σφάλμα.
• Ενημερωμένες δοκιμές οπτικής παλινδρόμησης.

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

Επανάληψη 1 - Ίδρυμα (2- 3 εβδομάδες)

Μάρκες (χρώμα/τυπογραφία/απόσταση/κίνηση), βασικά συστατικά (κουμπί, είσοδος, επιλογή, εργαλειοθήκη, modal), οδηγός περιεχομένου (τόνος, ετικέτες, σφάλματα).
Showcase (storybook) και A11y-checker, συμβολική επένδυση.

Iteration 2 - Πρότυπα και εντοπισμός (3- 4 εβδομάδες)

Πρότυπα εντύπων/πινάκων/φίλτρων, συσκευασία εικονιδίων 24 × 24, RTL/i18n αμμοκιβώτιο, κανόνες για αριθμούς/ημερομηνίες/νομίσματα.
SemVer, changelog, RFC/διαδικασία μετάβασης, autotests (οπτική + A11y).

Iteration 3 - Κλίμακα και Εξέλιξη (Συνεχής)

Συστατικά σύνθεσης (Wizard, DataGrid, Chart primitives), απολέπιση (light/dark/contrast), αναφορές ποιοτικών μετρήσεων, τακτικοί έλεγχοι UX.

19) Mini-FAQ

Είναι απαραίτητο να «όλα ταυτόχρονα»

Όχι, δεν είναι. Ξεκινήστε με μάρκες και βασικά συστατικά, και στη συνέχεια προσθέστε μοτίβα και διαδικασίες.

Πώς να πείσεις τις ομάδες να χρησιμοποιήσουν την ΠΑΝ

Εμφάνιση των κερδών: ταχύτητα, λιγότερα ελαττώματα, έτοιμες συνταγές οθόνης και A11y έξω από το κουτί.

Τι να κάνουμε με τις κληροδοτημένες οθόνες

Σχέδιο μετανάστευσης, στυλ γέφυρας μέσα από μάρκες, οθόνες προτεραιότητας - πρώτα.

Σύνολο

Μια ενιαία γλώσσα διεπαφής δεν είναι μόνο μια βιβλιοθήκη συστατικών. Αυτό είναι ένα σύστημα κανόνων και διαδικασιών, όπου οι μάρκες ορίζουν εκφραστικότητα, συστατικά - συμπεριφορά και διαθεσιμότητα, πρότυπα - επαναληψιμότητα αποφάσεων, και διακυβέρνηση και μετρήσεις - βιώσιμη εξέλιξη. Κάντε τη γλώσσα σας σαφή, επαληθεύσιμη και επεκτεινόμενη - και τα προϊόντα σας θα φαίνονται και θα λειτουργούν ομοιόμορφα, γρήγορα και αξιόπιστα.