4 τρόποι για να σχεδιάσετε μια τέλεια αρχική οθόνη
Μία οθόνη χωρισμένη σε δύο.
Η τεχνική split screen είναι γνωστή εδώ και πολύ καιρό στη βιομηχανία του κινηματογράφου, με πρώιμα παραδείγματα που χρονολογούνται από τις σιωπηλές κινηματογραφικές μέρες στις αρχές του 20ού αιώνα και εξακολουθεί να είναι μια δημοφιλής συσκευή από την ταινία και την τηλεόραση σήμερα.
Χρησιμοποιείται διάταξη διάσχισης οθόνης όταν τα στοιχεία πλήρους οθόνης χωρίζονται σε δύο ή περισσότερα κατακόρυφα μέρη. Μια σκηνή από την ταινία "Scott Pilgrim vs τον κόσμο"
Ωστόσο, αυτή είναι μια σχετικά νέα τεχνική για τη βιομηχανία σχεδιασμού ιστοσελίδων. Οι διαχωριστικές οθόνες έγιναν δημοφιλείς γύρω στα μέσα του 2016 και τώρα έχουμε όλο και περισσότερους ιστότοπους που χρησιμοποιούν αυτό το μοτίβο σχεδίασης. Υπάρχουν μερικοί λόγοι για τους οποίους το σχέδιο αυτό έγινε τόσο δημοφιλές:
- Έχει ωραία αισθητική ποιότητα. Όταν εκτελείται σωστά, μπορεί να προσφέρει στους χρήστες μια υπέροχη εμπειρία προβολής.
- Είναι μια καλή επιλογή για ευαίσθητα πλαίσια. Ο σχεδιασμός διαχωριστικής οθόνης μπορεί να προσαρμοστεί για μια ποικιλία οθονών, ακόμη και μικρών. Όταν πρόκειται για μικρότερες οθόνες, όπως κινητές οθόνες, οι πίνακες μπορούν να στοιβάζονται.
- Βοηθά στην πλοήγηση. Χρησιμοποιώντας απλές τεχνικές σχεδιασμού, μπορείτε να προσελκύσετε την προσοχή του χρήστη σε ένα συγκεκριμένο τμήμα της οθόνης ή να την ενθαρρύνετε να κάνει κλικ.
Όταν Split Screen λειτουργεί το καλύτερο
Η διαίρεση οθόνης είναι ιδιαίτερα καλή όταν έχετε δύο πράγματα που πρέπει να προωθήσετε. Για παράδειγμα, όταν ένας ιστότοπος προσφέρει δύο εντελώς αντίθετες παραλλαγές. Αυτή η προσέγγιση επιτρέπει στους σχεδιαστές να δίνουν προτεραιότητα και στα δύο πράγματα και να επιτρέπουν στο χρήστη να επιλέξει γρήγορα μεταξύ τους.
Μια οθόνη, δύο μηνύματα στους οδηγούς Dropbox
Όταν πρέπει να αποφύγετε τη διαίρεση οθόνης
Τα σχέδια διαχωριστικής οθόνης δεν επεκτείνονται καλά καθώς αυξάνεται το περιεχόμενο, επομένως δεν συνιστάται να τα εφαρμόζετε σε διατάξεις σχετικές με το περιεχόμενο. Είναι σημαντικό να διατηρείτε απλές τις οθόνες, επειδή οι πολύπλοκες οθόνες διαχωρισμού κάνουν το UI να φαίνεται υπερφορτωμένο με πληροφορίες. Αυτός είναι ο λόγος για τον οποίο η διάσπαση της οθόνης θα ήταν τέλεια κατάλληλη για τα μινιμαλιστικά σχέδια ιστοσελίδων.
Πώς να αποφασίσετε εάν η διαίρεση οθόνης είναι καλή για σας
Εάν σκέφτεστε μια τεχνική split-screen για την ιστοσελίδα σας, σας συμβουλεύω να αναρωτηθείτε μερικές ερωτήσεις:
- Είναι κατάλληλο για το περιεχόμενό σας;
- Θα υπάρχει αρκετός αρνητικός χώρος για να λειτουργήσει η διάταξη;
- Θα εκτιμήσουν οι χρήστες σας τη διάταξη ή θα τους προκαλέσουν σύγχυση;
- Θα είναι εντάξει να χωρίσετε την προσοχή των χρηστών σας στο μισό;
Το πιο σημαντικό πράγμα που πρέπει να θυμάστε ότι το περιεχόμενο είναι βασιλιάς και split-screen πρέπει να είναι ένας απλός τρόπος για να παραδώσει το μήνυμά σας στους ανθρώπους.
Τεχνικές σχεδίασης για διαχωριστικές οθόνες
1. Ζεύγος ζωηρόχρωμο χρώμα και δραματική τυπογραφία
Χάρη στο επίπεδο και υλικό σχεδιασμό, ζωντανά χρώματα και δραματική τυπογραφία είναι μεγάλες τάσεις τώρα. Τα ζωντανά χρώματα είναι οπτικά ενθαρρυντικά και η δραματική τυπογραφία βελτιώνει το περιεχόμενο του κειμένου. Απλά συνδυάστε τα δύο και θα δημιουργήσετε έναν οπτικά ενδιαφέροντα σχεδιασμό. Ο Baesman το έκανε αυτό με πολύ γοητεία. Έδωσαν την ίδια σημασία και στα δύο στοιχεία, ενώ παράλληλα επέτρεψαν στο χρήστη να επιλέξει γρήγορα μεταξύ τους.
Τα φωτεινά χρώματα και τα ενδιαφέροντα ζευγάρια τυπογραφίας μπορούν να προσθέσουν ενδιαφέρον
2. Προσοχή χρήστη στο κουμπί CTA
Πολύ περισσότερο από μια απλή γραφική τάση, η διάσπαση της οθόνης σε δύο ξεχωριστά μέρη παρέχει έναν πρωτότυπο τρόπο καθοδήγησης του χρήστη μέσω του ιστότοπού σας. Είναι μια εξαιρετική επιλογή όταν θέλετε να δημιουργήσετε ένα μεγαλύτερο σημείο εστίασης για κλήσεις προς δράση. Στο παρακάτω παράδειγμα, μπορείτε να δείτε πόσο αρνητικός χώρος δημιουργεί ένα κατακόρυφο χάσμα για να αποδώσει ίσα βάρη σε δύο διαφορετικές επιλογές.
Το κατακόρυφο χάσμα επιτρέπει την έμφαση σε δύο διαφορετικές CTA χωρίς να ευνοεί κανείς
3. Δημιουργία της οπτικής ροής μεταξύ των "οθονών"
Όταν η διαχωρισμένη οθόνη αντιπροσωπεύει ένα μόνο αντικείμενο, είναι σημαντικό να δημιουργηθεί μια σύνδεση μεταξύ των δοχείων περιεχομένου. Ένας πιθανός τρόπος για να γίνει αυτό είναι χρησιμοποιώντας ένα χρώμα. Απλά αντιγράψτε ένα ξεχωριστό χρώμα για να δημιουργήσετε οπτική ροή μεταξύ δύο οθονών. Αυτό λειτουργεί ιδιαίτερα καλά με χρώμα ή απόχρωση της μάρκας με μεγάλη αντίθεση. Χρησιμοποιώντας το χρώμα είναι δυνατό να επικοινωνήσετε μια ισχυρότερη σύνδεση μεταξύ δύο κομματιών περιεχομένου.
Ένας άλλος πιθανός τρόπος για να δημιουργήσετε μια ισχυρή σύνδεση είναι η στρωματοποίηση ενός μόνο στοιχείου, όπως η αντιγραφή κειμένου σε οθόνες:
Το επικαλυπτόμενο κείμενο συνδέει δύο οθόνες
Τελευταίο, αλλά εξίσου σημαντικό, μπορείτε να χρησιμοποιήσετε μια χρωματιστή επικάλυψη για αυτό το σκοπό:
Εξετάστε το αριστερό μέρος της οθόνης
4. Χρησιμοποιήστε την κίνηση για να ενθαρρύνετε τους χρήστες να δράσουν
Λεπτές κινούμενες εικόνες και διαδραστικά εφέ ενθαρρύνουν τους χρήστες να κάνουν κλικ. Κοιτάξτε το σχέδιο που χρησιμοποιείται για το " Ο Τσέχοφ είναι ζωντανός "Παρακάτω. Ο σχεδιασμός σας ζητά να κάνετε κλικ για να βρείτε τον χαρακτήρα σας.
συμπέρασμα
Χρειάζονται περίπου τρία δευτερόλεπτα για να λάβει ένας επισκέπτης μια απόφαση σχετικά με τον ιστότοπό σας. Κατά συνέπεια, τα σχέδιά σας θα πρέπει πάντα να είναι φιλικά προς τον επισκέπτη, εάν θέλετε να μειώσετε τα ποσοστά εγκατάλειψης. Η τεχνική διαχωριστικής οθόνης μπορεί να σας βοηθήσει με αυτό. Τα σχέδια με διαχωριστικές οθόνες είναι ένας τρόπος διασκέδασης, λειτουργικότητας και απόκρισης για τη δημιουργία ενός ελκυστικού σχεδιασμού.