एकल अंतरफलक भाषा

1) एकल इंटरफ़ेस भाषा क्या है और इसकी आवश्यकता क्यों है

यूनिफाइड इंटरफेस लैंग्वेज (एनईआई) डिजाइनरों, इंजीनियरों, विश्लेषकों और सामग्री लेखकों द्वारा साझा की गई अवधारणाओं, दृश्य नियमों और इंटरैक्शन की एक सामान्य प्रणाली है।

• संगति - उत्पादों और टीमों में समान घटक और शर्तें।
• गति: त्वरित बिल्ड, कम होलीवर्स, तेजी से ऑनबोर्डिंग।
• गुणवत्ता: सुसंगत UX पैटर्न, उपलब्धता "डिफ़ॉल्ट रूप से"।
• स्केलेबिलिटी: "यूआई चिड़ियाघर" में टूटे बिना सुरक्षित विकास।

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। म्यूट ',' fg। प्राथमिक ',' fg। उलटा '। सिस्टम के बिना नाम ('blue500') में चमक एनकोड न करें।

3. 3 थीम टोकन

प्रकाश, अंधेरा, विपरीत: मान बदलें, नाम नहीं।

थीम - ओवरराइड परत, यूआई सुसंगत रहता है।

4) घटक: संविदा, राज्य, उपलब्धता

घटक = दृश्य + व्यवहार + प्रॉप्स अनुबंध + A11y।

4. 1 बटन अनुबंध उदाहरण

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;
};

स्थिति: 'डिफ़ॉल्ट/होवर/सक्रिय/फ़ोकस/अक्षम/लोडिंग'.

उपलब्धता: टॉगल के लिए फोकस रिंग, लक्ष्य आकार ≥ 40-48 पीएक्स, 'आरिया-दबाया'।

4. 2 घटक गारंटी

स्थिर आयाम (लाइन-ऊंचाई, पैडिंग)।

बॉक्स से बाहर पहुँच (भूमिकाएँ/आरिया, कीबोर्ड, कंट्रास्ट)।

Invariants: क्षेत्र के अंदर त्रुटि हमेशा नीचे और 'आरिया-वर्णन' के साथ।

5) यूएक्स पैटर्न (दोहराने योग्य तर्क)

प्रपत्र: बाएं/शीर्ष लेबल, प्लेसहोल्डर ≠ लेबल, साइड-बाय + सारांश त्रुटियां, इनपुट मास्क और प्रांप्ट।

मोडल्स: एक मुख्य CTA, 'Esc' बंद हो जाता है, फ़ोकस ट्रैप, फ़ोकस रिटर्न।

टेबल/सूची: छंटाई, चिपचिपा शीर्षिका, पृष्ठभूमि, निर्यात.

फ़िल्टर: स्पष्ट लागू बटन, रीसेट, सहेजे गए प्रीसेट।

सूचनाएं: टोस्ट ≤ 3-5 एस, फोकस पर विराम, 'रोल = "स्थिति/अलर्ट"।

डैशबोर्ड: शीर्ष अंतर्दृष्टि → संदर्भ → ग्राफिक्स → सीटीए।

6) सामान्य शब्दावली और माइक्रो-कॉपीराइटिंग

6. 1 शब्दावली

व्यवसाय और यूएक्स शर्तों की एक शब्दावली बनाए रखें। प्रत्येक इंटरफ़ेस लेख इसका संदर्भ दे

डबल्स के लिए - एक शब्द ("बटुआ" बनाम "संतुलन") चुनें, दूसरा - खोज में एक पर्याय के रूप में।

6. पाठ के 2 नियम

संक्षेप में और मामले पर; शब्दजाल से बचें।

त्रुटियाँ - समझाएं कि क्या करना है: "प्रारूप YYYY-MM-DD में तिथि निर्धारित करें।"

हेडिंग संज्ञा हैं; बटन - क्रिया ("सहेजें", "रद्द करें")।

सुसंगत इकाइयाँ: UTC या लोकेल में तिथि/समय, कोड के साथ मुद्राएँ (EUR, USD)।

7) आइकनोग्राफी और चित्र

परिवार आइसोमॉर्फिक है: एकल कोण, रेखा मोटाई, ग्रिड 24 × 24।

स्टेटस और शब्दार्थ: रंग - माध्यमिक; आकार/आइकन + पाठ - प्राथमिक।

स्केलिंग: पिक्टोग्राम विभिन्न घनत्वों (1 ×/2 ×/3 ×) में "फ्लोट" नहीं करते हैं।

8) उपलब्धता (A11y) और स्थानीयकरण (i18n/RTL)

घटक WCAG AA से गुजरते हैं: कंट्रास्ट, कीबोर्ड नेविगेशन, फोकस, 'प्रीफर्स-कम-मोशन'।

अनुवादित स्ट्रिंग्स - संसाधनों में, कोड में नहीं। प्लेसहोल्डर और संख्या/तिथि प्रारूप स्थानीय हैं।

RTL: प्रतीक मिररिंग, सही टैब क्रम, कुंजीपटल से DnD तर्क।

9) संख्या, तिथि, मुद्राएं और प्रारूप

दिनांक/समय: ISO-8601, सही समय बिंदु - यूटीसी; उपयोगकर्ता - लोकेल।

मुद्रा: लघु इकाइयाँ/दशमलव तार; हमेशा एक कोड निर्दिष्ट करें (उदाहरण के लिए, "€12 34" या "12। 34 EUR" - लोकेल द्वारा)।

रुचि: '12। 3% 'और अंक' + 1. 2 pp 'clinglary भेद।

राउंडिंग: महत्वपूर्ण अंकों के लिए; बड़ी संख्या के लिए "k/m"।

10) शासन: भूमिकाएँ, कलाकृतियाँ, चैनल

डिजाइन भाषा परिषद (डीएलसी): टोकन/घटक मालिक, आरएफसी का दावा है।

• सामग्री केंद्र (Figma/Code) + उदाहरणों के साथ लाइव कैटलॉग।
• प्रलेखन: गाइड, पैटर्न, A11y, सामग्री गाइड।
• तिथियों के साथ चेंजलॉग, स्तर (जोड़ा/परिवर्तित/हटाया/हटाया/फिक्स्ड)।
• चैनल: साप्ताहिक डिजाइन सिंक, स्लैक चैनल, कार्यान्वयन शोकेस।

11) वर्शनिंग और विकास

घटक पैकेज के लिए SemVer: 'मेजर। माइनर। PATCH '।

MINTER - additive: नए टोकन, डिफ़ॉल्ट के साथ प्रॉप्स, नए घटक।

मेजर - ब्रेकिंग: प्रॉप्स को हटाना, शब्दार्थ बदलना - माइग्रेशन गाइड।

कमी: चेतावनी, विंडो ≥ 90 दिन, संगतता झंडे।

12) लिंटर्स और स्वचालित जांच

UI-linter: टोकन के बाहर निषिद्ध रंग, एंटी-पैटर्न (बटन-दिवा, अक्षम रूपरेखा)।

A11y-checks: इसके विपरीत, भूमिकाएं/आरिया, फोकस, कीबोर्ड।

i18n-linter: कोड में "हार्ड" लाइनें, गलत प्लेसहोल्डर्स।

स्क्रीनशॉट परीक्षण: घटकों के दृश्य रीग्रेशन।

विज़ुअलाइज़ेशन एपीआई अनुबंध (यदि कोई हो): डेटा प्रकार, रेंज, हस्ताक्षर।

13) घटक शोकेस (स्टोरीबुक/सैंडबॉक्स)

प्रॉप्स कंट्रोल, कोड, स्टेट्स, A11y-checker के साथ लाइव उदाहरण।

"व्यंजनों": पंजीकरण फॉर्म, चरण 3 जादूगर, तालिका + फिल्टर, मोडाल्का + टोस्ट।

"स्थानों का सैंडबॉक्स": स्विचिंग भाषा/प्रारूप/आरटीएल।

14) नामकरण और संरचना पैटर्न

14. 1 घटक (BEM/शब्दार्थ, CSS उदाहरण)

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

प्रॉप्स के कोड - नीरस नामों में: 'आकार', 'दयालु', 'अक्षम', 'ऑनक्लिक'।

14. 2 लाइब्रेरी फ़ाइल संरचना

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

15) एंटी-पैटर्न

टोकन के बाहर "मुक्त" रंग/इंडेंट।

डुप्लिकेट घटक: " " " ButtonNun"।

एकमात्र फील्ड लेबल के रूप में प्लेसहोल्डर।

रूपरेखा और div-buttons अक्षम कर रहा है।

अप्रत्याशित होवर/सक्रिय/अक्षम।

सामान्य अनुवाद के बजाय अनुवादित शब्द।

अद्यतन के दौरान माइग्रेशन गाइड की कमी।

16) एकल भाषा गुणवत्ता मेट्रिक्स

कवरेज - सामग्री पुस्तकालय का उपयोग करके स्क्रीन का अनुपात।

संगति सूचकांक: टोकन बनाम "मैनुअल" शैलियों का पुन: उपयोग करें।

A11y पास दर - WCAG AA पास करने वाले घटकों का प्रतिशत।

दोष पलायन: 1k बिक्री में UI/सामग्री दोष।

डीएलएस से पहले/बाद में एक विशिष्ट स्क्रीन को लागू करने के लिए समय-से-शिप - समय।

गोद लेना: DAU शोकेस, घटकों/पैटर्न के साथ PR संख्या।

17) स्क्रीन चेकलिस्ट

• प्रयुक्त टोकन (रंग/indents/radii), हार्ड मान नहीं।
• पुस्तकालय से घटक; कस्टम - RFC केवल।
• पहुँच: कुंजीपटल/फ़ोकस/कंट्रास्ट/भूमिकाएँ/आरिया.
• इकाइयाँ: दिनांक/मुद्राएँ/प्रतिशत - प्रति प्रारूप गाइड।
• Microcopies: बटन = क्रिया, त्रुटियाँ = सही करने के लिए क्रिया।
• लोकेल्स/आरटीएल लेआउट नहीं तोड़ ते.
• राज्य: लोडिंग/खाली/त्रुटि प्रदान की जाती है।
• दृश्य प्रतिगमन परीक्षण अद्यतन।

18) कार्यान्वयन योजना (3 पुनरावृत्ति)

पुनरावृत्ति 1 - फाउंडेशन (2-3 सप्ताह)

टोकन (रंग/टाइपोग्राफी/स्पेसिंग/मोशन), मूल घटक (बटन, इनपुट, सिलेक्ट, टूलटिप, मोडल), सामग्री गाइड (टोन, लेबल, त्रुटियां)।

शोकेस (स्टोरीबुक) और A11y-checker, टोकन लिंटर।

पुनरावृत्ति 2 - पैटर्न और स्थानीयकरण (3-4 सप्ताह)

फॉर्म/टेबल/फिल्टर के पैटर्न, आइकन पैक 24 × 24, RTL/i18n सैंडबॉक्स, संख्या/तिथियों/मुद्राओं के नियम।

SemVer, changelog, RFC/माइग्रेशन प्रक्रिया, ऑटोटेस्ट (दृश्य + A11y)।

iteration 3 - स्केल और एवोल्यूशन (सतत)

कंपोजिशनल कंपोनेंट्स (विजार्ड, डेटाग्रिड, चार्ट प्राइमिटिव्स), टेमाइजेशन (लाइट/डार्क/कंट्रास्ट), क्वालिटी मेट्रिक्स रिपोर्ट, नियमित यूएक्स ऑडिट।

19) मिनी-एफएक्यू

क्या "सब एक साथ" करना ज़रूरी है?

नहीं, यह नहीं है। टोकन और आधार घटकों के साथ शुरू करें, फिर पैटर्न और प्रक्रियाओं जोड़ें।

YEI का उपयोग करने के लिए टीमों को कैसे समझाएं?

जीत दिखाएं: गति, कम दोष, तैयार स्क्रीन व्यंजनों और बॉक्स से बाहर।

विरासत स्क्रीन के साथ क्या करें?

प्रवासन योजना, टोकन के माध्यम से पुल शैली, प्राथमिकता स्क्रीन - पहले।

कुल

एक एकल इंटरफ़ेस भाषा न केवल एक घटक पुस्तकालय है। यह नियमों और प्रक्रियाओं की एक प्रणाली है, जहां टोकन अभिव्यक्ति, घटकों - व्यवहार और उपलब्धता, पैटर्न - निर्णयों की पुनरावृत्ति, और शासन और मैट्रिक्स - सतत विकास निर्धारित करते हैं। अपनी भाषा को स्पष्ट, सत्यापित और विस्तार योग्य बनाएं - और आपके उत्पाद समान रूप से, जल्दी और मज़बूती से काम करेंगे।