അപ്പോൾ കോംബോബോക്സ്, മൾട്ടിസെലക്ട്, ലിസ്റ്റ്ബോക്സ്, ഡ്രോപ്പ്ഡൗൺ എന്നിവ തമ്മിലുള്ള വ്യത്യാസം എന്താണ്? ഈ യുഐ ഘടകങ്ങളെല്ലാം സമാനമായി കാണപ്പെടുമെങ്കിലും, അവ വ്യത്യസ്ത ഉദ്ദേശ്യങ്ങൾ നിറവേറ്റുന്നു. തിരഞ്ഞെടുക്കൽ പലപ്പോഴും ലഭ്യമായ ഓപ്ഷനുകളുടെ എണ്ണവും അവയുടെ ദൃശ്യപരതയും അനുസരിച്ചാണ് വരുന്നത്. വഴിയിൽ തെറ്റിദ്ധാരണകളും തെറ്റായ പ്രതീക്ഷകളും ഒഴിവാക്കിക്കൊണ്ട്, അവ എങ്ങനെ വ്യത്യാസപ്പെട്ടിരിക്കുന്നു, എന്ത് ഉദ്ദേശ്യമാണ്, ശരിയായത് എങ്ങനെ തിരഞ്ഞെടുക്കാം എന്ന് നോക്കാം.
എല്ലാ ലിസ്റ്റ് പാറ്റേണുകളും ഒരുപോലെയല്ല മുകളിൽ ഹൈലൈറ്റ് ചെയ്തിരിക്കുന്ന എല്ലാ യുഐ ഘടകങ്ങൾക്കും പൊതുവായ ഒരു കാര്യമുണ്ട്: ലിസ്റ്റുകളുമായുള്ള ഉപയോക്താക്കളുടെ ഇടപെടലുകളെ അവ പിന്തുണയ്ക്കുന്നു. എന്നിരുന്നാലും, അവർ ഇത് കുറച്ച് വ്യത്യസ്തമായി ചെയ്യുന്നു. നമുക്ക് ഓരോന്നായി നോക്കാം:
ഡ്രോപ്പ്ഡൗൺ → ലിസ്റ്റ് അത് പ്രവർത്തനക്ഷമമാകുന്നതുവരെ മറച്ചിരിക്കുന്നു. കോംബോബോക്സ് → ഫിൽട്ടർ ചെയ്യാൻ ടൈപ്പ് ചെയ്യുക + 1 ഓപ്ഷൻ തിരഞ്ഞെടുക്കുക. ഫിൽട്ടർ ചെയ്യാൻ മൾട്ടിസെലക്ട് → തരം + നിരവധി ഓപ്ഷനുകൾ തിരഞ്ഞെടുക്കുക. ലിസ്റ്റ്ബോക്സ് → എല്ലാ ലിസ്റ്റ് ഓപ്ഷനുകളും ഡിഫോൾട്ടായി കാണാം (+ സ്ക്രോൾ). ഡ്യുവൽ ലിസ്റ്റ്ബോക്സ് → 2 ലിസ്റ്റ്ബോക്സുകൾക്കിടയിൽ ഇനങ്ങൾ നീക്കുക.
മറ്റൊരു വിധത്തിൽ പറഞ്ഞാൽ, കോംബോബോക്സ് ഒരു ടെക്സ്റ്റ് ഇൻപുട്ട് ഫീൽഡ് ഒരു ഡ്രോപ്പ്ഡൗൺ ലിസ്റ്റുമായി സംയോജിപ്പിക്കുന്നു, അതിനാൽ ഉപയോക്താക്കൾക്ക് ഫിൽട്ടർ ചെയ്യാൻ ടൈപ്പ് ചെയ്യാനും ഒരൊറ്റ ഓപ്ഷൻ തിരഞ്ഞെടുക്കാനും കഴിയും. മൾട്ടിസെലക്ട് ഉപയോഗിച്ച്, ഉപയോക്താക്കൾക്ക് നിരവധി ഓപ്ഷനുകൾ തിരഞ്ഞെടുക്കാനാകും (പലപ്പോഴും ഗുളികകൾ അല്ലെങ്കിൽ ചിപ്സ് ആയി പ്രദർശിപ്പിക്കും). ലിസ്റ്റ്ബോക്സുകൾ സ്ഥിരസ്ഥിതിയായി കാണാവുന്ന എല്ലാ ലിസ്റ്റ് ഓപ്ഷനുകളും പ്രദർശിപ്പിക്കുന്നു, പലപ്പോഴും സ്ക്രോളിംഗ്. ഉപയോക്താക്കൾക്ക് ലഭ്യമായ എല്ലാ ചോയ്സുകളും ഉടനടി കാണേണ്ടിവരുമ്പോൾ ഇത് സഹായകരമാണ്. രണ്ട് ലിസ്റ്റ് ബോക്സുകൾക്കിടയിൽ (ഇടത് ↔ വലത്) ഇനങ്ങൾ നീക്കാൻ ഉപയോക്താക്കളെ അനുവദിക്കുന്ന ലിസ്റ്റ്ബോക്സിൻ്റെ ഒരു വ്യതിയാനമാണ് ഡ്യുവൽ ലിസ്റ്റ്ബോക്സ് (ട്രാൻസ്ഫർ ലിസ്റ്റ് എന്നും അറിയപ്പെടുന്നു). പതിവായി ഉപയോഗിക്കുന്ന ഓപ്ഷനുകൾ ഒരിക്കലും മറയ്ക്കരുത് മുകളിൽ സൂചിപ്പിച്ചതുപോലെ, ശരിയായ UI ഘടകത്തിൻ്റെ തിരഞ്ഞെടുപ്പ് 2 ഘടകങ്ങളെ ആശ്രയിച്ചിരിക്കുന്നു: എത്ര ലിസ്റ്റ് ഓപ്ഷനുകൾ ലഭ്യമാണ്, കൂടാതെ ഈ ഓപ്ഷനുകളെല്ലാം സ്ഥിരസ്ഥിതിയായി ദൃശ്യമാകണമെങ്കിൽ. എല്ലാ ലിസ്റ്റുകളിലും വൃക്ഷ ഘടനകൾ, കൂടുണ്ടാക്കൽ, ഗ്രൂപ്പ് തിരഞ്ഞെടുക്കൽ എന്നിവയും ഉണ്ടായിരിക്കാം.
ഏത് യുഐ ഘടകത്തിനും വർഷങ്ങളായി ഞാൻ പിന്തുടരുന്ന ഒരു തത്വമുണ്ട്: പതിവായി ഉപയോഗിക്കുന്ന ഓപ്ഷനുകൾ ഒരിക്കലും മറയ്ക്കരുത്. ഉപയോക്താക്കൾ ഒരു പ്രത്യേക തിരഞ്ഞെടുപ്പിനെ പതിവായി ആശ്രയിക്കുന്നുണ്ടെങ്കിൽ, അവരിൽ നിന്ന് അത് മറയ്ക്കുന്നതിന് വളരെ കുറച്ച് മൂല്യമേയുള്ളൂ. ഒന്നുകിൽ ഞങ്ങൾക്ക് ഇത് മുൻകൂട്ടി തിരഞ്ഞെടുത്തതാക്കാം, അല്ലെങ്കിൽ (പതിവായി ഉപയോഗിക്കുന്ന 2-3 ഓപ്ഷനുകൾ മാത്രമേ ഉള്ളൂവെങ്കിൽ) അവയെ ചിപ്പുകളോ ബട്ടണുകളോ ആയി കാണിക്കുക, തുടർന്ന് ഇൻ്ററാക്ഷനിൽ ബാക്കിയുള്ള പട്ടിക കാണിക്കുക. പൊതുവേ, എല്ലായ്പ്പോഴും ജനപ്രിയ ഓപ്ഷനുകൾ പ്രദർശിപ്പിക്കുന്നത് നല്ലതാണ് - ഇത് യുഐയെ അലങ്കോലപ്പെടുത്തിയാലും. ഏത് തിരഞ്ഞെടുക്കാം? ഓരോ ലിസ്റ്റിനും സങ്കീർണ്ണമായ തിരഞ്ഞെടുക്കൽ രീതി ആവശ്യമില്ല. 5-ൽ താഴെ ഇനങ്ങളുള്ള ലിസ്റ്റുകൾക്ക്, ലളിതമായ റേഡിയോ ബട്ടണുകളോ ചെക്ക്ബോക്സുകളോ സാധാരണയായി മികച്ച രീതിയിൽ പ്രവർത്തിക്കുന്നു. എന്നാൽ ഉപയോക്താക്കൾക്ക് ഒരു വലിയ ഓപ്ഷനുകളിൽ നിന്ന് തിരഞ്ഞെടുക്കണമെങ്കിൽ (ഉദാ. 200+ ഇനങ്ങൾ), വേഗത്തിലുള്ള ഫിൽട്ടറിംഗ് (ഉദാ. രാജ്യം തിരഞ്ഞെടുക്കൽ) കാരണം combobox + multiselect സഹായകരമാണ്.
ആളുകൾക്ക് ഒരേസമയം നിരവധി ഓപ്ഷനുകൾ ആക്സസ് ചെയ്യേണ്ടിവരുമ്പോൾ ലിസ്റ്റ്ബോക്സുകൾ സഹായകരമാണ്, പ്രത്യേകിച്ചും ആ ലിസ്റ്റിൽ നിന്നും നിരവധി ഓപ്ഷനുകൾ തിരഞ്ഞെടുക്കണമെങ്കിൽ. പതിവായി ഉപയോഗിക്കുന്ന ഫിൽട്ടറുകൾക്ക് അവ സഹായകമാകും.
ഇരട്ട ലിസ്റ്റ്ബോക്സ് പലപ്പോഴും അവഗണിക്കപ്പെടുകയും അവഗണിക്കപ്പെടുകയും ചെയ്യുന്നു. എന്നാൽ സങ്കീർണ്ണമായ ജോലികൾക്ക് ഇത് വളരെ സഹായകരമാകും, ഉദാ.. ബൾക്ക് സെലക്ഷൻ, അല്ലെങ്കിൽ റോളുകൾ, ടാസ്ക്കുകൾ, ഉത്തരവാദിത്തങ്ങൾ എന്നിവ നൽകൽ. ഉപയോക്താക്കൾക്ക് അവരുടെ മുഴുവൻ സെലക്ഷൻ ലിസ്റ്റും സോഴ്സ് ലിസ്റ്റിനൊപ്പം അവലോകനം ചെയ്യാൻ അനുവദിക്കുന്ന ഒരേയൊരു യുഐ ഘടകമാണിത് (“ട്രാൻസ്ഫർ ലിസ്റ്റ്” എന്നും വിളിക്കുന്നു). വാസ്തവത്തിൽ, ഡ്യുവൽ ലിസ്റ്റ്ബോക്സ് പലപ്പോഴും ഡ്രാഗ് ആൻഡ് ഡ്രോപ്പിനെക്കാൾ വേഗതയുള്ളതും കൂടുതൽ കൃത്യവും ആക്സസ് ചെയ്യാവുന്നതുമാണ്. ഉപയോഗക്ഷമത പരിഗണനകൾ എല്ലാ ലിസ്റ്റ് തരങ്ങളും പ്രവേശനക്ഷമതയ്ക്കായി കീബോർഡ് നാവിഗേഷനെ (ഉദാ. ↑/↓ അമ്പടയാള കീകൾ) പിന്തുണയ്ക്കേണ്ടതുണ്ട് എന്നതാണ് മനസ്സിൽ സൂക്ഷിക്കേണ്ട ഒരു പ്രധാന കുറിപ്പ്. ചില ആളുകൾ ടൈപ്പ് ചെയ്യാൻ തുടങ്ങിയാൽ ഓപ്ഷനുകൾ തിരഞ്ഞെടുക്കാൻ എപ്പോഴും കീബോർഡിനെ ആശ്രയിക്കും.
അതിനപ്പുറം:
7+ ഓപ്ഷനുകളുള്ള ലിസ്റ്റുകൾക്ക്, ഉപയോക്തൃ ഇടപെടൽ കാര്യക്ഷമമാക്കുന്നതിന് "എല്ലാം തിരഞ്ഞെടുക്കുക", "എല്ലാം മായ്ക്കുക" എന്നീ പ്രവർത്തനങ്ങൾ ചേർക്കുന്നത് പരിഗണിക്കുക. ഒരു കോംബോബോക്സ് ഉള്ള ദൈർഘ്യമേറിയ ലിസ്റ്റുകൾക്കായി, ക്ലിക്ക്/ടാപ്പിൽ എല്ലാ ഓപ്ഷനുകളും ഉപയോക്താക്കൾക്ക് തുറന്നുകൊടുക്കുക, അല്ലാത്തപക്ഷം അവർ ഒരിക്കലും കാണാനിടയില്ല, ഏറ്റവും പ്രധാനമായി, ആശയക്കുഴപ്പം ഒഴിവാക്കാൻ, സംവേദനാത്മകമല്ലാത്ത ഘടകങ്ങൾ ബട്ടണുകളായി പ്രദർശിപ്പിക്കരുത് - കൂടാതെ സംവേദനാത്മക ഘടകങ്ങളെ സ്റ്റാറ്റിക് ലേബലുകളായി പ്രദർശിപ്പിക്കരുത്.
പൊതിയുന്നു: എല്ലാം ഒരു ഡ്രോപ്പ്ഡൗൺ അല്ല പേരുകൾ പ്രധാനമാണ്. ഓപ്ഷനുകളുടെ ലംബമായ ഒരു ലിസ്റ്റ് സാധാരണയായി "ഡ്രോപ്പ്ഡൗൺ" എന്ന് വിവരിക്കപ്പെടുന്നു - എന്നാൽ പലപ്പോഴും ഇത് അർത്ഥവത്തായത് വളരെ സാധാരണമാണ്. ലിസ്റ്റ് ഡിഫോൾട്ടായി മറച്ചിട്ടുണ്ടെന്ന് "ഡ്രോപ്പ്ഡൗൺ" സൂചന നൽകുന്നു. "Multiselect" എന്നത് ഒരു ലിസ്റ്റിനുള്ളിൽ മൾട്ടി-സെലക്ഷൻ (ചെക്ക്ബോക്സ്) സൂചിപ്പിക്കുന്നു. "കോംബോബോക്സ്" എന്നത് ടെക്സ്റ്റ് ഇൻപുട്ട് സൂചിപ്പിക്കുന്നു. കൂടാതെ "ലിസ്റ്റ്ബോക്സ്" എന്നത് തിരഞ്ഞെടുക്കാവുന്ന ഇനങ്ങളുടെ ഒരു ലിസ്റ്റ് ആണ്, എല്ലായ്പ്പോഴും ദൃശ്യമാണ്. അതിനു വേണ്ടി മുകളിൽ പറഞ്ഞിരിക്കുന്ന നിർവചനങ്ങളുമായി പൊരുത്തപ്പെടുക എന്നതല്ല ലക്ഷ്യം. എന്നാൽ ഉദ്ദേശ്യങ്ങൾ വിന്യസിക്കുന്നതിന് - ഈ യുഐ ഘടകങ്ങൾ തീരുമാനിക്കുമ്പോഴും രൂപകൽപ്പന ചെയ്യുമ്പോഴും നിർമ്മിക്കുമ്പോഴും ഉപയോഗിക്കുമ്പോഴും ഒരേ ഭാഷ സംസാരിക്കുക. അതിനായി പ്രവർത്തിക്കണംഎല്ലാവരും - ഡിസൈനർമാർ, എഞ്ചിനീയർമാർ, അന്തിമ ഉപയോക്താക്കൾ - സ്റ്റാറ്റിക് ലേബലുകൾ സംവേദനാത്മക ബട്ടണുകളായി കാണാത്തിടത്തോളം, റേഡിയോ ബട്ടണുകൾ ചെക്ക്ബോക്സുകൾ പോലെ പ്രവർത്തിക്കുന്നില്ല. "AI ഇൻ്റർഫേസുകൾക്കായുള്ള ഡിസൈൻ പാറ്റേണുകൾ" കാണുക AI ഇൻ്റർഫേസുകൾക്കായുള്ള ഡിസൈൻ പാറ്റേണുകൾ പരിചയപ്പെടുക, യഥാർത്ഥ ജീവിത ഉൽപ്പന്നങ്ങളിൽ നിന്നുള്ള പ്രായോഗിക ഉദാഹരണങ്ങളുള്ള വിറ്റാലിയുടെ പുതിയ വീഡിയോ കോഴ്സ് - ഒരു തത്സമയ UX പരിശീലനം ഉടൻ നടക്കുന്നു. ഒരു സൗജന്യ പ്രിവ്യൂവിലേക്ക് പോകുക. ഇൻ്റർഫേസ് ഡിസൈനും യുഎക്സും സംബന്ധിച്ച വിറ്റാലിയുടെ വീഡിയോ കോഴ്സായ AI ഇൻ്റർഫേസുകൾക്കായുള്ള ഡിസൈൻ പാറ്റേണുകൾ പരിചയപ്പെടുക.
വീഡിയോ + UX ട്രെയിനിംഗ് വീഡിയോ മാത്രം വീഡിയോ + UX പരിശീലനം$ 450.00 $ 799.00
വീഡിയോ + UX പരിശീലനം30 വീഡിയോ പാഠങ്ങൾ (10 മണിക്കൂർ) + തത്സമയ UX പരിശീലനം നേടുക. 100 ദിവസത്തെ പണം-ബാക്ക്-ഗ്യാരൻ്റി. വീഡിയോ മാത്രം $ 275.00$ 395.00
വീഡിയോ കോഴ്സ് 30 വീഡിയോ പാഠങ്ങൾ (10 മണിക്കൂർ) നേടുക. വർഷം തോറും അപ്ഡേറ്റ് ചെയ്യുന്നു. 3 വീഡിയോ കോഴ്സുകളുള്ള ഒരു UX ബണ്ടിലും ലഭ്യമാണ്.
ഉപയോഗപ്രദമായ വിഭവങ്ങൾ
സ്വയമേവ പൂർത്തിയാക്കൽ: UX മാർഗ്ഗനിർദ്ദേശങ്ങൾ, വിറ്റാലി ഫ്രീഡ്മാൻ കോംബോബോക്സ്, eBay 👍 കോംബോബോക്സ്, ഇലാസ്റ്റിക് വഴി കോംബോബോക്സ്, എലിസയുടെ കോംബോബോക്സ്, മോംഗോഡിബി 👍 കോംബോബോക്സ്, വിസ 👍 കോംബോബോക്സ്, വാട്സൺ (ഡോക്പ്ലാനർ) വിക്കിമീഡിയയുടെ കോംബോബോക്സ് കോംബോബോക്സ്, സെൻഡെസ്ക് എഴുതിയത് മൾട്ടിസെലക്ട് (MongoDB കോംബോബോക്സ് ഡിസൈൻ ഡോക്സ്), മോംഗോഡിബി 👍 വിക്കിമീഡിയയുടെ മൾട്ടിസെലക്ട് ലുക്ക്അപ്പ് വാദിൻ എഴുതിയ മൾട്ടി-സെലക്ട് കോംബോ ബോക്സ് വിസ വഴി മൾട്ടിസെലക്ട് കൈമാറ്റം (ലിസ്റ്റ്ബോക്സ് ഉദാഹരണം), ആൻ്റ് ഡിസൈൻ വഴി ലിസ്റ്റ്ബോക്സ്, ഹോപ്പർ എഴുതിയത് വാദിൻ എഴുതിയ ലിസ്റ്റ് ബോക്സ് ലിസ്റ്റ്ബോക്സ്, വിസ വഴി ഡ്യുവൽ ലിസ്റ്റ് സെലക്ടർ, റെഡ് ഹാറ്റ് (പാറ്റേൺഫ്ലൈ) സെയിൽസ്ഫോഴ്സിൻ്റെ ഇരട്ട ലിസ്റ്റ്ബോക്സ് (മിന്നൽ ഡിസൈൻ സിസ്റ്റം) ട്രാൻസ്ഫർ ലിസ്റ്റ്, Mantine മുഖേന ഡ്യുവൽ ലിസ്റ്റ്ബോക്സ്, ഡാഷ്ലൈറ്റ് ബാഡ്ജുകൾ വേഴ്സസ്. പിൽസ് വേഴ്സസ്. ചിപ്സ് വേഴ്സസ് ടാഗുകൾ, വിറ്റാലി ഫ്രീഡ്മാൻ ലിസ്റ്റ്ബോക്സുകൾ വേഴ്സസ് ഡ്രോപ്പ്ഡൗൺ ലിസ്റ്റുകൾ, അന്ന കാലി (NN/g)
