7 μοναδικές αποφάσεις σχεδιασμού
Ψάχνω πάντα για έμπνευση, για σπουδαίο σχεδιασμό που αμφισβητεί τη σύμβαση. Αυτή η ανάρτηση αφορά μόνο τις μοναδικές λύσεις διάταξης. αυτό σημαίνει ότι θα μιλήσω για οκτώ διαφορετικές ιστοσελίδες που παρουσιάζουν κάτι χαρακτηριστικό, με μοναδικό τρόπο. Θα ξεπεράσουμε τις μοναδικές λύσεις διάταξης από την εμφάνιση προϊόντων, την ενσωμάτωση προσωπικών και ανθρώπινων στοιχείων σε έναν ιστότοπο.
1. Ο Χάρβαρντ επαναλαμβάνει το περίφημο καρουσέλ
Σχολή Σχεδιασμού του Χάρβαρντ ο δικτυακός τόπος έχει έναν μοναδικό τρόπο προσέγγισης της πλοήγησης. Όταν μεταφέρετε για πρώτη φορά στην αρχική σελίδα, υπάρχει μια οπτική απεικόνιση της πλοήγησης. Φυσικά, κάθε σύνδεσμος δεν εκπροσωπείται εδώ, μερικές μόνο βασικές. Πολλοί ιστότοποι έχουν αγκαλιάσει τη σύνδεση με τις πιο σημαντικές σελίδες στην κεφαλίδα της αρχικής σελίδας. αυτό είναι που μας έφερε καρουσέλ για παράδειγμα. Αλλά, δεν έχω ακόμα δει άλλη ιστοσελίδα να το παρουσιάσει με αυτόν τον τρόπο. Η πλοήγηση μπορεί να είναι μικρή αλλά είναι μπροστά και κέντρο. Το πιο σημαντικό, μοιάζει να ανήκει εκεί. Εκτελείται εξαιρετικά.
Οι εικόνες στα αριστερά αλληλοεπικαλύπτονται αλλά μπορείτε να δείτε πόσοι είναι εκεί. Υπάρχει σαφής σχέση μεταξύ της εικόνας και των τίτλων στην αριστερή πλευρά. Οι εικόνες περιστρέφονται σε σχέση με τα στοιχεία στα αριστερά. Ωστόσο, οποιαδήποτε στιγμή, γνωρίζετε ποιες πληροφορίες είναι διαθέσιμες για εσάς. Είναι σαν τη σχολή σχεδιασμού του Χάρβαρντ που δημιούργησε μια βελτιωμένη εκδοχή του τι θα έπρεπε να ήταν το καρουσέλ. Δεν είναι μόνο η χρηστικότητα που λαμβάνεται σοβαρά υπόψη σε αυτή τη λύση σχεδιασμού, η διάταξη είναι επίσης μοναδική. Και οι δύο αυτοί παράγοντες συνδυάζονται για ένα φανταστικό οπτικό σχέδιο.
2. Το Tra απομακρύνεται από το δίκτυο
Είναι προφανές αυτό Tra Ο ιστότοπός του χρησιμοποιεί μια μη παραδοσιακή διάταξη. Η ιστοσελίδα είναι, συνολικά, ελάχιστη. Χρησιμοποιούν επίσης ένα σχήμα ανάστροφης έγχρωμης εκτύπωσης όπου το φόντο είναι μαύρο και το κείμενο είναι λευκό. Το χρώμα σχέδιο σίγουρα δίνει έναν παράγοντα wow. Ωστόσο, πρόκειται για τη διάταξη του δικτυακού τόπου της Tra. Ας ξεκινήσουμε με την αρχική σελίδα: υπάρχουν μερικά κομμάτια κειμένου στην αρχική σελίδα, τα περισσότερα από αυτά επικαλύπτονται τουλάχιστον λίγο, εκτός από το αντίγραφο της παραγράφου από την ενότητα "Ξέρουμε άτομα". Το αντίγραφο είναι ευθυγραμμισμένο ειδικά για να είναι εκτός της εικόνας. Είναι διαφορετικό, είναι μοναδικό, είναι αξιοπρόσεχτο.
Σχετικά με τη σελίδα, υπάρχει λίγο περισσότερη σειρά και χρήση ενός πλέγματος. Αλλά, το δίκτυο είναι ακόμα ακανόνιστο. Φαίνεται ότι κάθε τμήμα της περίπου σελίδας έχει το δικό του πλέγμα. Το πράγμα που με γοητεύει περισσότερο για αυτή τη σελίδα είναι η εικόνα αποκοπής από το επάνω αριστερό μέρος της ιστοσελίδας. Απλά δεν ταιριάζει σε τίποτα. Φυσικά, αυτό με κάνει περίεργο. Αποδεικνύεται ότι η εικόνα είναι μια γκαλερί - πρέπει να κάνετε κλικ για να ανοίξετε τις εικόνες. Αυτός είναι ένας πολύ έξυπνος τρόπος για να αξιοποιήσετε μια διάταξη. οι άνθρωποι που ενδιαφέρονται να ερευνήσουν ανταμείβονται με μια δέσμη εικόνων. Οι άνθρωποι που δεν ενδιαφέρονται, δεν χάνουν τόσο πολύ. Είναι ένα διασκεδαστικό αυγό του Πάσχα.
3. Κυλιόμενες φωτογραφίες παπουτσιών σε μια σταθερή σελίδα
Αυτό το παράδειγμα μιας μοναδικής λύσης σχεδίασης περιστρέφεται γύρω από έναν ηλεκτρονικό λιανοπωλητή παπουτσιών. Feit Η σελίδα του προϊόντος είναι απλά λαμπρή. Πρώτα απ 'όλα, ο σχεδιασμός χρησιμοποιεί το πλήρες πλάτος και το ύψος της οθόνης. Αυτό σημαίνει ότι κάθε περιοχή της οθόνης έχει οριστεί με συγκεκριμένο σκοπό. Δεύτερον, από όλα, ο ιστότοπος είναι απλός, ελάχιστος και καθαρός. Αυτό σημαίνει ότι ακόμα κι αν ο σχεδιασμός χρησιμοποιεί την πλήρη οθόνη, δεν είναι ακατάστατο. Αυτό είναι ένα πολύ καλό πράγμα, καθώς το άφθονο σχέδιο βασίζεται στο κενό για να δημιουργηθεί ένας καθαρός και ελαφρύς ιστότοπος.
Το πράγμα που με εντυπωσίασε περισσότερο για αυτή τη συγκεκριμένη σελίδα προϊόντος είναι ο τρόπος με τον οποίο χωρίζεται η διάταξη. Η σελίδα χωρίζεται σε τρεις διαφορετικές ενότητες. Πρώτον, υπάρχει η πλοήγηση στην αριστερή πλευρά. Είναι αρκετά πρότυπο και τίποτα δεν είναι ιδιαίτερα ξεχωριστό. Στη συνέχεια, υπάρχει η δεξιά πλευρά με τα στοιχεία του προϊόντος. Τόσο η πλοήγηση στην αριστερή πλευρά όσο και η ενότητα λεπτομερειών προσαρμόζονται στην οθόνη. Αλλά, το τελευταίο τμήμα, το μεσαίο τμήμα φωτογραφιών, είναι γεμάτο με φωτογραφίες με δυνατότητα κύλισης. Νομίζω ότι είναι μια λαμπρή λύση επειδή δεν είναι η πιο κοινή λύση.
Συχνά, εάν υπάρχει μεγάλη λίστα φωτογραφιών προϊόντων, οι πληροφορίες για αυτό παραμένουν πίσω. Εδώ, καθώς κυλίω προς τα κάτω, εξακολουθώ να βλέπω την περιγραφή και το όνομα του προϊόντος, εξακολουθώ να βλέπω τα διαφορετικά χρώματα που έρχονται και να έχουν πρόσβαση σε περισσότερες πληροφορίες, όπως λεπτομέρειες σχετικά με το υλικό όπως σας παρακαλώ χωρίς να χρειάζεται να μετακινηθείτε πάνω και κάτω. Συνολικά, πρόκειται για μια απρόσκοπτη εμπειρία για έναν δυνητικό πελάτη.
4. Εμφάνιση από πολλές πλευρές ενός προϊόντος με μια ματιά
Εδώ έχουμε μια άλλη σελίδα προϊόντος και έναν άλλο τρόπο προβολής ενός προϊόντος. Εντάξει, καλά, έχουμε και ένα άλλο παράδειγμα παπουτσιού! Afura Ο ιστότοπός του διαθέτει επίσης μια μοναδική μέθοδο εμφάνισης. Αυτή τη φορά τα παπούτσια εμφανίζονται σε πολλές διαφορετικές λήψεις στην κορυφή της σελίδας. Είναι στην πραγματικότητα μέρος ενός στοιχείου UI καρουσέλ. Ωστόσο, η χρηστικότητα εδώ δεν είναι ένα μεγάλο ζήτημα. Για ορεκτικά, εμφανίζονται τρεις εικόνες από προεπιλογή σε μεγέθη οθόνης για υπολογιστές ή φορητούς υπολογιστές. Οι προεπιλεγμένες εικόνες έχουν όλα το ίδιο φόντο, γεγονός που κάνει μια ωραία και απρόσκοπτη απεικόνιση. Εάν ένας χρήστης δεν συνειδητοποιήσει ότι οι εικόνες αποτελούν μέρος ενός καρουσέλ, θα δουν τουλάχιστον τρεις διαφορετικές εικόνες του προϊόντος στους υπολογιστές τους. Για μικρότερα μεγέθη οθόνης, όπως τα tablet, η προεπιλογή είναι να εμφανίζονται δύο εικόνες τη φορά. αυτό είναι ακόμα πολύ καλό. Συνολικά, η παρουσίαση των προϊόντων παπουτσιών εδώ είναι μια μοναδική λύση σχεδιασμού.
5. Το Opendoor δείχνει τους ανθρώπους τους
Εγώ, για ένα, πιστεύω ότι ο ιστός είναι ένας απρόσωπος τόπος όπου συνήθως δεν βλέπουμε τον άνθρωπο. οι πραγματικοί άνθρωποι πίσω από εφαρμογές, προϊόντα, εταιρείες και ούτω καθεξής. Πάντα προσπαθούσα να συμπεριλάβω ένα ανθρώπινο στοιχείο στα σχέδιά μου. το βλέπω Ανοιχτή πόρτα θέλει να κάνει το ίδιο ακριβώς πράγμα. Στην αρχική τους σελίδα, περίπου στο μισό του δρόμου, υπάρχει μια ενότητα με τίτλο "Έχουμε την πλάτη σας". Πρέπει να εξηγήσει ότι υπάρχουν άνθρωποι πίσω από την εταιρεία Opendoor που είναι εκεί για να βοηθήσουν τους πελάτες τους σε κάθε βήμα. Τώρα, ο Opendoor θα μπορούσε να το άφηνε εκεί, αλλά έβαλε μια μεγάλη φωτογραφία ενός από τους υπαλλήλους του.
Αυτή η ενότητα έχει πολύ μικρό κείμενο. Αντ 'αυτού, η φωτογραφία και το πρόσωπο είναι το μεγαλύτερο μέρος του τμήματος. Θα έλεγα ακόμη ότι η φωτογραφία εξουδετερώνει το τμήμα σε 100% θετικό τρόπο. Αν η φωτογραφία ήταν μικρογραφία ή είδωλο, το αποτέλεσμα δεν θα υπήρχε καν. Εάν η φωτογραφία ήταν μεσαίου μεγέθους τετράγωνο (π.χ. 300px έως 300px) ακριβώς δίπλα στο αντίγραφο, το αποτέλεσμα δεν θα ήταν το ίδιο. Η επιλογή να χρησιμοποιηθεί μια τόσο μεγάλη εικόνα του φιλικού προσώπου του Μάρκου ήταν μια καλή κλήση. όχι μόνο αυτή η απόφαση σχεδιασμού παρέχει ένα ανθρώπινο και εξατομικευμένο στοιχείο σχεδιασμού, είναι επίσης ένα δημιουργικό. Χωρίς αυτή τη φωτογραφία, δεν θα υπήρχαν προσωπικές επιπτώσεις στον χρήστη. Χωρίς αυτή τη συγκεκριμένη διάταξη, αυτή η ενότητα θα είχε εντελώς διαφορετική συναισθηματική επίδραση.
6. UX ροή δείχνει ένα μικρό κινούμενο σχέδιο μπορεί να πάει πολύ μακριά
Αυτό το επόμενο παράδειγμα μιας μοναδικής λύσης διάταξης έχει να κάνει με κινούμενα σχέδια. Εάν ρίξετε μια ματιά στην αρχική σελίδα του Ροή UX και κάντε κύλιση προς τα κάτω, ίσως παρατηρήσετε ότι ένα από τα υπόβαθρα του τμήματος ζωντανεύει μέσα. Είναι ειλικρινά τίποτα φανταχτερό, αλλά είναι μοναδικό. Τα υπόβαθρα δεν διευκολύνουν καθώς μετακινείτε σε μια ιστοσελίδα. Αν μη τι άλλο, κατά τη διάρκεια των τελευταίων ετών έχουμε δει διαφορετικά στοιχεία από μέσα σε μια ενότητα πετούν μέσα ή έξω κατά την κύλιση. Αλλά, δεν έχω φάνηκε ότι πολλές κινούμενες εικόνες φόντου εκτός από parallax. Ο λόγος που αυτό είναι σημαντικό είναι ότι ένα φόντο ορίζει μια ενότητα. Και, αν και αυτό δεν είναι κάποιο τρελό animation, είναι ακόμα εντυπωσιακό.
Όχι όλα πρέπει να είναι τολμηρά, δυνατά και ανόητα να είναι εντυπωσιακά. Μερικές φορές τα λεπτές πράγματα, όπως ένα μικρό και γρήγορο κινούμενο λογισμικό, είναι αρκετά για να δημιουργήσουν μια μοναδική εμπειρία για έναν χρήστη. Αυτό είναι σίγουρα ένας από εκείνους τους χρόνους. Ένα άλλο πράγμα που είναι σημαντικό να παρατηρήσετε είναι ότι τα τμήματα μεταξύ των οποίων το animation συμβαίνει δεν έχουν μοναδικές layouts οι ίδιοι. Είναι εντάξει; η μετάβαση είναι αξιοσημείωτη καθώς περνάτε από το ένα τμήμα στο άλλο εξακολουθεί να αποτελεί μέρος της διάταξης, ακόμη και αν δεν είναι η τελική διάταξη που έχει γίνει από την κινούμενη εικόνα.
7. Ted Todd ολοκληρωμένο χάρτη
Ο οπτικός σχεδιασμός και η συνολική εμπειρία του χρήστη Τεντ Τοντ Ο ιστότοπός του είναι καλά σχεδιασμένος. Για χάρη αυτού του άρθρου, θα ήθελα να μιλήσω για τον τρόπο με τον οποίο ο Ted Todd χρησιμοποιεί την ενότητα τοποθεσίας και χάρτη στην ιστοσελίδα του. Προς το κάτω μέρος της αρχικής σελίδας τους, υπάρχει ένα τμήμα που προορίζεται για τις διάφορες θέσεις γραφείων που διαθέτει η εταιρεία σε όλη τη Φλόριντα. Υπάρχουν πολλοί λόγοι για τους οποίους αυτό το τμήμα είναι εκπληκτικό. Πρώτον, το τμήμα χρησιμοποιεί τη διάταξη με μοναδικό τρόπο για να προσφέρει μια αστρική λύση σχεδιασμού. Το πιο αξιοσημείωτο πράγμα για αυτό το τμήμα είναι το ελαφρύ σχήμα της Φλόριντα στα δεξιά. Το οπτικό στοιχείο της Φλόριντα με τις πολλές κουκίδες είναι ένας φανταστικός τρόπος να αναδείξουμε την προσφορά της εταιρείας. Δεν λένε μόνο ότι είναι στη Φλώριδα, το σχέδιο σας δείχνει ακριβώς πού. Είναι ένα εύκολο οπτικό να χωνέψει και εκτελείται με φανταστικό τρόπο.
Το επόμενο σημαντικό πράγμα για αυτό το τμήμα είναι οι τελείες. Είναι πραγματικά διαδραστικά. Όταν περάσετε πάνω από αυτά, θα έχετε το όνομα της πόλης ή της πόλης όπου βρίσκεται το γραφείο ασφάλισης Ted Todd. Αλλά αν κάνετε κλικ σε αυτό, ολόκληρη η ενότητα μετατοπίζεται αριστερά για να κάνετε περιθώρια για λεπτομέρειες σχετικά με το συγκεκριμένο γραφείο. Παίρνετε τον αριθμό τηλεφώνου του γραφείου, τη διεύθυνση, τις ανοιχτές ώρες εκτός από μια λίστα με τους υπαλλήλους. Μου αρέσει αυτή η λύση σχεδιασμού επειδή επιτρέπει σε ένα χρήστη να πλοηγηθεί γρήγορα σε μια τοποθεσία κοντά σε αυτούς. Είναι οπτικά πολύ πιο ενδιαφέρουσα και μοναδική αναπαράσταση απ 'ότι αν οι πληροφορίες στοιβάζονται το ένα πάνω στο άλλο σε έναν τίτλο σελίδας "Γραφεία μας στη Φλόριντα", δεν νομίζετε;
