Modele comune de proiectare pentru elemente de interfata de utilizator selectabile

Formularele online sunt unele dintre cele mai comune interfete pentru interactiunea utilizatorilor. Multe campuri web se bazeaza pe introducerea utilizatorului de la tastatura, dar altele au raspunsuri preumplute care asteapta sa fie selectate. Acestea pot include casute de selectare, intrari de fisiere sau chiar selectarea de meniuri derulante.

Desi meniurile selecte sunt fantastice, ele pot fi, de asemenea, putin plictisitoare. Toate design-ul web ar trebui sa fie functional, dar un design web excelent incorporeaza si o estetica placuta.

Urmatoarele idei se concentreaza in jurul elementelor UI selectabile pentru machete de site-uri web. www.openlearning.com Designerii web le place adesea sa isi proiecteze propriile campuri personalizate care se potrivesc cel mai bine proiectului la indemana. Meniurile selectate si intrarile similare pot fi dificil de personalizat, insa tehnicile moderne faciliteaza procesul mult mai usor. Consultati aceste pluginuri si fragmente de cod care pot fi perfecte pentru personalizarea oricarui camp de formular.

Selectati Desene de meniu

In primul rand, am creat o serie de personalizari selectate de meniu. Meniurile selecte sunt cunoscute de oameni care au experienta pe web, asa ca nu este de mirare ca sunt populari.

Unul dintre cele mai rapide moduri de a personaliza un camp select este prin intermediul unui plugin. ameblo.jp jQuery pare a fi cea mai populara alegere, deoarece este open source si are foarte mult suport. Daca sunteti in cautarea unei alternative alternative de design de meniu, aceste plugin-uri sunt un loc minunat pentru a incepe cautarea.

Ales

De la meniurile derulante obisnuite pana la grupuri de optiuni si campuri cu mai multe selectii, alesul are totul. Acest plugin gratuit a fost creat de Harvest si are una dintre cele mai simple interfete pe care le-ati putea solicita.

Fiecare meniu de selectare include un design personalizat care urmeaza idei similare pe care le-ati gasi intr-un meniu de selectare generica. Efectul de transfer al articolului a fost, de asemenea, personalizat urmand un stil de design Bootstrap. 271595.8b.io

Alesul este cu adevarat magnific datorita diverselor sale caracteristici. Meniurile selectate se pot comporta ca campurile derulante obisnuite sau puteti adauga cateva functii suplimentare. Campul de cautare este o atingere frumoasa daca aveti o multime de optiuni intr-un singur meniu. In mod alternativ, puteti permite utilizatorilor sa selecteze mai multe valori simultan si sa le trimita toate la formular. Aleasa este excelenta nu doar pentru stilul UI, ci si pentru functiile UX adaugate.

SelectBoxIt

Pentru un plugin cu functii mai detaliate, aruncati o privire la SelectBoxIt. pbase.com js. Aceasta biblioteca gratuita ruleaza pe jQuery si include coduri personalizate pentru stiluri de text, animatii, pictograme si chiar evenimente de defilare. Aceste casete de selectare se vor comporta exact ca meniuri de selectare HTML, dar cu functii suplimentare.

Stilul de design implicit arata, de asemenea, foarte asemanator cu Twitter Bootstrap. Motivul se datoreaza faptului ca SelectBoxIt ruleaza de fapt pe Bootstrap. Cu toate acestea, caracteristicile de proiectare sunt personalizabile la fel ca toate celelalte elemente tematice Bootstrap. openlifeworks0.wordpress.com

Dezvoltatorii web care au nevoie de o solutie orientata catre utilizatori nu trebuie sa priveasca mult mai departe. SelectBoxIt poate rula peste jQuery UI si chiar accepta jQuery Mobile pentru machete responsive sau aplicatii web mobile – cu siguranta o alegere excelenta pentru dezvoltarea finala.

Selectric

jQuery Selectric este un plugin modern si fascinant, care este foarte usor de adaugat in orice site web. Designul si functiile se comporta ca un meniu selectat nativ, fara a fi nevoie de o tona de biblioteci JS suplimentare. Functiile includ o cautare de cuvinte cheie, tema personalizata si navigare pe tastatura.

Aruncati o privire la pagina demo Selectric pentru a o vedea live in actiune. newlessonhome4.trexgame.net Sunt cu adevarat impresionat de acest plugin, deoarece functioneaza intr-un mod atat de curat, dar personalizabil. Selectric este excelent pentru toti dezvoltatorii, indiferent daca au nevoie doar de o solutie rapida sau daca doresc sa codeze tare un meniu selectat.

customSelect

In ceea ce priveste pluginurile traditionale de meniu, cea mai mica si cea mai usoara optiune ar putea fi foarte bine selectata. Pagina pluginului de pe GitHub acopera tot ce trebuie sa stiti despre configurarea generala, cerintele si parametrii pentru optiunile functiei.

CustomSelect a fost creat avand in vedere accesibilitatea. Poate fi utilizat pe site-uri web responsive mobile si browsere vechi care dateaza din Internet Explorer 7+. stackoverflow.com Designul in sine este destul de rafinat, dar este inca o alegere geniala pentru designerii care au nevoie doar de o solutie rapida si usoara. Daca sunteti in cautarea mai multor informatii, asigurati-va ca consultati repo-ul customSelect GitHub.

Casete de selectare si butoane radio

Meniurile selectate nu sunt altceva decat alternativa derulanta la butoanele radio. Aceste radiouri sunt menite sa afiseze o serie de raspunsuri pre-codificate la o intrebare, iar utilizatorul poate selecta o singura alegere.

Meniurile selectate se comporta in acelasi mod, iar butoanele radio sunt un alt element de interfata tactila pentru designul selectabil. Casetele de selectare sunt adesea insotite de butoane radio, iar acestea pot fi la fel de utile in circumstante similare. www.bausch.co.nz

iCheck

Am gasit inca o caseta de selectare / biblioteca pentru butoane radio mai mare, dincolo de iCheck. Intreaga biblioteca a fost creata pentru realizarea unor modele unice, care sunt acceptate universal in toate browserele.

Elementele pot gestiona clicurile mouse-ului si pot atinge evenimente, ceea ce inseamna ca utilizatorii Android / iOS pot beneficia de frumusetea iCheck. Si la fel ca elementele traditionale de forma HTML5, iCheck accepta toate interactiunile cu tastatura. Dezvoltatorii mai avansati vor gasi o serie de optiuni de plugin si metode personalizate pentru apeluri de apel.

Totusi adevarata frumusete a iCheck consta in design. getlifeweb8.bearsfanteamshop.com Aruncati o privire la unele demo-uri live de pe pagina de start a pluginului pentru ao vedea in actiune. Puteti chiar sa va proiectati propria tema personalizata de la zero pentru a va combina cu orice schema de culori a site-ului web.

Butoane animate JS

Trecand de la plugin-urile traditionale, sa aruncam o privire la acest frumos efect animat care se conecteaza direct la casetele de selectare HTML si butoanele radio. Faceti o idee la aceasta intrare CodePen creata de Mahmoud Elmahdi. Toate intrarile ruleaza HTML5 si utilizeaza o serie de proprietati CSS pentru stiluri de afisare personalizate.

Adevarata magie apare atunci cand selectati oricare dintre intrari. messiahhdhz265.shutterfly.com Cand faceti clic pe o caseta de selectare, pictograma interioara de marcaj va fi animata. Caseta propriu-zisa devine, de asemenea, incastrata in pagina ca si cum ar fi apasata in jos intr-un plan 3D. Toate efectele de animatie sunt controlate prin JavaScript si ar trebui sa fie o completare perfecta la formularele web complet dotate.

Retineti ca acest fragment de cod nu a fost scris ca un plugin jQuery. Se bazeaza pe jQuery, dar JavaScript-ul actual are doar ~ 20 de linii.

Casete de verificare / radiouri CSS pure

Pentru o alta alternativa, sa aruncam o privire la cateva casete de selectare CSS pure si butoane radio. diigo.com Puteti vedea aici codul live pe care l-am personalizat din original. Personalizarea mea foloseste pictograme de marcaj in loc de x, deoarece par sa se incadreze mai bine in design. Dar daca stiti suficient despre CSS, puteti schimba pictograma editand valorile numarului unicode din proprietatea continut CSS Pur si simplu ador acest efect si animatia. Este uimitor sa vezi cat de mult este posibil folosind doar CSS pur.

Cu toate acestea, exista un mic dezavantaj cand vine vorba de suport pentru fonturi. Fonturile Unicode sunt utilizate pentru a crea aceste pictograme in casetele de selectare si radio. writeablog.net Cu toate acestea, o familie de fonturi Unicode nu va fi gasita pe toate computerele. Acest raspuns de reincarcare a stivei prezinta mai multe detalii despre problema. Exista solutii de rezolvare si, daca cheltuiti suficient timp pentru debugging, puteti obtine aceste intrari CSS care lucreaza la majoritatea sistemelor de operare si browsere web.

Comutatoare glisante pornite / oprite

Un element mai nou aparut din era smartphone-ului este comutatorul ON / OFF. Acest efect a fost lansat pe iOS-ul original pentru iPhone si de atunci a devenit un element de baza in multe interfete. Desi aceste glisiere ON / OFF au un sens mai mare pentru utilizatorii de telefonie mobila, ele pot functiona in continuare excelent de pe un computer desktop sau laptop. diigo.com

Dificultatea vine cu gasirea unei metode pentru implementarea acestor comutatoare. Desi exista zeci de pluginuri si fragmente de cod care asteapta pe Internet, urmatoarele doua coduri sunt alegerile mele sugerate.

Switchbutton.js

Una dintre cele mai simple si mai recunoscute biblioteci trebuie sa fie jQuery Switchbutton. Fiecare dintre comutatoarele ON / OFF sunt proiectate pentru a imita iOS-ul original, care a devenit acum integrat in cultura designului.

Toate comutatoarele sunt create folosind casetele de selectare cu caracteristici jQuery personalizate. newcoachspace9.raidersfanteamshop.com Dar, in acest caz, elementele casetei de casa sunt ascunse in loc sa afiseze un cursor ON / OFF personalizat. Aveti optiunea de a scrie propriile metode de apelare sau chiar de a controla functia de animatie a glisorului in sine.

Cel mai bun dintre toate, puteti alege intre o mana de modele de switch diferite, care au revenit la iOS-ul original. Daca sunteti in cautarea unui plugin care sa recreeze un comutator elegant ON / OFF in stil Apple, atunci Switchbutton este cea mai simpla alegere.

Comutatoare pure CSS iOS7

O alta alternativa poate fi gasita pe CodePen, care ofera cod pentru construirea propriilor dvs. comutatoare de pornire / oprire folosind altceva decat HTML / CSS. www.evernote.com Fara JavaScript, exista mai putin suport pentru browserele vechi – totusi comutatoarele pot functiona cu mult mai putin cod.

Acest fragment particular a fost conceput pentru a imita designul plat al switch-ului iOS7. Acestea pot lucra pe majoritatea browserelor pentru smartphone-uri si ar trebui sa fie rulate pe toate browserele desktop moderne. CSS pur poate fi foarte tentant din cauza cat de mult este posibil doar printr-un pic de cod.

Singurul lucru de care trebuie sa tineti cont este ca aceste fragmente nu fac parte din niciun plugin. Asadar, va trebui sa copiati / lipiti si sa personalizati codul in consecinta pentru a-l putea functiona pe propriul site web. writeablog.net

Campuri de incarcare personalizate

In sfarsit, vreau sa impartasesc cateva resurse pentru personalizarea campurilor de incarcare HTML. Acestea sunt inca utilizate frecvent in site-urile de socializare sau in formularele care necesita incarcari media (imagini, videoclipuri, fisiere .zip etc.).

Campurile de incarcare au fost cele mai dificil de personalizat, deoarece nu au elemente HTML traditionale. Campul de intrare si butonul in sine sunt continute impreuna in acelasi element. openlifetube7.iamarrows.com De cele mai multe ori, este nevoie de un pic de JavaScript complicat pentru ca un design personalizat sa functioneze corect.

Urmatoarele resurse ar trebui sa se dovedeasca utile oricui este curios de proiectarea personalizata a intrarilor. Daca nu ati personalizat niciodata un camp de incarcare, atunci va fi nevoie de o mica practica. Cu toate acestea, pentru cei care adora personalizarea elementelor de pagina, va fi timpul bine petrecut.

NiceFileInput.js

Pluginul jQuery Nice File Input este complet gratuit si foarte util. artloveguide7.timeforchangecounselling.com Ofera o metoda mai simplificata de personalizare a campului de incarcare, impartindu-l in 3 zone: butonul, campul de text si un element div din jur.

Tot codul este menit sa functioneze perfect in toate browserele si se va degrada gratios atunci cand este incarcat intr-un browser fara JavaScript. Folosind un instrument de gestionare JavaScript, pur si simplu vizati campul de introducere cu o clasa sau un ID, apoi personalizati optiunile in consecinta. Rezultatul final poate fi surprinzator de atractiv si pare sa functioneze bine in majoritatea circumstantelor.

Plugin personalizat de introducere a fisierelor

Imaginea de mai sus este o demo gazduita pe CodePen. Utilizeaza pluginul jQuery Custom File pentru a crea campuri de incarcare a fisierelor cu tema intunecata. yourlifetube5.theglensecret.com Totul este complet open source si foarte usor de gestionat.

Puteti testa pagina completa de incarcare si incercati campurile sa experimenteze comportamentul lor tipic. Imi place cum campul de incarcare foloseste o pictograma pentru a exprima tipul de fisier incarcat (fisier de arhiva, fisier video, fisier audio, document Word, etc). Acesta este poate unul dintre cele mai detaliate exemple ale unui camp personalizat de incarcare HTML pe care l-am vazut vreodata.

Din pacate, este foarte dificil sa gasesti exemple de calitate a personalizarilor de introducere a fisierelor. Chiar si cu standarde moderne, este greu pentru dezvoltatori sa creeze campuri uniforme care sa arate frumos si sa functioneze in toate browserele. diigo.com Dar exista metode online daca cautati destul de greu, si daca sunteti curiosi, atunci ar trebui sa va scufundati direct si sa vedeti ce puteti construi!

Inchidere

Designerii si dezvoltatorii web cauta intotdeauna urmatoarele instrumente sau resurse pentru crearea de machete curata. Modelele de design s-au schimbat rapid de-a lungul anilor pentru a imbunatati principiile generale si experienta generala a utilizatorilor. Sper ca aceste pluginuri gratuite si fragmente de cod vor oferi valoare dezvoltatorilor care cauta sa personalizeze elemente de interfata selectabile. Si daca am uitat de orice biblioteci sau fragmente frumoase, nu ezitati sa va impartasiti ideile in comentariile postate.

Cautati mai multe resurse de proiectare web?

  • Proiectati rapid un site de comert electronic utilizand un set de interfata de utilizator
  • 12 Optiuni pentru crearea usoara de formulare web
  • 50 Inspirative Web Design-uri de comert electronic