Παρουσιάσεις σχεδίων UI για όμορφα πλαίσια αναζήτησης

Είναι κάτι κοινό στο Διαδίκτυο όπου - εάν αποτύχουμε να πάρουμε αυτό που ψάχνουμε σε έναν ιστότοπο, καταφεύγουμε σε αναζήτηση. Το πλαίσιο αναζήτησης ήταν πάντα ένα ουσιαστικό μέρος ενός ιστότοπου. Εάν εκτελείτε έναν ιστότοπο με ένταση περιεχομένου, είναι ακόμα πιο αναπόφευκτη. Τοποθετούνται συνήθως στις ακόλουθες περιοχές: κεφαλίδα, επάνω μενού πλοήγησης ή πλευρική γραμμή (άνω-πτυσσόμενο). Μερικές φορές μπορούμε επίσης να ρίξουμε μια άλλη στο υποσέλιδο για να κάνουμε την αναζήτηση πιο βολική για τους χρήστες.

Ήρθαμε πολύ μακριά από το Web 1.0. η αναζήτηση στο διαδίκτυο δεν περιορίζεται πλέον σε εισάγετε λέξη-κλειδί και πατήστε αναζήτηση. Οι προγραμματιστές προσπαθούν να κάνουν την αναζήτηση καλύτερης εμπειρίας για τους επισκέπτες τους αναβαθμίζοντας και προσθέτοντας περισσότερες λειτουργίες, λέγοντας, φιλτράρισμα αναζήτησης για να έχετε πιο στοχοθετημένα αποτελέσματα, παρέχοντας λέξεις-κλειδιά αναζήτησης ή ιστορικό αναζήτησης κατά την πληκτρολόγηση.

Στη σημερινή θέση, παρουσιάζουμε μερικά όμορφα πλαίσια αναζήτησης με πολλά υποσχόμενα χαρακτηριστικά γνωρίσματα που γνωρίσαμε. Είτε θέλετε να ανανεώσετε τον ιστότοπό σας είτε απλά να αναζητήσετε έμπνευση για ένα καλύτερο πλαίσιο αναζήτησης, αυτή η ανάρτηση είναι για εσάς. Πλήρης λίστα μετά από άλμα!

PlaylistNow

Ξεκινώντας με το πρόθεμα "Είμαι", αυτή η ενότητα αναζήτησης προσπαθεί να ταιριάζει έξυπνα και να απαριθμεί τα αποτελέσματα που ταιριάζουν με το ερώτημά σας κατά την πληκτρολόγηση.

Μετακινηθείτε στην ενότητα αναζήτησης

Προτεινόμενη από τον σχεδιαστή Nico Nuzzaci, αυτό το κουτί δημιουργικής αναζήτησης σας επιτρέπει να κάνετε αναζήτηση πληκτρολογώντας ή μετακινώντας τον αλφαβητικό πίνακα.

TextboxList

Αυτή η ενότητα αναζήτησης έχει έναν συνδυασμό λίγων λειτουργιών: περιστρέφει τα ερωτήματα αναζήτησης σε μορφή ετικετών και σας επιτρέπει να διαγράψετε μια συγκεκριμένη ετικέτα αναζήτησης. Έρχεται επίσης με αυτόματη συμπλήρωση. Φαίνεται γνωστός; Είναι παρόμοιο με την ενότητα σήμανσης Facebook!

Θυμηθείτε το γάλα

Παρόμοια με την αναζήτηση στο YouTube, το πλαίσιο αναζήτησης εδώ σας λέει αμέσως αν κάτι ταιριάζει με το αποτέλεσμα σας. Ακόμα ένα έξυπνο παράδειγμα αυτόματης πρότασης.

Αυθεντικές θέσεις εργασίας

Νομίζω ότι η Αυθεντική Εργασία είχε ήδη την αναζήτησή της με τα στιγμιαία αποτελέσματα πριν από την Google.

Kontain

Το πλαίσιο αναζήτησης του Kontain επιτρέπει στους χρήστες να πραγματοποιούν μια γενική αναζήτηση ή να φιλτράρουν τα αποτελέσματα αναζήτησης μόνο σε "ενημερώσεις" ή "χρήστες".

New York Magazine

Παρόμοια με την Kontain, η αναζήτηση του NY Magazine επιτρέπει βαθύτερο φιλτράρισμα.

ThemeForest

Ακόμα ένα άλλο παράδειγμα φιλτραρίσματος στην ενότητα αναζήτησης για να βοηθήσει τους επισκέπτες να πάρουν αυτό που θέλουν μέσα σε ελάχιστο χρόνο.

Αναζήτηση, Ταξινόμηση & Φίλτρο

Το πλαίσιο αναζήτησης του Brian μοιάζει με μια ενότητα αναζήτησης εκ των προτέρων που γίνεται με όμορφο τρόπο. μπορείτε να προσαρμόσετε τον τρόπο εμφάνισης των αποτελεσμάτων πριν πατήσετε το κουμπί αναζήτησης.

Tumblr

Λεπτή και μικρή μονάδα αναζήτησης στην πλαϊνή μπάρα - τακτοποιημένη!

Μενού σελίδων

Αν ψάχνετε για μια πλήρη ενότητα αναζήτησης και όμως ο χώρος είναι ένας περιορισμός, αυτή η προσέγγιση μπορεί να έρθει χρήσιμη.

Quotezuki

Μονάδα αναζήτησης αμέσως μετά το λογότυπο, είναι πραγματικά δύσκολο να χάσετε.

C Spire Wireless

Ένα μεγάλο πλαίσιο αναζήτησης λίπους που εμφανίζεται μόνο μετά την τοποθέτηση της καρτέλας αναζήτησης. ένας άλλος καλός τρόπος να αξιοποιηθεί ο χώρος.

Spokeo

Η επιλεκτική αναζήτηση με φιλτράρισμα γίνεται όμορφα.

VoucherCodes

Κοιτάζοντας την επιχειρηματική του φύση, η τοποθέτηση του κουμπιού αναζήτησης στο πάνω μέρος και ακριβώς στο κέντρο είναι ίσως η καλύτερη ιδέα.

iStockPhoto

Παρόμοια με άλλους ιστότοπους, το iStockPhoto προσφέρει τεράστιους πόρους για τους αναγνώστες του, οπότε το φιλτράρισμα σε αναζήτηση είναι σίγουρα απαραίτητο.

TasteBook

Απλά αναζητούν ακόμα φοβερό κουτί αναζήτησης.

Grooveshark

Το Grooveshark σας επιτρέπει να ακούτε και να μοιράζεστε μουσική στο διαδίκτυο. η πρώτη σελίδα δεν αποτελείται από τίποτα παρά από ένα πλαίσιο αναζήτησης για να αναζητήσετε τη μουσική που θέλετε. Είναι εντελώς λογικό.

Παίκτες με θέσεις εργασίας

Ένα καλό παράδειγμα του πώς προσαρμόζεται η προσαρμοσμένη αναζήτηση Google.

Ντέιβιντ Τορόντελ

Νίκαια σκούρο κουτί αναζήτησης που συνδυάζει καλά με το σχεδιασμό της τοποθεσίας.

Περισσότερο

• Δημιουργία πλαισίου αναζήτησης Rocking CSS3 (Hongkiat)
• Σχεδιάζοντας το Άγιο Πλαίσιο Αναζήτησης: Παραδείγματα και Βέλτιστες Πρακτικές (Smashing Magazine)
• Όμορφο CSS3 έντυπο φόρμας αναζήτησης (Τοιχογράφος)