காம்போபாக்ஸ், மல்டிசெலக்ட், லிஸ்ட்பாக்ஸ் மற்றும் டிராப் டவுன் ஆகியவற்றுக்கு என்ன வித்தியாசம்? இந்த அனைத்து UI கூறுகளும் ஒரே மாதிரியாக தோன்றினாலும், அவை வெவ்வேறு நோக்கங்களுக்காக சேவை செய்கின்றன. தேர்வு பெரும்பாலும் கிடைக்கக்கூடிய விருப்பங்களின் எண்ணிக்கை மற்றும் அவற்றின் தெரிவுநிலைக்கு வரும். அவை எவ்வாறு வேறுபடுகின்றன, எந்த நோக்கத்திற்காக அவை சேவை செய்கின்றன, சரியானதை எவ்வாறு தேர்வு செய்வது - தவறான புரிதல்களையும் தவறான எதிர்பார்ப்புகளையும் தவிர்க்கவும்.
அனைத்து பட்டியல் வடிவங்களும் ஒரே மாதிரி இல்லை மேலே சிறப்பிக்கப்பட்டுள்ள அனைத்து UI கூறுகளும் ஒரே ஒரு பொதுவான விஷயத்தைக் கொண்டுள்ளன: அவை பட்டியல்களுடன் பயனர்களின் தொடர்புகளை ஆதரிக்கின்றன. இருப்பினும், அவர்கள் அதை சற்று வித்தியாசமாக செய்கிறார்கள். ஒவ்வொன்றையும் ஒவ்வொன்றாகப் பார்ப்போம்:
கீழ்தோன்றும் → பட்டியல் தூண்டப்படும் வரை மறைக்கப்பட்டுள்ளது. Combobox → வடிகட்ட வகை + 1 விருப்பத்தைத் தேர்ந்தெடுக்கவும். பல தேர்வு → வடிகட்ட வகை + பல விருப்பங்களைத் தேர்ந்தெடுக்கவும். பட்டியல் பெட்டி → எல்லா பட்டியல் விருப்பங்களும் இயல்பாகவே தெரியும் (+ ஸ்க்ரோல்). இரட்டை பட்டியல் பெட்டி → 2 பட்டியல் பெட்டிகளுக்கு இடையே உருப்படிகளை நகர்த்தவும்.
வேறு வார்த்தைகளில் கூறுவதானால், Combobox ஒரு கீழ்தோன்றும் பட்டியலுடன் உரை உள்ளீட்டு புலத்தை ஒருங்கிணைக்கிறது, எனவே பயனர்கள் வடிகட்ட தட்டச்சு செய்து ஒற்றை விருப்பத்தைத் தேர்ந்தெடுக்கலாம். Multiselect மூலம், பயனர்கள் பல விருப்பங்களைத் தேர்ந்தெடுக்கலாம் (பெரும்பாலும் மாத்திரைகள் அல்லது சில்லுகளாகக் காட்டப்படும்). பட்டியல் பெட்டிகள் எல்லா பட்டியல் விருப்பங்களையும் இயல்பாகக் காண்பிக்கும், பெரும்பாலும் ஸ்க்ரோலிங் மூலம். கிடைக்கக்கூடிய அனைத்து விருப்பங்களையும் பயனர்கள் உடனடியாகப் பார்க்க வேண்டியிருக்கும் போது இது உதவியாக இருக்கும். இரட்டை பட்டியல் பெட்டி (பரிமாற்ற பட்டியல் என்றும் அழைக்கப்படுகிறது) என்பது பட்டியல் பெட்டியின் மாறுபாடு ஆகும், இது பயனர்கள் இரண்டு பட்டியல் பெட்டிகளுக்கு இடையே உருப்படிகளை நகர்த்த அனுமதிக்கிறது (இடது ↔ வலது), பொதுவாக மொத்தமாக தேர்வு செய்ய. அடிக்கடி பயன்படுத்தப்படும் விருப்பங்களை ஒருபோதும் மறைக்க வேண்டாம் மேலே குறிப்பிட்டுள்ளபடி, சரியான UI கூறுகளின் தேர்வு 2 காரணிகளைப் பொறுத்தது: எத்தனை பட்டியல் விருப்பங்கள் உள்ளன, மேலும் இந்த விருப்பங்கள் அனைத்தும் இயல்பாகத் தெரிய வேண்டும் என்றால். அனைத்து பட்டியல்களிலும் மர கட்டமைப்புகள், கூடு கட்டுதல் மற்றும் குழு தேர்வு போன்றவை இருக்கலாம்.
எந்தவொரு UI கூறுக்கும் பல ஆண்டுகளாக நான் பின்பற்றும் ஒரு கொள்கை உள்ளது: அடிக்கடி பயன்படுத்தப்படும் விருப்பங்களை ஒருபோதும் மறைக்க வேண்டாம். பயனர்கள் ஒரு குறிப்பிட்ட தேர்வை அடிக்கடி நம்பியிருந்தால், அவர்களிடமிருந்து அதை மறைப்பதில் மிகக் குறைவான மதிப்பு இருக்கும். நாம் அதை முன்கூட்டியே தேர்ந்தெடுக்கலாம் அல்லது (2-3 அடிக்கடி பயன்படுத்தப்படும் விருப்பங்கள் இருந்தால்) அவற்றை சில்லுகள் அல்லது பொத்தான்களாகக் காட்டலாம், பின்னர் மீதமுள்ள பட்டியலை தொடர்புபடுத்தலாம். பொதுவாக, பிரபலமான விருப்பங்களை எப்போதும் காட்டுவது நல்லது - இது UI ஐ ஒழுங்கீனம் செய்தாலும் கூட. எதை எப்படி தேர்வு செய்வது? ஒவ்வொரு பட்டியலுக்கும் சிக்கலான தேர்வு முறை தேவையில்லை. 5 க்கும் குறைவான உருப்படிகளைக் கொண்ட பட்டியல்களுக்கு, எளிய ரேடியோ பொத்தான்கள் அல்லது தேர்வுப்பெட்டிகள் பொதுவாகச் சிறப்பாகச் செயல்படும். ஆனால் பயனர்கள் ஒரு பெரிய விருப்பப்பட்டியலில் (எ.கா., 200+ உருப்படிகள்) தேர்ந்தெடுக்க வேண்டும் என்றால், வேகமாக வடிகட்டுவதால் (எ.கா., நாடு தேர்வு) காம்போபாக்ஸ் + மல்டிசெலக்ட் உதவியாக இருக்கும்.
மக்கள் ஒரே நேரத்தில் பல விருப்பங்களை அணுக வேண்டியிருக்கும் போது பட்டியல் பெட்டிகள் உதவியாக இருக்கும், குறிப்பாக அந்த பட்டியலிலிருந்தும் பல விருப்பங்களை அவர்கள் தேர்வு செய்ய வேண்டும் என்றால். அடிக்கடி பயன்படுத்தப்படும் வடிப்பான்களுக்கு அவை உதவியாக இருக்கும்.
இரட்டை பட்டியல் பெட்டி பெரும்பாலும் கவனிக்கப்படாமல் புறக்கணிக்கப்படுகிறது. ஆனால், சிக்கலான பணிகளுக்கு இது மிகவும் உதவியாக இருக்கும், எ.கா. பயனர்கள் தங்கள் முழுத் தேர்வுப் பட்டியலைச் செய்வதற்கு முன் மூலப் பட்டியலுடன் பக்கவாட்டில் மதிப்பாய்வு செய்ய அனுமதிக்கும் ஒரே UI கூறு இதுவாகும் ("பரிமாற்ற பட்டியல்" என்றும் அழைக்கப்படுகிறது). உண்மையில், இரட்டை பட்டியல் பெட்டியானது இழுத்து விடுவதை விட வேகமானது, துல்லியமானது மற்றும் அணுகக்கூடியது. பயன்பாட்டுக் கருத்துகள் கவனத்தில் கொள்ள வேண்டிய ஒரு முக்கியமான குறிப்பு என்னவென்றால், அனைத்து பட்டியல் வகைகளும் அணுகுவதற்கு விசைப்பலகை வழிசெலுத்தலை (எ.கா., ↑/↓ அம்புக்குறி விசைகள்) ஆதரிக்க வேண்டும். சிலர் தட்டச்சு செய்ய ஆரம்பித்தவுடன் விருப்பங்களைத் தேர்ந்தெடுக்க எப்போதும் விசைப்பலகையையே நம்பியிருப்பார்கள்.
அதையும் தாண்டி:
7+ விருப்பங்களைக் கொண்ட பட்டியல்களுக்கு, "அனைத்தையும் தேர்ந்தெடு" மற்றும் "அனைத்தையும் அழி" செயல்பாடுகளைச் சேர்ப்பதன் மூலம் பயனர் தொடர்புகளை ஒழுங்குபடுத்தவும். காம்போபாக்ஸ் கொண்ட நீண்ட பட்டியல்களுக்கு, கிளிக்/தட்டலில் பயனர்களுக்கு எல்லா விருப்பங்களையும் வெளிப்படுத்துங்கள், இல்லையெனில் அவர்கள் ஒருபோதும் பார்க்கப்பட மாட்டார்கள், மிக முக்கியமாக, குழப்பத்தைத் தவிர்க்க ஊடாடாத கூறுகளை பொத்தான்களாகக் காட்ட வேண்டாம் - மேலும் ஊடாடும் கூறுகளை நிலையான லேபிள்களாகக் காட்ட வேண்டாம்.
மடக்குதல்: எல்லாமே கீழிறக்கம் அல்ல பெயர்கள் முக்கியம். விருப்பங்களின் செங்குத்து பட்டியல் பொதுவாக "டிராப் டவுன்" என்று விவரிக்கப்படுகிறது - ஆனால் பெரும்பாலும் இது அர்த்தமுள்ளதாக இருக்க மிகவும் பொதுவானது. பட்டியல் முன்னிருப்பாக மறைக்கப்பட்டிருப்பதை "கீழே இறங்குதல்" குறிக்கிறது. "மல்டிசெலக்ட்" என்பது ஒரு பட்டியலில் உள்ள பல தேர்வுகளை (செக்பாக்ஸ்) குறிக்கிறது. "காம்போபாக்ஸ்" என்பது உரை உள்ளீட்டைக் குறிக்கிறது. மற்றும் "லிஸ்ட்பாக்ஸ்" என்பது தேர்ந்தெடுக்கக்கூடிய உருப்படிகளின் பட்டியல், எல்லா நேரங்களிலும் தெரியும். அதன் பொருட்டு மேலே உள்ள வரையறைகளுடன் ஒத்துப்போவதே குறிக்கோள் அல்ல. ஆனால் நோக்கங்களை சீரமைக்க - இந்த UI கூறுகளை முடிவு செய்யும் போது, வடிவமைக்கும் போது, உருவாக்கி, பின்னர் பயன்படுத்தும் போது அதே மொழியைப் பேசுங்கள். அது வேலை செய்ய வேண்டும்அனைவரும் - வடிவமைப்பாளர்கள், பொறியாளர்கள் மற்றும் இறுதிப் பயனர்கள் - நிலையான லேபிள்கள் ஊடாடும் பொத்தான்கள் போலத் தெரியவில்லை, மற்றும் ரேடியோ பொத்தான்கள் தேர்வுப்பெட்டிகளைப் போல் செயல்படாது. "AI இடைமுகங்களுக்கான வடிவமைப்பு வடிவங்களை" சந்திக்கவும் AI இன்டர்ஃபேஸ்களுக்கான டிசைன் பேட்டர்ன்களை சந்திக்கவும், நிஜ வாழ்க்கை தயாரிப்புகளில் இருந்து நடைமுறை எடுத்துக்காட்டுகளுடன் கூடிய விட்டலியின் புதிய வீடியோ பாடநெறி - நேரடி UX பயிற்சி விரைவில் நடக்கும். இலவச மாதிரிக்காட்சிக்குச் செல்லவும். AI இடைமுகங்களுக்கான வடிவமைப்பு வடிவங்களை சந்திக்கவும், இடைமுக வடிவமைப்பு & UX பற்றிய விட்டலியின் வீடியோ பாடநெறி.
வீடியோ + UX பயிற்சி வீடியோ மட்டும் வீடியோ + UX பயிற்சி$ 450.00 $ 799.00
வீடியோ + UX பயிற்சி30 வீடியோ பாடங்கள் (10 மணிநேரம்) + நேரடி UX பயிற்சி. 100 நாட்கள் பணம் திரும்ப-உத்தரவாதம். வீடியோ மட்டும் $ 275.00$ 395.00
வீடியோ பாடத்தைப் பெறுங்கள்30 வீடியோ பாடங்கள் (10 மணிநேரம்). ஆண்டுதோறும் புதுப்பிக்கப்படும். 3 வீடியோ படிப்புகளுடன் UX தொகுப்பாகவும் கிடைக்கிறது.
பயனுள்ள வளங்கள்
தன்னிரக்கம்: UX வழிகாட்டுதல்கள், விட்டலி ஃபிரைட்மேன் Combobox, eBay மூலம் 👍 காம்போபாக்ஸ், எலாஸ்டிக் மூலம் காம்போபாக்ஸ், எலிசா எழுதியது காம்போபாக்ஸ், மோங்கோடிபி மூலம் 👍 Combobox, விசா மூலம் 👍 Combobox, by Watson (Docplanner) Combobox, விக்கிமீடியா மூலம் காம்போபாக்ஸ், ஜெண்டெஸ்க் மூலம் மல்டிசெலக்ட் (மோங்கோடிபி காம்போபாக்ஸ் டிசைன் டாக்ஸ்), மோங்கோடிபி மூலம் 👍 மல்டிசெலக்ட் லுக்அப், விக்கிமீடியா வாடின் மூலம் பல தேர்ந்தெடுக்கப்பட்ட காம்போ பாக்ஸ் மல்டிசெலக்ட், விசா மூலம் எறும்பு வடிவமைப்பு மூலம் பரிமாற்றம் (பட்டியல் பெட்டி உதாரணம்). லிஸ்ட்பாக்ஸ், ஹாப்பர் மூலம் பட்டியல் பெட்டி, வாடின் பட்டியல் பெட்டி, விசா மூலம் Red Hat (PatternFly) மூலம் இரட்டை பட்டியல் தேர்வி டூயல் லிஸ்ட்பாக்ஸ், சேல்ஸ்ஃபோர்ஸ் (மின்னல் வடிவமைப்பு அமைப்பு) மாண்டின் மூலம் பரிமாற்ற பட்டியல் டாஷ்லைட்டின் இரட்டை பட்டியல் பெட்டி பேட்ஜ்கள் எதிராக மாத்திரைகள் எதிராக சிப்ஸ் எதிராக குறிச்சொற்கள், விட்டலி ஃபிரைட்மேன் அன்னா கேலி (NN/g) எழுதிய பட்டியல் பெட்டிகள் மற்றும் கீழ்தோன்றும் பட்டியல்கள்
