Πώς να σχεδιάσετε μια ρύθμιση περιεχομένου για υπεύθυνο σχεδιασμό

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

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

Επαναδιάταξη των πλέγματος σε λίστες

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

Παράδειγμα 1: Δημοτικό συμβούλιο του Wellington

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

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

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

Παράδειγμα 2: Mooyah Burgers

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

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

ο “Συνδεθείτε μαζί μας!” Το τμήμα αναδιατάσσει επίσης το περιεχόμενο έτσι ώστε κάθε κοινωνική θέση παίρνει όσο το δυνατόν περισσότερο χώρο. Σε γενικές γραμμές, οι οθόνες ευρείας οθόνης είναι οι μεγαλύτερες και οι οθόνες smartphone είναι οι ψηλότερες.

Παράδειγμα 3: Αγορά θεμάτων

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

Μια σελίδα με μια διάταξη πλήρους πλέγματος θα πρέπει μειώστε το μέγεθος των κιβωτίων πριν τους σπάσει σε μια νέα γραμμή. Για παράδειγμα, η Theme Market έχει ένα σταθερό μέγιστο πλάτος του 1240 και το πλέγμα περιέχει τέσσερα τετράγωνα ανά σειρά.

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

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

Απόκρυψη ή κατάργηση στηλών

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

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

1. Πιάστε τα κάτω από το κύριο περιεχόμενο
2. Κρύψτε τους εντελώς

Παράδειγμα 1: Διακοπή Τύπου

Ρίξτε μια ματιά στον ιστότοπο Stop Press. Εχει τέσσερις κάθετες στήλες στην οθόνη της επιφάνειας εργασίας μου.

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

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

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

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

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

Παράδειγμα 2: Blog του Wishpond

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

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

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

Παράδειγμα 3: Κυρία Gautier

Μου αρέσει επίσης πώς χρησιμοποιεί η Madame Gautier τη δική τους “Τελευταία νέα” στην κεντρική σελίδα. Τελικά πέφτει κάτω από το περιεχόμενο, και παίρνει μια πλήρη θέση προβολής στη σελίδα.

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

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

Προσαρμογή και συμπίεση περιθωρίων

Θα υπάρχει πάντα ένα σημείο όπου το περιεχόμενο δεν μπορεί να συμπιεστεί οποιαδήποτε περαιτέρω, και ένα τμήμα πρέπει να κάτω από το άλλο.

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

Παράδειγμα 1: Ένας κόσμος

Το υποσέλιδο του One World είναι ένα καλό παράδειγμα. Εχει οι συνδέσεις υποσέλιδου σε επίπεδο ιστού επιπλέουν δεξιά με ένα φόρμα εγγραφής ηλεκτρονικού ταχυδρομείου στα αριστερά.

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

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

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

Παράδειγμα 2: Χρυσές Νήσοι

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

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

Κάθετη ροή στις μικρότερες οθόνες

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

Παράδειγμα 1: BodyBuilding.com Ενιαία Δημοσίευση

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

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

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

Παράδειγμα 2: Έκθεση αποθεμάτων

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

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

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

Κλείσιμο Σκέψεις

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

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