प्रोग्रामिंग
बटन, मेनू, फ़ॉर्म, खोज, कीबोर्ड क्रियाओं और प्रतिक्रिया अवस्थाओं के व्यवहार का वर्णन करने वाला संदर्भ।
47 परिणाम
पॉइंटर और टच
Click
onClickएक पॉइंटर क्रिया जिसमें उपयोगकर्ता किसी तत्व पर एक माउस बटन को दबाता है और छोड़ता है।
मेनू खोलने, बटन सबमिट करने, आइटम चुनने या लिंक के साथ नेविगेट करने जैसे कार्यों के लिए क्लिक का उपयोग करें।
जब मेनू बटन पर क्लिक किया जाता है, तो मेनू पैनल खोलें।
पॉइंटर और टच
Tap
touch / pointerएक टच-स्क्रीन क्रिया जिसमें उपयोगकर्ता किसी तत्व को छूता है और छोड़ देता है।
टैप को आम तौर पर फोन और टैबलेट पर क्लिक के समान महत्वपूर्ण कार्य करना चाहिए।
होवर-ओनली व्यवहार टच उपकरणों पर अविश्वसनीय है।
मोबाइल पर, श्रेणी मेनू को होवर करने के बजाय टैप करके खोलें।
पॉइंटर और टच
Hover
:hoverजब माउस पॉइंटर किसी तत्व पर होता है तो स्थिति।
होवर रंग, अंडरलाइन, पृष्ठभूमि या छाया परिवर्तन के साथ एफ़ोर्डेंस का पूर्वावलोकन कर सकता है।
आवश्यक क्रियाओं को केवल होवर पर निर्भर न बनाएं।
जब किसी मेनू आइटम पर होवर किया जाता है तो उसका पृष्ठभूमि बदलें।
पॉइंटर और टच
Long press
touch holdएक स्पर्श क्रिया जिसमें उपयोगकर्ता किसी तत्व पर थोड़ी देर के लिए अपनी उंगली रखता है।
लंबा प्रेस अक्सर माध्यमिक क्रियाओं के लिए उपयोग किया जाता है, लेकिन यह एक दृश्यमान बटन की तुलना में कम खोजा जा सकता है।
महत्वपूर्ण कार्यक्षमता तक पहुंचने का एकमात्र तरीका लंबे समय तक दबाने से बचें।
आवश्यक कॉपी क्रियाओं को केवल लंबे समय तक दबाने के पीछे न छिपाएं।
पॉइंटर और टच
Drag
pointerdown + pointermoveएक पॉइंटर क्रिया जिसमें उपयोगकर्ता एक तत्व या चयन को पकड़ता है और उसे स्थानांतरित करता है।
सटीक होने पर, ड्रैग इंटरैक्शन में स्पष्ट हैंडल, सीमाएं और वैकल्पिक नियंत्रण होने चाहिए।
यदि कोई पैनल खींचा जा सकता है तो एक दृश्य हैंडल जोड़ें।
पॉइंटर और टच
Swipe
touch moveएक स्पर्श इशारा जिसमें उपयोगकर्ता अपनी उंगली को स्क्रीन पर तेजी से घुमाता है।
स्वाइप कैरोसेल या पैनलों को स्थानांतरित कर सकता है, लेकिन दृश्य नियंत्रण अभी भी मौजूद होने चाहिए।
उदाहरणों के बीच स्वाइप करने की अनुमति दें, लेकिन तीर बटन को दिखाई दें रखें।
कीबोर्ड
Keyboard event
keydown / keyupएक इंटरैक्शन जो कीबोर्ड कुंजी को दबाने या छोड़ने के कारण होता है।
कीबोर्ड इवेंट्स का उपयोग 'एस्केप' बटन से बंद करने, 'एंटर' बटन से सबमिट करने, तीर कुंजियों से नेविगेट करने और शॉर्टकट के लिए किया जाता है।
जब एस्केप कुंजी दबाई जाती है तो ड्रॉपडाउन बंद करें।
कीबोर्ड
Escape key
Escapeएक कीबोर्ड कुंजी जिसका उपयोग आमतौर पर एक अस्थायी UI को रद्द करने, बंद करने या बाहर निकलने के लिए किया जाता है।
ड्रॉपडाउन, मेनू, मोडल और पॉपओवर आमतौर पर एस्केप पर बंद हो जाने चाहिए।
भाषा ड्रॉपडाउन और साइट मेनू दोनों को एस्केप कुंजी पर बंद करें।
कीबोर्ड
Enter key
Enterएक कीबोर्ड कुंजी जिसका उपयोग अक्सर एक केंद्रित नियंत्रण को सक्रिय करने या एक फॉर्म जमा करने के लिए किया जाता है।
एक केंद्रित बटन को Enter के साथ सक्रिय किया जाना चाहिए। खोज फ़ॉर्म Enter के साथ सबमिट हो सकते हैं।
जब खोज फ़ील्ड पर ध्यान केंद्रित किया जाता है तो खोज करने पर "एंटर" दबाएं।
कीबोर्ड
Tab key
Tabएक कीबोर्ड कुंजी जिसका उपयोग इंटरैक्टिव नियंत्रणों के माध्यम से फोकस को स्थानांतरित करने के लिए किया जाता है।
टैब क्रम दृश्यमान पठन और इंटरैक्शन क्रम का पालन करना चाहिए।
हेडर नियंत्रणों में टैब क्रम को प्राकृतिक रखें।
UI अवस्थाएँ
Focus
:focus / :focus-visibleवह स्थिति जिसमें कोई तत्व कीबोर्ड इनपुट या सक्रियण के लिए तैयार होता है।
केंद्रित नियंत्रणों में एक दृश्यमान आउटलाइन या फोकस शैली होनी चाहिए।
केंद्रित खोज इनपुट को स्पष्ट रूप से दिखाई दें।
UI अवस्थाएँ
Blur
blur / focusoutजब कोई तत्व फोकस खो देता है तो स्थिति परिवर्तन।
ब्लर इनपुट को मान्य कर सकता है या हल्के UI को बंद कर सकता है, लेकिन इसे उपयोगकर्ताओं को आश्चर्यचकित नहीं करना चाहिए।
इनपुट फोकस खोने पर खोज टेक्स्ट को साफ़ न करें।
UI अवस्थाएँ
Active state
:activeएक नियंत्रण दबाए जाने के दौरान एक छोटी अवस्था।
सक्रिय अवस्था एक हल्के पृष्ठभूमि, बॉर्डर या स्थिति परिवर्तन के साथ एक दबा हुआ प्रभाव दिखा सकती है।
आइकन बटन में एक सूक्ष्म दबा हुआ अवस्था जोड़ें।
UI अवस्थाएँ
Selected state
selected / aria-currentसूची, मेनू, टैब समूह या फ़िल्टर समूह में वर्तमान में चयनित आइटम की स्थिति।
चयनित आइटम अनियंत्रित आइटम से दृश्य रूप से भिन्न होने चाहिए।
सक्रिय श्रेणी चिप को निष्क्रिय चिप्स से स्पष्ट रूप से अलग करें।
UI अवस्थाएँ
Disabled state
disabled / aria-disabledएक अवस्था जहाँ एक नियंत्रण दिखाई दे रहा है लेकिन इसका उपयोग नहीं किया जा सकता है।
अक्षम नियंत्रण निष्क्रिय दिखना चाहिए लेकिन समझने योग्य रहना चाहिए।
आवश्यक इनपुट मान्य होने तक सबमिट बटन को अक्षम करें।
UI अवस्थाएँ
Checked state
checkedचेकबॉक्स, रेडियो, या स्विच-जैसे नियंत्रण की चालू या चयनित स्थिति।
जाँच की गई स्थिति स्पष्ट रूप से दिखाई देनी चाहिए और नियंत्रण सिमेंटिक्स द्वारा घोषित की जानी चाहिए।
चयनित विकल्पों के लिए एक स्पष्ट चिह्नित स्थिति दिखाएं।
खोलना और बंद करना
Toggle
toggle stateएक क्रिया जो दो अवस्थाओं के बीच स्विच करती है, जैसे कि खुला और बंद या चालू और बंद।
एक टॉगल (toggle) को अपनी वर्तमान स्थिति दिखानी चाहिए और उस स्थिति को अनुमानित रूप से अपडेट करना चाहिए।
प्रत्येक मेनू श्रेणी को खोलने और बंद करने के लिए एक बटन का उपयोग करें।
खोलना और बंद करना
Open / close
open / closedएक दृश्यता स्थिति जहां एक पैनल, मेनू, या अनुभाग दिखाया या छिपाया जाता है।
ओपन और क्लोज स्टेट को बटन, बाहरी क्लिक, Escape या चयन द्वारा लगातार नियंत्रित किया जाना चाहिए।
जब भाषा ड्रॉपडाउन खुलता है तो साइट मेनू बंद करें।
खोलना और बंद करना
Dropdown
button -> panelएक फ्लोटिंग सूची जो एक बटन या फ़ील्ड से दिखाई देती है।
ड्रॉपडाउन आमतौर पर चयन, बाहरी क्लिक या एस्केप के बाद बंद हो जाते हैं।
जब कोई भाषा चुनी जाती है, तो ड्रॉपडाउन बंद करें।
खोलना और बंद करना
Accordion
section toggleएक UI पैटर्न जहां अनुभाग हेडर अपनी सामग्री को खोलते या बंद करते हैं।
एकॉर्डियन को स्पष्ट रूप से यह दर्शाना चाहिए कि कौन से अनुभाग खुले हैं।
डिफ़ॉल्ट रूप से सभी एकॉर्डियन श्रेणियों को बंद रखें।
खोलना और बंद करना
Modal
open dialogएक केंद्रित ओवरले जो पृष्ठ के ऊपर दिखाई देता है और आमतौर पर पृष्ठभूमि सामग्री को अवरुद्ध करता है।
मोडल में बंद नियंत्रण, एस्केप व्यवहार, फोकस हैंडलिंग और स्पष्ट उद्देश्य होना चाहिए।
मोडल में एक बंद बटन और Escape-to-close व्यवहार जोड़ें।
खोलना और बंद करना
Outside click
document pointerdownएक ड्रॉपडाउन, मेनू या पॉपओवर जैसे अस्थायी पैनल के बाहर एक क्लिक या टैप।
अस्थायी पैनल आमतौर पर तब बंद हो जाते हैं जब उपयोगकर्ता उन पर क्लिक नहीं करता है।
एक ही हेडर समूह से संबंधित नियंत्रणों को तब तक बाहरी नहीं माना जाएगा जब तक कि लॉजिक को इस तरह से नहीं लिखा गया हो।
जब उपयोगकर्ता मेनू पैनल के बाहर क्लिक करता है तो मेनू बंद करें।
खोलना और बंद करना
Focus trap
modal openएक व्यवहार जो एक मोडल या डायलॉग खुला होने पर कीबोर्ड फोकस को उसके अंदर रखता है।
फोकस ट्रैप कीबोर्ड उपयोगकर्ताओं को सक्रिय मोडल के पीछे अनजाने में जाने से रोकता है।
इसे बंद करने तक, मॉडल के अंदर फोकस को लॉक करें।
नेविगेशन
Link navigation
link clickएक लिंक के माध्यम से किसी अन्य पृष्ठ, मार्ग या अनुभाग में जाना।
लिंक को सही गंतव्यों का उपयोग करना चाहिए और नेविगेशन के बाद अस्थायी मेनू बंद होने चाहिए।
जब किसी मेनू लिंक पर क्लिक किया जाता है तो मेनू बंद करें।
नेविगेशन
Route change
router navigationएक एप्लिकेशन रूट या URL पथ से दूसरे में परिवर्तन।
रूट परिवर्तन को पृष्ठ सामग्री, मेटाडेटा और सक्रिय नेविगेशन स्थिति को अपडेट करना चाहिए।
रूट बदलने के बाद सक्रिय नेविगेशन स्थिति को अपडेट करें।
नेविगेशन
Scroll
wheel / touch scrollदृश्यमान व्यूपोर्ट को स्क्रीन से बड़ी सामग्री के माध्यम से स्थानांतरित करना।
स्क्रॉलिंग पृष्ठ पर या अपने स्वयं के ओवरफ़्लो के साथ एक पैनल के अंदर हो सकती है।
लंबे ड्रॉपडाउन मेनू को स्क्रीन से बाहर निकलने के बजाय पैनल के अंदर स्क्रॉल करने दें।
नेविगेशन
Anchor scroll
href=#idएक लिंक व्यवहार जो उसी पृष्ठ पर एक मिलान आईडी वाले तत्व पर स्क्रॉल करता है।
एंकर लिंक टूल, संदर्भों या अनुभागों पर जाने के लिए उपयोगी होते हैं।
ब्राउज़ टूल बटन को टूल सेक्शन में स्क्रॉल कराएं।
इनपुट और फ़ॉर्म
Type
input eventइनपुट या टेक्स्टएरिया में टेक्स्ट या मान दर्ज करना।
टाइपिंग तुरंत स्थिति को अपडेट कर सकती है, इनपुट को मान्य कर सकती है, या सबमिशन तक प्रतीक्षा कर सकती है।
जैसे ही उपयोगकर्ता टाइप करता है, खोज परिणामों को अपडेट करें।
इनपुट और फ़ॉर्म
Submit
submit eventफॉर्म इनपुट भेजना या लागू करना।
सबमिट को आवश्यक इनपुट को मान्य करना चाहिए, आवश्यकता पड़ने पर आकस्मिक रीलोड को रोकना चाहिए, और प्रतिक्रिया प्रदर्शित करनी चाहिए।
फॉर्म को पृष्ठ को फिर से लोड करने से रोकें जब यह सबमिट होता है।
इनपुट और फ़ॉर्म
Reset
reset actionनियंत्रण या मानों को उनकी डिफ़ॉल्ट स्थिति में पुनर्स्थापित करना।
रीसेट पूर्वानुमानित होना चाहिए और चेतावनी के बिना महत्वपूर्ण कार्य को मिटाने से बचना चाहिए।
एक रीसेट बटन जोड़ें जो खोज को साफ़ करता है और सभी श्रेणियों पर वापस जाता है।
इनपुट और फ़ॉर्म
Validation
input / submitजाँच करें कि क्या उपयोगकर्ता इनपुट पूर्ण और मान्य है।
सत्यापन को यह बताना चाहिए कि क्या गलत है और इसे कैसे ठीक किया जाए।
जब इनपुट मान अमान्य हो तो एक सत्यापन संदेश दिखाएं।
खोज और फ़िल्टर
Search
query changeउपयोगकर्ता द्वारा दर्ज किए गए पाठ के आधार पर मिलान करने वाले आइटम खोजना।
खोज को उपयोगी फ़ील्ड जैसे नाम, उपनाम, विवरण और उदाहरणों की जांच करनी चाहिए।
खोज को कोरियाई शब्दों, अंग्रेजी शब्दों, उपनामों और अनुरोध उदाहरणों से मिलाएं।
खोज और फ़िल्टर
Filter
filter stateएक सूची को उन आइटम तक सीमित करना जो एक चयनित स्थिति से मेल खाते हैं।
फ़िल्टर को यह दिखाना चाहिए कि कौन सी स्थिति सक्रिय है और उपयोगी होने पर कितने आइटम शेष हैं।
UI इंटरैक्शन टर्म कार्ड के ऊपर श्रेणी फ़िल्टर जोड़ें।
खोज और फ़िल्टर
Sort
sort optionनाम, तिथि, प्राथमिकता या श्रेणी जैसे नियम के आधार पर आइटम का क्रम बदलना।
क्रमबद्ध करने से आइटम नहीं हटते हैं; यह केवल उनके क्रम को बदलता है।
फ़िल्टर करने के बाद मिलान करने वाले शब्दों को वर्णानुक्रम में क्रमबद्ध करें।
खोज और फ़िल्टर
Debounce
delayed inputउपयोगकर्ता द्वारा टाइप करना बंद करने के बाद, किसी महंगी क्रिया को चलाने से पहले थोड़ी देर प्रतीक्षा करें।
डिबाउंस, प्रत्येक कीस्ट्रोक पर खोज, सत्यापन या API कॉल को चलाने से रोकता है।
यदि खोज इनपुट में बहुत अधिक आइटम के साथ धीमी गति है, तो उसे डिबाउंस करें।
खोज और फ़िल्टर
Clear
clear actionएक टाइप किए गए मान, चयनित फ़िल्टर या अस्थायी स्थिति को हटाना।
साफ़ क्रियाओं का केवल इच्छित फ़ील्ड या स्थिति पर ही प्रभाव पड़ना चाहिए।
खोज फ़ील्ड के अंदर एक स्पष्ट बटन जोड़ें।
प्रतिक्रिया
Loading
pending stateडेटा, पृष्ठ सामग्री, या किसी कार्रवाई के तैयार होने की स्थिति में एक अस्थायी अवस्था।
लोडिंग प्रतिक्रिया उपयोगकर्ताओं को बताती है कि ऐप काम कर रहा है और जब आवश्यक हो तो दोहराए जाने वाली क्रियाओं को रोकता है।
रूपांतरण परिणाम तैयार होने के दौरान एक लोडिंग स्थिति दिखाएं।
प्रतिक्रिया
Spinner
loading visualएक दृश्य संकेतक जो इंगित करता है कि कुछ लोड हो रहा है या संसाधित हो रहा है।
स्पिनर छोटे इंतज़ार के लिए सबसे अच्छे होते हैं; लंबे इंतज़ार के लिए स्पष्ट प्रगति या पाठ की आवश्यकता हो सकती है।
सबमिट करते समय बटन के अंदर एक छोटा स्पिनर दिखाएं।
प्रतिक्रिया
Toast
temporary messageएक छोटा अस्थायी संदेश जो किसी कार्रवाई के बाद दिखाई देता है।
टोस्ट कॉपी, सेव या अपडेट जैसे पुष्टिकरणों के लिए उपयोगी होते हैं।
टेक्स्ट को क्लिपबोर्ड पर कॉपी करने के बाद एक टोस्ट दिखाएं।
प्रतिक्रिया
Error state
errorएक अवस्था जो उपयोगकर्ता को बताती है कि कुछ गलत हो गया है।
त्रुटि संदेश विशिष्ट, पठनीय होने चाहिए और अगले उपयोगी कार्रवाई को समझाना चाहिए।
जब इनपुट को परिवर्तित नहीं किया जा सकता है तो एक स्पष्ट त्रुटि संदेश दिखाएं।
प्रतिक्रिया
Success state
successएक अवस्था जो पुष्टि करती है कि कोई कार्रवाई सफलतापूर्वक पूरी हो गई है।
सफलता की स्थिति सूक्ष्म हो सकती है जब परिणाम पहले से ही दिखाई दे रहा हो।
सेटिंग्स सहेजने के बाद एक छोटा सफलता संदेश दिखाएं।
प्रतिक्रिया
Empty state
empty resultएक अवस्था जो तब दिखाई जाती है जब कोई डेटा नहीं होता है या कोई मिलान परिणाम नहीं होता है।
खाली स्थितियों को यह बताना चाहिए कि कुछ क्यों नहीं दिखाया जा रहा है और अगले चरण का सुझाव देना चाहिए।
जब खोज कोई मिलान करने वाला शब्द नहीं लौटाती है तो एक "कोई परिणाम नहीं" संदेश दिखाएं।
प्रतिक्रिया
Copy to clipboard
navigator.clipboardएक क्रिया जो टेक्स्ट को उपयोगकर्ता के क्लिपबोर्ड में डालती है।
कॉपी क्रियाओं को प्रतिक्रिया देनी चाहिए ताकि उपयोगकर्ताओं को पता चले कि पाठ कॉपी किया गया है।
जब प्रॉपर्टी चिप पर क्लिक किया जाता है तो CSS प्रॉपर्टी को कॉपी करें।
मोशन और टाइमिंग
Transition
CSS transitionदो दृश्य अवस्थाओं के बीच एक सहज परिवर्तन, जैसे कि रंग, अपारदर्शिता, या स्थिति।
संक्रमण UI को परिष्कृत महसूस करा सकते हैं, लेकिन उपकरणों के लिए उन्हें त्वरित रहना चाहिए।
मेनू आइटम होवर रंगों में एक छोटा संक्रमण जोड़ें।
मोशन और टाइमिंग
Animation
CSS animationएक दृश्य गति अनुक्रम जो एक बार या बार-बार चल सकता है।
एनिमेशन को कार्य का समर्थन करना चाहिए, न कि पढ़ने या दोहराए जाने वाले कार्य से विचलित होना चाहिए।
जब ड्रॉपडाउन खुलता है तो एक सूक्ष्म स्लाइड-डाउन एनीमेशन का उपयोग करें।
मोशन और टाइमिंग
Delay
setTimeout / delayकुछ होने या गायब होने से पहले एक प्रतीक्षा अवधि।
विलंब प्रतिक्रिया को पठनीय बना सकते हैं, लेकिन लंबे विलंब UI को धीमा महसूस करा सकते हैं।
कॉपी किए गए टोस्ट को लगभग एक सेकंड के लिए दृश्यमान रखें।
मोशन और टाइमिंग
Throttle
limited repeated eventsकिसी दोहराए जाने वाले इवेंट हैंडलर को कितनी बार चलाया जा सकता है, इसे सीमित करना।
थ्रॉटल स्क्रॉल या रीसाइज़ हैंडलर के लिए उपयोगी है जो कई बार ट्रिगर होते हैं।
यदि पृष्ठ धीमा हो जाता है तो स्क्रॉल हैंडलर को थ्रॉटल करें।