4 πράγματα που κάθε σχεδιαστής πρέπει να ξέρει για το Whitespace
Ο κενός χώρος (ή ο "αρνητικός χώρος") είναι ένας κενός χώρος ανάμεσα και γύρω από αντικείμενα μιας σελίδας. Στοιχεία κενών χώρων σε γραφικές διεπαφές χρήστη είναι:
- Περιθώρια, γεώτρηση και υδρορροές
- Χώρος γύρω από εικόνες και γραφικά αντικείμενα
- Απόσταση γραμμής και απόσταση γραμματοσειράς στο περιεχόμενο κειμένου
Παρόλο που μερικοί άνθρωποι μπορεί να θεωρούν το κενό χώρο χάσιμο πολύτιμου κελύφους οθόνης, είναι ένα βασικό στοιχείο σε ένα σχέδιο. Στην πραγματικότητα, τα κενά είναι εξίσου σημαντικά με το περιεχόμενο. Όπως είπε ο Jan Tschichold:
Ο λευκός χώρος πρέπει να θεωρείται ως ενεργό στοιχείο, όχι ως παθητικό υπόβαθρο
Όλες οι καλές διεπαφές χρηστών ενσωματώνουν τις κατάλληλες τιμές κενών διαστημάτων σε όλα τα στοιχεία σελίδων από την κορυφή προς τα κάτω. Το κενό μιας σελίδας μπορεί να είναι τόσο σημαντικό όσο ο χώρος που καταλαμβάνουν τα στοιχεία του UI, επειδή το κείμενο, τα κουμπιά, τα λογότυπα και άλλα αντικείμενα χρειάζονται χώρο για να αναπνεύσουν.
Σε αυτό το άρθρο, θα βρείτε πώς να χρησιμοποιείτε τα κενά των σχεδίων σας για να τους δώσετε μια καθαρή, αδιάκοπη αίσθηση:
1. Βελτιώστε την αναγνωσιμότητα του κειμένου
Το Whitespace είναι σε θέση να κάνει την ανάγνωση πολύ πιο εύκολη, μειώνοντας την ποσότητα των επισκεπτών κειμένου που βλέπουν όλα ταυτόχρονα. Η έλλειψη κενών θέσεων (γεμάτη σελίδα) δεν κάνει τους χρήστες να θέλουν να διαβάσουν το περιεχόμενο. Από την άλλη πλευρά, ο κατάλληλα χρησιμοποιούμενος κενός χώρος έχει αποδειχθεί ότι αυξάνει την κατανόηση του κειμένου έως και 20%, όπως επεσήμανε η έκθεση Ντμίτρι Φαντέγιεφ .
Δύο σημαντικά πράγματα που πρέπει να θυμάστε κατά τη βελτιστοποίηση του περιεχομένου κειμένου είναι τα περιθώρια των παραγράφων και το διάστημα (το διάστημα μεταξύ κάθε γραμμής στο κείμενό σας). Το τελευταίο μπορεί να βελτιώσει δραστικά την αναγνωσιμότητα ενός σώματος κειμένου. Γενικά, όσο μεγαλύτερη είναι η απόσταση, τόσο καλύτερη είναι η εμπειρία που θα έχει ο χρήστης κατά την ανάγνωση (αν και μπορεί να γίνει αποσύνδεση των γραμμών).
2. Διευκρίνιση σχέσεων
Το σύνολο της διάταξης προκύπτει από το άθροισμα των μερών του και οι σχέσεις περιεχομένου ορίζονται από το περιβάλλοντα κενά. Ο νόμος της εγγύτητας ορίζει ότι τα αντικείμενα κοντά σε κάθε άλλο φαίνονται παρόμοια. Ο λευκός χώρος ενεργεί ως οπτική αναφορά σε αυτή την περίπτωση. Ρίξτε μια ματιά στην παρακάτω εικόνα:
Οι νόμοι της Gestalt υπαγορεύουν ότι τα αντικείμενα που βρίσκονται σε κοντινή απόσταση θα εμφανιστούν ως μία "μονάδα". ο λευκός χώρος ενεργεί ως ένα οπτικό σύνθημα.
Σχεδόν όλοι όσοι βλέπουν αυτήν την εικόνα παρατηρούν δύο ομάδες κύκλων και όχι απλώς 12 κύκλους. Οι κύκλοι είναι όλοι ίδιοι και η μόνη διαφορά μεταξύ τους είναι η ποσότητα των λευκών χώρων που τα χωρίζει.
Είναι δυνατή η ομαδοποίηση των αντικειμένων, μειώνοντας το διάστημα μεταξύ τους και αυξάνοντας το διάστημα μεταξύ τους και άλλων στοιχείων στη σελίδα.
Για τις διεπαφές χρηστών, αυτό σημαίνει ότι τα αντικείμενα που βρίσκονται σε κοντινή απόσταση θα εμφανιστούν ως μία "μονάδα". Για παράδειγμα, στο πλαίσιο των εντύπων ιστού, είναι καλή ιδέα να τοποθετήσετε ετικέτες κοντά στα σχετικά πεδία για να δημιουργήσετε ένα αντικείμενο. Όταν οι ετικέτες τοποθετούνται πλησιέστερα στα πεδία αυτό καθιστά τη σχέση μεταξύ τους πολύ σαφής για τους χρήστες.
Οι πληροφορίες μεταδίδονται με μεγαλύτερη σαφήνεια όταν οι ετικέτες τοποθετούνται πιο κοντά στα πεδία στα οποία σχετίζονται.
3. Προσέλκυση Προσοχής
Οι σχεδιαστές μπορούν να χρησιμοποιήσουν το κενό για να γνωρίσουν τα σημαντικότερα με μια ματιά. Υπάρχει σχέση ανάμεσα σε απόσταση και προσοχή. μεγαλύτερη απόσταση προκαλεί την προσοχή. Η έλλειψη άλλων στοιχείων θα κάνει τα υπάρχοντα στοιχεία να ξεχωρίζουν περισσότερο. Είναι δυνατό να χρησιμοποιήσετε ένα κενό για το δικό σας πλεονέκτημα - να σχεδιάσετε περιπλάνηση στα συγκεκριμένα στοιχεία της σελίδας. Η πρόσθετη εξάρτηση γύρω από ένα συγκεκριμένο τμήμα περιεχομένου αναγκάζει την προσοχή των χρηστών στην περιοχή απλώς και μόνο επειδή δεν υπάρχει τίποτα άλλο στην οθόνη για να τραβήξει την προσοχή. Έτσι, όσο πιο λευκά είναι γύρω από ένα αντικείμενο, τόσο περισσότερο το μάτι έλκεται σε αυτό.
4. Δημιουργήστε οπτική ιεραρχία
Όταν χρησιμοποιείται η κατάλληλη κενή περιοχή, επιτρέπει σε μια σελίδα να δημιουργήσει μια γενική ροή και ισορροπία, η οποία με τη σειρά της βοηθάει στην επικοινωνία της πρόθεσης του σχεδίου. Το Whitespace μπορεί να υποστηρίξει τη συνολική ιεραρχία. Παράγει είτε συμμετρία είτε ασυμμετρία.
Η συμμετρία δημιουργεί μνήμη και αρμονία:
Η Mailchimp, όπως μπορείτε να δείτε, είναι ένας μεγάλος υποστηρικτής του λευκού χώρου στα σχέδιά τους. Όταν οι επισκέπτες σαρώνουν την αρχική σελίδα, το κουμπί "Εγγραφή ελεύθερο" τραβάει την προσοχή σχεδόν αμέσως. Χρησιμοποιώντας συμμετρία είναι δυνατό να δημιουργήσετε μια ισορροπημένη διάταξη με εξίσου σημαντικό δεξί και αριστερό μέρος.
Ενώ η ασυμμετρία προσελκύει την προσοχή:
Η ασυμμετρία είναι μεγάλη για να προσελκύσει την προσοχή σε μια συγκεκριμένη περιοχή της σελίδας.
Όταν ένα στοιχείο χρησιμοποιεί ασύμμετρο χώρο, ξεχωρίζει από άλλα περιβάλλοντα στοιχεία.
συμπέρασμα
Ο κενός χώρος δεν είναι σπαταλημένος χώρος, είναι ένα ισχυρό εργαλείο σχεδίασης. Μπορεί να είναι κάθε τόσο σημαντικό όσο ο χώρος που καταλαμβάνεται από το αντικείμενο εικόνων, κειμένου ή άλλων διεπαφών χρηστών, επειδή ακόμη και κενός χώρος εξυπηρετεί ένα σκοπό και υποστηρίζει την οπτική ακεραιότητα μιας διάταξης.
Παρόλο που φαίνεται ένα απλό θέμα, το κενό μπορεί να είναι δύσκολο να κυριαρχήσει, επειδή η εφαρμογή του λευκού χώρου είναι και η τέχνη και η επιστήμη. Η πραγματική κατανόηση του μεγέθους που πρέπει να χρησιμοποιηθεί για να δημιουργηθεί μια καλή διάταξη απαιτεί πρακτική.