Πώς να χρησιμοποιήσετε πλέγματα κατά τη δημιουργία πρωτοτύπων σελίδων

Αυτό το άρθρο θα είναι χρήσιμο εάν δημιουργήσετε πρωτότυπα ιστότοπων για να φέρετε τις ιδέες σας σε σχεδιαστές ιστοσελίδων και προγραμματιστές. Το σεμινάριο θα σας διδάξει πώς να κάνετε πρωτότυπο ένα πλέγμα.

Αποποίηση ευθύνης: εάν κάνετε ένα πρωτότυπο χωρίς πλέγμα, δεν θα συμβεί τίποτα τρομερό. Ένας επαγγελματίας σχεδιαστής ή web developer θα προσθέσει ένα πλέγμα για εσάς. Αλλά αν μάθετε πώς να εργαστείτε με τα δίκτυα, η ποιότητα των πρωτοτύπων θα αυξηθεί δραματικά και θα εξετάσετε τις σελίδες των τοποθεσιών με διαφορετικό τρόπο.

Τι είναι ένα πλέγμα και γιατί το χρησιμοποιείτε

Ένα πλέγμα είναι ένα σύστημα κάθετων ή κάθετων και οριζόντιων γραμμών που χωρίζει μια σελίδα σε στήλες ή κελιά. Δημιουργήθηκε χρησιμοποιώντας μια στήλη πλέγματος ή ένα κελί από τη δομή ή τον σκελετό της σελίδας, με την οποία οι σχεδιαστές οργανώνουν περιεχόμενο.

Δηλαδή, με τη βοήθεια των πλέγματος δημιουργείτε ένα πλαίσιο στο οποίο φοράτε όλα τα στοιχεία της σελίδας: λογότυπο, μενού, ρυθμιστικό, μορφή, εικόνα και ούτω καθεξής. Χάρη στον σκελετό, τα στοιχεία της σελίδας μπορούν να τοποθετηθούν αρμονικά, να επιλέξουν τις σχετικές και απόλυτες διαστάσεις τους, να ρυθμίσουν τον οπτικό ρυθμό.

Ένα σημαντικό σημείο: τα πλέγματα παρέχουν ευελιξία σχεδίασης, η οποία είναι απαραίτητη για την προσαρμογή της διάταξης σε διαφορετικά μεγέθη οθόνης. Δηλαδή, η χρήση του πλαισίου - ένα βήμα για τη δημιουργία μιας ανταποκρινόμενης σελίδας.

Στην τελική σελίδα, τα πλέγματα συνήθως δεν είναι ορατά. Αλλά μπορούν να φανούν σε πρωτότυπα και διατάξεις.

Ποια είναι τα δίκτυα

Εάν δεν ασχολείστε επαγγελματικά με το σχεδιασμό και την ανάπτυξη ιστού, αρκεί να γνωρίζετε για την ύπαρξη δύο τύπων πλεγμάτων: στήλης και αρθρωτής.

Ένα πλέγμα στήλης είναι ένα σύστημα κάθετων γραμμών που χωρίζει μια σελίδα σε στήλες και εσοχές.

Οι σκοτεινές και ευρείες περιοχές στην εικόνα είναι στήλες, ελαφρές και στενές είναι εσοχές.

Το σπονδυλωτό πλέγμα είναι ένα σύστημα κάθετων και οριζόντιων γραμμών που χωρίζει τη σελίδα σε ενότητες.

Σε αυτήν την περίπτωση, οι ενότητες είναι ορθογώνια 20 έως 20 εικονοστοιχείων, σημειωμένα με παχύτερες γραμμές.

Αν δεν είστε επαγγελματίας σχεδιαστής ιστοσελίδων και προγραμματιστής, χρησιμοποιήστε ένα πλέγμα στηλών για να δημιουργήσετε πρωτότυπα. Υπάρχουν τουλάχιστον δύο λόγοι για αυτό. Πρώτον: τα πλέγματα των στηλών είναι πολύ δημοφιλή στο διαδίκτυο. Δημιουργούν δημοφιλή πλαίσια, για παράδειγμα, Bootstrap, Bulma, Skeleton, τα οποία χρησιμοποιούν οι προγραμματιστές ιστού για τη διάταξη σελίδας.

Ο δεύτερος λόγος: για το πρωτότυπο της σελίδας, αρκεί να χρησιμοποιήσετε το πλέγμα της στήλης. Εάν είναι απαραίτητο, ένας επαγγελματίας σχεδιαστής ιστοσελίδων θα προσθέσει ένα δομοστοιχειωτό πλέγμα όταν μετατρέψει το σκίτσο σας σε μια ολοκληρωμένη διάταξη.

Πώς να χρησιμοποιήσετε τα μάτια κατά τη διάρκεια των πρωτοτύπων

Αυτό είναι ένα πρακτικό τμήμα που διδάσκει πώς να χρησιμοποιείτε πλέγματα κατά τη δημιουργία πρωτοτύπων.

Πού να σχεδιάσετε πλέγματα

Η απάντηση εξαρτάται από τα εργαλεία που χρησιμοποιείτε για τη δημιουργία πρωτοτύπων. Τα πλέγματα μπορούν να σχεδιαστούν με το χέρι αν το πρωτότυπο βρίσκεται σε ένα φύλλο χαρτιού. Αν το σκίτσο δημιουργείται χρησιμοποιώντας ειδικά προγράμματα και υπηρεσίες, βυθίστε τις ρυθμίσεις. Τα εργαλεία του πιο δημοφιλούς λογισμικού δημιουργίας πρωτοτύπων έχουν πλέγματα. Παραδείγματα παρακάτω.

Για να ενεργοποιήσετε το πλέγμα στο Moqups, κάντε κλικ στο εικονίδιο Workspace και επιλέξτε την επιλογή Show network grid. Εάν χρειάζεστε ένα αρθρωτό πλέγμα, ελέγξτε την επιλογή Εμφάνιση χαρτιού.

Για να ενεργοποιήσετε τα πλέγματα στο Proto.io, επιλέξτε το μενού Προτιμήσεις - Ρυθμίσεις πλέγματος.

Επιλέξτε την επιλογή Εμφάνιση διάταξης. Επιλέξτε τον αριθμό των στηλών, το πλάτος τους και το πλάτος των περιθωρίων μεταξύ των στηλών και κατά μήκος των άκρων της σελίδας. Αυτές οι ρυθμίσεις θα συζητηθούν παρακάτω.

Αν χρειάζεστε ένα αρθρωτό πλέγμα, ελέγξτε την επιλογή Εμφάνιση δικτύου και καθορίστε τις ρυθμίσεις.

Εάν χρησιμοποιείτε το πρωτότυπο Justinmind, στον επεξεργαστή επιλέξτε την καρτέλα Πρότυπα και χρησιμοποιήστε ένα από τα πλέγματα προτύπων: 12 ή 16 στήλες.

Εάν χρησιμοποιείτε άλλο λογισμικό πρωτοτυποποίησης, εντοπίστε τα μάτια σας.

Πώς να φτιάξετε ένα πλέγμα

Δημιουργία πλέγματος - επιλέξτε τον αριθμό των στηλών, το πλάτος τους, καθώς και το πλάτος των περιθωρίων μεταξύ των στηλών και κατά μήκος των άκρων της σελίδας.

Ερώτηση: Πόσες στήλες θα πρέπει να βρίσκονται στο πλέγμα της στήλης; Η σύντομη απάντηση είναι 12. Το σημείο δεν είναι καν ότι τα περισσότερα πλαίσια CSS που χρησιμοποιούν οι προγραμματιστές ιστού είναι χτισμένα σε πλέγματα 12 στηλών. Εάν είναι απαραίτητο, αλλάζουν οι προεπιλεγμένες ρυθμίσεις των πλαισίων.

Ο αριθμός 12 είναι σχεδόν μαγικός: διαιρείται σε 6, 4, 3 και 2. Αυτό σημαίνει ότι σε μια σελίδα με ένα πλέγμα 12 στηλών σε μια σειρά μπορείτε να κανονίσετε αρμονικά έξι, τέσσερα, τρία ή δύο στοιχεία. Δεδομένου ότι ο αριθμός διαιρείται πάντοτε από μόνη της και από τον ένα, μπορείτε να τοποθετήσετε 12 ή ένα στοιχείο στη σειρά.

Επιπλέον, αν δεν δίνετε προσοχή στις ακραίες στήλες, το πλέγμα των 12 στηλών σας επιτρέπει να τοποθετείτε αρμονικά σε μια σειρά από πέντε ή 10 στοιχεία.

Τα πλέγματα με διαφορετικό αριθμό στηλών δεν παρέχουν τέτοια ευελιξία. Για παράδειγμα, το 16 χωρίζεται σε 8, 4, και 2. Για να τοποθετήσετε αρμονικά τρία ή έξι στοιχεία στη σειρά, μπορείτε να ρίξετε δύο εξωτερικές στήλες.

Αλλά για να βάλετε μια σειρά από πέντε ή 10 στοιχεία, θα πρέπει να ρίξετε τις τρεις ακραίες στήλες. Αυτό δεν είναι πολύ βολικό.

Κατά την επιλογή του αριθμού των στηλών στο πλέγμα, απλώστε το περιεχόμενο που σκοπεύετε να τοποθετήσετε στη σελίδα. Για παράδειγμα, εάν κάνετε μια σελίδα περιεχομένου χωρίς πλευρική γραμμή, αρκεί μια στήλη ή ένας ευρύς ορθογώνιος χώρος στο κέντρο της σελίδας. Και αν δημιουργήσετε μια σελίδα χαρτοφυλακίου ή μια συλλογή φωτογραφιών, θα χρειαστείτε ένα πολύπλοκο δομοστοιχείο.

Αλλά για να δημιουργήσετε ένα πρωτότυπο σε 99 περιπτώσεις από τα 100 είναι βολικό να εργαστείτε με ένα πλέγμα 12 στηλών. Ένας επαγγελματίας σχεδιαστής ή web developer, χάρη στο πλέγμα της στήλης, θα μετατρέψει το πρωτότυπό σας σε διάφορες διατάξεις για διαφορετικά μεγέθη οθόνης.

Κατά την κατασκευή ενός πλέγματος, πρέπει να επιλέξετε το πλάτος των περιθωρίων στις άκρες της σελίδας, το πλάτος των περιθωρίων μεταξύ των στηλών και το πλάτος των ίδιων των στηλών. Σε γενικές γραμμές, κατά τη διάρκεια των πρωτοτύπων, δεν είναι απαραίτητο να προσδιοριστούν αυτές οι τιμές με ακρίβεια των εικονοστοιχείων. Αργότερα, ο σχεδιαστής και ο προγραμματιστής ιστού θα φροντίσει αυτό. Για λόγους ευκολίας, χρησιμοποιήστε τις παρακάτω συστάσεις:

  • Στο επιλεγμένο πρόγραμμα για τη δημιουργία πρωτοτύπων, χρησιμοποιήστε τη σελίδα πρότυπου για την επιφάνεια εργασίας. Το πλάτος της σελίδας πρέπει να είναι τουλάχιστον 960 pixels. Αφήστε την προσέγγιση των κινητών πρώτων επαγγελματιών.
  • Τα περιθώρια πρέπει να είναι τουλάχιστον διπλάσια από το πλάτος των περιθωρίων μεταξύ των στηλών (υδρορροές). Αυτή η τεχνική φαίνεται να κατευθύνει την άποψη του επισκέπτη μέσα στη σελίδα.
  • Όσο μεγαλύτερη είναι η απόσταση ανάμεσα στις στήλες, τόσο περισσότερο στη σελίδα "αέρα" ή στον ελεύθερο χώρο.

Ένα παράδειγμα ενός πλέγματος με το οποίο μπορείτε να δουλέψετε μπορεί να δει στην εικόνα.

Πώς να χρησιμοποιήσετε ευέλικτα το πλέγμα στηλών κατά το σχεδιασμό της διάταξης σελίδας

Πλέγμα στήλης - βάση της διάταξης της σελίδας. Αυτό μπορεί να απεικονιστεί με μια τυπική διάταξη από το άρθρο "Πώς να δημιουργήσετε σελίδες πρωτοτύπων" (βλ. Φωτογραφία).

Στην περίπτωση αυτή, η κεφαλίδα και το υποσέλιδο καταλαμβάνουν και τις 12 στήλες. Η κύρια μονάδα και η πλευρική γραμμή μπορούν να καταλαμβάνουν 9 και 3 ή 10 και 2 στήλες, αντίστοιχα.

Με τη βοήθεια του πλέγματος της στήλης, είναι δυνατό να δημιουργηθούν πιο σύνθετες διατάξεις, για παράδειγμα, με τη διανομή των στηλών 5-5-2, 3-6-3 κ.ο.κ.

Δηλαδή, χρησιμοποιώντας ένα πλέγμα με 12 στήλες, είναι δυνατό να κατασκευαστούν διατάξεις που αποτελούνται από μπλοκ με διαφορετικά πλάτη. Μπορεί να υπάρχουν πολλές μπλοκ στη σειρά.

Κατά την επιλογή του αριθμού και του πλάτους των μπλοκ, καθοδηγείται από το περιεχόμενο που σκοπεύετε να δημοσιεύσετε στη σελίδα. Τα πραγματικά παραδείγματα θα βοηθήσουν στην κατανόηση αυτού.

Στη σελίδα "Συνδεδεμένα" υπάρχει ένα μενού πλοήγησης και κάρτες κατηγοριών.

Μια τέτοια διάταξη μπορεί να παρασταθεί με τη μορφή τεσσάρων τετραγώνων τριών στηλών σε πλάτος.

Ένα άλλο παράδειγμα από το site του "Svyaznoy": ένας κατάλογος των τηλεφώνων ενός κατασκευαστή με ένα μενού πλοήγησης και τέσσερις κάρτες προϊόντων στη σειρά.

Η διάταξη αυτής της σελίδας μπορεί να γίνει σε πλέγμα με 16 στήλες. Το μενού πλοήγησης θα λάβει τέσσερις στήλες και κάρτες προϊόντων - τρεις στήλες το καθένα.

Ένα πρακτικό παράδειγμα παρακάτω θα βοηθήσει στην καλύτερη κατανόηση των αρχών της εργασίας με ένα πλέγμα στηλών.

Χρησιμοποιώντας το πλέγμα: ένα παράδειγμα μιας σελίδας πρωτοτύπου

Για να φτιάξω ένα πρωτότυπο της σελίδας, χρησιμοποίησα ένα πλέγμα με 12 στήλες. Ενεργοποιήστε και το πλέγμα χαρτιού, για να διευκολύνετε την τοποθέτηση των στοιχείων στην κατακόρυφη κατεύθυνση.

Προσθέτω ένα λογότυπο, ένα κουμπί μετατροπής και ένα μενού πλοήγησης στην κεφαλίδα. Δώστε προσοχή στην ευθυγράμμιση του πλέγματος: τα στοιχεία καταλαμβάνουν 4, 4 και 9 στήλες, αντίστοιχα.

Κάτω από την κεφαλίδα προσθέστε ένα μεγάλο ρυθμιστικό. Καταλαμβάνει 10 κεντρικά ηχεία.

Κάτω από το ρυθμιστικό προσθέτω τρεις κάρτες προϊόντων, οι οποίες αποτελούνται από φωτογραφία, κείμενο και κουμπί πλοήγησης. Οι κάρτες καταλαμβάνουν τέσσερις στήλες.

Κάτω από τη σελίδα των καρτών χωρίζεται σε δύο κάθετες μπλοκ: την κύρια και την πλευρική γραμμή. Καταλαμβάνουν 8 και 4 στήλες αντίστοιχα.

Στο υποσέλιδο, προσθέστε πληροφορίες υπηρεσίας. Το πρωτότυπο της σελίδας μπορεί να προβληθεί χρησιμοποιώντας το κουμπί Προεπισκόπηση στην επάνω δεξιά γωνία της οθόνης.

Στη λειτουργία προεπισκόπησης, το πλέγμα δεν εμφανίζεται. Αυτό μας επιτρέπει να αξιολογήσουμε το πρωτότυπο χωρίς οπτικές παρεμβολές και, αν χρειαστεί, να επιστρέψουμε στην επεξεργασία. Για παράδειγμα, στη λειτουργία προεπισκόπησης, ο ολισθητήρας φαίνεται πολύ στενός.

Αυξάνω το πλάτος του ρυθμιστή σε 12 στήλες ή αφαιρέστε τους ελεγκτές από τις εικόνες στις εξώτατες στήλες του πλέγματος. Θυμάμαι ότι δίπλα στο μενού πλοήγησης άφησε χώρο για τη φόρμα αναζήτησης.

Το πρωτότυπο είναι έτοιμο.

Απλό και δυνατό εργαλείο

Αυτό είναι το τελικό χαρακτηριστικό του δικτύου. Με τη βοήθεια αυτού του εργαλείου, οποιοσδήποτε ειδικός χωρίς τεχνική κατάρτιση αποκτά ένα ευέλικτο πλαίσιο στο οποίο είναι βολικό να δημιουργηθούν πρωτότυπα της σελίδας. Μπορείτε να χρησιμοποιήσετε το πλέγμα σε ένα φύλλο χαρτιού ή σε δημοφιλή πρωτότυπα προγράμματα. Στο μέλλον, ο σχεδιαστής και ο προγραμματιστής θα είναι σε θέση να μετατρέψουν το πλέγμα της στήλης για να μετατρέψουν το πρωτότυπο με χαμηλές λεπτομέρειες σε μια πλήρους διαρρύθμισης και προσαρμοστική σελίδα.

Loading...

Αφήστε Το Σχόλιό Σας