Αν ψάχνετε για πλέγματα σχεδίασης ιστοσελίδων, έχετε έρθει στο σωστό μέρος. Σε αυτήν την ανάρτηση, έχουμε συζητήσει 5 διαφορετικά πλέγματα σχεδίασης ιστοτόπων.
Τα πλέγματα είναι η ραχοκοκαλιά του σχεδίου. σας βοηθούν να δημιουργήσετε τάξη και να οργανώσετε το περιεχόμενο του σχεδίου σας. Θα συζητήσουμε τι είναι ένα πλέγμα, γιατί πρέπει να το χρησιμοποιήσετε στο σχεδιασμό ιστοσελίδων και πώς να το φτιάξετε σε αυτήν την ανάρτηση.
Ανοίγετε την εφαρμογή σχεδίασης που προτιμάτε και εκεί είναι, ένας κενός καμβάς που σας κοιτάζει πίσω. Είναι ένα άγγιγμα τρομακτικό μερικές φορές.
Πώς ξεκινάς; Ποια θέση δίνετε στον τίτλο; Πού τοποθετείτε τα έργα τέχνης και τις φωτογραφίες σας; Ένα πλέγμα είναι το μόνο που απαιτείται για να ξεκινήσει.
Ένα πλέγμα είναι μια δομή που χρησιμοποιείται για την οργάνωση του περιεχομένου ενός σχεδίου. καθιερώνει ευθυγράμμιση και τάξη.
Είτε σχεδιάζετε μια διάταξη για εκτύπωση, όπως ένα περιοδικό, είτε συγχωνεύετε φωτογραφίες και κείμενο για να δημιουργήσετε μια σελίδα προορισμού, ένα πλέγμα θα σας βοηθήσει να κάνετε επιλογές σχεδίασης και να παρέχετε μια θετική εμπειρία χρήστη.
Σκεφτείτε πώς αυτό το σχέδιο σελίδας προορισμού χρησιμοποιεί ένα πλέγμα 12 στηλών για την οργάνωση των στοιχείων του. Η χρήση πλέγματος αφαιρεί τη δυνατότητα λήψης τυχαίων αποφάσεων.
Αντί να τοποθετείτε τυχαία κομμάτια, χρησιμοποιώντας σωστά ένα πλέγμα, θα γνωρίζετε ακριβώς πού να τοποθετήσετε στοιχεία όπως ένα λογότυπο, στοιχεία μενού, μια επικεφαλίδα, περιεχόμενο σώματος και φωτογραφίες. Επιπλέον, θα βοηθήσει στην επιτάχυνση της διαδικασίας σχεδιασμού σας.
Σε αυτό το άρθρο, θα σας πω όλα όσα πρέπει να ξέρετε για το πώς να χρησιμοποιήσετε ένα πλέγμα στο σχεδιασμό ιστοσελίδων. Λοιπόν, μείνε μαζί μου μέχρι το τέλος.
Περιεχόμενα
- Από πού προέρχονται τα πλέγματα;
- Γιατί είναι σημαντικά τα πλέγματα στο σχεδιασμό ιστοσελίδων;
- 5 Διαφορετικοί τύποι πλεγμάτων
- 4 Βέλτιστες Πρακτικές Χρήσης Πλέγματος στο Σχεδιασμό Ιστού
- Ανατομία πλέγματος – Τι πρέπει να γνωρίζετε;
- Συχνές ερωτήσεις: Πλέγματα σχεδίασης ιστοσελίδων 2024
- 👉 Ποιο είναι το καλύτερο πλέγμα για το σχεδιασμό ιστοσελίδων;
- ✅ Τι είναι ένας ιστότοπος με διάταξη πλέγματος;
- 👉 Πώς λειτουργούν τα πλέγματα ιστοτόπων;
- 👀 Πώς μια διάταξη πλέγματος ενισχύει τον σχεδιασμό ιστοσελίδων;
- ✅ Γιατί οι σχεδιαστές χρησιμοποιούν πλέγματα;
- 👉 Πόσες στήλες πρέπει να έχει ένα πλέγμα στο σχεδιασμό ιστοσελίδων;
- 💁 Γιατί χρησιμοποιούμε πλέγμα 12 στηλών;
- ✔️ Τι είναι το πλέγμα 12 στηλών;
- 👉 Πώς χρησιμοποιείτε τα πρότυπα πλέγματος;
- Συμπέρασμα: Website Design Grids 2024
Από πού προέρχονται τα πλέγματα;
Πριν πάμε στο πώς τα πλέγματα επηρεάζουν το σχεδιασμό ιστοσελίδων σήμερα, ας ρίξουμε μια σύντομη ματιά στην ιστορία των δικτύων και στον τρόπο με τον οποίο χρησιμοποιήθηκαν. Τα πλέγματα είναι απαραίτητα για την οργάνωση της τυπογραφίας.
Τα πλέγματα χρησιμοποιήθηκαν αρχικά σε διατάξεις χειρογράφων για παραγγελία τύπου. Σκεφτείτε πόσο ταξινομημένο είναι αυτό το spread από μια αρχική σελίδα κειμένου.
Για μια πιο εις βάθος ματιά στην ιστορία της εκτύπωσης, ανατρέξτε στο δοκίμιό μας για την ιστορία της γραφιστικής.
Γρήγορα στη Βιομηχανική Επανάσταση και την έλευση της μαζικής παραγωγής, κατά την οποία οι εφημερίδες, οι αφίσες, οι διαφημίσεις και άλλα έντυπα αντικείμενα παράγονταν σε μεγάλες ποσότητες.
Οι σχεδιαστές αρέσουν Jan Tschichold και Josef Muller-Brockmann δημιούργησε νέα συστήματα πλέγματος τον εικοστό αιώνα, τα οποία εξελίχθηκαν σε αυτό που είναι σήμερα γνωστό ως The Swiss-Style ή The International Typographic Style.
Καθιέρωσαν μια αρθρωτή δομή με αρκετό κενό χώρο.
Γιατί είναι σημαντικά τα πλέγματα στο σχεδιασμό ιστοσελίδων;
Όσον αφορά την εφαρμογή του στη διαδικασία σχεδίασης ιστοσελίδων, το σύστημα πλέγματος βοηθά στην ευθυγράμμιση των στοιχείων της σελίδας χρησιμοποιώντας διαδοχικές στήλες και σειρές.
Μόλις δημιουργηθεί αυτή η ιεραρχική βάση, μπορούμε να τακτοποιήσουμε κείμενο, γραφικά και πρακτικά οποιοδήποτε άλλο στοιχείο σχεδίασης μέσα στη διεπαφή με συνεπή, ταξινομημένο τρόπο.
Όταν σχεδιάζουμε για τον Ιστό και για κινητά, οι σελίδες ή οι διεπαφές που αναπτύσσουμε προορίζονται να διευκολύνουν διαφορετικές ροές χρηστών.
Τα πλέγματα διευκολύνουν τη διαδικασία σχεδιασμού καλωδίων, προτύπων ή τυποποιημένων διατάξεων για συγκρίσιμους ιστότοπους, καθώς οι ροές των χρηστών συχνά περιλαμβάνουν πολλές οθόνες ή παράθυρα που επαναλαμβάνουν παρόμοια σχέδια και διατάξεις σχεδίασης.
Τα πλέγματα επιτρέπουν την οριζόντια και κάθετη διαίρεση των σελίδων μέσω σειρών και στηλών. Τα συστήματα πλέγματος είναι μια συστηματική τεχνική που επιτρέπει στους σχεδιαστές να τακτοποιούν τα αντικείμενα με τακτοποιημένο τρόπο και να αναπτύσσουν στοιχεία για πολλές σελίδες ή διατάξεις με αρθρωτό τρόπο.
Επιπλέον, τα πλέγματα δημιουργούν ένα τυποποιημένο σύνολο σταθερών μονάδων μέτρησης που καθορίζουν το μέγεθος, την απόσταση και την ευθυγράμμιση κάθε στοιχείου σχεδίασης.
Οι διατάξεις πλέγματος προήλθαν από τη σχεδίαση εκτύπωσης όταν χρησιμοποιήθηκαν σε συνδυασμό με την τυπογραφία για την οργάνωση του χειρογράφου σε χαρτί, ιδιαίτερα σε βιβλία και εφημερίδες.
Τούτου λεχθέντος, πολλές πτυχές του σύγχρονου σχεδιασμού βασίζονται και ευδοκιμούν σε διατάξεις που βασίζονται σε πλέγμα. Αυτό περιλαμβάνει τη σχεδίαση ιστοσελίδων, τη σχεδίαση διεπαφής και, το πιο σημαντικό, τον ανταποκρινόμενο σχεδιασμό.
Προτού διερευνήσουμε πώς και γιατί οι διατάξεις που βασίζονται σε πλέγμα είναι ένα τόσο ανεκτίμητο εργαλείο για τη διαδικασία σχεδιασμού μας ως προγραμματιστές ιστού, ας ρίξουμε μια πιο προσεκτική ματιά στα φυσικά στοιχεία που αποτελούν ένα σύστημα πλέγματος.
5 Διαφορετικοί τύποι πλεγμάτων
Τα πλέγματα ταξινομούνται σε πέντε διακριτές κατηγορίες. Ενώ ορισμένα είναι πιο κατάλληλα για σχεδιασμό ιστοσελίδων από άλλα, σχεδόν σίγουρα έχετε χρησιμοποιήσει και τα πέντε κάποια στιγμή σε όλη τη δημιουργική σας καριέρα.
1. Ιεραρχικό Πλέγμα:
Η πιο διαδεδομένη χρήση του ιεραρχικά πλέγματα είναι στον σχεδιασμό ιστοσελίδων. Ο στόχος αυτών των πλεγμάτων είναι να ιεραρχήσουν τα στοιχεία. Μπορεί να είναι πιο προσαρμόσιμα, αλλά εξακολουθούν να βασίζονται σε στήλες, σειρές και λειτουργικές μονάδες για την οργάνωση.
Κατασκευάζονται φυσικά τοποθετώντας πρώτα τα πιο σημαντικά στοιχεία στη σελίδα και στη συνέχεια τα περιβάλλουν με ένα πλέγμα.
Οι ιστότοποι που σχετίζονται με ειδήσεις και μέσα χρησιμοποιούν συχνά αυτό το στυλ πλέγματος για να βοηθήσουν να επιστήσουν την προσοχή σε ορισμένα άρθρα και αναρτήσεις. Σκεφτείτε πώς το The New York TimesΗ αρχική σελίδα χρησιμοποιεί ένα ιεραρχικό πλέγμα.
2. Αρθρωτό πλέγμα:
Τα αρθρωτά πλέγματα είναι παρόμοια με τα πλέγματα στηλών, αλλά περιλαμβάνουν σειρές. Ενώ οι εφημερίδες και τα περιοδικά συχνά χρησιμοποιούν αρθρωτά πλέγματα για την οργάνωση υλικού, μπορούν επίσης να χρησιμοποιηθούν στη σχεδίαση ιστοτόπων και εφαρμογών, για παράδειγμα, σε μια ενότητα πλέγματος προϊόντων.
Σκεφτείτε πώς οργανώνει η Everlane τη συλλογή τζιν χρησιμοποιώντας ένα αρθρωτό πλέγμα. ο YouTube Η αρχική σελίδα είναι ένα άλλο παράδειγμα ιστότοπου που χρησιμοποιεί ένα αρθρωτό πλέγμα.
Ενώ περιλαμβάνουν μια αριστερή πλαϊνή γραμμή για συχνούς συνδέσμους, όπως οι ενότητες των τάσεων και των συνδρομών, όλο το υλικό βίντεο είναι δομημένο σε ένα αρθρωτό πλέγμα τεσσάρων στηλών για να μεγιστοποιήσει τον αριθμό των βίντεο που μπορεί να διαβάσει ένας θεατής κατά την περιήγηση για κάτι να παρακολουθήσει.
3. Πλέγμα στηλών:
Τα πλέγματα στηλών βοηθούν στην οργάνωση του κειμένου, των εικόνων και των γραφικών. Για ιστότοπους, ο αριθμός των στηλών που καλύπτουν το πλάτος μιας σελίδας προορισμού μπορεί να κυμαίνεται από δύο έως δώδεκα ή και δεκαέξι.
Το κείμενο και τα γραφικά μπορεί να περιέχονται σε μία στήλη ή να εκτείνονται σε πολλές στήλες. Οι υδρορροές είναι τα κενά μεταξύ των στηλών. θα πρέπει να έχουν ομοιόμορφο μέγεθος σε όλα.
Τα πλέγματα στηλών δεν χρειάζεται να είναι συμμετρικά. Για παράδειγμα, μπορείτε να χρησιμοποιήσετε ένα ασύμμετρο πλέγμα στηλών στο οποίο ορισμένες στήλες είναι στενότερες από άλλες, κάτι που μπορεί να είναι επωφελές ανάλογα με την ιεραρχία του σχεδίου σας.
Τα ασύμμετρα πλέγματα στηλών χρησιμοποιούνται συχνά σε ιστότοπους ιστολογίου, όπου το κύριο υλικό περιλαμβάνεται στο μεγαλύτερο κοντέινερ των δύο τρίτων της διάταξης, ενώ το μικρότερο τρίτο μπορεί να εμφανίζει πληροφορίες σχετικά με το ιστολόγιο και τον συγγραφέα του.
Σκεφτείτε πώς η αρχική σελίδα αυτού του ιστολογίου χρησιμοποιεί ένα ασύμμετρο πλέγμα στηλών.
4. Ζώνη χειρογράφου:
Όλα τα βιβλία, οι εφημερίδες και τα περιοδικά είναι χτισμένα σε ένα χειρόγραφο πλέγμα. Επιπλέον, αναφέρεται ως πλέγμα μονής στήλης, αυτό είναι ένα από τα πιο απλά μοτίβα πλέγματος και είναι κατάλληλο για τεράστια συνεχή μπλοκ κειμένου και γραφικών.
Στην ουσία, είναι ένας τεράστιος ορθογώνιος χώρος μέσα στη σελίδα που λειτουργεί ως οριοθέτηση για το κείμενο.
5. Πλέγμα γραμμής βάσης:
Ένα βασικό πλέγμα είναι λίγο πιο τεχνικό. καθορίζεται από τη θέση του κειμένου. Ουσιαστικά, αναφέρεται στο προβάδισμα ή στο διάστημα μεταξύ των γραμμών βάσης.
Αυτό το πλέγμα βοηθά στην παροχή μιας θετικής εμπειρίας ανάγνωσης για τον αναγνώστη, ιδιαίτερα όταν υπάρχει πολύ περιεχόμενο για ανάγνωση. Αν και είναι ζωτικής σημασίας για τον σχεδιασμό εκτύπωσης, όπως οι διατάξεις βιβλίων, είναι εξίσου κρίσιμο για το σχεδιασμό στο διαδίκτυο.
Εξετάστε την επίδραση της απόστασης γραμμών στην αναγνωσιμότητα μιας σελίδας προορισμού. Εάν το κείμενο είναι υπερβολικά συμπυκνωμένο, ο χρήστης μπορεί να εγκαταλείψει εντελώς τον ιστότοπο. Διατηρήστε έναν κατάλληλο συνδυασμό κειμένου και λευκού χώρου.
4 Βέλτιστες Πρακτικές Χρήσης Πλέγματος στο Σχεδιασμό Ιστού
Υπάρχουν πολλές λέξεις και ιδέες για να εξοικειωθείτε και να κατανοήσετε στη σφαίρα του σχεδιασμού ιστοσελίδων, αλλά όχι περισσότερο από τη σημασία των πλεγμάτων στο σχεδιασμό ιστοσελίδων.
Ανάμεσα στα διάφορα στοιχεία που αποτελούν μια δομή πλέγματος, στους πολυάριθμους διαθέσιμους τύπους πλέγματος και γνωστικές διαδικασίες που εμπλέκεται στον καθορισμό του τύπου πλέγματος που ταιριάζει καλύτερα με το περιεχόμενο και το σχέδιό σας, υπάρχουν πολλά να λάβετε υπόψη.
1. Τηρείτε τον κανόνα των τρίτων:
Μια άλλη ιδέα σχεδιασμού ιστοσελίδων είναι η Κανόνας των Τρίτων, που βοηθά τους σχεδιαστές στη δημιουργία αισθητικά ισορροπημένων διατάξεων πλέγματος και τοποθέτησης εικόνων.
Αυτή η προσέγγιση επικαλύπτει ένα πλέγμα που χωρίζει την περιοχή σχεδίασης οριζόντια και κάθετα σε τρίτα. Αυτό διαιρεί οποιαδήποτε εικόνα ή τμήμα/χώρο σελίδας σε εννέα ίσα τμήματα που ορίζονται από τις τομές των γραμμών.
Σύμφωνα με τον Κανόνα των Τρίτων, η τοποθέτηση «αντικειμένων ενδιαφέροντος» στα «τρίτα» μιας εικόνας θα κατευθύνει την προσοχή του χρήστη σε αυτά με πιο ισχυρό, αισθητικά ελκυστικό τρόπο.
Στο σχεδιασμό ιστοσελίδων, οι σχεδιαστές χρησιμοποιούν συχνά τον κανόνα των τρίτων για να τους βοηθήσουν να κάνουν μερικές από τις πιο κρίσιμες επιλογές πλέγματος και διάταξης.
2. Σεβαστείτε τη Χρυσή Αναλογία:
Πολλοί σχεδιαστές χρησιμοποιούν μια ιδέα γνωστή ως Χρυσή Αναλογία για να βελτιστοποιήσουν την κλίμακα, την ισορροπία και τη διάταξη των σχεδίων πλέγματος τους. ο Χρυσή αναλογία είναι μια αναλογία που ισούται με 1.6180 στην απλούστερη μορφή της.
Το χρυσό ορθογώνιο είναι ένα ορθογώνιο του οποίου το μήκος είναι 1.6180 φορές το πλάτος του με βάση τη Χρυσή Αναλογία. Αυτό υποδεικνύει ότι εάν το πλάτος του στοιχείου είναι 100 px, το μήκος θα είναι 161.80 px.
Αυτό ισχύει για το πλάτος και το μήκος γειτονικών εικόνων, αντικειμένων ή μορφών, καθώς και για την ανάπτυξη ενός μεμονωμένου σχήματος ή στοιχείου.
Χρησιμοποιώντας τη Χρυσή Αναλογία, οι σχεδιαστές μπορούν να καθορίσουν πώς θα χωρίσουν τον διαθέσιμο οριζόντιο χώρο στη σελίδα και πόσο χώρο θα αφήσουν για και γύρω από κάθε κομμάτι, μεταξύ άλλων.
Μια περίπτωση στην οποία αυτό μπορεί να συμβεί είναι κατά την ανάπτυξη της ενότητας ηρώων ενός ιστότοπου. Εάν επιλέξετε μια διάταξη πλήρους πλάτους και τη χωρίσετε κάθετα σε δύο ενότητες: την εικόνα του ήρωα και το κείμενο του ήρωα.
Επιπλέον, θα χρειαστεί να αποφασίσετε για το μέγεθος της εικόνας, το μέγεθος του κειμένου και ούτω καθεξής σε αυτήν τη διαδικασία μικροσχεδίασης.
Ωστόσο, πρέπει πρώτα να αποφασίσετε για μια αναλογία στηλών, η οποία θα σας καθοδηγήσει στον προσδιορισμό του μεγέθους της εικόνας και της γραμματοσειράς σας, καθώς και ποια στοιχεία θέλετε να τονίσετε περισσότερο ή λιγότερο ή εάν θέλετε να δώσετε ίση εστίαση σε καθένα.
Τότε έρχεται στο παιχνίδι η απόφαση για το πώς να χωρίσετε το μέρος του ήρωα ως προς το ποιο στοιχείο θα πρέπει να είναι μεγαλύτερο ή πιο εμφανές. Εδώ είναι χρήσιμη η Χρυσή Αναλογία.
Αυτή η οδηγία λαμβάνει υπόψη μια ποικιλία στοιχείων, όπως το πλάτος της σελίδας, το μέγεθος περιεχομένου και τον αριθμό και το μέγεθος των λειτουργικών μονάδων που θα χρειαστεί το περιεχόμενο σε ένα πλέγμα.
Όσον αφορά την προσβασιμότητα, η Golden Ratio κατευθύνει την προσοχή του χρήστη σε ορισμένα σημεία ή τοποθεσίες σε μια οθόνη, κάτι που ακριβώς στοχεύουν οι σχεδιαστές όταν καθιερώνουν και εφαρμόζουν την ιεραρχία πληροφοριών του περιεχομένου και του σχεδιαστικού σχήματος.
3. Κάντε χώρο για Λευκό Διάστημα:
Ως σχεδιαστές ιστοσελίδων, καταλαβαίνουμε πόσο κρίσιμος είναι ο λευκός χώρος όσον αφορά την αναγνωσιμότητα, την ιεραρχία πληροφοριών, την επεκτασιμότητα και τον γενικό χώρο αναπνοής γύρω και μεταξύ των στοιχείων σχεδίασης.
Δεδομένου του ζωτικού ρόλου του λευκού χώρου στη σχεδίαση διάταξης, είναι φυσικό να τον χρησιμοποιούν ο ιστότοπος και τα πλέγματα διάταξης.
Οι διατάξεις πλέγματος καθορίζονται, στην ουσία, όχι μόνο από το πλάτος και το ύψος των στηλών και των σειρών τους αλλά και από το πλάτος και το ύψος του λευκού χώρου μεταξύ τους, που αναφέρεται ως απόσταση.
Για παράδειγμα, μια μέθοδος σχεδίασης βάσει πλέγματος που χρησιμοποιούν συχνά οι σχεδιαστές Ιστού είναι γνωστή ως Σύστημα Πλέγματος 8 pt, μια έννοια που καθιερώθηκε από τις οδηγίες Σχεδιασμού Υλικού της Google.
Η μέθοδος Material Design χρησιμοποιεί ένα πλέγμα 8 επί 8 pt. Κάθε στοιχείο στον ιστότοπο θα είναι πολλαπλάσια/διαιρούμενο με το οκτώ στην πράξη.
Το συναρπαστικό είναι ότι αυτός ο κανόνας δεν ισχύει μόνο για στοιχεία πλέγματος όπως φωτογραφίες, κουμπιά ή κείμενο, αλλά και για μονάδες λευκού χώρου, που πρέπει να είναι πολλαπλάσια του οκτώ.
Επομένως, ενώ εξετάζετε τον τρόπο τοποθέτησης διαστημάτων στις στήλες ή τις σειρές σας, πρέπει επίσης να ποσοτικοποιήσετε και να καθορίσετε την ποσότητα του λευκού χώρου, σε αυτήν την περίπτωση σε πολλαπλάσια του οκτώ.
Αυτό δείχνει πόσο κρίσιμος είναι ο λευκός χώρος στο σχεδιασμό του πλέγματος, σε σημείο που οι διαστάσεις και οι απαιτήσεις του είναι εξίσου κρίσιμες με τις στήλες και τις σειρές.
Η αρχική σελίδα του Elementor Experts δείχνει πόσο δυνατός μπορεί να είναι ο λευκός χώρος, ιδιαίτερα στην αρχική σελίδα ενός ιστότοπου.
Επειδή ο απώτερος σκοπός της αρχικής σελίδας είναι να υποχρεώσει τους θεατές να ενεργήσουν και να μάθουν για την πλατφόρμα Experts, ο λευκός χώρος υποστηρίζει αυτή τη διαδικασία δίνοντας προτεραιότητα στις πληροφορίες.
Αυτό σημαίνει ότι δεδομένου ότι η πρόταση αξίας της πλατφόρμας έχει τόση σημασία και «χρόνος να λάμψει» στην αρχική σελίδα, οι επισκέπτες του ιστότοπου καταλαβαίνουν αμέσως την αυξημένη αξία που πρόκειται να βιώσουν.
4. Honor Responsive Design:
Ο αποκριτικός σχεδιασμός αναφέρεται στη δυνατότητα προσαρμογής της διάταξης και του περιεχομένου μιας σελίδας ή ενός ιστότοπου σε πολλαπλές συσκευές και μεγέθη προγράμματος περιήγησης. Αυτό σημαίνει ότι όταν το μέγεθος της οθόνης ποικίλλει, ο αριθμός των στηλών και, φυσικά, το πλάτος τους, θα ποικίλλει επίσης.
Ωστόσο, υπάρχει μια εγγενής διάκριση μεταξύ των τυπικών δικτύων σχεδίασης και των πλεγμάτων που αποκρίνονται.
Ενώ τα πλέγματα σχεδίασης έχουν οριστεί σε ένα πλέγμα γραμμής βάσης, τα πλέγματα που αποκρίνονται είναι ευέλικτα, επιτρέποντας στις στήλες πλέγματος να αλλάζουν το μέγεθος και να επανατοποθετούνται ανάλογα με το παράθυρο προβολής του χρήστη.
Με ένα σταθερό πλέγμα, η μείωση του μεγέθους της οθόνης θα σας οδηγήσει αυτόματα στο επόμενο σημείο διακοπής και τα πλευρικά περιθώρια θα μειωθούν επίσης αυτόματα μέχρι να φτάσετε στο επόμενο σημείο διακοπής.
Ένα αποκριτικό πλέγμα ή ρευστό πλέγμα είναι αυτό που βλέπετε όταν τα στοιχεία αλλάζουν δυναμικά ως απόκριση στη συρρίκνωση του προγράμματος περιήγησης/της οθόνης. Τα αποκριτικά πλέγματα θα ευθυγραμμίσουν και θα οργανώσουν λογικά το υλικό σας.
Αυτό σημαίνει ότι όταν η θύρα προβολής μειώνεται, τα πλακίδια και το περιεχόμενο του πλέγματος θα συρρικνωθούν επίσης αναλογικά.
Ανατομία πλέγματος – Τι πρέπει να γνωρίζετε;
Όλα τα πλέγματα στο σχεδιασμό ιστοτόπων, ανεξάρτητα από το μέγεθος ή την πολυπλοκότητά τους, έχουν ορισμένα στοιχεία που τα χαρακτηρίζουν ως διατάξεις πλέγματος:
1. Περιθώρια:
Τα περιθώρια είναι ο αρνητικός χώρος μεταξύ της μορφής και του εξωτερικού περιγράμματος του περιεχομένου, μερικές φορές γνωστό ως "εξωτερικές υδρορροές". Σε κινητά, τα πλευρικά περιθώρια έχουν συνήθως πλάτος 20-30 εικονοστοιχεία και διαφέρουν σημαντικά μεταξύ επιτραπέζιου και κινητού.
Το Margin μπορεί να είναι εξοικειωμένο με τη γλώσσα HTML & CSS, όπου χρησιμοποιείται ως ιδιότητα για τη δημιουργία χώρου γύρω από ένα στοιχείο σχεδίασης ή ένα κοντέινερ. Λάβετε υπόψη ότι το μέγεθος ενός περιθωρίου δεν επηρεάζει το μέγεθος του διπλανού κειμένου.
Απλώς καθορίζει το μέγεθος του χώρου γύρω από το στοιχείο, το οποίο στο πλαίσιο των πλεγμάτων διάταξης αναφέρεται ρητά στο διάστημα μεταξύ της μορφής και του εξωτερικού περιγράμματος του περιεχομένου.
2. Υδρορροές:
Οι υδρορροές είναι οι γραμμές που χωρίζουν τις στήλες και τις σειρές σε μεμονωμένες μονάδες. Το 20px είναι ένα αρκετά τυπικό μέγεθος υδρορροής. Ο σκοπός των υδρορροών είναι να παρέχουν αρνητικό χώρο (οποιουδήποτε μεγέθους) μεταξύ στηλών και σειρών.
Με την απλούστερη έννοια, οι υδρορροές είναι η περιοχή μεταξύ στηλών και σειρών. Οι υδρορροές είναι ιδιαίτερα σημαντικές στις διατάξεις τοιχοποιίας, όπου το πλάτος της υδρορροής είναι ένα από τα πιο κρίσιμα στοιχεία.
3. Ενότητες:
Οι ενότητες είναι οι μονάδες που γεμίζουν χώρο που σχηματίζονται από τη διασταύρωση σειρών και στηλών. Οι ενότητες ή οι ενότητες περιεχομένου, όπως συχνά αναφέρονται, είναι τα δομικά στοιχεία μιας σελίδας, καθώς κάθε στοιχείο σχεδίασης (κείμενο, γραφικά και κουμπιά, για παράδειγμα) ταιριάζει στις μονάδες που παράγονται από τα ορθογώνια μοτίβα σε ένα πλέγμα.
4. Σειρές:
Όπως μπορείτε να υποθέσετε, οι σειρές είναι τα οριζόντια μέρη του πλέγματος. Παραδόξως, ο σχεδιασμός ιστοσελίδων συχνά παραβλέπει τη σημασία των σειρών σε ένα πλέγμα. Ωστόσο, αυτό δεν είναι μια σπουδαία πρακτική.
5. Στήλες:
Οι στήλες είναι κάθετα κομμάτια που καλύπτουν το ύψος της περιοχής περιεχομένου και θεωρούνται ως «δομικά στοιχεία» του πλέγματος. Αυτό που κάνει τις στήλες να ξεχωρίζουν είναι ότι όσο περισσότερες στήλες σε ένα πλέγμα, τόσο πιο ευέλικτο γίνεται το πλέγμα.
Θα το αντιμετωπίσουμε με περισσότερες λεπτομέρειες σύντομα. Ενώ το πλάτος των στηλών εξαρτάται πάντα από τον σχεδιαστή, οι κοινές πρακτικές υπαγορεύουν να χρησιμοποιούνται 12 στήλες σε επιτραπέζιους υπολογιστές, 8 σε tablet και 4 σε κινητά.
Τα περισσότερα πλέγματα έχουν πλάτη στηλών 60–80 εικονοστοιχεία. Το πλάτος της στήλης έχει σημαντικό αντίκτυπο στο πλάτος του πραγματικού περιεχομένου σας.
Συχνές Ερωτήσεις: Πλέγματα σχεδίασης ιστοσελίδων 2024
👉 Ποιο είναι το καλύτερο πλέγμα για το σχεδιασμό ιστοσελίδων;
Το Bootstrap είναι ένα κομψό, απλό και ισχυρό πλαίσιο front-end για κινητά που κάνει την ανάπτυξη ιστού ταχύτερη και απλούστερη. Για εμάς, αυτή είναι η πιο δημοφιλής επιλογή. Συχνά, δώδεκα στήλες με εσοχές. Μια τυποποιημένη και απλή μέθοδος.
✅ Τι είναι ένας ιστότοπος με διάταξη πλέγματος;
Το πλέγμα ιστότοπου είναι μια τεχνική για την τακτοποίηση και την ευθυγράμμιση του υλικού σε μια σελίδα. Λειτουργεί ως ο σκελετός ή το θεμελιώδες πλαίσιο της διεπαφής χρήστη σας. Τα πλέγματα ιστοτόπων βοηθούν τους σχεδιαστές να κάνουν επιλογές σχεδίασης και να παράγουν μια θετική εμπειρία χρήστη.
👉 Πώς λειτουργούν τα πλέγματα ιστοτόπων;
Τα συστήματα πλέγματος είναι αόρατα πλαίσια που χρησιμοποιούνται στο σχεδιασμό ιστοσελίδων που ομαδοποιούν όλα τα στοιχεία μιας σελίδας μαζί. Το πλέγμα λειτουργεί ως πλαίσιο ή οπλισμός γύρω από τον οποίο ένας σχεδιαστής μπορεί να τακτοποιήσει οπτικά στοιχεία (εικόνες, γλυφές, παραγράφους, κ.λπ.) με λογικό, εύκολα απορροφήσιμο τρόπο.
👀 Πώς μια διάταξη πλέγματος ενισχύει τον σχεδιασμό ιστοσελίδων;
Τα πλέγματα μπορεί να μειώσουν και να βελτιώσουν σημαντικά τον χρόνο σχεδίασής σας λειτουργώντας ως οδηγός για το πού να τοποθετήσετε, να τοποθετήσετε και να κλιμακώσετε τα αντικείμενα. Αντί να βάζετε αυθαίρετα εξαρτήματα μέχρι να αποκτήσετε μια ευχάριστη σύνθεση, ένα πλέγμα θα πρέπει να σας βοηθήσει να βρείτε μια φυσική λύση.
✅ Γιατί οι σχεδιαστές χρησιμοποιούν πλέγματα;
Τα πλέγματα διευκολύνουν τους σχεδιαστές να συνεργάζονται για ιδέες, περιγράφοντας πού πρέπει να τοποθετηθούν τα κομμάτια. Τα συστήματα πλέγματος βοηθούν στην αποσύνδεση των εργασιών σχεδιασμού διεπαφής, επιτρέποντας σε αρκετούς σχεδιαστές να εργαστούν σε διαφορετικά στοιχεία της διάταξης, ενώ παραμένουν βέβαιοι ότι η εργασία τους θα είναι ομαλά ενοποιημένη και συνεπής.
👉 Πόσες στήλες πρέπει να έχει ένα πλέγμα στο σχεδιασμό ιστοσελίδων;
Αν και δεν υπάρχει επίσημη ανάγκη για τον αριθμό των στηλών, η πλειονότητα των αρχιτεκτονικών πλέγματος ιστοτόπων χρησιμοποιούν ένα πλέγμα 12 στηλών. Επιπλέον, ένα πλέγμα ιστότοπου περιέχει κανονικό διάστημα μεταξύ των στηλών, που αναφέρονται ως υδρορροές, και το διάστημα έξω από το πλέγμα αναφέρεται ως περιθώρια.
💁 Γιατί χρησιμοποιούμε πλέγμα 12 στηλών;
Η πλειονότητα των εκδόσεων Bootstrap απαιτούν μόλις 12 στήλες για να χωρέσουν τα ακόλουθα: Η δημιουργία διάταξης είναι απλοποιημένη. Διάταξη φιλική προς το κινητό. Ανάλογα μπλοκ για τη διατήρηση της συμμετρίας.
✔️ Τι είναι το πλέγμα 12 στηλών;
Για ιστότοπους, οι σχεδιαστές μπορούν να χρησιμοποιήσουν από δύο έως δώδεκα ή ακόμα και δεκαέξι στήλες για να καλύψουν το εύρος μιας σελίδας προορισμού. Μπορούν να τακτοποιήσουν κείμενο και γραφικά σε μία στήλη ή σε πολλές στήλες.
👉 Πώς χρησιμοποιείτε τα πρότυπα πλέγματος;
Το χαρακτηριστικό grid-template-areas ορίζει τις περιοχές της διάταξης πλέγματος. Μπορείτε να ονομάσετε στοιχεία πλέγματος κάνοντας αναφορά σε αυτά στην ιδιότητα grid-template-areas μέσω της ιδιότητας grid-area. Οι απόστροφοι δηλώνουν κάθε περιοχή. Για να αναφερθείτε σε ένα αντικείμενο πλέγματος που δεν έχει όνομα, χρησιμοποιήστε ένα σύμβολο τελείας.
Γρήγορες συνδέσεις:
- Οι καλύτεροι κατασκευαστές ιστοτόπων εκτός σύνδεσης
- Κόστος Κατασκευής Ιστοσελίδας
- Πώς να φτιάξετε έναν προσωπικό ιστότοπο
Συμπέρασμα: Website Design Grids 2024
Τώρα που καταλαβαίνετε γιατί τα πλέγματα είναι κρίσιμα στο σχεδιασμό ιστοσελίδων και πώς να τα χρησιμοποιήσετε στον ιστότοπό σας, ήρθε η ώρα να ξεκινήσετε τη μέτρηση και την ευθυγράμμιση.
Λάβετε υπόψη ότι αυτή η αρχή ισχύει για κάθε στοιχείο σχεδίασης: στοίχιση γραφικών στοιχείων και στοιχείων οριζόντια και κάθετα, ευθυγράμμιση στοιχείων κειμένου σε μια γραμμή βάσης και σωστή επικέντρωση κάθε είδους περιεχομένου στον ιστότοπο.
Η διαδικασία σχεδιασμού σας και το τελικό προϊόν θα εκτιμηθούν πολύ και ανυπομονούμε να δούμε τι έχετε στο κατάστημα.
