Drop-Shadows και κλίσεις: Να είστε συνεπείς στις οπτικές μεταφορές σας
Οι σκιάσεις και οι κλίσεις είναι δύο από τα πιο κοινά στοιχεία σχεδιασμού στον ιστό.
Θα τους βρείτε συνοδεύοντας πολλά διαφορετικά στυλ. Είναι χρήσιμα για τους σχεδιαστές ιστοσελίδων επειδή είναι ελκυστικά, χρήσιμα και εύκολο να δημιουργηθούν με οποιοδήποτε πρόγραμμα γραφικών. Αλλά έχουν μια σκοτεινή πλευρά: συχνά κακοποιούνται .
Χρησιμοποιώντας ερασιτεχνικές σκιές ή κλίσεις είναι σχεδόν εξίσου άσχημη με την επισύναψη ενός κόκκινου γράμματος στο πουκάμισό σας για να αφήσετε τον κόσμο να ξέρει ότι είστε αρχάριος ή χαρά. Ακόμη και τα λεπτές, ελάχιστα αισθητά λάθη μπορούν να δημιουργήσουν εντάσεις που υπονομεύουν διαφορετικά όμορφα και αποτελεσματικά σχέδια.
Σε αυτό το άρθρο, θα δούμε τι κάνουν οι σκιάσεις και οι κλίσεις , θα μιλήσουμε για τον τρόπο αποτελεσματικής χρήσης τους και θα δούμε κάποια παραδείγματα λαθών και πώς να τα διορθώσουμε.
Τι κάνουν οι σκιάσεις και οι κλίσεις;
Η δουλειά ενός σχεδιαστή ιστοσελίδων είναι να δημιουργήσει μοτίβα χρώματος για λαμπερές δισδιάστατες οθόνες . (Υπάρχουν μερικές εξαιρέσεις σε αυτό: οι ιστότοποι μπορούν να προβληθούν, για παράδειγμα, σε μια οθόνη Kindle, η οποία δεν ανάβει και οι ιστότοποι μπορούν να εκτυπωθούν σε χαρτί.) Αυτές οι οθόνες δεν αντικατοπτρίζουν τον πραγματικό κόσμο. δεν είναι καν πολύ σαν τον πραγματικό κόσμο. Για το λόγο αυτό, δεν έχουμε καμία πραγματική επιταγή να κάνουμε τα πρότυπα στις ιστοσελίδες μας να φέρουν οποιαδήποτε σχέση με αντικείμενα στον τρισδιάστατο κόσμο στον οποίο ζούμε.
Τα λειτουργικά συστήματα όπως το Unix και το DOS έχουν μια διεπαφή που δεν είναι παρά έγχρωμο κείμενο σε μια οθόνη. Άλλοι, όπως τα Windows και το Mac OS X, γεμίζουν με τις αυταπάτες των πραγματικών αντικειμένων. Το OS X, για παράδειγμα, έχει μια αποβάθρα που μοιάζει με τραπέζι με γυαλιστερή επιφάνεια που υποχωρεί σε απόσταση, μια μπάρα με τις λοξές πλευρές της οποίας το κάνει να μοιάζει σαν να εκτοξεύεται ελαφρώς και τις ράβδους κύλισης που φαίνονται να έχουν διαφανείς παστίλιες.
Όλα αυτά τα αποτελέσματα είναι μεταφορές. Αντιμετωπίζουν ορισμένα στοιχεία με τα οποία μπορούμε να αλληλεπιδράσουμε στην οθόνη σαν να ήταν τρισδιάστατα αντικείμενα που αλληλεπιδρούν με πηγές φωτός με τον τρόπο που κάνουν τα αντικείμενα στον μη ψηφιακό κόσμο. Είναι ένα αστείο πράγμα, με έναν τρόπο: όλες αυτές οι φωτεινές πηγές και τα άκρα και τα σχήματα είναι καθαρή φαντασία. Επειδή τα αντικείμενα στην οθόνη είναι φανταστικά, γιατί πρέπει να τα συσχετίσουμε με τα αντικείμενα στον πραγματικό κόσμο;
Η ψευδαίσθηση του χώρου συνδέει το φανταστικό με έναν κόσμο στον οποίο ζούμε άνετα.
Ο πιο σημαντικός λόγος για τον οποίο συνδέουμε τα φανταστικά αντικείμενα με τα πραγματικά σε πραγματικό κόσμο είναι ότι είμαστε ειδικοί στην αλληλεπίδραση με αντικείμενα στον τρισδιάστατο κόσμο μας. Έχουμε εμπειρία στην αντιμετώπιση τρισδιάστατων αντικειμένων και έχουμε συγκεντρώσει γνώση του οπτικού κώδικα που μας λέει για τις σχέσεις των αντικειμένων μεταξύ τους στο διάστημα.
Είναι εν μέρει επειδή το κάλεσμα ερμηνείας του φωτός είναι τόσο αξιοσημείωτο που παίρνουμε αυτή την ευχαρίστηση στην ψευδαίσθηση ή στη δημιουργία της εμφάνισης αντικειμένων. Συχνά ασχολούμαστε με δραματικά ζωγραφικά έργα όπως τα σπίτια και τα μήλα από ό, τι τα ίδια τα αντικείμενα. Εμείς οι άνθρωποι έχουμε δημιουργήσει σχέδια για χιλιάδες χρόνια που έχουν σκοπό να παρουσιάσουν τις ιδέες των αντικειμένων. Οι ψευδείς παστίλιες και τα τραπέζια στην οθόνη δεν είναι παρά η πιο πρόσφατη εκδήλωση αυτής της μακράς παράδοσης.
Υπάρχει κάτι περισσότερο από ευχαρίστηση. Η μορφή και η θέση μας δίνουν πληροφορίες σχετικά με το πώς τα αντικείμενα σχετίζονται μεταξύ τους. Το μακρύ σχήμα κατακόρυφης ρόδας της γραμμής κύλισης στο παράθυρο του Safari, για παράδειγμα, δημιουργεί την ψευδαίσθηση ότι βρίσκεται πιο ψηλά ή πιο κοντά από τα στοιχεία που το περιβάλλουν. Αυτό δίνει μεγαλύτερη σημασία στο σχεδιασμό, το οποίο είναι κατάλληλο επειδή η μπάρα κύλισης είναι ένα ουσιαστικό στοιχείο διασύνδεσης για την πλοήγηση στη σελίδα.
Οι οπτικές μεταφορές δημιουργούν αντιληπτή οικονομία.
Εμφανίζεται ως αντικείμενο, η γραμμή κύλισης δημιουργεί "αντιληπτή προσφοράς . "Δηλαδή, συνδέεται με τη μεταφορά της με τις ιδιότητες των πραγματικών αντικειμένων που προσφέρονται για συγκεκριμένες χρήσεις. Ένα κοψίμα κουμπί σε μια ιστοσελίδα, για παράδειγμα, επικοινωνεί ότι δίνει πίεση . Μπορούμε να κάνουμε οτιδήποτε σε μια σελίδα με δυνατότητα κλικ, αλλά η συσχέτιση ενός στοιχείου με δυνατότητα κλικ με την εικόνα ενός πιεστικού στοιχείου υποδεικνύει τη λειτουργία του με έναν σαφή, προφανή και ακόμη και ευχάριστο τρόπο.
Οι σκιάσεις και οι κλίσεις είναι βασικά εργαλεία για τη δημιουργία της ψευδαίσθησης του χώρου.
Οι σκιάσεις και οι κλίσεις είναι δύο εργαλεία που βοηθούν στη δημιουργία της ψευδαίσθησης της τρισδιάστατης εικόνας και προτείνουν τις χωρικές σχέσεις των αντικειμένων στη σελίδα. Όταν γίνει καλά, αυτή η τρισδιάστατη πληροφορία κάνει ένα σχέδιο πιο όμορφο και κατανοητό.
Στον πραγματικό κόσμο, οι σκιάσεις δημιουργούνται όταν ένα αντικείμενο εμποδίζει την πηγή φωτός να χτυπήσει μια επιφάνεια που βρίσκεται πίσω του. Αυτός είναι ένας από τους λόγους για τους οποίους οι άνθρωποι λένε ότι οι σκιάσεις κάνουν τα δισδιάστατα σχέδια "ποπ": επειδή κάνουν τα αντικείμενα να φαίνονται να διαφεύγουν από, ή να επιπλέουν πάνω, άλλα στοιχεία.
Οι κλίσεις εμφανίζονται όταν ένα μέρος ενός αντικειμένου είναι πιο κοντά σε μια πηγή φωτός από ένα άλλο μέρος. Ως αποτέλεσμα, το πλησιέστερο τμήμα εμφανίζεται ελαφρύτερο και το μακρύτερο τμήμα εμφανίζεται πιο σκοτεινό. (Οι διαβαθμίσεις γίνονται πιο πολύπλοκες, φυσικά, όταν αλληλεπιδρούν πολλές πηγές φωτός ή όταν οι πηγές φωτός έχουν διαφορετικά χρώματα.)
Έτσι, με τη μίμηση των επιπτώσεων του φωτός στον πραγματικό κόσμο, οι σκιάσεις και οι κλίσεις μεταδίδουν πληροφορίες σχετικά με μεταφορικά αντικείμενα, φανταστικές πηγές φωτός και τις σχέσεις τους.
Πώς να χρησιμοποιήσετε αποτελεσματικά τις σκιάστρες και τις κλίσεις
Εδώ είναι μια δυνατότητα: μην χρησιμοποιείτε καθόλου σκιά ή κλίσεις.
Θέλω να πω αυτό, σοβαρά. Αυτός είναι ο ασφαλέστερος τρόπος για να αποφύγετε τα σφάλματα σκιάς και κλίσης και η επιλογή πρέπει πάντα να λαμβάνεται υπόψη.
Επειδή η πετώντας σκιές σε τυχαία αντικείμενα είναι τόσο εύκολη, μπορεί να είναι μια δικαιολογία για να αποφευχθούν απλούστερες, καλύτερες λύσεις στα προβλήματα. Για τα κομμάτια κειμένου που πρέπει να είναι πιο εμφανή, για παράδειγμα, οι σχεδιαστές συχνά θα παραμελούν το χρώμα, το μέγεθος, το βάρος του τύπου και πολλά άλλα στοιχεία υπέρ μιας σκιάς σταγόνας.
Ομοίως, οι σχεδιαστές χρησιμοποιούν συχνά κλίσεις για να κάνουν ένα πεδίο χρώματος να φαίνονται λιγότερο βαρετοί, χωρίς να υπολογίζουν γιατί η συνολική σύνθεση δεν είναι δυναμική.
Αν εργάζεστε σε ένα comp για έναν ιστότοπο, αποθηκεύστε τις τρισδιάστατες πινελιές, όπως οι σκιάσεις και οι κλίσεις για το τέλος , αν είναι δυνατόν. Χρησιμοποιήστε απόσταση, τοποθέτηση και χρώμα για να κάνετε το σχέδιο αποτελεσματικό πριν προσθέσετε το τελικό στρώμα γυαλίσματος. Αν επικεντρωθείτε στο να κάνετε τα σχέδιά σας να λειτουργούν χωρίς αυτά τα κόλπα, μπορεί να διαπιστώσετε ότι δεν τα χρειάζεστε τόσο συχνά και ότι είναι πιο αποτελεσματικά όταν τα χρησιμοποιείτε.
Πριν γεμίσετε σε σκιά ή κλίση, ρωτήστε τον εαυτό σας: " Είναι μια τρισδιάστατη μεταφορά απαραίτητη για αυτό το σχέδιο;" Χρησιμοποιώ για να προσθέσω χρήσιμες πληροφορίες σχετικά με τον τρόπο που τα αντικείμενα σχετίζονται ή ως ένα αποτελεσματικό στοιχείο ενός ήχου αισθητική προσέγγιση, ή το χρησιμοποιώ ως δικαιολογία; "
Ο Υποκριτής, τόσο Καλύτερος
Για σκιές , σχεδόν ποτέ δεν χρησιμοποιείτε τις προεπιλεγμένες ρυθμίσεις του Photoshop. Η προεπιλεγμένη σκιά του Photoshop είναι πολύ σκοτεινή και μετατοπίζεται στην κάτω δεξιά γωνία ενός αντικειμένου (η προεπιλεγμένη παγκόσμια φωτεινή πηγή είναι 120 °, στην πάνω αριστερή γωνία).
Οι σκιές σας λένε για το φως στο περιβάλλον σας. Ας υποθέσουμε ότι βρίσκεστε σε ένα σκοτεινό δωμάτιο χωρίς παράθυρα και ενεργοποιείτε έναν φακό. Οποιοδήποτε αντικείμενο που εσείς λάμπει, θα ρίξει μια σκιά σχεδόν μαύρη. Αυτό οφείλεται στο γεγονός ότι το αντικείμενο εμποδίζει το φως από τη μόνη πηγή φωτός, που σημαίνει ότι κανένα άλλο φως δεν προέρχεται από οπουδήποτε αλλού για να φωτίζει την περιοχή.
Τώρα, η σκιά δεν θα είναι εντελώς μαύρη λόγω του ανακλώμενου φωτός. Κάποια από τα φώτα από τον φακό σας θα αναπηδήσουν από τους τοίχους και θα χτυπήσουν τη σκιασμένη περιοχή από μια κατεύθυνση που δεν εμποδίζεται από το αντικείμενο. Και αν ενεργοποιήσετε μια λάμπα σε μια άλλη γωνία του δωματίου, η σκιά θα φωτιστεί σημαντικά. Το αντικείμενο θα χτυπήσει μια δεύτερη σκιά: η νέα σκιά θα εμφανιστεί όπου το φως από τη λάμπα θα μπλοκαριστεί αλλά θα γεμίσει με το φως από το φακό, ενώ η περιοχή της πρώτης σκιάς θα παραμείνει μπλοκαρισμένη από το φως του φακού αλλά θα γεμίσει με το φως από τη λάμπα.
Όταν προσθέτουμε σκίαση στα σχέδια μας, προτείνουμε ένα φανταστικό περιβάλλον για την ιστοσελίδα μας. Οι σκοτεινές, σκιερόχρωμες σκιές δείχνουν ένα σκοτεινό δωμάτιο με μία και μοναδική πηγή φωτός. Οι ελαφριές, μαλακές σκιές σκιάς υποδεικνύουν ένα δωμάτιο πλούσιο σε διάχυτο φως.
Ένα καλά φωτισμένο δωμάτιο είναι το πιο άνετο περιβάλλον για τους χρήστες, επειδή είναι παρόμοιο με το είδος του περιβάλλοντος στο οποίο χρησιμοποιούμε τους υπολογιστές μας: ένα γραφείο ή μια μελέτη. Εκτός αν θέλουμε σκόπιμα να αποφύγουμε αυτή τη ζώνη άνεσης, θα πρέπει να φέρουμε τις ρυθμίσεις σκίασης στα Photoshop πολύ πιο κάτω από τις προεπιλογές τους. Φέρτε την αδιαφάνεια έως 30 ή 40%, ή ακόμα και χαμηλότερη.
Επίσης, κρατήστε τα πράγματα απλά έτσι ώστε οι άνθρωποι να καταλάβουν τη μεταφορά χωρίς να το σκεφτούν. Μια πηγή φωτός σε 120 ° δεν έχει πολύ νόημα. Το Mac OS X, για παράδειγμα, βάζει την πηγή φωτός σε 90 °, ή ίσως πάνω, κάτι που φαίνεται λογικότερο. Μου αρέσει να το καταστήσω απλούστερο και να βάλω την πηγή φωτός απευθείας κάθετη στην οθόνη. Για να το κάνετε αυτό, απλώς μεταφέρετε τη ρύθμιση απόστασης στη σκιά σας στο μηδέν (αυτό αντιπροσωπεύει την απόσταση από το αντικείμενο που μετατοπίζει τη σκιά απόσβεσης στο αντικείμενο κάτω από αυτό). Σε αυτό το σημείο, το παγκόσμιο φως δεν έχει σημασία: είναι απλά σαν μια μεγάλη διάχυτη πηγή φωτός που προέρχεται από πίσω από το χρήστη για να φωτίσει το σχέδιο.
Αυτό το φαινόμενο είναι πολύ συνηθισμένο στα σχέδια "trompe-l'œil" , τα πιο συνηθισμένα από τα οποία είναι η εικόνα φόντου ή το πλαίσιο μιας επιφάνειας γραφείου, σαν να τα κοιτούσατε από ευθεία πάνω. Διευθυντές κινηματογράφου όπως ο Alfred Hitchcock, ο Martin Scorcese και ο Wes Anderson χρησιμοποιούν το ίδιο αποτέλεσμα για τα υπογεγραμμένα γυρίσματα του Θεού. Αυτά τα σχέδια ιστοσελίδων έχουν ένα είδος εύκολης κατανόησης και η διατήρηση της συνέπειας σε ένα σχέδιο γίνεται ευκολότερη για τον σχεδιαστή.
Αν έχετε ρυθμίσει την απόσταση μέχρι το 0 και την αδιαφάνεια έως περίπου 30%, είστε σε καλό σημείο εκκίνησης για μια σκιά. Παίξτε γύρω με το μέγεθος για να αλλάξετε πόσο μακριά φαίνεται η επιφάνεια του αντικειμένου από το φόντο στο οποίο κάθεται. Ο ορισμός του μεγέθους σε 1 εικονοστοιχείο, για παράδειγμα, σας δίνει ένα όμορφο αποτέλεσμα που είναι σχεδόν αόρατο αλλά αρκετά ευχάριστο. Σχεδιαστής Dan Cederholm έχει κάνει μικρά, απλά εφέ σαν αυτό ένα αναπόσπαστο κομμάτι του στυλ του (όπως καταδεικνύεται από το σμιλευτικό του άρθρο A List Apart για το " Mountaintop Corners ").
Μπορείτε σίγουρα να φέρετε την αδιαφάνεια αν το αποτέλεσμα είναι αόρατο, αλλά ξεκινώντας λεπτό και στη συνέχεια να το καλέσετε είναι πολύ καλύτερο από το αντίθετο. Το αποτέλεσμα δεν θα πρέπει να είναι το ελάχιστο λίγο πιο εμφανές από αυτό που πρέπει να είναι.
Για κλίσεις, το Photoshop έχει πολλές φανταστικές προεπιλογές. Αυτά μπορεί να έχουν κάποιες καλές χρήσεις, αλλά σίγουρα έχουν απεριόριστες κακές χρήσεις, οπότε η διαύγεια καθαρισμού τους είναι συνήθως σοφός.
Αντ 'αυτού, επιλέξτε την προεπιλεγμένη βαθμίδα μαύρου-λευκού. Στη συνέχεια, επιλέξτε τόσο το μαύρο όσο και το λευκό και κάντε τα δύο βασικά χρώματα του στοιχείου σας. Τώρα που έχετε μια βάση, επιλέξτε είτε τη σκοτεινή πλευρά είτε την πλευρά φωτός και ρυθμίστε την ώστε να είναι ελαφρώς πιο σκοτεινή ή ελαφρύτερη. Και πάλι, το λεπτότερο, τόσο το καλύτερο . (Μερικές από τις καλύτερες κλίσεις που έχω συναντήσει έπρεπε να επαληθεύσω με το εργαλείο σταγονόμετρου στο Photoshop για να βεβαιωθώ ότι ήταν εκεί καθόλου!)
Όσο μεγαλύτερη είναι η αντίθεση ανάμεσα στο φως και το σκοτάδι, θα εμφανιστεί η στρογγυλή επιφάνεια. Για μερικά πράγματα, όπως τα μενού πλοήγησης και τα κουμπιά, είναι σκόπιμη η στρογγυλοποίηση. Αλλά για αντικείμενα που πρέπει να εμφανίζονται επίπεδα, διατηρήστε την αντίθεση χαμηλή.
Και θυμηθείτε, η πιο ελαφριά πλευρά θα πρέπει να αντιμετωπίσει την κατεύθυνση της πηγής φωτός σας.
Αυτό το είδος κλίσης είναι υπέροχο γιατί μιμείται τις κλίσεις που βλέπουμε γύρω μας όλη την ώρα. Τίποτα στον πραγματικό κόσμο δεν είναι αληθινά ένα ενιαίο πεδίο χρώματος, επειδή έχει πάντα κάποια σχέση με μια πηγή φωτός. Κοιτάξτε προσεκτικά τις σελίδες σε ένα βιβλίο ή στο ανώτατο όριο γύρω από το φως του κεφαλιού σας: θα βρείτε κλίσεις παντού.
Παραδείγματα λαθών και πώς να τα διορθώσετε
Ο ιστός έχει πολλές προφανώς άσχημες κλίσεις, αλλά αυτές συνήθως δεν γίνονται από επαγγελματίες σχεδιαστές. Αντί να επιδείξουμε έκδηλα λάθη, θα παρουσιάσω μερικούς τρόπους με τους οποίους τα λεπτά σφάλματα μπορούν να δημιουργήσουν εντάσεις σε διαφορετικά εξαιρετικά σχέδια.
Ομοιόμορφες σκιές για επικαλυπτόμενα αντικείμενα
Τα επικαλυπτόμενα αντικείμενα συνεπάγονται διαφορά στην απόσταση τους από εσάς (που καθορίζεται εν μέρει από το πάχος τους). Ωστόσο, οι σχεδιαστές χρησιμοποιούν συχνά ταυτόσημες σκιάσεις για αντικείμενα που επικαλύπτονται. Έτσι, οι πληροφορίες που μεταφέρονται από τις σκιάσεις έρχονται σε σύγκρουση με τις πληροφορίες που μεταδίδονται από την επικάλυψη, υπονομεύοντας την ψευδαίσθηση της διαστασιμότητας.
Βλέποντας συγκρούσεις όπως αυτές, με δυσκολεύει, και όσο περισσότερο επικεντρωθώ σε αυτές, τόσο περισσότερο το κεφάλι μου πονάει. Οι χρήστες θα πρέπει να απολαύσουν το σχέδιό σας, να μην αισθάνονται πόνο!
Μπορείτε να διαβάσετε περισσότερα σχετικά με αυτό το θέμα στο " Δημιουργήστε μια καλύτερη σκιά Drop-Shadow , "Ένας οδηγός από τον Jacci Howard Bear στο dki.me.
Απότομες άκρες
Οι γωνίες των πραγματικών σκιών δεν θα είχαν σκληρές άκρες αν δεν είχαν απολύτως καθόλου ανακλώμενο φως - κάτι που θα ήταν μια πολύ ασυνήθιστη κατάσταση. Αντίθετα, οι γωνίες τους στρογγυλεύονται συνήθως από τις ακτίνες φωτός που σέρνουν γύρω τους.
Εδώ είναι μια σκιά-πτώση με ένα μη ρεαλιστικό σκληρό άκρο:
Αυτό το άλλο όμορφο σχέδιο δεν έχει σχεδόν καμία διακριτική ψευδαίσθηση οπουδήποτε αλλά έχει μια σκιά σταγόνας κατά μήκος της δεξιάς πλευρικής γραμμής. Ο σχεδιαστής ίσως ήθελε να μειώσει την ιεραρχία της πλευρικής γραμμής στη σελίδα, ένα αποτέλεσμα που το μπλε φόντο του βοηθά να επιτύχει. Όχι μόνο είναι άσκοπα σκοτεινό, όμως, αλλά το απίστευτα σκληρό άκρο κοιτάζει τον επισκέπτη στο πρόσωπο.
Στο κάτω μέρος της πλαϊνής γραμμής, μπορείτε να δείτε μια στρογγυλή μετάβαση, όπου ο σχεδιαστής έχει δημιουργήσει ένα πιό αξιόπιστο αποτέλεσμα. Αλλά μπορείτε να δείτε γιατί δεν το επαναλάβατε στην κορυφή, επειδή θα βάρκαρε με την καθαρή οριζόντια γραμμή που ορίστηκε από τα καλά ευθυγραμμισμένα κορυφαία στοιχεία. Αντί να απαιτήσουμε τον ρεαλισμό αυτής της στρογγυλής μετάβασης, ας το επιδιορθώσουμε με τόνωση της σκιάς σταγόνας όσο το δυνατόν περισσότερο.
Εδώ, έκανα τόσο ελαφριά τη σκιά της πτώσης, που κάνει κάτι παραπάνω από το να υποδεικνύει ότι κάθεται πιο πίσω. Επειδή είναι τόσο ελαφρύ, η καθαρή γραμμή μετάβασης δεν είναι άσχημη ή αποσπά την προσοχή.
Τι κάνει η τύχη πίσω από αυτό το αντικείμενο;
Μερικές φορές, μια σκιά σταγόνων πηγαίνει παξιμάδια χωρίς προφανή λόγο, όπως με το μπλε κουτί που περιβάλλει το λογότυπο του W3C παρακάτω.
Γιατί είναι η σκιά που πέφτει τόσο μακριά από το αντικείμενο και τόσο στρογγυλεμένη; Όσο περισσότερο προσπαθώ να κατανοήσω την ιστορία που λέει αυτή η πτώση-σκιά, τόσο πιο σύγχυση έχω. Η εικασία μου είναι ότι ο σχεδιαστής ήθελε να δώσει περισσότερη σημασία και βάρος στο λογότυπο, το οποίο η σκιά σταγόνας βοηθά στην επίτευξη, αλλά διαταράσσει την αρμονία της σελίδας τόσο πολύ που δεν αξίζει τον κόπο.
Μην αφήνετε τις κλίσεις σας να προτείνουν διαφορετικές πηγές φωτός.
Σε αυτήν την εξαιρετικά εξαιρετική σχεδίαση για το WolframAlpha, τα αντικείμενα στη σελίδα έχουν διαβαθμίσεις που κυμαίνονται από λευκό έως ανοιχτό πορτοκαλί. Το πρόβλημα είναι ότι η κλίση στην περιοχή κεφαλίδας έχει λευκή στην κορυφή, που υποδηλώνει φως από πάνω, ενώ τα στοιχεία της σελίδας κάτω έχουν λευκό στο κάτω μέρος, υποδηλώνοντας φως από κάτω.
Θα μπορούσατε να υποστηρίξετε ότι είμαι υπερβολικά σκεπτόμενος αυτό, ότι οι κλίσεις δεν πρέπει να ταιριάζουν με πηγές φωτός. Αυτό είναι δυνατό, αλλά οι λεπτές κλίσεις όπως αυτές έχουν μια εγγενή μεταφορική συσχέτιση με τις κλίσεις που βλέπουμε στον πραγματικό κόσμο. Ας αλλάξουμε την κατεύθυνση των κλίσεων κάτω στη σελίδα έτσι ώστε να υποδηλώνουν μια πηγή φωτός από πάνω:
Παίρνουμε αρμονία φωτεινής πηγής.
Τελικά, μπορείτε να κάνετε ό, τι θέλετε.
Επειδή τα αντικείμενα μιας ιστοσελίδας σχετίζονται με πραγματικά αντικείμενα μόνο με μεταφορά, η αποτελεσματικότητά τους είναι ουσιαστικά υποκειμενική. Η σύνδεση μεταξύ μιας εικόνας ενός κουμπιού και ενός πραγματικού κουμπιού δεν έχει καμία πραγματικότητα πέρα από το μυαλό του χρήστη.
Εμείς οι σχεδιαστές δεν απαιτείται να καταστήσουμε τις μεταφορές μας συνεπείς με την πραγματικότητα, αλλά η σκέψη και η προσοχή στα πολλά επίπεδα επικοινωνίας σε ένα σχέδιο μας βοηθά να κάνουμε τους ιστοτόπους μας πιο αρμονικούς.
Και η φροντίδα και η συνέπεια μας βοηθούν να κάνουμε την εμπειρία του χρήστη της ιστοσελίδας άνετη και ακόμη και ευχάριστη.
Γράφτηκε αποκλειστικά για WDD από Nate Eagle . Σπούδασε φιλοσοφία στο κολέγιο, μια εκπαίδευση που τον προετοίμασε τέλεια για να σχεδιάσει και να αναπτύξει ιστοσελίδες για το PBS KIDS. Μπορείτε να διαβάσετε περισσότερα από αυτόν και τους συνεργάτες του PBS στο Design.PBS .
Πιστεύετε ότι αυτό το επίπεδο λεπτομέρειας είναι σημαντικό όταν σχεδιάζετε σκιές και κλίσεις; Έχετε τα δικά σας κατοικίδια ζώα για το πώς χρησιμοποιούνται οι σκιές και οι κλίσεις;