కాబట్టి కాంబోబాక్స్, మల్టీసెలెక్ట్, లిస్ట్బాక్స్ మరియు డ్రాప్డౌన్ మధ్య తేడా ఏమిటి? ఈ UI కాంపోనెంట్లన్నీ ఒకేలా కనిపించినప్పటికీ, అవి వేర్వేరు ప్రయోజనాలను అందిస్తాయి. ఎంపిక తరచుగా అందుబాటులో ఉన్న ఎంపికల సంఖ్య మరియు వాటి దృశ్యమానతపై ఆధారపడి ఉంటుంది. అవి ఎలా విభిన్నంగా ఉన్నాయో, అవి ఏ ప్రయోజనం కోసం పనిచేస్తాయి మరియు సరైనదాన్ని ఎలా ఎంచుకోవాలో చూద్దాం - దారిలో అపార్థాలు మరియు తప్పుడు అంచనాలను నివారించడం.
అన్ని జాబితా నమూనాలు ఒకేలా ఉండవు పైన హైలైట్ చేసిన అన్ని UI కాంపోనెంట్లు ఖచ్చితంగా ఒకే విషయాన్ని కలిగి ఉంటాయి: అవి జాబితాలతో వినియోగదారుల పరస్పర చర్యలకు మద్దతు ఇస్తాయి. అయితే, వారు కొద్దిగా భిన్నంగా చేస్తారు. ఒక్కొక్కటిగా ఒక్కొక్కటిగా పరిశీలిద్దాం:
డ్రాప్డౌన్ → జాబితా ట్రిగ్గర్ అయ్యే వరకు దాచబడుతుంది. కాంబోబాక్స్ → ఫిల్టర్ చేయడానికి టైప్ చేయండి + 1 ఎంపికను ఎంచుకోండి. ఫిల్టర్ చేయడానికి బహుళ ఎంపిక → రకం + అనేక ఎంపికలను ఎంచుకోండి. జాబితా పెట్టె → డిఫాల్ట్గా కనిపించే అన్ని జాబితా ఎంపికలు (+ స్క్రోల్). ద్వంద్వ జాబితా పెట్టె → 2 జాబితా పెట్టెల మధ్య అంశాలను తరలించండి.
మరో మాటలో చెప్పాలంటే, కాంబోబాక్స్ టెక్స్ట్ ఇన్పుట్ ఫీల్డ్ను డ్రాప్డౌన్ జాబితాతో మిళితం చేస్తుంది, కాబట్టి వినియోగదారులు ఫిల్టర్ చేయడానికి టైప్ చేయవచ్చు మరియు ఒకే ఎంపికను ఎంచుకోవచ్చు. మల్టీసెలెక్ట్తో, వినియోగదారులు అనేక ఎంపికలను ఎంచుకోవచ్చు (తరచుగా మాత్రలు లేదా చిప్స్గా ప్రదర్శించబడుతుంది). జాబితా పెట్టెలు డిఫాల్ట్గా కనిపించే అన్ని జాబితా ఎంపికలను ప్రదర్శిస్తాయి, తరచుగా స్క్రోలింగ్తో ఉంటాయి. వినియోగదారులు అందుబాటులో ఉన్న అన్ని ఎంపికలను వెంటనే చూడవలసి వచ్చినప్పుడు ఇది సహాయకరంగా ఉంటుంది. ద్వంద్వ జాబితా పెట్టె (బదిలీ జాబితా అని కూడా పిలుస్తారు) అనేది జాబితాబాక్స్ యొక్క వైవిధ్యం, ఇది సాధారణంగా బల్క్ ఎంపిక కోసం రెండు జాబితాబాక్స్ల (ఎడమ ↔ కుడి) మధ్య అంశాలను తరలించడానికి వినియోగదారులను అనుమతిస్తుంది. తరచుగా ఉపయోగించే ఎంపికలను ఎప్పుడూ దాచవద్దు పైన పేర్కొన్నట్లుగా, సరైన UI భాగం యొక్క ఎంపిక 2 కారకాలపై ఆధారపడి ఉంటుంది: ఎన్ని జాబితా ఎంపికలు అందుబాటులో ఉన్నాయి మరియు ఈ ఎంపికలన్నీ డిఫాల్ట్గా కనిపించాల్సిన అవసరం ఉంటే. అన్ని జాబితాలు చెట్ల నిర్మాణాలు, గూడు మరియు సమూహ ఎంపికను కూడా కలిగి ఉండవచ్చు.
ఏదైనా UI కాంపోనెంట్ కోసం నేను సంవత్సరాలుగా అనుసరిస్తున్న ఒక సూత్రం ఉంది: తరచుగా ఉపయోగించే ఎంపికలను ఎప్పుడూ దాచవద్దు. వినియోగదారులు నిర్దిష్ట ఎంపికపై తరచుగా ఆధారపడినట్లయితే, దానిని వారి నుండి దాచడంలో చాలా తక్కువ విలువ ఉంటుంది. మేము దానిని ముందుగా ఎంచుకున్నట్లుగా చేయవచ్చు లేదా (తరచుగా ఉపయోగించే 2-3 ఎంపికలు మాత్రమే ఉంటే) వాటిని చిప్స్ లేదా బటన్లుగా చూపి, ఆపై పరస్పర చర్యపై మిగిలిన జాబితాను చూపవచ్చు. సాధారణంగా, జనాదరణ పొందిన ఎంపికలను ఎల్లప్పుడూ ప్రదర్శించడం మంచిది - ఇది UIని అస్తవ్యస్తం చేసినప్పటికీ. ఏది ఎంచుకోవాలి? ప్రతి జాబితాకు సంక్లిష్ట ఎంపిక పద్ధతి అవసరం లేదు. 5 కంటే తక్కువ అంశాలు ఉన్న జాబితాల కోసం, సాధారణ రేడియో బటన్లు లేదా చెక్బాక్స్లు సాధారణంగా ఉత్తమంగా పని చేస్తాయి. కానీ వినియోగదారులు పెద్ద ఎంపికల జాబితా నుండి (ఉదా., 200+ ఐటెమ్లు) ఎంచుకోవలసి వస్తే, వేగవంతమైన ఫిల్టరింగ్ (ఉదా., దేశం ఎంపిక) కారణంగా కాంబోబాక్స్ + మల్టీసెలెక్ట్ సహాయపడతాయి.
వ్యక్తులు ఒకేసారి అనేక ఎంపికలను యాక్సెస్ చేయవలసి వచ్చినప్పుడు జాబితాబాక్స్లు సహాయపడతాయి, ప్రత్యేకించి వారు ఆ జాబితా నుండి అనేక ఎంపికలను ఎంచుకోవాలి. తరచుగా ఉపయోగించే ఫిల్టర్లకు అవి సహాయపడతాయి.
ద్వంద్వ జాబితా పెట్టె తరచుగా విస్మరించబడుతుంది మరియు విస్మరించబడుతుంది. కానీ సంక్లిష్టమైన పనులకు ఇది చాలా సహాయకారిగా ఉంటుంది, ఉదా.. బల్క్ సెలెక్షన్, లేదా పాత్రలు, టాస్క్లు, బాధ్యతలను కేటాయించడం. వినియోగదారులు తమ పూర్తి ఎంపిక జాబితాను ("బదిలీ జాబితా" అని కూడా పిలుస్తారు) చేయడానికి ముందు సోర్స్ జాబితాతో పక్కపక్కనే సమీక్షించుకునేందుకు అనుమతించే ఏకైక UI భాగం ఇది. నిజానికి, డ్యూయల్ లిస్ట్బాక్స్ తరచుగా వేగంగా, మరింత ఖచ్చితమైనదిగా మరియు డ్రాగ్ అండ్ డ్రాప్ కంటే మరింత యాక్సెస్ చేయగలదు. వినియోగ పరిగణనలు గుర్తుంచుకోవలసిన ఒక ముఖ్యమైన గమనిక ఏమిటంటే, అన్ని జాబితా రకాలు ప్రాప్యత కోసం కీబోర్డ్ నావిగేషన్కు (ఉదా., ↑/↓ బాణం కీలు) మద్దతు ఇవ్వాలి. కొంతమంది వ్యక్తులు టైప్ చేయడం ప్రారంభించిన తర్వాత ఎంపికలను ఎంచుకోవడానికి దాదాపు ఎల్లప్పుడూ కీబోర్డ్పై ఆధారపడతారు.
అంతకు మించి:
7+ ఎంపికలు ఉన్న జాబితాల కోసం, వినియోగదారు పరస్పర చర్యను క్రమబద్ధీకరించడానికి "అన్నీ ఎంచుకోండి" మరియు "అన్నీ క్లియర్ చేయి" కార్యాచరణలను జోడించడాన్ని పరిగణించండి. కాంబోబాక్స్తో పొడవైన జాబితాల కోసం, క్లిక్/ట్యాప్లో వినియోగదారులకు అన్ని ఎంపికలను బహిర్గతం చేయండి, లేకుంటే వారు ఎప్పటికీ చూడలేరు, చాలా ముఖ్యమైనది, గందరగోళాన్ని నివారించడానికి నాన్-ఇంటరాక్టివ్ ఎలిమెంట్లను బటన్లుగా ప్రదర్శించవద్దు - మరియు ఇంటరాక్టివ్ ఎలిమెంట్లను స్టాటిక్ లేబుల్లుగా ప్రదర్శించవద్దు.
చుట్టడం: అంతా డ్రాప్డౌన్ కాదు పేర్లు ముఖ్యం. ఎంపికల యొక్క నిలువు జాబితా సాధారణంగా "డ్రాప్డౌన్"గా వర్ణించబడుతుంది - కానీ తరచుగా అర్థవంతంగా ఉండటానికి ఇది చాలా సాధారణమైనది. "డ్రాప్డౌన్" జాబితా డిఫాల్ట్గా దాచబడిందని సూచిస్తుంది. “మల్టీసెలెక్ట్” అనేది జాబితాలోని బహుళ-ఎంపిక (చెక్బాక్స్)ని సూచిస్తుంది. “కాంబోబాక్స్” అనేది టెక్స్ట్ ఇన్పుట్ని సూచిస్తుంది. మరియు “లిస్ట్బాక్స్” అనేది కేవలం ఎంచుకోదగిన అంశాల జాబితా, అన్ని సమయాల్లో కనిపిస్తుంది. లక్ష్యం దాని కొరకు పై నిర్వచనాలకు అనుగుణంగా ఉండకూడదు. కానీ ఉద్దేశాలను సమలేఖనం చేయడానికి - ఈ UI భాగాలను నిర్ణయించేటప్పుడు, రూపకల్పన చేసేటప్పుడు, నిర్మించేటప్పుడు మరియు ఉపయోగించేటప్పుడు ఒకే భాష మాట్లాడండి. దాని కోసం పని చేయాలిప్రతి ఒక్కరూ — డిజైనర్లు, ఇంజనీర్లు మరియు తుది వినియోగదారులు — స్టాటిక్ లేబుల్లు ఇంటరాక్టివ్ బటన్ల వలె కనిపించనంత కాలం మరియు రేడియో బటన్లు చెక్బాక్స్ల వలె పని చేయవు. “AI ఇంటర్ఫేస్ల కోసం డిజైన్ నమూనాలను” కలవండి AI ఇంటర్ఫేస్ల కోసం డిజైన్ ప్యాటర్న్లను కలవండి, నిజ జీవిత ఉత్పత్తుల నుండి ఆచరణాత్మక ఉదాహరణలతో Vitaly యొక్క కొత్త వీడియో కోర్సు — ప్రత్యక్ష UX శిక్షణ త్వరలో జరుగుతుంది. ఉచిత ప్రివ్యూకి వెళ్లండి. AI ఇంటర్ఫేస్ల కోసం డిజైన్ ప్యాటర్న్లను కలవండి, ఇంటర్ఫేస్ డిజైన్ & UXపై విటాలీ వీడియో కోర్సు.
వీడియో + UX శిక్షణ వీడియో మాత్రమే వీడియో + UX శిక్షణ$ 450.00 $ 799.00
వీడియో + UX శిక్షణ30 వీడియో పాఠాలు (10గం) + లైవ్ UX శిక్షణ పొందండి. 100 రోజుల మనీ-బ్యాక్-గ్యారంటీ. వీడియో మాత్రమే $ 275.00$ 395.00
వీడియో కోర్సు 30 వీడియో పాఠాలు (10గం) పొందండి. ప్రతి సంవత్సరం నవీకరించబడింది. 3 వీడియో కోర్సులతో UX బండిల్గా కూడా అందుబాటులో ఉంటుంది.
ఉపయోగకరమైన వనరులు
స్వీయపూర్తి: UX మార్గదర్శకాలు, విటాలీ ఫ్రైడ్మాన్ కాంబోబాక్స్, eBay ద్వారా 👍 కాంబోబాక్స్, ఎలాస్టిక్ ద్వారా కాంబోబాక్స్, ఎలిసా ద్వారా కాంబోబాక్స్, MongoDB ద్వారా 👍 కాంబోబాక్స్, వీసా ద్వారా 👍 కాంబోబాక్స్, వాట్సన్ (డాక్ప్లానర్) ద్వారా కాంబోబాక్స్, వికీమీడియా ద్వారా కాంబోబాక్స్, జెండెస్క్ ద్వారా మొంగోడిబి ద్వారా మల్టీసెలెక్ట్ (మొంగోడిబి కాంబోబాక్స్ డిజైన్ డాక్స్), 👍 వికీమీడియా ద్వారా బహుళ ఎంపిక శోధన వాడిన్ ద్వారా బహుళ-ఎంపిక కాంబో బాక్స్ వీసా ద్వారా బహుళ ఎంపిక యాంట్ డిజైన్ ద్వారా బదిలీ (లిస్ట్బాక్స్ ఉదాహరణ). లిస్ట్బాక్స్, హాప్పర్ ద్వారా వాడిన్ ద్వారా జాబితా పెట్టె జాబితా పెట్టె, వీసా ద్వారా Red Hat (PatternFly) ద్వారా డ్యూయల్ లిస్ట్ సెలెక్టర్ సేల్స్ఫోర్స్ ద్వారా డ్యూయల్ లిస్ట్బాక్స్ (మెరుపు డిజైన్ సిస్టమ్) మాంటిన్ ద్వారా బదిలీ జాబితా డ్యుయల్ లిస్ట్బాక్స్, డాష్లైట్ ద్వారా బ్యాడ్జ్లు వర్సెస్ పిల్స్ వర్సెస్ చిప్స్ వర్సెస్ ట్యాగ్లు, విటాలీ ఫ్రైడ్మాన్ లిస్ట్బాక్స్ వర్సెస్ డ్రాప్డౌన్ జాబితాలు, అన్నా కాలే (NN/g)
