Πώς να χρησιμοποιήσετε ισορροπία στο Web Design
Η επίτευξη ισορροπίας στο σχεδιασμό ιστοσελίδων απαιτεί κάποια σκέψη, προσπάθεια και δεξιότητες, αλλά αξίζει τον κόπο. Το μεγάλο πράγμα για την ισορροπία, που μπορεί να εφαρμοστεί στην ευρύτερη κατηγορία του σχεδιασμού στο σύνολό του, είναι ότι κρατά αυτό που δημιουργείτε από το να είναι ένα υπερβολικό, υπερφορτωμένο χάος που αποτυγχάνει να εξυπηρετήσει την εμπειρία του χρήστη. Με άλλα λόγια, η ισορροπία στον σχεδιασμό ιστοσελίδων διασφαλίζει ότι εσείς ως σχεδιαστής μόλις χτυπήσετε αυτό το γλυκό σημείο μετριοπάθειας. Όχι πάρα πολύ, αλλά όχι πολύ λίγο. Δεν είναι πολύ θορυβώδες, αλλά δεν είναι πολύ λεπτές. Διατηρεί το σύνολο του σχεδιασμού σας σε αρμονία ενώ ταυτόχρονα χτυπά όλους τους στόχους χρηστικότητας των πελατών σας. Τώρα αυτή είναι μια δεξιότητα που σίγουρα βάζετε στην εργαλειοθήκη του σχεδιαστή σας! Σε αυτό το άρθρο, θα εξετάσουμε πώς μπορείτε να ενσωματώσετε την καλή ισορροπία στις ιστοσελίδες των πελατών σας.
Συμμετρική ισορροπία
Ένα από τα πιο συνηθισμένα παραδείγματα ισορροπίας που συναντάτε κατά την περιήγηση σε ιστότοπους είναι η συμμετρία, αν και δεν μπορείτε να το συνειδητοποιήσετε, επειδή παρουσιάζεται τόσο απλά. Η συμμετρία είναι ευχάριστη για το μάτι και δημιουργεί ένα αισθητικά καλά οργανωμένο και αρμονικό σχέδιο. Η συμμετρική ισορροπία ορίζεται με την τοποθέτηση στοιχείων εξίσου σε κάθε πλευρά ενός οριζόντιου ή κατακόρυφου κεντρικού άξονα. Με άλλα λόγια, και οι δύο πλευρές μιας φανταστικής γραμμής κατάδυσης σε όλη τη μέση της σελίδας είναι ουσιαστικά καθρέφτες εικόνες ενός άλλου. Ενώ κάποιοι κριτικοί μπορούν να διαγράψουν αυτό το είδος ισορροπίας ως βαρετό ή προβλέψιμο, έχει παρ 'όλα αυτά αντέξει τη δοκιμασία του χρόνου και παραμένει ένας από τους καλύτερους τρόπους για να δείξει ισορροπία στο web design.
Τοποθεσία της Cisco επέλεξε να πάει για αυτή την δοκιμασμένη, δοκιμασμένη και αληθινή προσέγγιση σχεδιασμού. Σημειώστε πως ο ιστότοπος είναι απόλυτα ισορροπημένος στον κάθετο άξονά Αν πήρατε μια φανταστική γραμμή και τη διαιρέσατε ακριβώς κάτω από τη μέση της αρχικής σελίδας της Cisco, παρατηρήσατε τα εξής:
- Ο ίδιος αριθμός στοιχείων στη γραμμή πλοήγησης (συμπεριλαμβανομένου του εικονιδίου αναζήτησης) και στις δύο πλευρές
- Η επικεφαλίδα και η υποδιαίρεση είναι εξίσου μακρά και στις δύο πλευρές
- Το κουμπί κλήσης για δράση είναι απολύτως κεντρικό
- Ο ίδιος αριθμός στοιχείων κάτω από την επικεφαλίδα "Γρήγορες εργασίες" και στις δύο πλευρές
Ενώ ο ιστότοπος μπορεί να μην είναι ο πιο τρομερός συναρπαστικός χώρος ποτέ, δεν χρειάζεται να είναι δεδομένου ότι η εταιρεία πωλεί εξοπλισμό δικτύωσης. Επιπλέον, ο ιστότοπος είναι χρησιμοποιήσιμος και λειτουργικός, και τα δύο χαρακτηριστικά που μπορούν να εκτιμήσουν οι πελάτες του. Ας δούμε άλλα δύο παραδείγματα συμμετρίας:
IWC Schaffhausen , ο ελβετικός ωρολογοποιός, διαθέτει έναν ιστό με οριζόντια συμμετρική ισορροπία. Αν διαιρούμε τη σελίδα σε έναν κεντρικό άξονα κάτω από τη μέση, οι δύο πλευρές έχουν συμμετρία.
Το ίδιο ισχύει και για το Ιστοσελίδα App Beanstalk . Με απλό, ελάχιστο σχέδιο, ο κεντρικός του άξονας κατεβαίνει στο μέσο της αρχικής σελίδας, το οποίο αφήνει τα δύο μισά της σελίδας με οριζόντια συμμετρική ισορροπία.
Ασύμμετρη ισορροπία
Το πολικό αντίθετο της συμμετρίας, η ασύμμετρη ισορροπία είναι επίσης δυνατή. Μην ξεγελιέστε από το γεγονός ότι η ασυμμετρία σημαίνει έλλειψη ισοδυναμίας μεταξύ των τμημάτων! Όπως θα δούμε σύντομα, η ασύμμετρη ισορροπία επιτυγχάνει ένα σύστημα αντίβαρων στο σχεδιασμό, καθώς ... απλά όχι με τρόπους που θα περιμένατε. Η ασυμμετρία μπορεί να εκπροσωπείται με διάφορους τρόπους σε μια ιστοσελίδα. Για παράδειγμα, το ήμισυ της οθόνης, κάθετα ή οριζόντια, θα μπορούσε να διαθέτει ένα πιο έντονο στοιχείο ενώ το άλλο μισό θα μπορούσε να έχει πιο λεπτά στοιχεία. Παρά την ανισότητα αυτή, τόσο στη δύναμη όσο και στους αριθμούς, η ισορροπία δημιουργείται από την αντιπαράθεση των αντιφατικών στοιχείων. Με τον τρόπο αυτό, η ασυμμετρία μπορεί να είναι πραγματικά όμορφη, ίσως περισσότερο από την απλή συμμετρία, επειδή παίζει στην έννοια της ανομοιότητας για να δημιουργήσει ισορροπία. Αυτό είναι ένα παράδοξο σχεδιασμού, αλλά αυτό που λειτουργεί τόσο καλά σε κάθε τοποθεσία. Συνεπώς, η ασύμμετρη ισορροπία είναι πιο ενδιαφέρουσα και προκαλεί σκέψη από την προβλεπόμενη συμμετρία. Προκαλεί θέματα μοντερνισμού, ενέργειας και θαύματος. Οι σχεδιαστές πρέπει να λάβουν υπόψη ότι η δημιουργία ασυμμετρίας σε μια σελίδα απαιτεί περισσότερη δουλειά από την κανονική συμμετρία. Μετά από όλα, πρέπει να εκπροσωπείτε σχέσεις μεταξύ στοιχείων σχεδίασης που είναι πιο περίπλοκα.
Honda μας δίνει ένα κρυσταλλικό παράδειγμα ασυμμετρίας στο σχεδιασμό ιστοσελίδων. Κάτω από το πτυχίο, στην αρχική του σελίδα, η εταιρεία χρησιμοποιεί σχεδιασμό με βάση την κάρτα, αλλά αυτό δημιουργεί μια κάπως ανοργάνωτη εμφάνιση που, αν και ελκυστική και πολύχρωμη, δημιουργεί έλλειψη ισότητας σε κάθε πλευρά ενός κάθετου ή οριζόντιου κεντρικού άξονα. Για ένα πράγμα, οι ίδιες οι κάρτες είναι πάντα διαφορετικά μήκη, οριζόντια και αποτυγχάνουν να στοιβάζονται πάντα σε οποιαδήποτε ομοιόμορφη στήλη ή σειρά. Αυτό δημιουργεί μεγάλη ασυμμετρία που είναι πολύ ενδιαφέρον να εξετάσουμε. Είναι σχεδόν σαν ένα μικρό λαβύρινθο στην αρχική σελίδα της εταιρείας αυτοκινήτων! Υπάρχουν επίσης και άλλα ενδιαφέροντα παραδείγματα:
Τυπογραφισμός είναι μια εικόνα τέλεια περίπτωση ασυμμετρίας στο web design. Η περιοχή του διαθέτει δύο στοιχεία που έχουν ανοιχτεί. Τόσο το λογότυπο TG όσο και η πράσινη σφραγίδα στη δεξιά, πάνω γωνία δημιουργούν ασυμμετρία.
Duplos «η ασυμμετρία είναι πιο έντονη. Η περιοχή του μπορεί να υπερηφανεύεται για ένα σχέδιο με πλωτά στοιχεία που δεν θα ευθυγραμμιστεί με το άλλο μισό, είτε ο κεντρικός άξονας είναι κάθετος είτε οριζόντιος. Συνολικά, παράγει μια εντυπωσιακή εμφάνιση που είναι ενδιαφέρουσα για την εισαγωγή.
Ακτίνα ισορροπίας
Η ισορροπία ακτινών είναι αρκετά απλή. Όπως υποδηλώνει το όνομα, η ακτινική ισορροπία εμφανίζεται όταν όλα τα στοιχεία σχεδιασμού μιας σελίδας εκπέμπουν σε ισαπέχοντα σημεία από ένα ενωτικό κεντρικό σημείο. Αν λοιπόν διαιρέσετε τη σελίδα είτε κατακόρυφα είτε οριζόντια κατά μήκος ενός κεντρικού άξονα, τα στοιχεία των δύο πλευρών θα ήταν εξίσου μακριά ή κοντά στο κεντρικό σημείο. Μερικά από τα πιο βασικά παραδείγματα της ακτινικής ισορροπίας είναι τα πράγματα όπως οι ακτίνες του ήλιου που προέρχονται από ένα κεντρικό σημείο ή μια λίμνη που έχει μια δέσμη κυματισμών στην επιφάνειά της. Αυτό που κάνει πιο συγκεκριμένη αυτή την ισορροπία είναι ότι το αποτέλεσμα της ακτινοβολίας πηγαίνει και στους δύο τρόπους: Ακριβώς όπως η προσοχή οδηγεί μακριά από το κεντρικό σημείο, οδηγεί και πάλι σε αυτό λόγω του κοινού κέντρου. Εξαιτίας αυτού, η διατήρηση ενός εστιακού σημείου είναι εύκολη.
Το καλύτερο παράδειγμα της ακτινικής ισορροπίας - το οποίο είναι αρκετά σπάνιο στις ιστοσελίδες, ειδικά στις αρχικές σελίδες - είναι Vlog . Είναι η επιτομή της ακτινικής ισορροπίας, καθώς τα πάντα ακτινοβολούν προς τα έξω από το κεντρικό σημείο του λευκού τύπου "Vlog.it".
Όλα τα είδη ισορροπίας
Μέχρι τώρα, θα πρέπει να είναι αρκετά προφανές ότι όλα τα είδη ισορροπίας έχουν κάποιους κοινούς δεσμούς. Υπάρχουν ομοιόμορφοι παράγοντες που εμφανίζονται με συνέπεια σε οποιοδήποτε σχέδιο που χαρακτηρίζει ελκυστική και ενδιαφέρουσα ισορροπία. Η ισορροπία στο σχεδιασμό ιστοσελίδων είναι γύρω σας. Οι πιθανότητες είναι ότι έχετε παραμελήσει να το εκτιμήσετε σε όλους τους διαφορετικούς ιστότοπους που έχετε επισκεφτεί ποτέ καθ 'όλη τη διάρκεια της ζωής σας. αλλά αυτό μόνο επειδή η ισορροπία δεν είναι πραγματικά το πρώτο πράγμα που σκέφτεστε όταν πλοηγείτε σε οποιοδήποτε ιστότοπο. Παρόλα αυτά, η ισορροπία είναι σημαντική για το σχεδιασμό της τοποθεσίας. Δεν παρέχει μόνο αισθητικές πινελιές που είναι ενδιαφέρουσες από οπτικής απόψεως. Μπορεί επίσης να βοηθήσει την εμπειρία των χρηστών καθιστώντας ευκολότερη την απορρόφηση των οπτικών πληροφοριών σε έναν ιστότοπο, πράγμα που δεν σημαίνει τίποτα για τη βελτίωση της πλοήγησης στον ιστότοπο. Οι σχεδιαστές μπορούν να προσπαθήσουν να συμπεριλάβουν καλύτερη ισορροπία στον σχεδιασμό ιστοσελίδων τους, δίνοντας ιδιαίτερη προσοχή στην αρμονία, τα αντίβαρα και την ισοδυναμία. Το τελικό αποτέλεσμα της καλής ισορροπίας πληρώνει άφθονα μερίσματα για τους πελάτες σας και την εμπειρία του χρήστη.