होवर प्रभाव और अंतर्क्रियाशीलता

1) यूएक्स में मार्गदर्शन की भूमिका

• "क्या यह इंटरैक्टिव है?" (होवर/कर्सर/हाइलाइट)
• "मैं कहाँ हूँ?" (फोकस शैली),
• "क्लिक करके क्या होता है?" (स्थिति और सामर्थ्य),
• "क्या कार्रवाई काम करती है?" (सक्रिय/दबाया और बाद में प्रतिक्रिया)।

सिद्धांत: प्रभाव अर्थ को सुदृढ़ करते हैं, इसे प्रतिस्थापित नहीं करते हैं। कार्रवाई की कुंजी जानकारी और पहुंच केवल होवर के पीछे छिपी नहीं होनी चाहिए।

2) राज्य मॉडल और शब्दार्थ

बेस सेट: 'डिफ़ॉल्ट' 'होवर' 'फ़ोकस' सक्रिय/दबाया ' ' अक्षम ' ' लोडिंग '(वैकल्पिक).

लिंक के लिए हम 'विजिट' जोड़ ते हैं, स्विच के लिए - 'चेक'।

• राज्यों के बीच - आकार/मोटाई/आइकन में एक दृश्य अंतर, न कि केवल रंग।
• पाठ/प्रतीक पृष्ठभूमि के विपरीत: ≥ 4। 5:1 (सादा पाठ), ≥ 3:1 (बड़ा/बोल्ड)।
• फोकस बिना इशारा किए दिखाई देता है (कुंजीपटल/स्क्रीन रीडर)।

3) उपकरण और मीडिया अनुरोध

css
/ There is an exact pointer and hover (mouse/trackpad )/
@ media (hover: hover) and (pointer: fine) {/hover effects/}

/ No hover or rough pointer (touch/remote control )/
@ media (hover: none), (pointer: coarse) {/alternatives to hover/}

/ Any type of pointer (hybrid devices )/
@ media (any-hover: hover) {/minimal improvements/}

• स्पर्श उपकरणों पर, इंगित प्रभाव क्रिया का पता लगाने के लिए महत्वपूर्ण नहीं हैं - स्पष्ट सामर्थ्य का उपयोग करें: रंग/आइकन/फ्रेम/संकेत।
• नेविगेशन/नियंत्रण केवल "अंडर होवर" को छुपाएँ नहीं।

4) अवधि और घटता

• होवर: 120-180 मीटर
• फोकस: 120-180 मीटर
• सक्रिय/दबाया: 80-120 мс
• रिपल/स्याही (यदि उपयोग किया जाता है): ≤ 240 ms, 1 चक्र

डिफ़ॉल्ट वक्र 'घन-बेजियर (0. 2, 0, 0. 2, 1)`

सक्रिय - तेज ('घन-बेजियर (0. 4, 0, 1, 1) '), आउटपुट नरम है (' क्यूबिक-बेजियर (0, 0, 0)। 2, 1)`).

5) डिजाइन प्रणाली टोकन (उदाहरण)

json
{
"interactive": {
"duration": { "hover": 160, "focus": 160, "active": 90 },
"easing": { "std": "cubic-bezier(0. 2,0,0. 2,1)", "acc": "cubic-bezier(0. 4,0,1,1)" },
"shadow": { "hover": "var(--elev-2)", "focus": "0 0 0 3px var(--focus-ring)" },
"opacity": { "disabled": 0. 38, "muted": 0. 64 }
}
}

6) बटन: संदर्भ पैटर्न

डिफ़ॉल्ट: पढ़ ने योग्य पाठ ≥ 4। 5:1 भरने के लिए।

होवर: L पृष्ठभूमि 0। 02–0. 04, हल्की छाया, सूचक '।

सक्रिय: − अधिक LL 0। 02–0. 04, छोटी छाया/इंडेंटेशन (स्केल 0। 98), रहता है। 80-100 एमएस।

फोकस: कंट्रास्ट रिंग 2-3 px बिना धब्बा के।

अक्षम: курсор 'नॉट-स्वीकार्य '/' डिफ़ॉल्ट', अपारदर्शिता ≤ 0। 38, कोई होवर प्रभाव नहीं।

css
.button {
transition: background-color. 16s var(--ease), transform. 09s var(--ease-acc), box-shadow. 16s var(--ease);
}
@media (hover:hover) and (pointer:fine) {
.button:hover  { background: var(--btn-bg-hover); box-shadow: var(--shadow-hover); }
}
.button:active  { transform: scale(.98); }
.button:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--focus-ring); }
.button[disabled] { opacity:.38; pointer-events: none; }

7) लिंक और पाठ क्रियाएं

न केवल रंग से भिन्न: डिफ़ॉल्ट रूप से या होवर/फोकस पर रेखांकित करें।

मार्गदर्शन के लिए: वृद्धि (मोटाई/ऑफसेट), स्वर में मामूली बदलाव।

'विजिटेड' एक ही पैलेट की एक अलग छाया है, इसके विपरीत संरक्षित है।

css a { text-decoration: underline; text-underline-offset:.12em; }
@media (hover:hover) and (pointer:fine) {
a:hover { text-underline-offset:.2em; }
}
a:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--focus-ring); }

8) कार्ड, सूची, टेबल

• होवर: नरम छाया/फ्रेम हाइलाइट, कर्सर 'पॉइंटर' केवल तभी जब पूरा कार्ड क्लिक करने योग्य हो।
• सक्रिय: लघु इंडेंटेशन, शीर्षक हाइलाइट।
• फोकस: कार्ड के चारों ओर एक दृश्यमान अंगूठी, न कि केवल अंदर।

• Hov एल 0 के साथ पृष्ठभूमि। 02–0. 04; सक्रिय पंक्ति एक स्पष्ट सीमा है।
• एक लाइन पर क्लिक को केवल स्पष्ट सामर्थ्य ("→" आइकन, संकेत) के साथ अनुमति दी जाती है।

• सावधानीपूर्वक कैस्केड देरी की "सीढ़ी" को सीमित करें - अधिकतम 6-8 तत्व (स्टैगर 20-30 एमएस)।

9) इनपुट रूप और क्षेत्र

खेतों के लिए मंडराना: फ्रेम की पतली बैकलाइटिंग () L ~ 0। 05), ब्लॉक का आकार बदले बिना।

फोकस: कंट्रास्ट रिंग + फ्रेम रंग परिवर्तन; प्लेसहोल्डर अलग रहता है (≥ 3:1)।

त्रुटि: रंग + प्रतीक/पाठ; लघु "शेक" मान्य है ≤ 6 px, ≤ 140 ms, एक बार।

10) प्रतीक और छोटे लक्ष्य

क्लिक ज़ोन को 32 × 32 (डेस्कटॉप )/40 × 40 (मोबाइल) तक बढ़ाएं, भले ही आइकन स्वयं 20-24 px हो।

होवर: अपारदर्शिता/भरण/मोटाई बदलता है, 1-2 गुण अधिकतम।

सक्रिय: स्केल 0 द्वारा लघु "स्नैप"। 98.

फोकस: क्लिक ज़ोन कंटेनर द्वारा रिंग।

11) पहुँच (A11y) और कीबोर्ड

समर्थन ': फोकस-दृश्यमान' (हम माउस के लिए फोकस शैली नहीं दिखाते हैं, हम उन्हें कीबोर्ड के लिए दिखाते हैं)।

तत्व जो होवर संकेत बनाते हैं, उनमें फोकस समतुल्य होना चाहिए (वही सामग्री टैब/एंटर कुंजी पर दिखाई देती है)।

आरिया-विशेषताएं: इंटरएक्टिव की स्थिति से 'भूमिका', 'आरिया-दबाया '/' आरिया-विस्तारित '/' आरिया-वर्तमान' है।

वरीयता-कम-गति: स्केल/शिफ्ट को न्यूनतम (अपारदर्शिता/भरण) के साथ बदलें, लहर बंद करें।

css
@media (prefers-reduced-motion: reduce) {
{ transition-duration:.01ms! important; animation: none! important; }
}

12) प्रदर्शन

केवल 'अपारदर्शिता' और 'रूपांतरण' को एनिमेट करें; 'width/hight/leat/top', कई तत्वों पर भारी धब्बा/छाया से बचें।

'विल-चेंज' संयम से उपयोग करें; संक्रमण पूरा होने के बाद वापस लेना।

सूचियों/तालिकाओं पर - "वैश्विक" पुनरावृत्ति के बिना न्यूनतम प्रभाव।

13) होवर-इरादे और "चिपचिपाहट"

• जटिल टूलटिप/मेनू दिखाने से पहले देरी सीमा 80-120 एमएस है।
• कर्सर की "स्टिकनेस": यदि उपयोगकर्ता आइटम से मेनू में एक कोण पर चलता है, तो हम "कॉरिडोर" (फिट्स त्रिकोण) के 200-300 एमएस देते हैं।
• एक स्पर्श - प्रतिस्थापन होवर के साथ प्रेस या एक स्पष्ट "अधिक" बटन के साथ।

14) टूलटिप/मेनू/ड्रॉपडाउन

उद्घाटन: होवर-इरादा (डेस्कटॉप )/प्रेस (स्पर्श), समापन - देखभाल/ब्लर/ईएससी।

स्थिति - स्रोत के लिए, तीर संरेखित है; अधिकतम चौड़ाई और हाइफेनेशन सक्षम हैं।

उपलब्धता: 'भूमिका = "टूलटिप"', सहयोगी 'आरिया-वर्णन'; मेनू के लिए - 'भूमिका = "मेनू" + तीर नियंत्रण।

15) iGaming की बारीकियां

गुणांक/लीडबोर्ड: होवर पंक्ति/सेल पर प्रकाश डालता है, लेकिन स्थिति मेट्रिक्स ("जंप" के बिना) को नहीं बदलता है।

टूर्नामेंट/बोनस कार्ड: होवर फ्रेम/आइकन को "पुनर्जीवित" कर सकता है, लेकिन पाठ सीटीए और शर्तें पढ़ ने योग्य हैं (≥ 4। 5:1).

जिम्मेदार सूचनाएं (18 +, सीमा): व्याकुलता प्रभाव के बिना; मंडराना केवल लिंक और स्पष्ट फोकस को रेखांकित करने की अनुमति देता

बेट/बाय बटन: सक्रिय-प्रतिक्रिया अनिवार्य है (दृश्य क्लिक/इंडेंट) और भेजने के बाद अस्पष्ट अक्षम।

16) इंटरफ़ेस व्यंजनों के उदाहरण

css
.cta {
background: var(--role-primary);
color: var(--on-primary);
transition: background-color. 16s var(--ease), transform. 09s var(--ease-acc), box-shadow. 16s var(--ease);
}
@media (hover:hover) and (pointer:fine) {
.cta:hover { background: var(--role-primary-hover); box-shadow: var(--elev-2); }
}
.cta:active { transform: scale(.98); }
.cta:focus-visible { box-shadow: 0 0 0 3px var(--focus-ring); }

css
.card { transition: box-shadow. 16s var(--ease), border-color. 16s var(--ease); }
@media (hover:hover) and (pointer:fine) {
.card:hover { box-shadow: var(--elev-2); border-color: var(--border-strong); }
}
.card:focus-visible { box-shadow: 0 0 0 3px var(--focus-ring); }

css
.table tr { transition: background-color. 12s var(--ease); }
@media (hover:hover) and (pointer:fine) {
.table tr:hover { background: var(--row-hover); }
}
.table tr:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; }

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

केवल होवर के लिए महत्वपूर्ण क्रिया/मेनू छुपाएँ।

होवर पर आकार/लेआउट बदलें (लेआउट कूदता है)।

स्थितियों को अलग करने के लिए सिर्फ रंग पर भरोसा करें।

झिलमिलाहट, अंतहीन स्पंदन, ग्रंथों पर "एसिड" चमक।

फोकस शैलियों की कमी या एक अंधेरे विषय पर उनकी अदृश्यता।

गैर-इंटरैक्टिव तत्वों पर हॉवर 'पॉइंटर'।

18) क्यूए चेकलिस्ट

उपलब्धता

• सभी इंटरसेक्टिव कीबोर्ड द्वारा पहुंच योग्य हैं; फोकस हम देखते हैं।
• होवर सामग्री 'फोकस '/' आरिया' द्वारा उपलब्ध है।
• पाठ और प्रतीक का कंट्रास्ट WCAG से मेल खाता है।

व्यवहार

• होवर/सक्रिय/अक्षम/देखा आकार और स्वर से अलग हैं।
• कोई प्रतिक्रिया देरी> 120ms।
• स्पर्श पर मंडराने का विकल्प है।

निष्पादन

• केवल 'रूपांतरण '/' अपारदर्शिता' एनिमेटेड हैं।
• कई तत्वों पर कोई भारी धब्बा/छाया नहीं।
• लंबी सूचियों पर, प्रभाव कम से कम होते हैं।

19) डिजाइन प्रणाली में प्रलेखन

मूल घटकों (बटन, लिंक, कार्ड, क्षेत्र, तालिका पंक्ति) के लिए स्थिति सारणी।

प्रकाश/अंधेरे के लिए अवधि/वक्र/छाया टोकन और नमूना कोड।

"होवर बनाम टच" खंड: विकल्प और उदाहरणों के नियम।

शॉर्ट क्लिप और कंट्रास्ट स्कोर के साथ "डू/डोंट"।

संक्षिप्त सारांश

लक्ष्यीकरण प्रभाव इंटरफ़ेस भाषा का एक सहायक लेकिन महत्वपूर्ण हिस्सा है। उन्हें संक्षिप्त और अनुमानित रखें, कीबोर्ड रखें और स्पर्श करें, विपरीत और दृश्यमान फोकस प्रदान करें, केवल सस्ते गुणों को चेतन करें। फिर अंतःक्रियाशीलता उन्हें रोकने के बजाय स्पष्टता और कार्रवाई की गति को बढ़ाती है।