11 Διαμορφώσεις ιστοτόπου που έκαναν το περιεχόμενο να λάμψει το 2017

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

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

  • Είναι χρήσιμα. Οι κοινές διατάξεις έχουν γίνει τόσο συνηθισμένες επειδή έχουν αποδείξει ότι οι χρήστες μπορούν να συνεργαστούν μαζί τους.
  • Είναι εξοικειωμένοι. Μια καλή εμπειρία χρήστη δημιουργείται με την οικοδόμηση μιας αίσθησης εξοικείωσης με τους χρήστες. Οι επισκέπτες αισθάνονται μια ευχάριστη αίσθηση της deja-vu, όταν βλέπουν τα γνωστά χαρακτηριστικά που περιγράφονται όπως θα περιμέναμε. Ως αποτέλεσμα, οι άνθρωποι θα περάσουν χρόνο αφομοιώνοντας το περιεχόμενο αντί να εστιάζουν στον μοναδικό σχεδιασμό της σελίδας.
  • Εξοικονόμηση χρημάτων. Η επαναχρησιμοποίηση υφιστάμενων διατάξεων είναι εξοικονόμηση χρόνου. Οι σχεδιαστές θα ξοδεύουν λιγότερο χρόνο στον πειραματισμό με τη διάταξη και θα επικεντρωθούν περισσότερο στην οπτική ιεραρχία και άλλες πτυχές του σχεδιασμού που έχουν άμεσο αντίκτυπο στην εμπειρία των χρηστών.

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

1. Ενιαία στήλη.

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

Παρά την απλότητα της, οι μονές στήλες είναι αρκετά δημοφιλείς σε πολλές ιστοσελίδες. Η κινητή επανάσταση είχε επίσης τον αντίκτυπό της στη δημοτικότητα αυτού του τύπου διάταξης - μονές στήλες διατάξεις κατάλληλες κινητές οθόνες τέλεια.

Πότε να το χρησιμοποιήσετε.

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

Η Medium, μια δημοφιλής πλατφόρμα blogging, χρησιμοποιεί αυτό το είδος διάταξης για να παρουσιάσει τις ιστορίες της. Όλα τα άρθρα σχετικά με το Medium παρουσιάζονται σε μία διάταξη στήλης.

Συμβουλές σχεδιασμού

  • Εξετάστε τα "κολλώδη" μενού για μεγάλες σελίδες. Δεδομένου ότι η διάταξη μιας μονής στήλης χρησιμοποιείται συχνά για σελίδες με μεγάλη περιστροφή, είναι σημαντικό να διατηρείτε πάντα την πλοήγηση στην οπτική επαφή. Η "κολλητική πλοήγηση" σας βοηθά να αποφύγετε τους επισκέπτες που χρειάζονται να μετακινηθούν μέχρι το επάνω μέρος της σελίδας για να περιηγηθείτε.
Πηγή εικόνας: codemyui

2. Διαίρεση οθόνης

Μια διαχωρισμένη οθόνη (ή μια οθόνη χωρισμένη σε δύο) είναι ιδανική για μια σελίδα που έχει δύο βασικά κομμάτια περιεχομένου ίσης σημασίας. Επιτρέπει στους σχεδιαστές να προβάλλουν ταυτόχρονα και τα δύο στοιχεία δίνοντας τους την ίδια προσοχή.

Δύο κεντρικά στοιχεία εμφανίζονται ταυτόχρονα. Πηγή εικόνας: 62 μοντέλα

Πότε να το χρησιμοποιήσετε

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

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

Τα αντίθετα χαρακτηριστικά της δυαδικότητας (αντίθετα χρώματα). Πηγή εικόνας: Προσαρμογές Star Wars της Google

Συμβουλές σχεδιασμού.

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

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

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

Πότε να το χρησιμοποιήσετε.

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

Η ασυμμετρία καθιστά την αρχική σελίδα του Dropbox πιο ενεργητική.

Συμβουλές σχεδιασμού.

  • Βεβαιωθείτε ότι το περιεχόμενό σας μπορεί να παρουσιαστεί σε ασύμμετρη διάταξη. Μια ασύμμετρη διάταξη δεν είναι πρακτική για κάθε τοποθεσία. Πιθανότατα λειτουργεί το καλύτερο για μινιμαλιστικές διατάξεις.
  • Προσθέστε εστίαση με χρώμα. Η ασυμμετρία έχει την ρίζα της στην ιδέα ότι ένα αντικείμενο με περισσότερο οπτικό βάρος θα τραβήξει την προσοχή πρώτα. Μπορείτε να χρησιμοποιήσετε στοιχεία με υψηλή αντίθεση χρώματος για να προσθέσετε οπτικό βάρος σε συγκεκριμένα μέρη του σχεδίου.
Η υψηλή αντίθεση χρώματος προσθέτει οπτικό βάρος σε συγκεκριμένα μέρη του σχεδίου. Πηγή εικόνας: Πολιτισμός PL

4. Ένα πλέγμα καρτών.

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

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

Πότε να το χρησιμοποιήσετε.

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

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

Συμβουλές σχεδιασμού.

  • Κάντε ολόκληρη την κάρτα με δυνατότητα κλικ, όχι μόνο συγκεκριμένα μέρη. Η αλληλεπίδραση του χρήστη με μια κάρτα είναι πολύ πιο άνετη όταν οι χρήστες δεν χρειάζεται να κάνουν κλικ ακριβώς πάνω στην επικεφαλίδα ή την εικόνα μιας κάρτας για να αποκτήσουν πρόσβαση σε λεπτομέρειες του περιεχομένου.
  • Εάν η κάρτα σας περιέχει μια εικόνα, σκεφτείτε πώς θα μοιάζει σε μια μικρότερη οθόνη. Μια εικόνα που δεν κλιμακώνεται καλά και γίνεται δυσανάγνωστη στις μικρές οθόνες δημιουργεί μια κακή εμπειρία χρήστη.
  • Δώστε προσοχή στο λευκό κενό μεταξύ των καρτών επειδή επηρεάζει τον τρόπο περιήγησης των επισκεπτών. Περισσότερος χώρος μεταξύ των καρτών κάνει την περιήγηση πιο αργή, αλλά οι επισκέπτες θα δώσουν μεγαλύτερη προσοχή σε κάθε κάρτα. Ο ελάχιστος χώρος επιτρέπει τη γρήγορη σάρωση, αλλά επίσης αυξάνει τους κινδύνους που ενδέχεται να παραβλέψουν κάποιο περιεχόμενο κάποιοι επισκέπτες.
  • Είναι δυνατή η ενσωμάτωση κινούμενων σχολίων. Η κάρτα θα εμφανιστεί ως στοιχείο με δυνατότητα κλικ.
Το Smashing Magazine έχει υπέροχη ανατροφοδότηση για τις κάρτες του.

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

Η διάταξη του περιοδικού επιτρέπει στους αναγνώστες να σαρώσουν, να διαβάσουν. και να καταλάβετε γρήγορα μια σελίδα. Πηγή εικόνας: New York Times

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

Πότε να το χρησιμοποιήσετε.

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

Μια διάταξη με στυλ σε περιοδικό είναι καλύτερο για ειδησεογραφικά sites που έχουν πολύ τακτικά ενημερωμένο περιεχόμενο σε πολλές κατηγορίες.

Συμβουλές σχεδιασμού.

  • Αυτή η διάταξη δίνει έμφαση στους τίτλους και τις εικόνες. Το μέγεθος της επικεφαλίδας / εικόνας σχετίζεται άμεσα με την προσοχή που δίνει η εντολή. Πιο εμφανή στοιχεία τραβούν την εστίαση του χρήστη γρηγορότερα από το λιγότερο προεξέχον. Πάρτε τους New York Times, για παράδειγμα - το πιο σημαντικό περιεχόμενο στη σελίδα έχει μεγαλύτερες μικρογραφίες, μεγαλύτερα πρωτοσέλιδα και πιο λεπτομερές κείμενο.
Οι New York Times χρησιμοποιούν διαφορετικό μέγεθος για το κείμενο για να δημιουργήσουν μια αίσθηση σπουδαιότητας - τα μεγέθη κειμένου ποικίλουν για να δημιουργήσουν μια οπτική ιεραρχία.
  • Η τοποθέτηση ενός πλέγματος απαιτεί προσοχή τόσο στον οριζόντιο όσο και στον κατακόρυφο ρυθμό και είναι εξίσου σημαντικό αν θέλετε να δημιουργήσετε μια καλή διάταξη. Εξετάστε τη διαφορά μεταξύ των παρακάτω παραδειγμάτων. Στο πρώτο παράδειγμα, το πλέγμα είναι συνεπές με το πλάτος της στήλης και την οριζόντια απόσταση, αλλά η ποικίλη κατακόρυφη απόσταση δημιουργεί οπτικό θόρυβο. Στη δεύτερη περίπτωση, η απόσταση μεταξύ των οριζόντιων στηλών και η απόσταση των κάθετων στοιχείων είναι συνεπή και αυτό καθιστά τη συνολική δομή καθαρή και πιο άνετη για τον χρήστη που καταναλώνει οπτικά το περιεχόμενο.

6. Κουτιά.

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

Πότε να το χρησιμοποιήσετε.

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

Πηγή εικόνας: πτώχευση

Συμβουλές σχεδιασμού.

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

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

Πότε να το χρησιμοποιήσετε.

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

Πηγή εικόνας: measponte

Συμβουλές σχεδιασμού.

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

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

Πότε να το χρησιμοποιήσετε.

Αυτή η διάταξη είναι μεγάλη όταν πρέπει να επιδείξετε μόνο ένα προϊόν / υπηρεσία και να εστιάσετε όλη την προσοχή του χρήστη σε αυτό.

Η έλλειψη άλλων στοιχείων σε αυτή τη διάταξη οδηγεί την προσοχή του χρήστη αποκλειστικά στο προϊόν.

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

Πηγή εικόνας: Είδη σε τεμάχια

Συμβουλές σχεδιασμού.

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

9. Διάταξη σχήματος F.

Αυτός ο τύπος διάταξης δημιουργήθηκε με βάση τον τρόπο με τον οποίο οι χρήστες διαβάζουν περιεχόμενο στο διαδίκτυο. Το μοτίβο σάρωσης σχήματος F, που ορίζεται αρχικά από το NNGroup, δηλώνει ότι οι χρήστες τυπικά σαρώνουν βαρύ μπλοκ περιεχομένου σε ένα μοτίβο που μοιάζει με το γράμμα F ή E. Τα μάτια μας αρχίζουν στην πάνω δεξιά γωνία της σελίδας, σαρώνουν οριζόντια, κατεβαίνουμε στην επόμενη γραμμή και κάνουμε το ίδιο ξανά και ξανά, μέχρι να βρούμε κάτι που τραβάει την προσοχή μας (ενδιαφέρον περιεχόμενο). Αυτό το μοτίβο σάρωσης είναι σχετικό όχι μόνο για χρήστες υπολογιστών, αλλά και για χρήστες κινητών τηλεφώνων.

Πότε να το χρησιμοποιήσετε.

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

Ο New Yorker χρησιμοποιεί μια διάταξη σχήματος F στην αρχική του σελίδα.

Συμβουλές σχεδιασμού.

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

10. Διάταξη σχήματος Ζ.

Η διάταξη Ζ-μοτίβου μιμείται επίσης τις φυσικές συνήθειες σάρωσης. Οι επισκέπτες της ιστοσελίδας (από τους δυτικούς πολιτισμούς) αρχίζουν στην πάνω αριστερή γωνία. Σαρώνουν από πάνω αριστερά προς τα πάνω δεξιά, σχηματίζοντας μια οριζόντια γραμμή. Το επόμενο βήμα, ωστόσο, είναι λίγο διαφορετικό - αντί να πέσει κάτω απ 'ευθείας, όπως και στο σχήμα Σχήματος F, τα μάτια τους σκαρφαλώνουν προς τα κάτω και στην αριστερή πλευρά της σελίδας, δημιουργώντας μια διαγώνια γραμμή. Τέλος, η ματιά πίσω ξανά προς τα δεξιά, σχηματίζοντας μια δεύτερη οριζόντια γραμμή.

Πότε να το χρησιμοποιήσετε.

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

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

Συμβουλές σχεδιασμού.

  • Ενεργοποιήστε τους χρήστες με ζιγκ-ζαγκ (ή συνεχόμενο Ζ-μοτίβο). Είναι δυνατό να ενεργοποιήσετε τους χρήστες στη σάρωση με εναλλαγή κειμένου και εικόνων μερικές φορές για να δημιουργήσετε ένα ζιγκ-ζαγκ.
Ένα μοτίβο zig-zag είναι ένα Ζ-σχέδιο που επαναλήφθηκε μερικές φορές στην ίδια σελίδα. Τα Zig-zags δημιουργούν ένα ρυθμό που ενδιαφέρει τους επισκέπτες. Πηγή εικόνας: Evernote

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

Πότε να το χρησιμοποιήσετε.

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

Πηγή εικόνας: αναζήτηση για τη Συρία

Συμβουλές σχεδιασμού.

  • Επιλέξτε μια εικόνα φόντου προσεκτικά. Δεδομένου ότι η διάταξη βασίζεται σε μία μόνο εικόνα, είναι απαραίτητο να επιλέξετε το σωστό. Μια άσχετη εικόνα μπορεί εύκολα να συγχύσει τους επισκέπτες.
  • Χρησιμοποιήστε βίντεο αντί για εικόνες για να προσελκύσετε επισκέπτες. Ίσως αξίζει να χρησιμοποιείτε βίντεο αντί για φωτογραφία, ειδικά όταν πρέπει να επιδείξετε κάτι στη δράση.
Το βίντεο σάς δίνει μια καλύτερη ευκαιρία να προσελκύσετε τους επισκέπτες σας μέσω μιας στατικής εικόνας. Πηγή εικόνας: Tesla
  • Μην αφήσετε το σχέδιο να μειώσει την αναγνωσιμότητα. Το κείμενο που χρησιμοποιείτε ως επικάλυψη πάνω στην εικόνα πρέπει να είναι αρκετά αντίθεση ώστε να είναι αναγνώσιμο. Αν το κείμενο δεν έχει αρκετή αντίθεση, μπορείτε να προσθέσετε μια επικάλυψη στην εικόνα.
Πηγή εικόνας: Πορτοφόλι Google

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

Αρχικά δημοσιεύθηκε στο theblog.adobe.com στις 13 Δεκεμβρίου 2017.