10 ιστότοποι που κάνουν κάθετη δεξιά πλοήγηση
Η πλειοψηφία των μενού πλοήγησης ιστού οριζόντια σε όλη τη σελίδα. Αυτό προέρχεται από μια ιστορία των παραδοσιακών οθονών που είναι ευρύτερα και όχι ψηλότερα.
Αλλά με τόσες πολλές θέσεις στην οθόνη, είναι πλέον δυνατό οι ιστότοποι να χρησιμοποιούν αντί για κάθετο μενού πλοήγησης. Και πολλοί από αυτούς φαίνονται φανταστικοί.
Αυτά τα 10 παραδείγματα κάθετων μενού είναι τέλεια για να μελετήσετε για το μοναδικό στιλ σχεδίασης και την ξεχωριστή χρηστικότητα.
1. Φυτώρια του Petersham
Στο Petersham Φυτώρια θα βρείτε μια ένθετη κάθετη πλοήγηση. Αυτή η τεχνική δεν είναι κάτι που θα βρείτε πολύ συχνά, αλλά λειτουργεί καλά σε αυτόν τον ιστότοπο.
Κάθε κύρια σύνδεσμος nav χρησιμοποιεί ένα εικονίδιο στο παρασκήνιο για να μεταφέρει τους συνδέσμους οπτικά. Και οι δύο πρώτες συνδέσεις ανοίγουν δευτερεύοντα μενού ευθυγραμμισμένα δίπλα στο κύριο μενού. Αυτά παίρνουν τη θέση των dropdowns που συνήθως βλέπετε στα οριζόντια μενού.
Αυτός ο ιστότοπος ανταποκρίνεται έτσι σε μικρότερα μεγέθη οι σύνδεσμοι αυτοί εξαφανίζονται πίσω από ένα μενού χάμπουργκερ. Αυτό δημιουργεί ένα λογικό χάσμα μεταξύ των χρηστών επιφάνειας εργασίας με αρκετό χώρο για κάθετες συνδέσεις και τους χρήστες κινητών που κάνουν καλύτερα με μια οριζόντια γραμμή πλοήγησης.
2. Εστιατόριο Arbor
Ένα άλλο πολύ μοναδικό παράδειγμα είναι Εστιατόριο Arbor που έχει καθαρό κατακόρυφο δοχείο με αρκετό χώρο μεταξύ των συνδέσμων. Το περιεχόμενο εμφανίζεται σε ένα ολισθαίνον δοχείο, το οποίο επίσης ευθυγραμμίζεται κάθετα δίπλα στην πλοήγηση.
Αυτό το στυλ περιεχομένου είναι αρκετά μοναδικό. Οι περισσότερες τοποθεσίες κάθετης σελίδας διατηρούν το περιεχόμενό τους ευθυγραμμισμένο με την κύρια σελίδα, αλλά στην περίπτωση αυτή μπορείτε να εμφανίσετε / αποκρύψετε το περιεχόμενο με ευκολία. Προσθέτει μια συγκεκριμένη αίσθηση στην κάθετη πλοήγηση, η οποία διατηρεί τη ροή της σελίδας με το περιεχόμενο.
3. Smokey Bones
Smokey Bones έχει δύο πράγματα που πηγαίνουν για αυτό: τρομερό φαγητό και ένα δολοφόνο ιστοσελίδα.
Κάθε σελίδα χρησιμοποιεί τη μεγάλη κατακόρυφη πλοήγηση που είναι σταθερή στην αριστερή πλευρά. Αυτό είναι ένα βασικό στοιχείο για τους περισσότερους ιστότοπους επειδή η πλειοψηφία των δυτικών αναγνωστών καταναλώνει περιεχόμενο από αριστερά προς τα δεξιά και η επάνω αριστερή γωνία είναι το παραδοσιακό μέρος για το λογότυπο της τοποθεσίας.
Ένα πρόσθετο χαρακτηριστικό που μου αρέσει είναι το flyout μενού με όλα τα πιάτα του εστιατορίου. Εάν κάνετε κλικ στο σύνδεσμο "μενού" θα δείτε πώς λειτουργεί και το δευτερεύον μενού που προστέθηκε κατακόρυφα. Σίγουρα μια δροσερή ιδέα που λειτουργεί καλά για ένα μικρό εστιατόριο.
4. Mammoth Media
Όταν έχετε λιγότερο περιεχόμενο, μπορείτε να ξεφύγετε με περισσότερες επιλογές πλοήγησης εκτός λειτουργίας. Mammoth Media είναι ένα καλό παράδειγμα που έχει μόνο πέντε κύριες σελίδες στο site τους καθώς και ένα blog.
Μια συγκεκριμένη πτυχή αυτής της πλοήγησης είναι η κρυμμένη λειτουργία dropdown. Αν κάνετε κλικ στο σύνδεσμο "εργασία" θα λάβετε 2 εναλλακτικούς συνδέσμους στους οποίους μπορείτε να κάνετε κλικ. Εμφανίζονται κάτω από τον κύριο σύνδεσμο, ώστε να παίρνουν το ρόλο ενός μικρότερου dropdown.
Ακόμη και σε κινητά, αυτή η πλοήγηση ακολουθεί παρόμοιο στυλ. Είναι απόδειξη ότι όταν δεν έχετε πάρα πολλούς δεσμούς, μπορείτε πραγματικά να ωθήσετε τη δημιουργικότητα.
5. Amazon
Όλοι και η γιαγιά τους ξέρουν για το Amazon. Ο σε απευθείας σύνδεση έμπορος λιανικής πώλησης έχει μια καταπληκτική επιλογή, αλλά έχουν επίσης ένα φανταστικό σχεδιασμό UI με κάθετες συνδέσεις nav στις σελίδες αναζήτησης προϊόντων.
Το Amazon έχει δεκάδες κατηγορίες για κάθε όρο αναζήτησης. Αυτό σημαίνει ότι χρειάζονται έναν τρόπο να παρουσιάσουν εκλεπτυσμένες λειτουργίες αναζήτησης χωρίς να υπερκεράσουν τη σελίδα. Οι κατακόρυφες πλοηγήσεις έχουν νόημα μόνο επειδή μπορούν να μπαίνουν μακριά προς την πλευρά ενώ είναι ακόμη πλήρως προσβάσιμες.
Εάν σχεδιάζετε οποιοδήποτε παρόμοιο τύπο φίλτρου ναυτιλίας, συνιστώ σίγουρα τη μελέτη της στρατηγικής του Amazon. Έχουν βελτιστοποιήσει το site τους σε κανένα τέλος, ώστε υπάρχει αρκετός λόγος να πιστέψουμε ότι οι κατακόρυφες ταξινομητικές συνδέσεις τους λειτουργούν καλά.
6. Corum
Το Corum η ιστοσελίδα έχει μια άλλη καθαρή κατακόρυφη πλοήγηση, με πολύ απλά χαρακτηριστικά. Όλες οι συνδέσεις, το σκοτεινό κείμενο, οι σαφείς μορφές hover και η έντονη αντίθεση στην κύρια σελίδα.
Αυτή είναι μια από τις μεγαλύτερες πτυχές κατά το σχεδιασμό κάθετης πλοήγησης. Συνήθως θέλετε να δημιουργήσετε ένα ισχυρό χάσμα μεταξύ της κάθετης γραμμής πλοήγησης και του περιεχομένου της σελίδας. Σε αυτή την περίπτωση γίνεται με ένα ελαφρύτερο χρώμα φόντου με το λογότυπο Corum κοντά στην κορυφή.
Και οι χρήστες που ανταποκρίνονται στους τρόπους κινητής τηλεφωνίας, λαμβάνουν ένα αναπτυσσόμενο μενού που λειτουργεί καλά ως εναλλακτική λύση για οθόνες μεγαλύτερες από ευρύτερη.
7. Ποδήλατα Nua
Ένας από τους καλύτερους τρόπους για να χρησιμοποιήσετε μια κάθετη πλοήγηση είναι με μία διάταξη σελίδας. Ενημερωτικές τοποθεσίες όπως Ποδήλατα Nua δεν χρειάζονται πάντα δεκάδες σελίδες γεμάτες περιεχόμενο.
Έτσι, με ένα κάθετο μενού Nav είναι πολύ πιο εύκολο να περιηγηθείτε στο περιεχόμενο σε μια ιδιοτροπία χρησιμοποιώντας κινούμενα σχέδια και προσαρμοσμένες περιοχές σελίδων. Σε αυτή την περίπτωση, το Nua Bikes nav δεν αναμειγνύεται στη σελίδα αφού είναι άμεσα συνδεδεμένο με όλο το περιεχόμενο της σελίδας.
8. Michael Ngo
Ένας άλλος ιστότοπος που ακολουθεί την τάση κάθετης διαδρομής μιας σελίδας είναι μία Το χαρτοφυλάκιο του Michael Ngo .
Έχει μια αρκετά εντυπωσιακή εικόνα κεφαλίδας που προσελκύει αμέσως την προσοχή σας και σας τραβάει. Αλλά το περιεχόμενο είναι το πιο ενδιαφέρον κομμάτι αφού όλα λειτουργούν μέσω 3 διαφορετικών συνδέσεων: σπίτι, εργασία και επαφή.
Οι nav συνδέσεις έχουν τους δικούς τους υπότιτλους πάρα πολύ ώστε να μπορείτε να δείτε τι κάνουν ακόμη και με μια ματιά.
Ένα πράγμα που πρέπει να σημειωθεί είναι πώς το σκάφος παραμένει σταθερό κατά την κύλιση κάτω από τη σελίδα. Αυτό διατηρεί όλους τους συνδέσμους προσβάσιμοι από οποιοδήποτε σημείο που είναι κρίσιμο σε ένα μικρότερο κάθετο μενού.
9. Medienstadt.koeln
Ο γερμανικός χώρος Medienstadt.koeln έχει μια αρκετά διαφορετική λήψη στην κάθετη ναυσιπλοΐα. Το σκάφος τους παραμένει κρυμμένο πίσω από ένα μενού χάμπουργκερ ανά πάσα στιγμή, αλλά εξακολουθεί να εκτείνεται σε ολόκληρο το ύψος της οθόνης.
Περιλαμβάνει επίσης περισσότερους συνδέσμους παρά μόνο το τυπικό οριζόντιο κορυφαίο σκάφος. Αυτό έχει νόημα αλλά μπορεί να προκαλέσει σύγχυση σε μερικούς επισκέπτες.
Αυτό που μου αρέσει περισσότερο για το κάθετο στυλ είναι πώς παραμένει κρυμμένο ακόμα και στους επιτραπέζιους υπολογιστές μέχρι να χρειαστεί.
Χορηγούνται συζητήσεις για το θέμα ζητήματα ανιχνευσιμότητας με μενού χάμπουργκερ. Αλλά νομίζω ότι αυτή η εικόνα γίνεται γρήγορα αναγνωρισμένη και αυτό το σχέδιο είναι ένα εξαιρετικό παράδειγμα μιας κρυμμένης κάθετης πλοήγησης στη δράση.
10. Το σύστημα Metrick
Η διαφημιστική εταιρεία Σύστημα Metrick διατηρεί την πλοήγησή τους απλή και μέχρι το σημείο. Ακολουθεί το κάθετο στυλ, αλλά είναι επίσης πολύ διαφορετικό από όλα τα άλλα σε αυτό το post.
Μου αρέσει το κρυφό αναπτυσσόμενο μενού που δείχνει μόνο επιπλέον συνδέσμους όταν κάνετε κλικ σε έναν κύριο σύνδεσμο. Ο σύνδεσμος "περιοδικών" τους αποτελεί καλό παράδειγμα. Νέοι σύνδεσμοι εμφανίζονται στο πλάι και ξεθωριάζουν με ένα κλικ.
Οι χρήστες κινητής τηλεφωνίας έχουν παρόμοια εμπειρία, εκτός από τους συνδέσμους υπομενού που εμφανίζονται κάτω από τον κύριο σύνδεσμο. Αλλά αυτό το σκάφος είναι τόσο μικρό που μπορεί να λειτουργήσει για σχεδόν κάθε μέγεθος οθόνης.
Το περιτύλιγμα
Η κάθετη πλοήγηση λειτουργεί καλύτερα σε ιστότοπους που βασίζονται σε επιπλέον χώρο στην οθόνη. Αυτά συνήθως περιλαμβάνουν τοποθεσίες χαρτοφυλακίου, εστιατόρια, μικρές επιχειρήσεις και καταστήματα ηλεκτρονικού εμπορίου.
Αλλά ανεξάρτητα από το site μπορείτε πάντα να προσπαθήσετε να προσθέσετε μια κάθετη πλοήγηση στο σχέδιό σας. Και ελπίζω ότι αυτά τα παραδείγματα θα σας βοηθήσουν να ξεκινήσετε με μερικές μεγάλες ιδέες για το wireframing και το design mockup.