Οι διαστάσεις ιστοσελίδες: χαρακτηριστικά, τις απαιτήσεις και τις συστάσεις

την ανάπτυξη της τεχνολογίας των ιστοσελίδων - μια πολύ πολύπλευρη διαδικασία. Ωστόσο, όλα τα στάδια της μπορούν να χωριστούν σε δύο κύριες συνιστώσες - ένα λειτουργικό και ενός εξωτερικού περιβλήματος. Ή, όπως το μέσο webmaster Beg End και Front End αντίστοιχα. Οι πελάτες που αγόρασαν ιστοσελίδες τους στην ανάπτυξη web στούντιο, συχνά αφελώς πιστεύουν ότι είναι απαραίτητο να επικεντρωθεί μόνο σε λειτουργικές, και θα είναι η σωστή απόφαση. Αλλά αυτό είναι αλήθεια σε ένα πολύ, πολύ σπάνιες περιπτώσεις, συνήθως για τις νέες επιχειρήσεις των έργων στο στάδιο των δοκιμών beta. Το υπόλοιπο της γραφιστικής και διεπαφή χρήστη είναι απλά υποχρεούνται να συμμορφώνονται με τα πρότυπα ανάπτυξης ιστοσελίδων και να αισθάνονται άνετα.

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

Πρότυπο πλάτος σε εικονοστοιχεία για την τοποθεσία που θα χρειαστείτε ποτέ

Πριν από την ανάπτυξη του φαινομένου μαζικής προσαρμοστικής διάταξης ήταν η ανάπτυξη ενός site με χιλιάδες pixels πλάτος. Αυτός ο αριθμός επιλέχθηκε για έναν απλό λόγο - ότι ο χώρος τοποθετήθηκε σε οποιαδήποτε οθόνη. Και υπάρχει κάποια λογική, αλλά ας υποθέσουμε ότι ένα άτομο είναι ακόμα τουλάχιστον HD-οθόνη στην επιφάνεια εργασίας. Σε αυτήν την περίπτωση, τη διάταξή σας θα φαίνεται μικρή λωρίδα στη μέση της οθόνης, όπου τα πάντα είναι φορμαρισμένο σε ένα σωρό, και στις πλευρές του τεράστιου μη χώρο. Τώρα ας υποθέσουμε ότι ένα άτομο ήρθε για να το web site σας από ένα tablet με οθόνη των 800 pixels σε πλάτος, και ελέγχεται από τις ρυθμίσεις «Εμφάνιση στην ιστοσελίδα της πλήρους έκδοσης.» Στην περίπτωση αυτή, η ιστοσελίδα σας θα εμφανίζεται σωστά, καθώς απλά δεν ταιριάζει στην οθόνη.

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

Διατάξεις για όλες τις περιστάσεις

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

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

Τα πιο δημοφιλή μεγέθη των χώρων

Ένας συμβιβασμός μεταξύ των δύο άκρων είναι ένα σχέδιο της διάταξης για τρεις ή τέσσερις μεγέθη οθόνης. Μεταξύ αυτών, πρέπει να είναι μια διάταξη για κινητές συσκευές. Το υπόλοιπο πρέπει να προσαρμοστούν για τις μικρές, μεσαίες και μεγάλες οθόνη του υπολογιστή. Πώς να επιλέξετε το πλάτος του χώρου; Παρακάτω σας παρουσιάζουμε HotLog στατιστικών υπηρεσιών για το μήνα Μάιο 2017, η οποία μας δείχνει την κατανομή της δημοτικότητας των διαφόρων την ανάλυση της οθόνης της συσκευής, καθώς και τη δυναμική της αλλαγής αυτού του δείκτη.

Από τον πίνακα είναι δυνατό να μάθετε πώς να καθορίσει το μέγεθος του χώρου που θέλετε να χρησιμοποιήσετε. Επιπλέον, μπορεί να συναχθεί το συμπέρασμα ότι η πιο κοινή μορφή σήμερα είναι η οθόνη το 1366 με 768 πόντους. Αυτές οι οθόνες εγκατασταθεί σε ένα φορητό υπολογιστή του προϋπολογισμού, έτσι ώστε η δημοτικότητά τους είναι φυσικό. Η επόμενη πιο δημοφιλής είναι μια Full HD-οθόνη, η οποία είναι το χρυσό πρότυπο για ταινίες, παιχνίδια, και, ως εκ τούτου, να δημιουργήσει σχεδιαγράμματα site. Επιπλέον στον πίνακα βλέπουμε επιτρέπουν κινητές συσκευές 360 x 640 pixels, καθώς και διάφορες εφαρμογές της επιφάνειας εργασίας και κινητών οθόνες μετά.

ντιζάιν

Έτσι, μετά από ανάλυση των στατιστικών στοιχείων, μπορούμε να συμπεράνουμε ότι η βέλτιστη πλάτος του τόπου έχει 4 παραλλαγές:

1. φορητούς υπολογιστές Έκδοση με 1366 pixels πλάτος.
2. Full HD-έκδοση.
3. 800 pixels σε πλάτος διάταξη μέγεθος για προβολή σε μικρές οθόνες επιφάνεια εργασίας.
4. Mobile έκδοση της ιστοσελίδας - 360 pixels σε πλάτος.

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

Κάντε μια ευέλικτη διάταξη

Υπάρχει μια εναλλακτική προσέγγιση που θα πρέπει μόνο να ρυθμίσετε το ελάχιστο μέγεθος της οθόνης, και το ίδιο το μέγεθος των χώρων θα ζητηθεί τοις εκατό. Στην περίπτωση αυτή, τα στοιχεία διεπαφής, όπως μενού, κουμπιά και λογότυπα, μπορεί να οριστεί σε απόλυτους όρους, εστιάζοντας στην ελάχιστο μέγεθος του πλάτους της οθόνης σε pixels. Μπλοκ με το περιεχόμενο, αντίθετα, θα τεντώνεται ανάλογα με το καθορισμένο τοις εκατό του πλάτους της περιοχής της οθόνης. Η προσέγγιση αυτή δεν επιτρέπει την ανίχνευση του μεγέθους του χώρου, όπως οι περιορισμοί για το σχεδιαστή και το ταλέντο για να νικήσει αυτό το απόχρωση.

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

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

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

Ας πάμε πίσω στο σχεδιασμό ιστοσελίδων

Είναι πολύ απλό - χρησιμοποιώντας τη χρυσή αναλογία, μπορείτε να σχεδιάσετε τις σελίδες που θα είναι πιο ευχάριστο στο ανθρώπινο μάτι. Υπολογίζεται σύμφωνα με τον τύπο του χρυσή τομή, θα βρείτε το άρρητος αριθμός 1,6180339887 ..., αλλά για ευκολία μπορείτε να χρησιμοποιήσετε τη στρογγυλεμένη τιμή του 1,62. Αυτό θα σημαίνει ότι αποκλείει τη σελίδα μας θα πρέπει να είναι 62% και 38% του συνόλου, δεν έχει σημασία τι μέγεθος που δημιουργείται πηγαίο κώδικα για την τοποθεσία που χρησιμοποιείτε. Παράδειγμα μπορείτε να δείτε στο παρακάτω σχήμα:

Η χρήση των νέων τεχνολογιών

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

Πώς να αυξήσετε την τοποθεσία χώρου εργασίας

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

Η μέγιστη ελεύθερο χώρο στο χώρο του δυνατού, κρύβοντας την πλοήγηση στο αναδυόμενο μενού. Αυτή η προσέγγιση είναι λογικό να χρησιμοποιούν όχι μόνο κινητό, αλλά και στην επιφάνεια εργασίας. Μετά από όλα, ο χρήστης δεν χρειάζεται όλη την ώρα για να δούμε τι έχει τίτλους στο δικτυακό σας τόπο - που έχει έρθει για το περιεχόμενο. Ένας χρήστης επιθυμεί να γίνει σεβαστή.

Ένα παράδειγμα ένας καλός τρόπος για να αποκρύψετε το μενού είναι η ακόλουθη διάταξη (εικονίζεται παρακάτω).

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

Ωστόσο, αυτό είναι προαιρετικό, μπορείτε να αφήσετε το πλοήγησης που είναι πάντα σε θέαμα. Αλλά μπορείτε να ένα όμορφο στοιχείο του σχεδιασμού, δεν είναι απλά μια λίστα με συνδέσμους για το δημοφιλές site κάνουν. Χρησιμοποιήστε το διαισθητικό εικόνες εκτός κειμένου συνδέσμους ή ακόμα και να τα αντικαταστήσει. Θα επιτρέψει επίσης το site σας σε πιο αποτελεσματική χρήση του χώρου της οθόνης της συσκευής σας.

Best Website - προσαρμοστική

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

Adaptive ονομάζεται ένα σχέδιο που φαίνεται σε διαφορετικές συσκευές εξίσου καλά. Αυτή η προσέγγιση θα επιτρέψει το site σας να είναι σαφείς και εύκολο ακόμη και για ένα φορητό υπολογιστή, τουλάχιστον για το tablet, ακόμα και σε ένα smartphone. Πέτυχε το αποτέλεσμα αυτό οφείλεται σε αυτόματες αλλαγές στο χώρο εργασίας του πλάτους της οθόνης. Χρησιμοποιώντας προσαρμοστική φύλλα στυλ για την περιοχή, παίρνετε το δυνατόν σωστή απόφαση.

Αυτό που διακρίνει την προσαρμοστικός σχεδιασμός της διαθεσιμότητας των διαφορετικές εκδόσεις της ιστοσελίδας σας

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

Προσαρμοστικότητα για διαφορετικές συσκευές επιτυγχάνεται λόγω του πλάτους διάταξη ή Ποσοστά μέσω μπλοκ μεταφοράς στο διαθέσιμο χώρο (στο κατακόρυφο επίπεδο, αντί της οριζόντιας smartphone σε έναν επιτραπέζιο), ή τις επιμέρους διατάξεις δημιουργώντας διάφορες οθόνες.

Μπορείτε να μάθετε περισσότερα για την ανταπόκριση σχεδιασμό και την ανάπτυξη μπορείτε από τα βιβλία.