7 πρακτικές συμβουλές για εξαπάτηση στο σχεδιασμό

Βελτιώστε τα σχέδια σας με τακτικές αντί για ταλέντο.

Κάθε web developer αναπόφευκτα τρέχει σε καταστάσεις όπου πρέπει να κάνουν αποφάσεις σχεδιασμού, είτε το συμπαθούν είτε όχι.

Ίσως η εταιρεία για την οποία εργάζεστε δεν έχει σχεδιαστή πλήρους απασχόλησης και πρέπει να εφαρμόσετε το UI για ένα νέο χαρακτηριστικό μόνος σας. Ή ίσως χτυπάτε σε ένα πλευρικό έργο και θέλετε να φαίνονται καλύτερα από ό, τι ακόμα-άλλο-Bootstrap-site.

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

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

1. Χρησιμοποιήστε το χρώμα και το βάρος για να δημιουργήσετε ιεραρχία αντί για μέγεθος

Ένα συνηθισμένο λάθος όταν το κείμενο του UI στυλ εξαρτάται πάρα πολύ από το μέγεθος της γραμματοσειράς για τον έλεγχο της ιεραρχίας σας.

"Είναι σημαντικό αυτό το κείμενο; Ας το καταστήσουμε μεγαλύτερο. "

"Είναι αυτό το κείμενο δευτερεύον; Ας το κάνουμε μικρότερο. "

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

"Είναι σημαντικό αυτό το κείμενο; Ας το κάνουμε πιο τολμηρό. "

"Είναι αυτό το κείμενο δευτερεύον; Ας χρησιμοποιήσουμε ένα ελαφρύτερο χρώμα. "

Δοκιμάστε και κολλήστε σε δύο ή τρία χρώματα:

  • Ένα σκοτεινό (αλλά όχι μαύρο) χρώμα για πρωταρχικό περιεχόμενο (όπως ο τίτλος ενός άρθρου)
  • Γκρι για δευτερεύον περιεχόμενο (όπως την ημερομηνία δημοσίευσης ενός άρθρου)
  • Ένα πιο γκρι χρώμα για βοηθητικό περιεχόμενο (ίσως η ειδοποίηση πνευματικών δικαιωμάτων σε ένα υποσέλιδο)

Παρομοίως, δύο βάρη γραμματοσειρών είναι συνήθως αρκετά για την εργασία UI:

  • Ένα κανονικό βάρος γραμματοσειράς (400 ή 500 ανάλογα με τη γραμματοσειρά) για το μεγαλύτερο μέρος του κειμένου
  • Ένα βαρύτερο βάρος γραμματοσειράς (600 ή 700) για κείμενο που θέλετε να τονίσετε

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

2. Μην χρησιμοποιείτε γκρι κείμενο σε έγχρωμο φόντο

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

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

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

Υπάρχουν δύο τρόποι με τους οποίους μπορείτε να μειώσετε την αντίθεση όταν εργάζεστε με πολύχρωμα φόντα:

1. Μειώστε την αδιαφάνεια του λευκού κειμένου

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

2. Επιλέξτε χειροκίνητα ένα χρώμα που βασίζεται στο χρώμα του φόντου

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

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

3. Offset σκιές σας

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

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

Αυτό ισχύει για τις σκιές εισόδου, όπως μπορείτε να χρησιμοποιήσετε σε φρεάτια ή να εισάγετε μορφές:

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

4. Χρησιμοποιήστε λιγότερα σύνορα

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

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

Την επόμενη φορά που θα βρεθείτε να φτάσετε στα σύνορα, δοκιμάστε μία από αυτές τις ιδέες:

1. Χρησιμοποιήστε μια σκιά κουτιού

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

2. Χρησιμοποιήστε δύο διαφορετικά χρώματα φόντου

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

3. Προσθέστε επιπλέον απόσταση

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

5. Μην ανατινάξετε τα εικονίδια που προορίζονται να είναι μικρά

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

Πρόκειται για εικόνες φορέα μετά από όλα, έτσι ώστε η ποιότητα δεν πρόκειται να υποφέρει αν αυξήσετε το μέγεθος σωστά;

Ενώ είναι αλήθεια ότι οι εικόνες διάνυσμα δεν θα υποβαθμίσει την ποιότητα όταν αυξάνετε το μέγεθός τους, τα εικονίδια που έχουν σχεδιαστεί σε 16-24px δεν πρόκειται ποτέ να φαίνονται πολύ επαγγελματικά όταν τα φυσήξετε μέχρι 3x ή 4x το προβλεπόμενο μέγεθος τους. Έχουν έλλειψη λεπτομέρειας και πάντα αισθάνονται δυσανάλογα "χοντροκομμένα".

Εάν τα μικρά εικονίδια είναι όλα που έχετε, δοκιμάστε να τα περικλείσετε μέσα σε άλλο σχήμα και να δώσετε στο σχήμα ένα χρώμα φόντου:

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

Αν έχετε τον προϋπολογισμό, θα μπορούσατε επίσης να χρησιμοποιήσετε ένα πακέτο εικονιδίων premium σχεδιασμένο για χρήση σε μεγαλύτερα μεγέθη, όπως Heroicons ή Iconic.

6. Χρησιμοποιήστε σύνορα προφορά για να προσθέσετε χρώμα σε ένα ήπιο σχέδιο

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

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

Για παράδειγμα, κατά μήκος της πλευράς ενός μηνύματος προειδοποίησης:

... ή για να επισημάνετε τα ενεργά στοιχεία πλοήγησης:

... ή ακόμα και στην κορυφή ολόκληρης της διάταξης:

Δεν παίρνει κανένα ταλέντο γραφικού σχεδιασμού για να προσθέσετε ένα έγχρωμο ορθογώνιο στο UI σας, και μπορεί να κάνει πολύ δρόμο για να κάνει το site σας να αισθάνεται πιο «σχεδιασμένο».

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

7. Όχι κάθε κουμπί χρειάζεται ένα χρώμα φόντου

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

Πλαίσια, όπως το Bootstrap, ενθαρρύνουν αυτό, δίνοντάς σας ένα μενού σημασιολογικών στυλ για να επιλέξετε από κάθε φορά που προσθέτετε ένα νέο κουμπί:

"Είναι μια θετική ενέργεια; Κάντε το κουμπί πράσινο. "

"Διαγράφει αυτό το στοιχείο; Κάντε το κουμπί κόκκινο. "

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

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

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

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

"Τι γίνεται με καταστροφικές πράξεις, δεν πρέπει πάντα να είναι κόκκινα;"

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

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

Απολαύστε αυτή τη θέση; Απελευθερώσαμε ένα βιβλίο!

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

Πάνω από 6000 άτομα το έχουν πάρει μέχρι τώρα, και η ανατροφοδότηση ήταν καταπληκτική.

Αν σας ενδιαφέρει, κατευθυνθείτε στο RefactoringUI.com/book για να μάθετε περισσότερα και να κάνετε λήψη δείγματος.