डिजाइन प्रणाली और उनके प्रलेखन
1) एक डिजाइन प्रणाली क्या है और इसकी आवश्यकता क्यों है
एक डिजाइन प्रणाली एक इंटरफ़ेस के लिए सत्य का एक एकल स्रोत है: टोकन, घटकों, प्रथाओं और प्रलेखन का एक सेट जो यूएक्स पूर्वानुमेयता, विकास गति और स्केलेबिलिटी प्रदान करता है।
उद्देश्य:- सभी उत्पादों में दृश्य और व्यवहार परत की संगति।
- गति: पुन: उपयोग घटकों, कम समीक्षा लागत।
- गुणवत्ता: सामान्य A11y पैटर्न, स्थानीयकरण, परीक्षण, सामग्री मानक।
- प्रबंधनीयता: स्पष्ट जिम्मेदारी, रिलीज, रोडमैप।
2) डिजाइन प्रणाली वास्तुकला (परतें)
1. डिजाइन टोकन (फाउंडेशन): रंग, टाइपोग्राफी, आयाम, रेडी, छाया, इंडेंट, राज्यों के साथ-साथ अर्थ टोकन ('रंग। सतह। चेतावनी ',' अंतरिक्ष। xs ')।
2. UI घटक: बटन, इनपुट फ़ील्ड, मोडल विंडो, ड्रॉपडाउन, टेबल, टोस्ट, बैनर, अलर्ट, खाली स्टेट्स, कंकाल।
3. पैटर्न और रचनाएँ: केवाईसी फॉर्म, भुगतान प्रवाह, शून्य परिणाम, चरण स्वामी, सामग्री कार्ड।
4. सामग्री गाइड (माइक्रोकोपी): टोन, शब्दों का शब्दकोश, त्रुटि/सफलता पैटर्न, पुश/बैनर।
5. बुनियादी ढांचा: A11y, परीक्षण, स्थानीयकरण, संस्करण, योगदानकर्ता (योगदान) के लिए गाइड।
3) डिजाइन टोकन: सिद्धांत
शब्दार्थ> "कच्चा" शैली। रंग इस्तेमाल करें। पाठ। '#' के बजाय म्यूट '।
थीमाइजेशन और प्लेटफार्म। स्रोत टोकन - प्लेटफ़ॉर्म मैपिंग (वेब, आईओएस, एंड्रॉइड, ईमेल)।
टोकन स्तर पर लाइट/डार्क थीम और WCAG कंट्रास्ट।
वैश्विक और प्रासंगिक तराजू: 'अंतरिक्ष। 2 ',' त्रिज्या। md ',' ऊंचाई। 1 ',' अपारदर्शिता। विकलांग '।
टोकन वर्शनिंग: परिवर्तन - मूल्यह्रास नीति और प्रवासन नोटों के माध्यम से।
4) घटक: प्रलेखन में पृष्ठ की आवश्यकताएं और संरचना
प्रत्येक घटक के लिए, प्रलेखन में शामिल होंगे
वर्णन और उद्देश्य। उपयोग कब करें/न करें।
वेरिएंट/राज्य। आयाम, प्रकार (प्राथमिक/माध्यमिक/भूत), अक्षम, लोडिंग, विनाशकारी।
पहुँच। रोल, कीबोर्ड नेविगेशन, 'एरिया-', कंट्रास्ट, फोकस रिंग्स।
माइक्रोकॉपी पाठ और उदाहरण। वैध लेबल/प्लेसहोल्डर्स, गलतियाँ, मदद।
कोड उदाहरण। न्यूनतम एपीआई, नियंत्रित/अनियंत्रित।
रूपों और i18n के साथ एकीकरण। लंबी लाइन के मामले, संख्या/मुद्राएं/तारीखें।
विरोधी उदाहरण। गलत उपयोग पैटर्न।
टेस्ट मैट्रिक्स। दृश्य स्नैपशॉट, यूनिट/इंटरैक्शन, स्क्रीन रीडर।
5) रचना पैटर्न (व्यंजनों)
पंजीकरण फॉर्म/सीयूएस: चरण-दर-चरण जादूगर, प्रगति, सत्यापन इनलाइन + सारांश, त्रुटि पैटर्न।
भुगतान प्रवाह: विधि चयन, शुल्क, तिथि, समान-विधि नियम, पुष्टि और स्थिति।
रिक्त स्थिति: संदर्भ + मान + सीटीए, शून्य खोज परिणाम।
सफलता/त्रुटि संदेश: स्थिति पदानुक्रम, दृश्य टोकन, टोस्ट/बैनर/मोडल।
नेविगेशन और फिल्टर: वैश्विक खोज, त्वरित प्रीसेट, टैग।
पैटर्न पृष्ठों को माइक्रोकॉपी और A11y नोट्स के साथ कॉपी करने के लिए तैयार घटकों की एक संरचना दिखानी चाहिए।
6) कंटेंट गाइड (वॉयस एंड टोन, माइक्रोकॉपी)
आवाज: पेशेवर, स्पष्ट; टोन संदर्भ (ऑन बोर्डिंग, भुगतान, सुरक्षा) पर निर्भर करता है।
शब्दों का एकीकृत शब्दकोश: भुगतान, बोनस, सीमा, केवाईसी - प्रति उत्पाद एक मूल्य।
साँचा: CTA, त्रुटियाँ, चेतावनी, सफलता, खाली अवस्थाएँ, सूचनाएँ।
स्थानीयकरण-पहला: क्षेत्र द्वारा लाइनों, संख्याओं/मुद्राओं/तिथियों की लंबाई के लिए स्टॉक।
A11y-vocabulary: स्पष्ट लेबल, आरिया-विवरण, अस्पष्टता के बिना।
7) एक प्रणाली मानक के रूप में पहुँच (A11y)
मूल मानदंड: WCAG 2। इसके विपरीत 1 एए, फोकस हमेशा दिखाई देता है, कीबोर्ड नेविगेशन।
भूमिकाएं और विशेषताएं: घटक 'भूमिका', 'आरिया-लेबल', 'आरिया-वर्णन', टोस्ट/अलर्ट के लिए जीवित क्षेत्र का वर्णन करते हैं।
ऑन-स्क्रीन पाठक: वाक्यांशों के उदाहरण, पढ़ ने का क्रम, सही स्थिति ('मुखर/विनम्र')।
परीक्षण प्रक्रियाएँ: स्वचालित जाँच + मैनुअल स्क्रिप्ट।
8) स्थानीयकरण और अंतर्राष्ट्रीयकरण
घटक कोड + संदर्भ विवरण के बगल में i18n कुंजी।
संख्या/मुद्राएं/तिथियां स्वरूपण उपयोगिताओं के माध्यम से; टेम्पलेट में हार्डकोड पाठ नहीं।
लंबाई परीक्षण: "लंबा जर्मन", "संकीर्ण मोबाइल", आरटीएल वेरिएंट।
भाषाओं में स्वर: महत्वपूर्ण चरणों (भुगतान/सुरक्षा) के लिए टोन-मैप।
9) प्रलेखन: संरचना और नेविगेशन
अनुशंसित डिजाइन सिस्टम विकी/पोर्टल संरचना:1. परिचय: मिशन, सिद्धांत, जिम्मेदारी के क्षेत्र।
2. टोकन: रंग, टाइपोग्राफी, ग्रिड, आयाम, छाया, राज्य, विषय।
3. घटक: फिल्टर के साथ कैटलॉग (भूमिका द्वारा, मंच द्वारा, A11y द्वारा)।
4. पैटर्न: परिदृश्य (रूप, भुगतान, खाली राज्य, सफलता/त्रुटियां)।
5. सामग्री गाइड: आवाज और टोन, शब्दकोश, माइक्रोकॉपी टेम्पलेट।
6. पहुँच: मानक, चेकलिस्ट, परीक्षण मामले।
7. स्थानीयकरण: सिद्धांत, उदाहरण, बाजार द्वारा शब्दावली।
8. एकीकरण और कोड: स्थापना, संस्करण, उदाहरण, कैसे-माइग्रेट करना।
9. योगदान: योगदान प्रक्रियाओं, डिजाइन समीक्षा, कोड समीक्षा, किए गए की परिभाषा।
10. चेंजेलॉग और रोडमैप: रिलीज, मूल्यह्रास, विकास योजना, ज्ञात मुद्दे।
10) शासन और प्रक्रियाएं
भूमिकाएँ: सिस्टम मालिक (डिज़ाइनर/यूएक्स प्लेटफ़ॉर्म), मेंटेनर (डिज़ाइन/एफई), सलाहकार (बीई, A11y, स्थानीयकरण)।
परिवर्तन समिति: अनुरोध मूल्यांकन, प्राथमिकता, एपीआई/टोकन सुलह।
प्रक्रियाएं: नए घटकों के लिए RFC, आंतरिक मुद्दा रूप, बग के लिए SLA।
डन की परिभाषा: डिजाइन (फिगमा) ↔ कोड (यूआई पैकेज) ↔ डॉक (उदाहरण + गाइड) ↔ परीक्षण।
11) योगदान: कैसे जोड़ें/बदलें
RFC टेम्पलेट: एक समस्या विकल्प - चुना हुआ निर्णय i18n माइग्रेशन जोखिम।
प्रवाह पीआर: डिजाइन समीक्षा → कोड समीक्षा → यूएक्स कॉपीराइटर → A11y चेक → रिलीज नोट्स।
पिछड़े संगतता नियम: गैर-विनाशकारी, प्रमुख के लिए मामूली/पैच - मूल्यह्रास और स्वचालित प्रवास के साथ, जहां संभव हो।
12) वर्शनिंग, रिलीज, माइग्रेशन
पैकेज के लिए SemVer ('@ company/ds-core', '@ company/ds-forms', '@ company/ds-charts')।
रिलीज नोट: टोकन परिवर्तन, घटक एपीआई, डिफ़ॉल्ट व्यवहार, ब्रेकिंग परिवर्तन, माइग्रेशन गाइड।
मूल्यह्रास: डॉक मार्कअप, लिंटर नियम, बड़े पैमाने पर प्रतिस्थापन के लिए कोड मॉड्स।
डिजाइन-टोकन पाइपलाइन: एकल स्रोत (JSON/YAML) → प्लेटफ़ॉर्म बिल्ड (CSS vars, iOS, Android)।
13) गुणवत्ता परीक्षण
व्यवहार और शर्तों के इकाई परीक्षण।
दृश्य स्नैपशॉट (थीम/राज्य प्रतिगमन)।
A11y परीक्षण: स्क्रीन रीडर की स्वचालित + मैनुअल स्क्रिप्ट।
E2E महत्वपूर्ण प्रवाह (पंजीकरण, भुगतान, केवाईसी) के मामले।
पर्फ बजट: बंडल/रेंडर सीमा और भारी लत प्रतिबंध।
14) डिजाइन प्रणाली परिपक्वता मैट्रिक्स
गोद लेना: डीएस का उपयोग करके% स्क्रीन/रिपॉजिटरी।
वेग: लेआउट से डिलीवरी तक का समय।
गुणवत्ता: दोष UI/A11y से 1 रिलीज।
स्थिरता: डीएस के बाहर "डिस्पोजेबल" घटकों/शैलियों की संख्या।
डॉक्स: डॉक घटक कवरेज, आंतरिक दर्शक एनपीएस (डिजाइनर/डेवलपर्स/विश्लेषक)।
15) एंटी-पैटर्न
शब्दार्थ के बिना एक पैलेट के रूप में टोकन ("सिर्फ रंग")।
प्रलेखन के बिना और चरम मामलों के उदाहरणों के बिना घटक।
अनदेखी (कोई फोकस नहीं, कम कंट्रास्ट, कोई 'आरिया' नहीं)।
मूल्यह्रास और माइग्रेशन गाइड के बिना संस्करण को तोड़ ना।
घटकों में छिपा तर्क (यूआई व्यवहार के बजाय व्यावसायिक नियम)।
एपीआई विस्तार के बजाय संकीर्ण मामलों के लिए घटकों का दोहराव।
16) चेकलिस्ट
टोकन के लिए:- शब्दार्थ नाम और उद्देश्य।
- एए दोनों विषयों में विपरीत।
- स्केल्स और उपयोग प्रलेखित हैं।
- विकल्प/राज्य कवर किए गए हैं।
- A11y-description, 'एरिया-', फोकस।
- माइक्रोकोपी उदाहरण (लेबल, त्रुटियां, संकेत)।
- कोड के नमूने और किनारे के मामले (लंबी लाइनें, लोड, खाली)।
- परीक्षण हरे रंग के होते हैं।
- उदाहरणों के पहले/बाद के साथ नोट जारी करें।
- प्रवासन गाइड - मूल्यह्रास।
- अद्यतन कहानियां/डेमो, डॉक में लिंक।
17) उदाहरणों से पहले/बाद में
इससे पहले (विसंगति):- विभिन्न प्राथमिक बटन: रंग/रेडी/इंडेंट मेल नहीं खाते हैं; विभिन्न सीटीए ग्रंथ।
- टोकन के साथ एकल 'बटन': 'आकार = एमडी', 'वैरिएंट = प्राइमरी', 'त्रिज्या = एलजी', 'रिक्ति = एमडी', शैली में पाठ "क्रिया + ऑब्जेक्ट"।
- तकनीकी संदेश, कोई संकेत नहीं।
- घटक '
अवैध तिथि प्रारूप। डीडी का उपयोग करें। MM। YYYY। '+ स्वतः फोकस।
18) घटक पृष्ठ टेम्पलेट (कंकाल)
नाम: बटन
वर्णन: एक कार्रवाई शुरू करता है; 1 मुख्य प्रति स्क्रीन।
विकल्प: प्राथमिक, माध्यमिक, भूत, विनाशकारी; sm/md/lg आयाम।
राज्य: होवर, फोकस, सक्रिय, लोडिंग, अक्षम।
A11y: कीबोर्ड से उपलब्ध; स्विचेबल के लिए 'एरिया-प्रेस'।
माइक्रोकॉपी: "सेव चेंज", "सत्यापन जारी रखें। "से बचें "ठीक है।"
कोड (उदाहरण API): 'बटन {varant, size, icon, loading}'.
विरोधी उदाहरण: एक ही पदानुक्रम स्तर पर डबल प्राथमिक।
परीक्षण: दृश्य स्नैपशॉट, विपरीत, फोकस-रिंग।
19) डिजाइन प्रणाली कार्यान्वयन प्लेबुक (रोलआउट)
1. इंटरफेस ऑडिट: रंगों/टाइपोग्राफी/घटकों/पैटर्न की सूची।
2. एमवीपी टोकन और प्रमुख घटक: बटन, इनपुट, सिलेक्ट, मोडल, अलर्ट, State, टोस्ट।
3. प्रलेखन और कहानी पुस्तक: लाइव उदाहरण, कोड स्निपेट, गाइड।
4. पायलट उत्पाद: विजेट बदलना, प्रतिक्रिया एकत्र करना।
5. प्रवासन गाइड: कोड-मॉड्स, मूल्यह्रास नियम।
6. सेट का विस्तार: टेबल, पैगिनेशन, फॉर्म फोरम, जादूगर कदम।
7. स्केलिंग: उत्पाद पैटर्न (भुगतान, केवाईसी), एनालिटिक्स और ए/बी के साथ एकीकरण।
8. समर्थन: प्रश्न चैनल, एसएलए, आंतरिक कार्यशालाएं।
20) त्वरित प्रलेखन टेम्पलेट
टोकन टेम्पलेट:- नाम: 'रंग। सीमा। चेतावनी देते हुए '
- उद्देश्य: चेतावनी फ्रेम और बैनर नोटिस/चेतावनी
- कंट्रास्ट: 'रंग के खिलाफ एए। सतह। दोषपूर्ण '
- नहीं: छोटे आकार के पाठ के लिए उपयोग करें
- संबंधित: 'रंग। सतह। चेतावनी ',' आइकन। चेतावनी देते हुए '
पैटर्न पैटर्न: रिक्त अवस्था (noEment)
उद्देश्य: "गलत" महसूस किए बिना एक प्रश्न को ठीक करना
रचना: शीर्षक (थोक), पाठ (1-2 वाक्य), सीटीए, माध्यमिक सीटीए, आइकन/चित्रण
माइक्रोकॉपी: ""{query}" द्वारा कुछ नहीं मिला। फ़िल्टर रीसेट करें या क्वेरी को परिष्कृत करें"
A11y: 'भूमिका = "स्थिति",' आरिया-लाइव = "विनम्र" '
फाइनल धोखा शीट
शब्दार्थ टोकन + अनुशासन = = आधार।
पूर्ण घटक पृष्ठ: उद्देश्य, वेरिएंट, A11y, माइक्रोकॉपी, कोड, परीक्षण।
पैटर्न = तैयार किए गए ग्रंथों और नियमों के साथ घटकों की रचनाएँ।
डॉक्स - उत्पाद: संस्करण, रिलीज, पलायन, योगदान प्रक्रिया।
परिपक्वता को मापना: आंतरिक आदेशों की गोद, गति, दोष, स्थिरता, एनपीएस।