Şeýlelik bilen, komboks, köp sesli, sanaw gutusy we aşak gaçmagyň arasynda näme tapawut bar? Bu UI komponentleriniň hemmesi meňzeş bolup görünse-de, dürli maksat bilen hyzmat edýär. Saýlaw, köplenç elýeterli wariantlaryň sanyna we görnükliligine bagly bolýar. Olaryň nähili tapawutlanýandyklaryny, haýsy maksat bilen hyzmat edýändiklerini we dogry birini nädip saýlamalydygyny göreliň - ýolda düşünişmezliklerden we nädogry garaşmalardan gaça duruň.
Sanawyň nusgalarynyň hemmesi birmeňzeş däl Aboveokarda görkezilen UI komponentleriniň hemmesiniň umumy bir zady bar: ulanyjylaryň sanawlar bilen gatnaşygyny goldaýarlar. Şeýle-de bolsa, olar muny başgaça edýärler. Geliň, hersine ýeke-ýekeden seredeliň:
Dropdown → sanawy başlaýança gizlenýär. Süzmek üçin “Combobox” görnüşi, 1 görnüşi saýlaň. Multiselect → filtrlemek üçin + görnüşi köp warianty saýlaň. Sanaw gutusy default tertip boýunça görünýän ähli sanaw opsiýalary (+ aýlamak). Goşa sanaw gutusy items zatlary 2 sanaw gutusynyň arasynda geçiriň.
Başga sözler bilen aýdylanda, “Combobox” tekst giriziş meýdançasyny açylan sanaw bilen birleşdirýär, şonuň üçin ulanyjylar süzmek we ýekeje opsiýa saýlamak üçin ýazyp bilerler. “Multiselect” -iň kömegi bilen ulanyjylar köp warianty saýlap bilerler (köplenç derman ýa-da çip hökmünde görkezilýär). Sanaw gutulary, köplenç aýlamak bilen, adaty görnüşde görünýän ähli sanaw opsiýalaryny görkezýär. Ulanyjylar elýeterli ähli saýlawlary derrew görmeli bolanda peýdalydyr. Goşa sanaw gutusy (geçiriş sanawy hem diýilýär) ulanyjylara adatça köp sanly saýlamak üçin iki sanaw gutusynyň (çepden saga) arasynda zatlary geçirmäge mümkinçilik berýän sanaw gutusynyň üýtgemegi. Hiç haçan ýygy-ýygydan ulanylýan opsiýalary gizlemäň Aboveokarda belläp geçişimiz ýaly, dogry UI komponentini saýlamak 2 faktora bagly: näçe sanaw warianty bar we bu opsiýalaryň hemmesi deslapky görnüşde görünmeli bolsa. Listhli sanawlarda agaç gurluşlary, höwürtge we topar saýlamasy hem bolup biler.
Islendik UI komponenti üçin ençeme ýyl bäri eýerýän bir prinsipim bar: ýygy-ýygydan ulanylýan opsiýalary gizlemäň. Ulanyjylar belli bir saýlama ýygy-ýygydan bil baglaýan bolsalar, ony gizlemekde gaty az ähmiýet bar. Öňünden saýlap bileris, ýa-da (ýygy-ýygydan ulanylýan 2-3 sany opsiýa bar bolsa) olary çip ýa-da düwme hökmünde görkezip, sanawyň galan bölegini özara baglanyşykda görkezip bileris. Umuman aýdanyňda, hemişe meşhur wariantlary görkezmek gowy zat - hatda UI-ni bulaşdyryp biler. Haýsyny saýlamaly? Her sanawda çylşyrymly saýlama usuly gerek däl. 5 elementden az sanawlar üçin ýönekeý radio düwmeleri ýa-da bellik gutulary adatça iň gowy işleýär. Usersöne ulanyjylar köp sanly saýlaw sanawyndan (meselem, 200+ element) saýlamaly bolsa, has çalt süzgüç sebäpli (meselem, ýurt saýlamasy) combobox + multiselect peýdalydyr.
Sanaw gutulary adamlar birbada köp wariantlara girmeli bolanda, esasanam şol sanawdan köp wariant saýlamaly bolsa peýdalydyr. Frequygy-ýygydan ulanylýan süzgüçler üçin peýdaly bolup biler.
Goşa sanaw gutusy köplenç äsgerilmeýär we ähmiýet berilmeýär. Complexöne çylşyrymly meseleler, e..g köpçülikleýin saýlamak ýa-da rollary, wezipeleri, jogapkärçiligi bellemek üçin gaty peýdaly bolup biler. Ulanyjylara doly saýlama sanawyny etmezden ozal çeşme sanawy bilen bilelikde gözden geçirmäge mümkinçilik berýän ýeke-täk UI komponenti (“Geçiriş sanawy” hem diýilýär). Aslynda, goşa sanaw gutusy köplenç süýremekden has çalt, has takyk we has elýeterli. Peýdalylyk barada pikirler Listatda saklamaly möhüm bir bellik, sanawyň ähli görnüşleriniň elýeterliligi üçin klawiatura nawigasiýasyny (meselem, ↑ / ↓ ok düwmeleri) goldamalydyr. Käbir adamlar ýazyp başlansoň, opsiýalary saýlamak üçin elmydama diýen ýaly klawiaturanyň üstünde durarlar.
Munuň aňyrsynda:
7+ opsiýaly sanawlar üçin ulanyjylaryň özara gatnaşygyny tertipleşdirmek üçin “Hemmesini saýlaň” we “Hemmesini arassalaň” funksiýalaryny goşmagy göz öňünde tutuň. Tarakly uzyn sanawlar üçin, basmak / basmak bilen ulanyjylara ähli opsiýalary açyň, ýogsam hiç haçan görünmez ýaly, Iň esasy zat, bulaşyklygyň öňüni almak üçin interaktiw däl elementleri düwmeler hökmünde görkezmäň - we interaktiw elementleri statiki bellikler hökmünde görkezmäň.
Upapmak: Hemme zat aşak düşmek däl Atlaryň ähmiýeti. Wertikallaryň sanawy adatça “aşak gaçma” hökmünde häsiýetlendirilýär - ýöne köplenç manyly bolmak üçin birneme umumy bolýar. “Açylmak” sanawyň asyl görnüşde gizlenendigini görkezýär. “Multiselect” sanawyň içinde köp saýlamany (bellik gutusyny) aňladýar. “Combobox” tekst girizilmegini aňladýar. “Sanaw gutusy” bolsa, elmydama görünýän saýlanyp alynýan zatlaryň sanawy. Maksat, munuň üçin ýokardaky kesgitlemelere laýyk gelmek däl. Emma niýetleri deňleşdirmek üçin - bu UI komponentlerini çözeniňizde, dizaýn edeniňizde, guranyňyzda we ulananyňyzda şol bir dilde gürläň. Munuň üçin işlemeliHemmeler - dizaýnerler, in engineenerler we ahyrky ulanyjylar - statiki ýazgylar interaktiw düwmelere meňzemeýän bolsa we radio düwmeleri bellik gutusy ýaly hereket etmese. “AI interfeýsleri üçin dizaýn nusgalary” bilen tanyşyň AI interfeýsleri üçin dizaýn nusgalary bilen tanyşyň, Witalynyň hakyky wideo önümi, hakyky durmuş önümlerinden amaly mysallar - ýakyn wagtda göni ýaýlymda geçiriljek UX okuwy bilen. Mugt deslapky syn. AI interfeýsleri üçin dizaýn nusgalary bilen tanyşyň, Witalynyň interfeýs dizaýny we UX boýunça wideo kursy.
Wideo + UX Okuw Wideo diňe Wideo + UX Okuw $ 450.00 $ 799.00
Wideo + UX Training30 wideo sapaklaryny alyň (10s) + Live UX Training.100 gün pul- yzyna- kepillik. Wideo diňe 275.00 $ 395.00
Wideo kursuny 30 wideo sapaklaryny alyň (10s). Lyylda täzelenýär. Şeýle hem 3 wideo kursy bolan UX bukjasy hökmünde elýeterli.
Peýdaly çeşmeler
Awtomatiki usul: Witali Fridman tarapyndan UX görkezmeleri “Combobox”, eBay by Combobox, Elastik tarapyndan Combobox, Elisa Combobox, MongoDB by Combobox, Visa by Combobox, Watson (Docplanner) Combobox, Wikimedia Combobox, Zendesk Multiselect (MongoDB Combobox Design Docs), MongoDB by Köp saýlawly gözleg, Wikimedia tarapyndan Vaadin tarapyndan köp saýlanan Combo Box Köp saýlaw, Wiza Ant Design tarapyndan geçirmek (Sanaw gutusy mysaly) Sanaw gutusy, Hopper Sanaw gutusy, Vaadin Sanaw gutusy, Visa Red Hat (PatternFly) tarapyndan goşa sanaw saýlaýjy “Salesforce” (ýyldyrym dizaýn ulgamy) tarapyndan goşa sanaw gutusy Geçiriş sanawy, Mantine “Dashlite” tarapyndan goşa sanaw gutusy Badges vs. Pills vs. Chips vs. Tags, Witaliý Fridman Sanaw gutulary vs. Dropdown sanawlary, Anna Kaliý (NN / g)
