Cum se face design-ul unui search form responsive pentru website?

Cum-se-face-design-ul-unui-search-form-responsive-pentru-websiteFiecare site web modern ar trebui sa utilizeze un aspect receptiv. Acest lucru face mai usoara navigarea pe orice dispozitiv, dar face ca pagina sa fie mai greu de proiectat. Campul de cautare comun,  este un exemplu de element de pagina dificil. Pentru tutoriale webdesign, acceseaza Howdodesign.com.

Cu design-uri receptive in crestere, designerii web au tendinte noi pentru formularele de cautare, facandu-le accesibile si elegante. Sa aruncam o privire la cateva exemple de tendinte ale formularului de cautare pe web. Acestea ar trebui sa va ajute sa va planificati propriile UI-uri de cautare si sa va aplecati asupra catorva idei pentru lansarea urmatoarelor proiecte.

Dropdown Nav Search.

De departe, cea mai obisnuita caracteristica de cautare este formatul dropdown. Acest lucru poate fi fixat printr-o legatura intr-o bara nav care comuta si dezactiveaza cautarea. Deoarece multe site-uri utilizeaza o navigatie fixa, este mai usor sa pastrati campul de cautare vizibil peste tot.

Dar chiar si cu o bara de navigatie statica, veti gasi aceasta caracteristica de cautare de tip dropdown, ca fiind incredibil de practica. Nu este prea mult loc in alta parte pe o pagina receptiva pentru a introduce un formular de cautare fara a afecta continutul principal.

Jurnalul motorului de cautare face acest lucru cu un camp de cautare rapida si usoara in coltul din dreapta sus. Se bazeaza pe o mica pictograma de lupa care ar trebui sa fie universala pentru toata lumea.

Odata ce campul este afisat, acesta va schimba automat lupa intr-un "X". Este o modalitate buna de a clarifica experienta utilizatorului, astfel incat oamenii sa stie ca pot inchide campul in orice moment.

Sa nu mai vorbim de designul SEJ, este fantastic si se amesteca perfect cu aspectul de pe toate dispozitivele.

Problogger este un alt exemplu frumos care face lucrurile un pic diferit intre desktop si mobil. Cand navigati pe un ecran mai mic, obtineti lupa tipica cu campul vertical. Insa, utilizatorii desktop au mai mult spatiu in navbar, ceea ce incurajeaza un camp de cautare pe deplin functional. Destul de la moda! Puteti incerca acest lucru daca aveti suficient spatiu in nav pentru un formular complet.

Un alt site care urmareste aceeasi tehnica este Skinny Ties. Observati modul in care campul de cautare prestabilit este mult mai mic decat alte linkuri din nav. In acest fel, nu ocupa mult spatiu si poate ramane vizibil chiar si pe dispozitivele mai mici.

Modul pe tot ecranul.

Daca nu va place efectul dropdown, puteti incerca sa utilizati o fereastra modala. Pe suprafata, acest lucru ar putea arata similar, deoarece este conectat la o pictograma de cautare. Dar in loc de formularul care coboara din navbar, va aparea pe pagina intr-o fereastra modala.

Puteti vedea un exemplu curat despre acest lucru pe Full Home Living, unde modalitatea de cautare depaseste intregul ecran. Aceasta atrage atentia utilizatorului spre forma. Este proiectat pentru a fi pe deplin receptiv si usor de utilizat, deoarece modalul poate fi inchis rapid. Dezavantajul este ca acest lucru se poate simti putin "prea mult" daca nu doriti o suprapunere de ecran simplu, cu un camp de cautare.

Daca sunteti destul de indrazneti sa adaugati mai mult continut, puteti incerca sa construiti un mod de cautare similar, cum ar fi cel al Comedy Central, de pe site-ul lor.