Μόλις το πιο σημαντικό μέρος οποιασδήποτε σχεδίασης ιστότοπου, το φόντο ενός ιστότοπου μπορεί να χρησιμοποιηθεί με πολλούς τρόπους για να δημιουργήσει μια καλύτερη εμπειρία χρήστη.
Σήμερα, η σωστή δημιουργία υποβάθρου είναι πιο δύσκολη από ό,τι ήταν κάποτε και παρουσιάζει μερικές νέες προκλήσεις, ενώ περιορίζει ορισμένες από τις δυνατότητες που προέρχονται από άλλουςwise θα είχα.
Για παράδειγμα, το φόντο σε προηγούμενες εποχές θα μπορούσε πραγματικά να χρησιμοποιηθεί ως πρακτικό μέρος του σχεδιασμού. Θα μπορούσατε να βάλετε βέλη σε αυτό, για παράδειγμα, για να κατευθύνετε την προσοχή του θεατή σε κάτι σημαντικό.
Γιατί τα πράγματα έχουν αλλάξει οφείλεται στην ανάγκη responsive σχεδιασμό και την ποικιλία των διαφορετικών μεγεθών οθόνης και τύπων οθόνης που μπορεί να χρησιμοποιούν οι άνθρωποι.
Ως αποτέλεσμα, το φόντο έχει γίνει λιγότερο σημαντικό στοιχείο στο σχεδιασμό ιστοσελίδων σήμερα, και αρκετοί ιστότοποι δεν έχουν καθόλου επίσημο υπόβαθρο.
Τα υπόβαθρα είναι πραγματικά σημαντικά; Για να το μάθουμε, ελέγξαμε τους 30 κορυφαίους ιστότοπους με κατάταξη (χωρίς επαναλήψεις) και τα αποτελέσματα είναι πολύ ενδιαφέροντα.
Όπως μπορείτε να δείτε από την παραπάνω εικόνα, οι κορυφαίοι ιστότοποι δεν ενοχλούνται καθόλου με φόντο, και δεν φαίνεται να τους έχει κάνει το παραμικρό κακό σε σχέση με την αποδοχή των χρηστών.
Αυτό έρχεται αντιμέτωπο με μια συμβατική σκέψη σχετικά με τη σχεδίαση της ιστοσελίδας, αλλά είναι δύσκολο να διαφωνήσουμε με κρύα σκληρά γεγονότα. Απίστευτα, ο πρώτος ιστότοπος στη λίστα με φόντο δεν ξεκινά μέχρι να φτάσετε στον αριθμό 10, δηλαδή Twitterκαι αυτό το φόντο είναι ορατό μόνο εάν δεν είστε συνδεδεμένοι.
Στους 30 κορυφαίους ιστότοπους για το 2017, οι μόνοι ιστότοποι με κατάλληλο υπόβαθρο ήταν:
- Twitter, με φωτογραφικό φόντο (10η θέση)
- Ζωντανά (Outlook), με συμπαγές χρώμα φόντου (12η θέση)
- NetFlix, με φόντο κολάζ (21η θέση)
- WordPress, με συμπαγές χρώμα φόντου (κατάταξη 26th)
- Bing, με φωτογραφικό φόντο (29η θέσηth)
- Tumblr, με φωτογραφικό φόντο (βαθμολογία 30th)
Έτσι, μόνο το 20 τοις εκατό των 30 κορυφαίων ιστότοπων είχε φόντο, και αυτοί που έκαναν ήταν πολύ κάτω από τη λίστα.
Το μοναδικό πλεονέκτημα ενός ιστορικού ιστότοπου είναι ότι βοηθά στη διατήρηση της αίσθησης της ταυτότητας του ιστότοπου σε πολλές σελίδες, αλλά επειδή υπάρχουν και άλλα στοιχεία που μπορούν να επιτύχουν αυτόν τον στόχο εξίσου καλά και ίσως καλύτερα, αυτό δεν είναι πραγματικά μεγάλο πλεονέκτημα.
Τα μειονεκτήματα είναι πολλά. Τα υπόβαθρα εισάγουν επιπλέον προκλήσεις όσον αφορά τον ιστότοπο responsiveκαι μπορεί να απαιτεί συχνή ενημέρωση για να αποφευχθεί το μπαγιάτικο.
Μια άλλη πρόκληση για τον μοντέρνο σχεδιαστή είναι ότι, εκτός από το στατικό υπόβαθρο, είναι πλέον δυνατή η δημιουργία φόντου βίντεο. Εάν επιλέξετε το τελευταίο, είναι ζωτικής σημασίας να γνωρίζετε τι κάνετε, επειδή πολλοί χρήστες θα θεωρήσουν ενοχλητικό ένα κακώς σχεδιασμένο φόντο βίντεο.
Με τόσους πολλούς λόγους να μην χρησιμοποιήσετε φόντο, μπορείτε να αποφασίσετε να ακολουθήσετε τα βήματα αυτών των κορυφαίων ιστότοπων και να απορρίψετε ολόκληρη την ιδέα του ιστορικού μια για πάντα. Αλλά εάν το έντυπο επιμένει ότι ο ιστότοπος πρέπει να έχει φόντο, τι μπορείτε να κάνετε; Αυτό θα προσπαθήσουμε να λύσουμε στο υπόλοιπο αυτού του άρθρου.
Πρέπει να περιλαμβάνονται τα υπόβαθρα
Το περιεχόμενο πρέπει πάντα να βρίσκεται σε επίπεδο πάνω από το φόντο της σελίδας. Εάν δεν διαχωρίζετε τα στοιχεία της σελίδας σας σε διαφορετικά επίπεδα, μπορεί να δημιουργήσει προβλήματα για εσάς όταν κάτι πρέπει να αλλάξει.
Είναι καλύτερη πρακτική να χρησιμοποιείτε αυτόν τον διαχωρισμό στρώματος όσο το δυνατόν περισσότερο. Για παράδειγμα, χρειάζεται πραγματικά το λογότυπο του ιστότοπου να ενσωματωθεί απευθείας στο παρασκήνιο; Τις περισσότερες φορές θα ήταν πιο λογικό να έχουμε το λογότυπο σε ξεχωριστό επίπεδο. Με αυτόν τον τρόπο, εάν το λογότυπο πρέπει να ενημερωθεί, μπορεί να ενημερωθεί ανεξάρτητα από ολόκληρο το φόντο.
Η χρήση επιπέδων με αυτόν τον τρόπο σημαίνει περισσότερη δουλειά για εσάς από την πλευρά της δημιουργίας των πραγμάτων, αλλά λιγότερη εργασία από την πλευρά της συντήρησης. Σας δίνει επίσης τον μέγιστο έλεγχο, καθώς μπορείτε να αποκρύψετε πράγματα, να τα μετακινήσετε ή να τα κάνετε να συμπεριφέρονται διαφορετικά ανάλογα με τις ανάγκες σας ανά πάσα στιγμή.
Αυτή η εικόνα δείχνει την ιδανική δομή για ένα πρότυπο σχεδίασης φόντου:
Σε κάθε στρώμα (εκτός από το βασικό στρώμα) υπάρχει δυνατότητα δημιουργίας πρόσθετων επιπέδων για ακόμη μεγαλύτερους βαθμούς διαχωρισμού, εάν τα χρειάζεστε.
Όσο περισσότεροι βαθμοί διαχωρισμού δημιουργείτε, τόσο περισσότερος έλεγχος μπορείτε να αποκτήσετε. Μπορεί να αισθάνεστε ότι αυτό δεν είναι σημαντικό για σας τώρα, αλλά συμβαίνει συχνά ότι γίνεται παράγοντας αργότερα.
Το πιο σημαντικό πράγμα που πρέπει να καταλάβετε είναι ότι το «φόντο» είναι οτιδήποτε δεν είναι περιεχόμενο. Έτσι, κείμενο ή εικόνες που προορίζονται να βρίσκονται στη σελίδα αλλά όχι ως περιεχόμενο υπολογίζεται ως μέρος του φόντου, αλλά δεν θα τα ταξινομήσουν όλοι με αυτόν τον τρόπο.
Framing
Πίσω στις πρώτες μέρες του σχεδιασμού ιστοσελίδων, η διαμόρφωση πλαισίων ήταν απλώς μια απλή υπόθεση για να βρείτε πού θα έπρεπε να βρίσκεται το περιεχόμενό σας σε σχέση με το φόντο. Σε αυτή την ημέρα του responsive Ο σχεδιασμός, ωστόσο, είναι συνήθως πιο περίπλοκος από αυτό.
Με responsive σχεδίαση, έχετε μόνο δύο επιλογές για να αντιμετωπίσετε το ζήτημα της πλαισίωσης. Η πρώτη επιλογή είναι να κλιμακώσετε το περιεχόμενο και την εικόνα φόντου σε σχέση με το διαθέσιμο μέγεθος οθόνης. Αυτό είναι βέλτιστο όταν η ακεραιότητα του σχεδιασμού είναι ο πιο σημαντικός παράγοντας, αν και αυτό θα είναι μια αρκετά σπάνια κατάσταση.
Η δεύτερη επιλογή είναι η σταδιακή κατάργηση τμημάτων του φόντου, ή ακόμη και ολόκληρου του φόντου, στην πιο κοινή κατάσταση όπου η αναγνωσιμότητα του περιεχομένου είναι πιο σημαντική από την ακεραιότητα του σχεδιασμού.
Αυτό το ζήτημα της «ακεραιότητας του σχεδιασμού», παρεμπιπτόντως, σημαίνει ότι ο σχεδιασμός μοιάζει πάντα ο ίδιος, ανεξάρτητα από το είδος της οθόνης στην οποία εμφανίζεται. Το αντίθετο είναι όπου το περιεχόμενο μοιάζει πάντα (λίγο πολύ) το ίδιο, ανεξάρτητα από το είδος της οθόνης στην οποία προβάλλεται.
Χρήση κλιμάκωσης για responsiveγωνιστικότητα
Όταν χρησιμοποιείτε κλιμάκωση για να διατηρήσετε ομοιόμορφο καρέ σε διαφορετικούς τύπους συσκευών και προσανατολισμό, διατηρεί την ακεραιότητα του σχεδιασμού σας, αλλά το αποτέλεσμα μπορεί να μην είναι πάντα αυτό που θα περιμένατε ή ακόμη και επιθυμείτε, ειδικά εάν χρησιμοποιείτε φωτογραφικό φόντο.
Ας δούμε ένα παράδειγμα αυτής της τεχνικής σε δράση. Ξεκινώντας με το Samsung Galaxy S5 σε κατακόρυφη λειτουργία (λάβετε υπόψη ότι αυτές οι εικόνες είναι κλιμακωτές ώστε να ταιριάζουν στο άρθρο, οπότε το κείμενο που βλέπετε υπάρχει στην πραγματικότητα είναι ευανάγνωστο στη συσκευή).
Αυτό μοιάζει με την οριζόντια λειτουργία (είναι σχεδόν πάντα καλύτερο να κρατάτε ένα τηλέφωνο σε οριζόντιο προσανατολισμό για τα πάντα εκτός από την πραγματοποίηση τηλεφωνικών κλήσεων, ωστόσο οι άνθρωποι εξακολουθούν να επιμένουν να κρατούν τα τηλέφωνά τους σε κατακόρυφο προσανατολισμό.
Όπως μπορείτε να δείτε, η διάταξη είναι απόλυτα εντάξει κατά την κλιμάκωση, ακόμα και όταν έχετε μόνο 640 x 360 εικονοστοιχεία για να εργαστείτε. Στη συνέχεια έχουμε το iPad σε κατακόρυφο προσανατολισμό.
Και τοπίο.
Το πράγμα που θα παρατηρήσετε κατά τη χρήση της κλιμάκωσης είναι ότι υπάρχει μικρή παραλλαγή μεταξύ διαφορετικών συσκευών και αναλύσεων, εκτός από το ότι μπορεί να υπάρχει πολύ χαμένος κάθετος χώρος στην κατακόρυφη προβολή.
Θα ήταν καλύτερα να χρησιμοποιήσετε διαφορετικές μεθόδους στο φόντο και στα τμήματα περιεχομένου, έτσι ώστε τα στοιχεία του μενού να τυλίγονται σε πλέγμα 2 × 2 αντί να παραμένουν πάντα σε διάταξη 1 × 4, αλλά ο λόγος που δεν γίνεται με αυτόν τον τρόπο είναι επειδή είναι αδύνατο να προβλεφθεί πόσος κάθετος χώρος θα είναι διαθέσιμος.
Επομένως, το πλεονέκτημα της κλιμάκωσης είναι όταν θέλετε να διασφαλίσετε ότι κάποιο στοιχείο παραμένει πάντα ενόψει, ανεξάρτητα από τις περιστάσεις.
Χρήση σταδιακής απόκρυψης και αποκάλυψης responsiveγωνιστικότητα
Ένα πιο πρακτικό σενάριο, και αυτό που οι περισσότεροι σχεδιαστές θα θέλουν να χρησιμοποιούν τις περισσότερες φορές, είναι ένα σχέδιο όπου το φόντο (ή τμήματα αυτού) μπορεί απλώς να καταργηθεί εάν δεν υπάρχει αρκετός χώρος για να το δείξει, έτσι το περιεχόμενο του ιστότοπου πάντα παίρνει τη μέγιστη προσοχή.
Εδώ είναι ένα παράδειγμα της διαφοράς κατά τη χρήση αυτής της μεθόδου. Θα χρησιμοποιήσουμε τις ίδιες συσκευές και προσανατολισμούς για την απεικόνιση. Το πρώτο είναι το Samsung Galaxy S5 πορτρέτο.
Τοπίο Samsung Galaxy S5.
Πορτραίτο iPad.
Τοπίο iPad.
Εδώ μπορείτε να δείτε μια σημαντική διαφορά μεταξύ συσκευών. Η μικρή οθόνη του Samsung Galaxy S5 δεν επιτρέπει την προβολή του φόντου, ανεξάρτητα από το αν η συσκευή διατηρείται σε κατακόρυφο ή οριζόντιο προσανατολισμό και αυτό που εμφανίζεται προσαρμόζεται ώστε να ταιριάζει στον διαθέσιμο χώρο.
Όταν προβάλλεται ο ίδιος ιστότοπος στο iPad, τότε το φόντο εμφανίζεται πάντα ανεξάρτητα από τον προσανατολισμό, αλλά υπάρχει κάποια διαφορά σε αυτό που φαίνεται.
Καλύτερες έννοιες για σχεδιασμό φόντου (σε σειρά)
1. Στερεό χρώμα (ή χωρίς χρώμα)
2. Φωτογραφικό (τεντωμένο)
3. Μικρό πλακάκι (τέλειο χωρίς ραφή)
4. Μεγάλο πλακάκι (τέλειο χωρίς ραφή)
Αυτό που πρέπει να αποφύγετε είναι η τοποθέτηση φωτογραφικών φόντων εκτός εάν αυτό μπορεί να γίνει με τέτοιο τρόπο ώστε να μην είναι αισθητή. Το τέντωμα είναι συνήθως καλύτερο για φωτογραφικά φόντα ή για περιορισμό σε προκαθορισμένο χώρο.
Η εποχή του μεγάλου καταιγιστικού φόντου είναι σχεδόν νεκρή εκτός από εξειδικευμένους ιστότοπους που προορίζονται μόνο για προβολή σε ένα desktop. Τα περισσότερα υπόβαθρα έχουν σχεδιαστεί για desktopΤο s δεν θα φαίνεται καλό όταν προβάλλεται σε τηλέφωνα.
Μια λύση που μπορείτε να κάνετε είναι να δημιουργήσετε έναν τεράστιο αριθμό σημείων διακοπής στο αρχείο CSS και να σχεδιάσετε τοdiviδιπλά φόντα για κάθε σημείο διακοπής, αλλά ως συνήθως έχετε την πρόκληση ότι ο διαθέσιμος κάθετος χώρος δεν μπορεί ποτέ να υπολογιστεί, ακόμα και όταν είναι γνωστός ο τύπος της συσκευής.
Η εικόνα της κεφαλίδας είναι ευγενική προσφορά του
Σχόλια απαντήσεις 0