यूएक्स- गाइडलाइन और इंटरफ़ेस मानक

1) सिद्धांत

सुंदरता से पहले स्पष्टता। अर्थ और क्रिया 1-2 सेकंड में स्पष्ट हैं।

प्रति स्क्रीन एक लक्ष्य। बाकी सब कुछ द्वितीयक या छिपा हुआ है।

संगति। समान पैटर्न = समान उम्मीदें।

डिफ़ॉल्ट उपलब्धता। कंट्रास्ट, फोकस, कीबोर्ड, वॉयस एक्टिंग।

प्रासंगिकता। युक्तियाँ और ग्रंथ ठीक वहीं हैं जहाँ उनकी आवश्यकता होती है।

स्थानीयकरण-पहला। लाइन लंबाई, प्रारूप, संस्कृति - शुरू में डिजाइन में।

प्रतिवर्तनीयता। किसी भी जोखिम भरी कार्रवाई को रद्द/पुष्टि की जा सकती है

मापने की क्षमता। प्रत्येक नियम एक मीट्रिक (चरण रूपांतरण, समय, त्रुटियों) के साथ है।

2) ग्रिड, इंडेंट्स और लय

ग्रिड: 4/8-पीटी पिच; कॉलम: 12 (डेस्कटॉप), 6 (टैबलेट), 4 (मोबाइल)।

आंतरिक घटक इंडेंट: 4 के गुणक; बाहरी - 8/ 12/16/24।

ऊर्ध्वाधर लय: शीर्षक → उपशीर्षक → → क्रिया सामग्री (CTA)।

सीमाएं और विभाजक: किफायती; "हवा" और टाइपोग्राफी के पदानुक्रम को पसंद करें।

3) टाइपोग्राफी

पिन स्केल: 12/14/ 16/20/24/32/40 (शरीर 16)।

पंक्ति ऊंचाई: 1। 4–1. 6 पाठ के लिए, 1। 2–1. खिताब के लिए 3।

लाइन की लंबाई: 45-75 वर्ण (डेस्कटॉप), 35-55 (मोबाइल)।

हाइलाइटिंग: शब्दार्थ लहजे के लिए बोल्ड; कैप्स - केवल लेबल में।

पढ़ ने योग्यता जोर से: ग्रंथों को स्वाभाविक लगना चाहिए।

4) रंग और विपरीत

शब्दार्थ: 'सफलता/जानकारी/चेतावनी/त्रुटि/तटस्थ'।

कंट्रास्ट: WCAG न्यूनतम 2। 1 एए (पाठ/पृष्ठभूमि ≥ 4। 5:1; बड़े ≥ 3:1)।

रंग - एकमात्र संकेत। एक प्रतीक/पाठ/फॉर्म जोड़ें।

फ़ोकस रिंग: हमेशा दिखाई देता है (CSS में अक्षम न करें)।

5) नेविगेशन और सूचना वास्तुकला

उपयोगकर्ता पथ: "मैं कहाँ हूँ? यहाँ क्या है? आगे क्या?" - जाहिर है।

मेनू पदानुक्रम: मुख्य नेविगेशन में ≤ 2 स्तर।

ब्रेडक्रंब: गहरे वर्गों के लिए।

खोज: जटिल निर्देशिका पर विश्व स्तर पर उपलब्ध; हॉटकी '/'।

नेविगेशन कहता है: सक्रिय टैब/पृष्ठ को टोकन के साथ हाइलाइट किया गया है।

6) घटक और पैटर्न

हम डिजाइन प्रणाली के घटकों ("घर का बना" के बिना) का उपयोग करते हैं।

प्रति स्क्रीन एक प्राथमिक-सीटीए; अन्य माध्यमिक/तृतीयक हैं।

स्थितियाँ: डिफ़ॉल्ट/होवर/फोकस/सक्रिय/अक्षम/लोडिंग - प्रत्येक इंटरैक्टिव के लिए अनिवार्य

रिक्त स्थिति: संदर्भ + मान + CTA (+ द्वितीयक लिंक)।

सामान्य अलर्ट: प्रति स्क्रीन एक पृष्ठ-अलर्ट + स्थानीय इनलाइन संकेत।

7) फॉर्म, मान्यता और त्रुटियां

लेबल अनिवार्य है। प्लेसहोल्डर एक प्रारूप का एक उदाहरण है, प्रतिस्थापन नहीं।

प्रस्तुत करने के लिए धुंधला, सारांश त्रुटियों के लिए इनलाइन सत्यापन।

त्रुटि संदेश: क्या गलत है + कैसे तय करें + बाधा/प्रारूप.

स्वतः स्क्रॉल करें और पहली त्रुटि पर ध्यान केंद्रित क 'एरिया-अमान्य', 'आरिया-वर्णन'।

मास्क और प्रारूप: प्रांप्ट करें, लेकिन इनपुट को न तोड़ें (पेस्ट संभव है)।

डेटा सुरक्षा: रिबूट/त्रुटि के दौरान कुछ भी न खोएँ।

8) शर्तें और प्रतिक्रिया

सफलता: टोस्ट 2-4 एस, तटस्थ-सकारात्मक स्वर, सीटीए "आगे क्या है।"

सूचना/सूचना: नरम बैनर/प्रकार, धारा को अवरुद्ध नहीं करता है।

चेतावनी/त्रुटि/महत्वपूर्ण: पदानुक्रम नेत्रहीन/शब्दार्थ; महत्वपूर्ण - स्पष्ट कार्रवाई के साथ मॉडल/बैनर।

लोड हो रहा है: कंकाल> स्पिनर; प्रतीक्षा समय का मूल्यांकन> 3 एस।

9) सामग्री और माइक्रोकॉपी

तीन उत्तरों का नियम: क्या हो रहा है - क्यों - आगे क्या करना है।

CTA: एक्शन क्रिया + ऑब्जेक्ट ("सेव चेंज", "पास सत्यापन")।

संख्या/तिथियाँ/मुद्राएँ: स्थानीय प्रारूप।

स्वर: दोस्ताना; तनावपूर्ण चरणों में (भुगतान/सुरक्षा) - तटस्थ।

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

पूर्ण कुंजीपट नेविगेशन; तार्किक टैबिंग क्रम।

टोस्ट/स्टेटस के लिए इंटरैक्टिव, लाइव क्षेत्र के लिए भूमिकाएँ और 'एरिया-'।

विरोधाभास, फोकस रिंग, इंटरैक्टिव आकार ≥ 44 × 44 px।

प्रतीक/छवियों के लिए पाठ विकल्प; 'th '/' स्कोप' के साथ टेबल।

चेक: स्वचालित (लिंटर/स्कैनर) + स्क्रीन रीडर की मैनुअल स्क्रिप्ट।

11) स्थानीयकरण और अंतर्राष्ट्रीयकरण

सभी तार i18n कुंजियों के संदर्भ में हैं।

"लंबी भाषाओं" (DE/TR), RTL मोड का परीक्षण।

संख्या/मुद्राएं/बार - स्वरूपण उपयोगिताएं।

टोन-मैप: परिदृश्य द्वारा औपचारिकता/भावना की डिग्री (ऑन बोर्डिंग/भुगतान/सुरक्षा)।

12) जवाबदेही और †

ब्रेकपॉइंट्स: 360/768/1024/1280 +।

मोबाइल-पहला: एक हाथ से उपलब्ध महत्वपूर्ण पथ, अंगूठे के क्षेत्र में सीटीए।

इशारों और कीबोर्ड: इशारों को बटन के साथ डुप्लिकेट किया जाता है; डेस्कटॉप पर - हॉटकी।

घनत्व: डेस्कटॉप पर - "हवा", मोबाइल पर - ऊर्ध्वाधर बचत क्लिकबिलिटी से समझौता किए बिना।

13) डार्क थीम

WCAG द्वारा कंट्रास्ट बनाए रखा जाता है; पृष्ठभूमि (गहरे भूरे रंग) के लिए "शुद्ध काले" से बचें।

चमक/छाया - कमजोर; रिंग कंट्रास्ट पर ध्

चित्र और लोगो - उल्टे संस्करणों के साथ।

संक्रमण नीति: उपयोगकर्ता की पसंद (सिस्टम/लाइट/डार्क) को सहेजें।

14) एनिमेशन और गति

अवधि: 120-200 एमएस (छोटा), 200-300 एमएस (संक्रमण)।

त्वरण कार्य प्राकृतिक हैं (मामूली मंदी के साथ घन-बेजियर)।

एनिमेशन को प्रवाह को अवरुद्ध नहीं करना चाहिए और पढ़ ने योग्यता को

'पसंद-कम-गति' का सम्मान करें।

15) प्रदर्शन

LCP ≤ 2। 5s, टीटीआई/टीबीटी हरे रंग में; कोड-splicing; आलसी मीडिया लोडिंग।

लंबी सूचियों का वर्चुअलाइजेशन; डेटा कैशिंग।

गति धारणा के लिए कंकाल; लेआउट "कबाड़" को कम करें।

16) यूआई में सुरक्षा और गोपनीयता

अनुरोध के कारणों की स्पष्ट व्याख्या (कैमरा, केवाईसी, जियो)।

पारदर्शी समय सीमा/कमीशन/सीमा; "तात्कालिक" के बिना यदि देरी संभव है।

गोपनीय डेटा - मास्किंग, स्पष्ट "दिखाओ/छिपाओ"।

अपरिवर्तनीय कार्रवाइयों की पुष्टि; गतिविधि लॉग/लॉगिन सूचनाएँ।

17) यूएक्स क्वालिटी मेट्रिक्स

चरण रूपांतरण और पूरा होने का समय।

फ़ील्ड्स/स्टेप्स और टाइम-टू-फिक्स द्वारा त्रुटि दर

सीटीए और परिदृश्य दोहराव द्वारा सीटीआर।

त्रुटि के बाद बंद करें/लोड करने के बाद> एन सेकेंड.

विषय द्वारा समर्थन कॉल (परिवर्तन से पहले/बाद में)।

A11y-defects रिलीज के लिए (लक्ष्य - 0 महत्वपूर्ण

18) चेकलिस्ट

प्री-रिलीज़स्क्रीन

• एक प्राथमिक लक्ष्य और एक प्राथमिक-सीटीए।
• नेविगेशन और जहां-मैं-मैं स्थिति स्पष्ट हैं।
• लघु सामग्री: प्रति ब्लॉक 1-2 वाक्य।
• राज्य: लोडिंग/खाली/त्रुटि/सफलता शामिल हैं।
• : एए कंट्रास्ट, फोकस दिखाई दे रहा है, इंटरैक्टिव पर 'एरिया-'।
• स्थानीयकरण: स्ट्रिंग लंबाई/प्रारूप/आरटीएल जाँच की गई।
• प्रदर्शन: कोई "भारी" ब्लॉक अनावश्यक रूप से नहीं।

प्री-रिलीज़फॉर्म

• लेबल और नमूना प्रारूप मौजूद हैं।
• प्रस्तुत करने के लिए इनलाइन सत्यापन + सारांश।
• पहली त्रुटि के लिए स्क्रॉल करें, बॉक्स में फोकस करें।
• संदेश: क्या/कैसे/क्यों; उपयोक्ता के लिए 500/400 कोड के बिना।
• डेटा त्रुटियों/रिबूट पर खो नहीं गया है।

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

शब्दार्थ चरणों पर सीटीए के रूप में "ओके"।

लेबल के बजाय प्लेसहोल्डर।

सिर्फ स्थिति संकेत के रूप में रंग।

बिना समय अनुमान और कोई विकल्प के स्पिनर।

फोकस ट्रैप और ईएससी बंद किए बिना मोडल विंडो।

शैलियों/प्रतीकों को मिलाना, डिजाइन प्रणाली के बाहर घटकों की नकल करना।

महत्वपूर्ण परिदृश्यों में हास्य/इमोजी (भुगतान/सुरक्षा)।

20) उदाहरणों से पहले/बाद में

फॉर्म त्रुटि

इससे पहले: "त्रुटि 400"

के बाद: "अवैध तिथि प्रारूप। डीडी का उपयोग करें। MM। YYYY"

खाली अवस्था

इससे पहले: "यह यहाँ खाली है"

बाद में: "पहली पुनर्पूर्ति के बाद संचालन का इतिहास यहां दिखाई देगा। [टॉप अप]"

सफलता संदेश

करने के लिए: "किया"

बाद में: "भुगतान स्वीकार किया। संतुलन अद्यतन। [इतिहास देखें]"

नेविगेशन

इससे पहले: यह स्पष्ट नहीं है कि उपयोगकर्ता कहां है

बाद: सक्रिय टैब + ब्रेड crumbs + स्पष्ट पृष्ठ शीर्षक

21) डिजाइन समीक्षा के लिए साँचे

स्क्रीन फ्रेम

शीर्षक → संक्षिप्त विवरण → सामग्री/सूची → प्रतिक्रिया/स्थिति → क्रियाएँ।

मोल्ड फ्रेम

शीर्षिका संकेत फ़ील्ड (लेबल + सहायक + त्रुटि) CTA द्वितीयक क्रिया नोट्स।

माइक्रोकॉपी टेम्पलेट

शीर्षक (पूर्व)

1-2 वाक्य: संदर्भ + अगला चरण

CTA: क्रिया + वस्तु

द्वितीयक लिंक: मदद/नियम

22) मानकों की प्रक्रिया और रखरखाव

डोन (UX) की परिभाषा: लेआउट + ग्रंथ + राज्य++ i18n + मैट्रिक्स।

पीआर में यूएक्स समीक्षा: खंड 18-21 से चेकलिस्ट।

प्रलेखन: प्रत्येक फीचर जोड़ ता है/विकी/स्टोरीबुक के लिए एक गाइड अपडेट करता है।

एक बार एक तिमाही में ऑडिट करें: सामग्री, A11y, प्रदर्शन, स्थिरता।

फाइनल धोखा शीट

एक लक्ष्य, एक मुख्य सीटीए।

राज्यों और प्रतिक्रिया को पहले से डिजाइन किया गया है।

A11y और स्थानीयकरण - खरोंच से, "बाद में" नहीं।

कम रंग - अधिक शब्दार्थ और लय।

उपाय: रूपांतरण, त्रुटियां, समय, उलटफेर।

सभी डिजाइन प्रणाली के माध्यम से: समान नियम - समान अपेक्षाएं - पूर्वानुमानित यूएक्स

मैं इस गाइड को आपके प्रमुख परिदृश्यों (पंजीकरण/सीयूएस, जमा/निकासी, बोनस/टूर्नामेंट) के लिए तैयार किए गए टेम्पलेट के साथ पूरक कर सकता हूं और आपकी समीक्षा प्रक्रिया के लिए चेकलिस्ट एकत्र कर सकता हूं।