Brilliant Ιδέες & Τάσεις για Προφανή Χαρακτηριστικά Post Widgets

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

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

Τυπογραφική αντίθεση

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

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

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

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

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

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

Η διαφορά εδώ είναι ότι κάθε χρώμα φόντου είναι 100% στερεό. Δεν μπορείτε να δείτε ολόκληρη τη φωτογραφία μικρογραφίας έτσι μικρές μερίδες χάνονται από την άποψη. Το κείμενο όμως είναι ευανάγνωστο και μπορεί να είναι εξίσου ελκυστικό για τους επισκέπτες που προσγειώνονται στην αρχική σελίδα του Digital Trends.

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

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

Σποραδικά μεγέθη εικόνας

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

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

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

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

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

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

Custom Styles Thumbnail

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

Το στυλ κάθε μικρογραφίας επηρεάζει τον τρόπο εμφάνισης ολόκληρου του γραφικού στοιχείου στο κοινό σας. Πάρτε για παράδειγμα το χαρακτηριστικό στυλ widget που βρέθηκαν στο The Verge.

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

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

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

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

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

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

Multi-Post Widgets

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

Άλλα widgets βασίζονται σε δυναμικές αλληλεπιδράσεις όπως μια παρουσίαση διαφανειών. Πάρτε για παράδειγμα την αρχική σελίδα του Vanity Fair με το χαρακτηρισμένο post block τους στην κορυφή της σελίδας. Εμφανίζεται μόνο μία θέση τη φορά, αλλά τα νέα άρθρα εμφανίζονται όταν μετακινείται πάνω από μια συγκεκριμένη επικεφαλίδα.

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

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

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

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

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

Τύλιξε

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

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