प्रतीक और चित्रांकन की प्रणाली

1) उत्पाद में प्रतीक की भूमिका

प्रतीक अर्थ और अवस्था का एक कॉम्पैक्ट वाहक है। वे स्कैनिंग को गति देते हैं, अंतरिक्ष को बचाने और पैटर्न मान्यता बढ़ाने में मदद करते हैं। उत्पाद इंटरफेस में, आइकन उन्हें बदलने के बजाय पाठ और रंग को पूरक करता है।

1. अर्थ> शैली: प्रत्येक प्रतीक में स्पष्ट अनुप्रयोग परिदृश्य होना चा

2. स्थिरता: एकल ग्रिड, स्ट्रोक, कोण, लय भरना।

3. उपलब्धता: आइकन एकमात्र संकेत नहीं है; हमेशा एक हस्ताक्षर/टूलटिप/आरिया होता है।

4. प्रदर्शन: एक एसवीजी पाइपलाइन, स्प्राइट्स और रंग/आकार टोकन।

2) ग्रिड और प्रमुख लाइनें

बेसिक आर्टबोर्ड: 16 × 16, 20 × 20, 24 × 24 (मुख्य), 32 × 32।

ऑप्टिकल बैलेंस के लिए कीलाइन-ए सर्कल/स्क्वायर 1-2 पीएक्स पर अंकित है।

पिक्सेल पिच: पूर्णांक निर्देशांक पर ड्रा; स्ट्रोक 0 में से एक है। 5 px (आमतौर पर 1। 24 × 24 पर 5 px)।

• विकर्ण "मोटा" पतला दिखता है - 0 जोड़ें। मुसीबत के स्थानों में स्ट्रोक करने के लिए 25 पीएक्
• हम कीलाइन के अंदर तेज कोनों के शीर्ष को 1 पीएक्स से थोड़ा डुबोते हैं ताकि "खड़खड़" न हो।
• सर्कल और डॉट्स को अक्सर समान दृश्य द्रव्यमान के लिए व्यास के लिए + 1 पीएक्स की आवश्यकता होती है।

क्लिक ज़ोन: इंटरैक्टिव ज़ोन ≥ 40 × 40 px (मोबाइल), ≥ 32 × 32 px (डेस्कटॉप); आइकन केंद्रित है।

3) टाइपसेटिंग शैली

• स्ट्रोक: 1। 5 px (24 × 24), 1। 25 px (20 × 20), 1 px (16 × 16)।
• linecap/linejoin: मित्रता के लिए 'राउंड' या तकनीकी शैली के लिए 'मित्र' (दिशानिर्देश में तय)।
• ज्यामिति में त्रिज्या कोण: 2-3 पीएक्स (24 × 24 द्वारा)।

भरा-घने क्षेत्रों और स्थिति प्रतीक के लिए।

Duotone को चित्रण खाली राज्यों के लिए अनुमति दी जाती है, लेकिन महत्वपूर्ण UI संकेतों के लिए नहीं

• रूपरेखा - मूल स्थिति।
• भरा हुआ परिसंपत्ति/आवंटन।
• दो-स्वर - सजावटी/मदद में।

4) रंग और कंट्रास्ट (WCAG)

मूल मोड मोनोक्रोम है ' रंग' के माध्यम से: आइकन पाठ/संदर्भ का रंग विरासत में मिलता है।

• 'आइकन। त्रुटि '↔ पृष्ठभूमि ≥ 3:1, पाठ के साथ हस्ताक्षरित (केवल रंग नहीं)।
• 'आइकन। ऑन-सरफेस '↔ पृष्ठभूमि ≥ 3:1; छोटे आकार के लिए 4 पर लक्ष्य। 5:1.
• रंग मर जाता है, 'on-' रंगों का उपयोग करें (रंग प्रणाली से स्वतः कंट्रास्ट)।

5) राज्यों और बातचीत

डिफ़ॉल्ट/होवर/सक्रिय/निष्क्रिय/फोकस: अंतर केवल रंग में नहीं है - अपारदर्शिता/भरण/मोटाई/पृष्ठभूमि गोली बदलें, फोकस रिंग जोड़ें।

बैज - डिजिट कंट्रास्ट ≥ 4। 5: 1 मरने के लिए; अंकों का आकार ≥ 10-11 px।

प्रतीक टॉगल करें (पसंदीदा, जैसे): भरण और/या आंतरिक बिंदु बदलें, न कि केवल रंग।

6) प्रतीक + पाठ

प्रतीक कुंजी क्रियाओं में लेबल को प्रतिस्थापित नहीं करते हैं। न्यूनतम जोड़ी: आइकन + लघु पाठ (या 'आरिया-लेबल' द्वारा टूलटिप)। सूचियों और तालिकाओं में, आइकन को पाठ और बेसलाइन की कैप ऊंचाई के साथ संरेखित किया गया है।

7) उपलब्धता (A11y)

सजावटी आइकन के लिए: ' रोल =" img" aria-hidden =" true" या धारा से पहुंच को हटा दें।

शब्दार्थ के लिए: '

आइकन स्थिति का एकमात्र वाहक नहीं होना चाहिए: पाठ/संकेत/आइकनोग्राफिक पैटर्न (फॉर्म, स्ट्रोक) जोड़ें।

पाठ आकार और हस्ताक्षर विपरीत WCAG (नियमित ≥ 4) के अनुरूप हैं। 5:1).

8) एसवीजी पाइपलाइन और प्रदर्शन

क्यों एसवीजी: वेक्टर स्पष्टता, सीएसएस के माध्यम से स्टाइल, अनुकूलन के साथ हल्का वजन।

• Figma में मास्टर फ़ाइलें स्टोर करें, विकल्पों के साथ SVG को निर्यात करें: अतिरिक्त 'समूह' के बिना, डिफ़ॉल्ट रूप से 'फिल-रूल' विशेषता के साथ और निश्चित 'चौड़ाई/ऊंचाई' के बिना।
• SVGO (प्रोजेक्ट प्रोफाइल) के माध्यम से चलाएँ: मेटाडेटा मिटाना, निर्देशांक कम करना, पथ विलय करना।
• प्रतीक फोंट का परित्याग - पहुँच और प्रतिपादन समस्या।

1. एसवीजी स्प्राइट:

html
<svg style="display:none">
<symbol id="icon-upload" viewBox="0 0 24 24">…</symbol>
</svg>
…
<svg class="i"><use href="#icon-upload"></use></svg>

सस्ते पुनरावृत्ति, - आप आसानी से कुछ पाइपलाइनों में 'स्ट्रोक-चौड़ाई' नहीं बदल सकते।

2. इनलाइन-एसवीजी (रिएक्ट घटक): शैलियों और प्रॉप्स का लचीलापन, ट्री-शेकिंग।

3. बाहरी '' - केवल सजावटी/चित्रण के लिए।

css
.i { width: 1em; height: 1em; color: var(--icon-color, currentColor); }
.i--muted { opacity:.64; }
.i--danger { color: var(--role-danger); }

9) घटक एपीआई (प्रतिक्रिया उदाहरण)

tsx type IconProps = {
name: 'upload'      'download'      'wallet'      'trophy'      'shield'      string;
size?: number      '1em'      'sm'      'md'      'lg';
stroke?: number;       // 1      1. 25      1. 5 title?: string;        // для a11y decorative?: boolean;     // если true -> aria-hidden className?: string;
};

• डिफ़ॉल्ट रूप से,' आकार =" 1em" और' स्ट्रोक = 1। 5`.
• यदि' सजावटी' है, तो 'आरिया-छिपा =" सही" जोड़ें।