Συστήματα σχεδιασμού και τεκμηρίωσή τους

1) Τι είναι ένα σύστημα σχεδιασμού και γιατί χρειάζεται

Ένα σύστημα σχεδιασμού είναι μια ενιαία πηγή αλήθειας για μια διεπαφή: ένα σύνολο από μάρκες, κατασκευαστικά στοιχεία, πρακτικές και τεκμηρίωση που παρέχει UX προβλεψιμότητα, ταχύτητα ανάπτυξης, και επεκτασιμότητα.

• Συνέπεια του οπτικού και συμπεριφορικού στρώματος σε όλα τα προϊόντα.
• Ταχύτητα: στοιχεία επαναχρησιμοποίησης, μικρότερο κόστος επανεξέτασης.
• Ποιότητα: γενικά πρότυπα A11y, εγχώρια προσαρμογή, δοκιμές, πρότυπα περιεχομένου.
• Διαχειριστικότητα: σαφής ευθύνη, ελευθερώσεις, χάρτης πορείας.

2) Αρχιτεκτονική συστήματος σχεδιασμού (στρώματα)

1. Μάρκες σχεδιασμού (θεμέλια): χρώματα, τυπογραφία, διαστάσεις, ακτίνες, σκιές, περιπτώσεις, καταστάσεις, καθώς και σημασιολογικές μάρκες ('χρώμα. επιφάνεια. προειδοποίηση ',' χώρος. xs).
2. Εξαρτήματα UI: κουμπιά, πεδία εισόδου, παράθυρα τρόπων, σταγόνες, τραπέζια, τοστ, πανό, ειδοποιήσεις, κενές καταστάσεις, σκελετοί.
3. Πρότυπα και συνθέσεις: έντυπα KYC, ροή πληρωμών, μηδενικά αποτελέσματα, βηματοδότες, κάρτες περιεχομένου.
4. Οδηγός περιεχομένου (microcopy): τόνος, λεξικό όρων, μοτίβα σφάλματος/επιτυχίας, push/banners.
5. Υποδομή: οδηγός A11y, δοκιμών, τοπικοποίησης, εκδόσεων, συνεισφερόντων (συμβολή).

3) Μάρκες σχεδιασμού: αρχές

Σημασιολογία> «ακατέργαστο» στυλ. Χρήση 'χρώματος. κείμενο. μεταλλαγμένο "αντί για" # 6B7280 ".
Θεματοποίηση και πλατφόρμες. Δείκτες πηγής → χαρτογραφήσεις πλατφόρμας (Web, iOS, Android, email).
Φωτεινό/σκοτεινό θέμα και αντίθεση WCAG στο συμβολικό επίπεδο.
Σφαιρικές και συγκυριακές κλίμακες: "διάστημα. 2 ', ακτίνα. md ',' υψόμετρο. 1 ',' αδιαφάνεια. άτομα με ειδικές ανάγκες ".
Έκδοση σημάτων: αλλαγές - μέσω της πολιτικής υποτίμησης και των σημειώσεων για τη μετανάστευση.

4) Συστατικά στοιχεία: απαιτήσεις και σύνθεση της σελίδας στην τεκμηρίωση

• Περιγραφή και σκοπός. Πότε να χρησιμοποιήσετε/να μην χρησιμοποιήσετε το
• Παραλλαγές/καταστάσεις. Διαστάσεις, τύποι (πρωτογενής/δευτερογενής/φάντασμα), άτομα με ειδικές ανάγκες, φόρτωση, καταστροφική.
• Δυνατότητα πρόσβασης. Ρόλος, πληκτρολόγιο πλοήγησης, 'aria-', αντίθεση, δακτύλιοι εστίασης.
• Κείμενο και παραδείγματα μικροεπισκόπησης. Έγκυρες ετικέτες/κάτοχοι θέσης, λάθη, βοήθεια.
• Παραδείγματα κωδικών. Ελάχιστες APIs, ελεγχόμενες/ανεξέλεγκτες.
• Ενσωμάτωση με έντυπα και i18n. Περιπτώσεις μεγάλων γραμμών, αριθμοί/νομίσματα/ημερομηνίες.
• Αντι-παραδείγματα. Εσφαλμένα πρότυπα χρήσης.
• Πίνακας δοκιμής. Οπτικά στιγμιότυπα, μονάδα/αλληλεπίδραση, συσκευές ανάγνωσης οθόνης.

5) Μοτίβα σύνθεσης (Συνταγές)

Έντυπα καταχώρισης/CUS: βήμα προς βήμα μάγος, πρόοδος, επικύρωση inline + περίληψη, πρότυπα σφάλματος.
Ροή πληρωμών: επιλογή μεθόδου, τέλη, ημερομηνίες, κανόνας της ίδιας μεθόδου, επιβεβαίωση και κατάσταση.
Κενές καταστάσεις: πλαίσιο + τιμή + CTA, μηδενικά αποτελέσματα αναζήτησης.
Μηνύματα επιτυχίας/σφάλματος: ιεραρχία κατάστασης, οπτικές μάρκες, τοστ/πανό/μοντάλ.
Πλοήγηση και φίλτρα: παγκόσμια αναζήτηση, γρήγορες προεπιλογές, ετικέτες.
Οι σελίδες μοτίβου πρέπει να παρουσιάζουν σύνθεση των συστατικών που είναι έτοιμα για αντιγραφή, με μικροσκοπικές και A11y σημειώσεις.

6) Οδηγός περιεχομένου (φωνή & τόνος, μικροεπισκόπηση)

Φωνή: επαγγελματική, σαφής· ο τόνος εξαρτάται από το πλαίσιο (επιβίβαση, πληρωμή, ασφάλεια).
Ενοποιημένο λεξικό όρων: πληρωμές, μπόνους, όρια, KYC - μία τιμή ανά προϊόν.
Πρότυπα: CTA, σφάλματα, προειδοποιήσεις, επιτυχίες, κενές καταστάσεις, κοινοποιήσεις.
Πρώτη προσαρμογή: απόθεμα για το μήκος των γραμμών, αριθμοί/νομίσματα/ημερομηνίες ανά περιφέρεια.
: σαφείς ετικέτες, aria-περιγραφές, χωρίς ασάφειες.

7) Προσβασιμότητα (A11y) ως πρότυπο συστήματος

Βασικά κριτήρια: WCAG 2. 1 AA για αντίθεση, εστίαση είναι πάντα ορατή, πληκτρολόγιο πλοήγησης.
Ρόλοι και χαρακτηριστικά γνωρίσματα: συνιστώσες περιγράφουν «ρόλο», «σήμα άρια», «περιγραφή άρια», ζωντανές περιοχές για τοστ/προειδοποιήσεις.
Αναγνώστες στην οθόνη: παραδείγματα φράσεων, σειρά ανάγνωσης, ορθές καταστάσεις («δυναμική/ευγενική»).
Διαδικασίες δοκιμής: αυτόματοι έλεγχοι + χειροκίνητα σενάρια.

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

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

9) Τεκμηρίωση: δομή και ναυσιπλοΐα

1. Εισαγωγή: αποστολή, αρχές, τομείς ευθύνης.

2. Μάρκες: χρώματα, τυπογραφία, πλέγμα, διαστάσεις, σκιές, καταστάσεις, θέματα.

3. Συστατικά μέρη: κατάλογος με φίλτρα (ανά ρόλο, ανά πλατφόρμα, ανά A11y).

4. Πρότυπα: σενάρια (έντυπα, πληρωμές, κενές καταστάσεις, επιτυχία/σφάλματα).

5. Οδηγός περιεχομένου: φωνές και τόνοι, λεξικά, πρότυπα μικροεπισκόπησης.

6. Προσβασιμότητα: πρότυπα, κατάλογοι ελέγχου, περιπτώσεις δοκιμών.

7. Τοπικοποίηση: αρχές, παραδείγματα, γλωσσάρια ανά αγορά.

8. Ενσωμάτωση και κώδικας: εγκατάσταση, εκδόσεις, παραδείγματα, τρόπος μετάβασης.

9. Συμβολή: συνεισφορά στις διαδικασίες, ανασκόπηση του σχεδιασμού, επανεξέταση του κώδικα, ορισμός του αποτελέσματος.

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

10) Διακυβέρνηση και διαδικασίες

Ρόλοι: ιδιοκτήτης συστήματος (DesignOps/UX Platform), συντηρητές (design/FE), σύμβουλοι (BE, A11y, τοπικοποίηση).
Επιτροπή αλλαγής: Αξιολόγηση αιτήματος, ιεράρχηση προτεραιοτήτων, συμφιλίωση API/Token.
Διαδικασίες: RFC για νέα συστατικά στοιχεία, έντυπα εσωτερικής έκδοσης, SLA για σφάλματα.
Ορισμός του αποτελέσματος: σχεδιασμός (Figma) ↔ κωδικός (πακέτο UI) ↔ δεξαμενή (παράδειγμα + οδηγός) ↔ δοκιμές.

11) Συμβολή: τρόπος προσθήκης/αλλαγής

Υπόδειγμα RFC: ένα πρόβλημα επιλογές την επιλεγείσα απόφαση i18n μετάβαση κινδύνους.
Flow PR: αναθεώρηση σχεδιασμού αναθεώρηση κώδικα αντιγραφέας UX check release notes.
Κανόνες συμβατότητας προς τα πίσω: ήσσονος σημασίας/έμπλαστρο για μη καταστροφική, μείζονα - με υποβάθμιση και αυτόματη μετανάστευση, όπου είναι δυνατόν.

12) Εκδόσεις, απελευθερώσεις, μεταναστεύσεις

SemVer για πακέτα ('@ company/ds-core', '@ company/ds-form ,' @ company/ds-charts ').
Σημειώσεις απελευθέρωσης: συμβολικές αλλαγές, API συστατικών στοιχείων, προεπιλεγμένη συμπεριφορά, αλλαγές θραύσης, οδηγοί μετανάστευσης.
Αποπροσανατολισμοί: σημάνσεις δεξαμενών, κανόνες χιτωνίου, κωδικοί για αντικατάσταση μάζας.
Αγωγός design-mokens: μονή πηγή (JSON/YAML) κατασκευάζει πλατφόρμα (CSS vars, iOS, Android).

13) Έλεγχος ποιότητας

Δοκιμές μονάδας συμπεριφοράς και συνθηκών.
Οπτικά στιγμιότυπα (θέμα/κατάσταση παλινδρόμησης).
δοκιμές: αυτόματα + χειροκίνητα σενάρια του αναγνώστη οθόνης.
περιπτώσεις κρίσιμης ροής (εγγραφή, πληρωμές, KYC).
Προϋπολογισμοί Perf: δέσμη/καθιστούν όρια και βαριές απαγορεύσεις εθισμού.

14) Μετρήσεις ωριμότητας του συστήματος σχεδιασμού

Υιοθέτηση:% οθόνες/αποθετήρια με χρήση DS.
Ταχύτητα: Χρόνος από τη διάταξη έως την παράδοση.
Ποιότητα: ελαττώματα UI/A11y έως 1 απελευθέρωση.
Συνέπεια: αριθμός συστατικών/τύπων «μιας χρήσης» εκτός του DS.
Γιατροί: κάλυψη εξαρτημάτων δεξαμενών, εσωτερικό ακροατήριο NPS (σχεδιαστές/προγραμματιστές/αναλυτές).

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

Σημάδια ως παλέτα χωρίς σημασιολογία («μόνο χρώμα»).
Κατασκευαστικά στοιχεία χωρίς τεκμηρίωση και χωρίς παραδείγματα ακραίων περιπτώσεων.
Αγνοώντας A11y (χωρίς εστίαση, χαμηλή αντίθεση, χωρίς 'άρια').
Σπάζοντας την έκδοση χωρίς απαξίωση και οδηγό μετανάστευσης.
Κρυφή λογική σε συστατικά (επιχειρηματικοί κανόνες αντί για συμπεριφορά UI).
Αλληλεπικάλυψη συστατικών για στενές περιπτώσεις αντί για επέκταση API.

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

• Σημασιολογικά ονόματα και σκοποί.
• Αντίθεση ΑΑ και στα δύο θέματα.
• Τα σκάλες και η χρήση είναι τεκμηριωμένα.

• Καλύπτονται οι επιλογές/κράτη.
• A11y-description, 'aria-', εστίαση.
• Παραδείγματα μικροεπισκόπησης (ετικέτες, σφάλματα, υποδείξεις).
• Κωδικά δείγματα και κιβώτια άκρων (παραγάδια, φορτίο, κενά).
• Unit/visual/A11y δοκιμές είναι πράσινες.

• Δημοσιεύονται σημειώσεις με παραδείγματα πριν/μετά.
• Οδηγός μετανάστευσης и υποτιμήσεις.
• Ενημερωμένες ιστορίες/demo, σύνδεσμοι στην αποβάθρα.

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

• Διαφορετικά κύρια κουμπιά: χρώματα/ακτίνες/περιπτώσεις δεν ταιριάζουν. διαφορετικά κείμενα CTA.

• Μονό 'κουμπί' με μάρκες: 'μέγεθος = md', 'παραλλαγή = πρωτογενές', 'ακτίνα = lg', 'απόσταση = md', κείμενο στο στυλ «δράση + αντικείμενο».

• Τεχνικά μηνύματα, χωρίς κίνητρα.

• Συστατικό '<σοβαρότητα FieldError = «σφάλμα»> Μη έγκυρη μορφή ημερομηνίας. Χρήση DD. MM. YYYY. '+ αυτόματη εστίαση.

18) Πρότυπο συστατικών σελίδων (σκελετός)

Όνομα: Κουμπί

Περιγραφή: ξεκινά μια ενέργεια. 1 κύρια ανά οθόνη.
Επιλογές: πρωτογενής, δευτερογενής, φάντασμα, καταστροφική· διαστάσεις sm/md/lg.
Κράτη: αιώρηση, εστίαση, ενεργός, φόρτωση, αναπηρία.
: διατίθεται από το πληκτρολόγιο· «aria-pressed» για τη δυνατότητα μεταγωγής.

Μικροεπισκόπηση: "Αποθήκευση αλλαγών", "Συνέχιση επαλήθευσης. "Αποφύγετε "OK"

Κωδικός (παράδειγμα API): «Κουμπί {παραλλαγή, μέγεθος, εικονίδιο, φόρτωση}».
Αντι-παραδείγματα: διπλή πρωτοβάθμια στο ίδιο επίπεδο ιεραρχίας.
Δοκιμές: οπτικά στιγμιότυπα, αντίθεση, δακτύλιος εστίασης.

19) Βιβλίο αναπαραγωγής για την εφαρμογή του συστήματος σχεδιασμού (ανάπτυξη)

1. Έλεγχος διεπαφής: απογραφή χρωμάτων/τυπογραφίας/συστατικών στοιχείων/προτύπων.
2. Μάρκες MVP και κύρια συστατικά στοιχεία: Κουμπί, είσοδος, επιλογή, modal, συναγερμός, EmployState, τοστ.
3. Τεκμηρίωση και βιβλίο ιστοριών: ζωντανά παραδείγματα, snippets κώδικα, οδηγοί.
4. Πιλοτικό προϊόν: αντικατάσταση γραφικών συστατικών, συλλογή ανατροφοδότησης.
5. Οδηγός μετανάστευσης: κωδικός-mods, κανόνες απαξίωσης.
6. Επέκταση του συνόλου: πίνακες, σελιδοποίηση, φόρουμ μορφής, βήματα μάγου.
7. Κλιμάκωση: πρότυπα προϊόντων (πληρωμές, KYC), ολοκλήρωση με την αναλυτική και A/B.
8. Υποστήριξη: κανάλι ερωτήσεων, SLA, εσωτερικά εργαστήρια.

20) Υποδείγματα ταχείας τεκμηρίωσης

• Όνομα: 'χρώμα. σύνορα. προειδοποίηση "
• Σκοπός: Προειδοποιητικά πλαίσια και πανό Ειδοποίηση/Προειδοποίηση
• Αντίθεση: AA κατά 'χρώμα. επιφάνεια. defaul
• Μη: χρήση για κείμενο μικρού μεγέθους
• Σχετικό: 'χρώμα. επιφάνεια. προειδοποίηση ',' εικονίδιο. προειδοποίηση "

Μοτίβο μοτίβου: Κενή κατάσταση (noResults)

Σκοπός: Διόρθωση μιας ερώτησης χωρίς να αισθάνεται κανείς «λάθος»

Σύνθεση: τίτλος (χονδρικό), κείμενο (1-2 προτάσεις), CTA, δευτερεύον CTA, εικονίδιο/εικόνα

Microcopy: "Τίποτα δεν βρέθηκε από το "{query}" Επαναφορά των φίλτρων ή τελειοποίηση της ερώτησης"

: 'role = "status"', 'aria-live = "polite' '

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

Σημασιολογικές μάρκες + πειθαρχία A11y = βάση.
Πλήρεις σελίδες: σκοπός, παραλλαγές, A11y, μικροεπισκόπηση, κωδικός, δοκιμές.
Πρότυπα = συνθέσεις συστατικών με έτοιμα κείμενα και κανόνες.
Γιατροί - προϊόν: έκδοση, κυκλοφορίες, μεταναστεύσεις, διαδικασία συνεισφοράς.
Μέτρηση της ωριμότητας: υιοθέτηση, ταχύτητα, ελαττώματα, συνέπεια, NPS εσωτερικών εντολών.