त’ कॉम्बोबॉक्स, मल्टीसेलेक्ट, लिस्टबॉक्स, आ ड्रॉपडाउन मे की अंतर अछि ? जखन कि इ सबटा यूआई घटक समान देखा सकएयत छै, इ अलग-अलग उद्देश्यक कें पूरा करएयत छै. चुनाव अक्सर उपलब्ध विकल्पक कें संख्या आ ओकर दृश्यता पर निर्भर करय छै. देखू जे दुनू मे कोना भिन्नता अछि, कोन उद्देश्यक काज करैत अछि, आ सही केँ कोना चुनल जाय — रास्ता मे गलतफहमी आ गलत अपेक्षा सँ बचब.
सब सूची पैटर्न एक समान नहि होइत अछि ऊपर हाइलाइट कैल गेल सबटा यूआई घटक मे ठीक एकटा बात समान छै: इ सूचीक कें साथ उपयोगकर्ताक कें बातचीत कें समर्थन करय छै. ओना ओ सभ कनि अलग तरहेँ करैत छथि । एक-एक क’ एक-एक क’ देखल जाय:
ड्रॉपडाउन → सूची ता धरि नुकायल रहैत अछि जा धरि ई ट्रिगर नहि भ’ जाइत अछि. कॉम्बोबॉक्स → फ़िल्टर करबाक लेल टाइप करू + 1 विकल्प चुनू। बहुचयन → फ़िल्टर करबाक लेल टाइप करू + बहुत रास विकल्प चुनू। सूचीबॉक्स → डिफ़ॉल्ट रूप स दृश्यमान सभ सूची विकल्प (+ स्क्रॉल)। दोहरी लिस्टबॉक्स → 2 लिस्टबॉक्स के बीच आइटम ले जाए |
दोसर शब्दक मे, कॉम्बोबॉक्स एकटा टेक्स्ट इनपुट फील्ड कें ड्रॉपडाउन सूची कें साथ संयोजित करयत छै, जेकरा सं उपयोगकर्ता एकटा विकल्प कें फ़िल्टर करय आ चुनय कें लेल टाइप कयर सकय छै. मल्टीसिलेक्ट कें साथ, उपयोगकर्ता अनेक विकल्पक कें चयन कयर सकय छै (अक्सर गोली या चिप्स कें रूप मे प्रदर्शित कैल जायत छै). सूचीबॉक्स डिफ़ॉल्ट रूप सं दृश्यमान सबटा सूची विकल्प प्रदर्शित करएयत छै, अक्सर स्क्रॉल कें साथ. जखन उपयोगकर्ता कें तुरंत सबटा उपलब्ध विकल्प देखय कें जरूरत होयत छै तखन इ मददगार होयत छै. ड्यूल लिस्टबॉक्स (जेकरा स्थानांतरण सूची सेहो कहल जायत छै) एकटा लिस्टबॉक्स कें एकटा भिन्नता छै जे उपयोगकर्ताक कें दू लिस्टबॉक्स (बाएं ↔ दाहिना) कें बीच आइटम कें स्थानांतरित करय कें अनुमति देयत छै, आमतौर पर थोक चयन कें लेल. बेर-बेर प्रयोग कएल गेल विकल्प कखनो नहि नुकाउ जैना की ऊपर कहल गेल छै, सही यूआई घटक कें चुनाव 2 कारक पर निर्भर करयत छै: कतेक सूची विकल्प उपलब्ध छै, आ की इ सबटा विकल्पक कें डिफ़ॉल्ट रूप सं देखय कें जरूरत छै. सब सूची मे गाछक संरचना, घोंसला, आ समूह चयन सेहो भ' सकैत छल.
एकटा सिद्धांत अछि जकर पालन हम सालों स’ कोनो यूआई घटक लेल क’ रहल छी: बेर-बेर प्रयोग कएल गेल विकल्प केँ कहियो नहि नुकाउ. यदि उपयोगकर्ता बार-बार कोनों विशेष चयन पर निर्भर रहय छै, त ओकरा ओकरा सं छिपाबै कें बहुत कम मूल्य छै. हम या त एकरा पूर्व-चयनित बना सकैत छलहुं, या (यदि केवल 2-3 बेर-बेर प्रयोग कएल जाय वाला विकल्प अछि) ओकरा चिप या बटन के रूप मे देखा सकैत छलहुं, आ फेर बाकी सूची के इंटरैक्शन पर देखा सकैत छलहुं. सामान्यतया, लोकप्रिय विकल्प कें हमेशा प्रदर्शित करनाय नीक विचार छै — भले ही इ यूआई कें अव्यवस्था पैदा क’ सकय. कोन कोना चुनल जाय ? हर सूची मे जटिल चयन विधि क जरूरत नहि होइत अछि। 5 सं कम आइटम वाला सूची कें लेल, साधारण रेडियो बटन या चेकबॉक्स आमतौर पर बेसि काज करएयत छै. लेकिन यदि उपयोगकर्ताक कें विकल्पक कें एकटा पैघ सूची (जैना, 200+ आइटम) सं चयन करय कें जरूरत छै, त कॉम्बोबॉक्स + मल्टीसेलेक्ट तेजी सं फ़िल्टरिंग (जैना, देश कें चयन) कें कारण मददगार छै.
लिस्टबॉक्स तखन मददगार होयत छै जखन लोगक कें एक बेर मे बहुत सं विकल्पक कें उपयोग करय कें जरूरत होयत छै, खासकर अगर ओकरा ओय सूची सं सेहो बहुत विकल्प चुनय कें जरूरत होयत छै. अक्सर उपयोग कैल जाय वाला फिल्टर कें लेल इ सहायक भ सकय छै.
ड्यूल लिस्टबॉक्स कें अक्सर अनदेखी आ अनदेखी कैल जायत छै. मुदा जटिल काज, जेना थोक चयन, या भूमिका, कार्य, जिम्मेदारी असाइन करनाय कें लेल इ बहुत मददगार भ सकय छै. इ एकमात्र यूआई घटक छै जे उपयोगकर्ताक कें कमिट करय सं पहिले स्रोत सूची कें साथ अपन पूरा चयन सूची कें साइड-बाय-साइड समीक्षा करय कें अनुमति देयत छै (जेकरा “हस्तांतरण सूची” सेहो कहल जायत छै). वास्तव में, ड्यूल लिस्टबॉक्स अक्सर ड्रैग-एंड-ड्रॉप के तुलना में तेज, अधिक सटीक आरू अधिक सुलभ होय छै. उपयोगिता पर विचार ध्यान म॑ रखै वाला एगो महत्वपूर्ण नोट ई छै कि सब सूची प्रकार क॑ सुलभता लेली कीबोर्ड नेविगेशन (जैना, ↑/↓ तीर कुंजी) क॑ समर्थन करै के जरूरत छै । किछु लोक टाइप करय लगला पर विकल्प चुनय लेल लगभग हमेशा कीबोर्ड पर निर्भर रहताह.
ताहि सँ परे : १.
7+ विकल्प वाला सूची कें लेल, उपयोगकर्ताक कें बातचीत कें सुव्यवस्थित करय कें लेल “सब कें चयन करूं” आ “सब साफ करूं” कार्यक्षमताक कें जोड़य पर विचार करूं. कॉम्बोबॉक्स वाला लंबा सूची कें लेल, क्लिक/टैप पर उपयोगकर्ताक कें सामने सबटा विकल्पक कें उजागर करूं, कियाकि अन्यथा ओ कहियो नहि देखल जा सकय छै, सब सं महत्वपूर्ण, भ्रम सं बचय कें लेल गैर-इंटरएक्टिव तत्व कें बटन कें रूप मे नहि प्रदर्शित करूं — आ इंटरैक्टिव तत्व कें स्थिर लेबल कें रूप मे नहि प्रदर्शित करूं.
लपेटब : सब किछु ड्रॉपडाउन नहि अछि नाम मायने रखैत अछि। विकल्पक कें ऊर्ध्वाधर सूची कें आमतौर पर “ड्रॉपडाउन” कें रूप मे वर्णित कैल जायत छै — मुदा अक्सर इ कनि बेसि जेनेरिक होयत छै जे सार्थक होयत छै. “ड्रॉपडाउन” संकेत दैत अछि जे सूची डिफ़ॉल्ट रूप सँ नुकायल अछि | “बहु चयन” कें तात्पर्य कोनों सूची कें भीतर बहु-चयन (चेकबॉक्स) सं छै. “कम्बोबॉक्स” के तात्पर्य पाठ इनपुट स अछि। आरू “लिस्टबॉक्स” बस चयन योग्य वस्तु केरऽ सूची छै, जे हर समय दिखाई दै छै । लक्ष्य ई नहिं जे एकर लेल उपरोक्त परिभाषा के अनुरूप हो. लेकिन बल्कि इरादा क॑ संरेखित करै लेली — ई यूआई घटकऽ प॑ फैसला करै, डिजाइन करै, निर्माण करै आरू ओकरा बाद उपयोग करै के समय एक ही भाषा बोलै । एकरा लेल काज करबाक चाहीसब कियो — डिजाइनर, इंजीनियर, आ अंतिम उपयोगकर्ता — जाबत धरि स्थिर लेबल इंटरैक्टिव बटन जकाँ नहि देखाइत अछि, आ रेडियो बटन चेकबॉक्स जकाँ काज नहि करैत अछि. “एआई इंटरफेस के लेल डिजाइन पैटर्न” स भेंट करू एआई इंटरफेस कें लेल डिजाइन पैटर्न सं मिलूं, वास्तविक जीवन कें उत्पादक सं व्यावहारिक उदाहरणक कें साथ विटाली कें नव वीडियो कोर्स — जल्द ही एकटा लाइव यूएक्स प्रशिक्षण कें साथ. एकटा मुफ्त पूर्वावलोकन पर कूदि जाउ। एआई इंटरफेस कें लेल डिजाइन पैटर्न कें पूरा करूं, इंटरफेस डिजाइन आ यूएक्स पर विटाली कें वीडियो कोर्स.
वीडियो + यूएक्स प्रशिक्षणकेवल वीडियो वीडियो + यूएक्स प्रशिक्षण$ 450.00 $ 799.00
वीडियो + यूएक्स प्रशिक्षण प्राप्त करू30 वीडियो पाठ (10h) + लाइव यूएक्स प्रशिक्षण।100 दिन मनी-बैक-गारंटी।वीडियो केवल$ 275.00$ 395.00
वीडियो कोर्स30 वीडियो पाठ (10h) प्राप्त करू। सालाना अपडेट होइत अछि।3 वीडियो कोर्स के संग UX Bundle के रूप में सेहो उपलब्ध अछि।
उपयोगी संसाधन
स्वचालित: यूएक्स दिशानिर्देश, विटाली फ्राइडमैन द्वारा कॉम्बोबॉक्स, ईबे 👍 द्वारा कॉम्बोबॉक्स, इलास्टिक द्वारा कॉम्बोबॉक्स, एलिसा द्वारा कॉम्बोबॉक्स, मोंगोडीबी 👍 द्वारा कॉम्बोबॉक्स, वीजा 👍 द्वारा कॉम्बोबॉक्स, वाटसन (डॉकप्लानर) द्वारा। कॉम्बोबॉक्स, विकिमीडिया द्वारा कॉम्बोबॉक्स, जेन्डेस्क द्वारा मल्टीसेलेक्ट (MongoDB Combobox Design Docs), MongoDB 👍 द्वारा बहुचयनात्मक लुकअप, विकिमीडिया द्वारा बहु-चयनित कॉम्बो बॉक्स, Vaadin द्वारा मल्टीसेलेक्ट, वीजा द्वारा स्थानांतरण (लिस्टबॉक्स उदाहरण), चींटी डिजाइन द्वारा लिस्टबॉक्स, हॉपर द्वारा सूची बॉक्स, वादिन द्वारा लिस्टबॉक्स, वीजा द्वारा दोहरी सूची चयनकर्ता, रेड हैट (PatternFly) द्वारा ड्यूल लिस्टबॉक्स, सेल्सफोर्स (बिजली डिजाइन सिस्टम) द्वारा स्थानांतरण सूची, मंटाइन द्वारा ड्यूल लिस्टबॉक्स, डैशलाइट द्वारा बैज बनाम गोली बनाम चिप्स बनाम टैग, विटाली फ्राइडमैन द्वारा सूचीबॉक्स बनाम ड्रॉपडाउन सूची, अन्ना केले (एनएन/जी) द्वारा
