10 κωδικοί εξαπατήσει για το σχεδιασμό διεπαφών χρήστη

Πιθανότατα θα υποθέσω ότι οι περισσότεροι από εμάς ξεκίνησαν στο σχεδιασμό UI με τις ελάχιστες γνώσεις ή τίποτα καθόλου. Αλλά παρόλο που οι πιθανότητες ήταν εναντίον μας κατά την εκκίνηση, κατορθώσαμε να βρούμε πολλά βιβλία και άρθρα για να κατανοήσουμε πώς τα χρώματα, η τυπογραφία, η διάταξη κ.λπ. Θυμάμαι πώς είναι καθιερωμένο σε εμάς στην Make Technology, μια εταιρεία με γνώμονα την UX, ότι το Design δεν μπορεί να εξηγηθεί απλά με χρώματα, σχήματα και κείμενο. Είναι μια διαδικασία που έχει ένα "Γιατί" πίσω από αυτό, ότι κάθε φορά που δημιουργούμε ένα κείμενο μεγαλύτερο, προσθέτουμε μια σκιά ή αλλάζουμε το χρώμα, πρέπει να υπάρχει ένας λόγος για τον οποίο τα πράγματα πρέπει να είναι.

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

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

1. Αυτό το κείμενο είναι σημαντικό, το κάνετε μεγαλύτερο!

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

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

Αποκαλύψτε αν η φωτογραφία έρχεται σε χαμηλή μορφή ️

Πώς μπορώ να δημιουργήσω καλύτερη αντίθεση;

  • Μη χρησιμοποιείτε ένα είδος βάρους με διαφορετικά μεγέθη γραμματοσειρών για να δημιουργήσετε αντίθεση και ιεραρχία.
  • Αντ 'αυτού, χρησιμοποιήστε το πιο τολμηρότερο και σκουρότερο στυλ για το πρωταρχικό περιεχόμενο ή μικρότερες και ελαφρύτερες για δευτερεύον περιεχόμενο (λιγότερο σημαντικό).
  • Δημιουργήστε τρία είδη χρωμάτων κειμένου που κυμαίνονται από το σκοτάδι στο φως (δείτε το παράδειγμα παρακάτω). Συνήθως χρησιμοποιώ το βασικό μου χρώμα ως χρώμα κορμού.
  • Μην φοβάστε να εφαρμόσετε μεγάλα κενά γραμματοσειράς στα στοιχεία σας (δηλαδή, 24px κεφαλίδα, 16px body text, 10px meta κ.λπ.). Μεγαλύτερο χάσμα = καλύτερη αντίθεση.
  • Ανατρέξτε στο Modularscale μια ηλεκτρονική αριθμομηχανή που μπορείτε να χρησιμοποιήσετε για να δημιουργήσετε καλύτερη ιεραρχία γραμματοσειρών.
  • Θυμηθείτε ότι η αντίθεση είναι = μέγεθος + βάρος + χρώμα.
  • Τέλος, βεβαιωθείτε ότι έχετε ελέγξει τον λόγο αντίθεσης. Μπορείτε να χρησιμοποιήσετε αυτήν την αριθμομηχανή για να ελέγξετε την προσβασιμότητά της.
από το βασικό χρώμα μου, κινούμαι από πιο σκούρα για πρωτοσέλιδα σε ελαφρύτερα για βοηθητικό περιεχόμενο.

2. Μην δημιουργείτε πολλές αποχρώσεις μαύρου χρώματος

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

Όλοι γνωρίζουμε ότι η χρήση μαύρου κειμένου (# 000) προκαλεί παραμορφώσεις στα μάτια για τους αναγνώστες, και έτσι η λύση μας είναι να δημιουργήσουμε πιο σκούρες εναλλακτικές παραλλαγές. Αλλά αντί να παίρνουμε χρώμα 3 ή περισσότερες hex τιμές, μπορούμε να χρησιμοποιήσουμε μαύρο με διαφορετική αδιαφάνεια ως λύση:

Στο παραπάνω παράδειγμα, χρησιμοποίησα μαύρο ως κύριο χρώμα μου (# 000) και μείωσα την αδιαφάνεια αυτού ανάλογα με το πού θα εφαρμοστεί (δηλ. Το πρωτογενές περιεχόμενο, το δευτερεύον περιεχόμενο κ.λπ.)

3. Κάντε τα μαθηματικά για την κατανόηση των χρωμάτων

Οι περισσότεροι από εμάς πιπιλίζουν να επιλέγουν τους σωστούς συνδυασμούς χρωμάτων και όταν βλέπουμε ένα σχέδιο με μια καλά ενορχηστρωμένη χρωματική παλέτα, αναρωτιόμαστε πώς "το έκαναν το F;" (όπως και το παρακάτω):

που λαμβάνονται από momoandspirits

Μέχρι που έμαθα ότι η κατανόηση των χρωμάτων δεν είναι μόνο για όσους έχουν το δώρο του σχεδιασμού από την αρχή του χρόνου, ότι μια απλή προσθήκη και αφαίρεση στο Hue, Saturation, Brightness (HSB) θα κάνει τη μαγεία (θα χρησιμοποιήσουμε το HSB γι 'αυτό τύπος αντί RGB). Μπορείτε εύκολα να απαλλαγείτε από το βαρετό λευκό πάνω σε έγχρωμο φόντο και να το μετατρέψετε σε έργο Picasso όπως αυτή που ακολουθεί:

Έτσι πού έρχεται η προσθήκη και η αφαίρεση στο HSB;

Δύο τρόποι κατανόησης των χρωμάτων

Υπάρχουν δύο προσεγγίσεις που μπορούμε να κάνουμε και, όπως βλέπουμε, και οι δύο επιλογές έχουν το ίδιο χρώμα βάσης # B9F4BC (φόντο κύκλου), αλλά διαφέρουν όταν πρόκειται για το φάκελο Φάκελος και Ζώνη. Καθώς ξεκινάμε, να θυμάστε πάντα ότι ο πρώτος αριθμός αντιστοιχεί στο Hue, ακολουθούμενος από το Saturation και, τέλος, τη Φωτεινότητα.

Επιλογή Α

Επιλογή Α

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

Τώρα, καθώς εστιάζουμε στον Κορεσμό της βάσης που είναι 24 και η Φωτεινότητα 96, και οι δύο τιμές άλλαξαν όταν δημιουργήσαμε πιο σκοτεινό πράσινο για το Φάκελο. Από τον Κορεσμό των 24 έγινε 40 (αύξηση +16) και από Φωτεινότητα 96 έγινε 82 (μείωση -14), πράγμα που μας δείχνει ότι μια αλλαγή στον κορεσμό, είτε βαθμιαία είτε μειωτική χρειάζεται μια αντίστροφα αναλογική προσαρμογή στη φωτεινότητα, για να δημιουργήσετε μια καλή αντίθεση (αντίστροφα). Και το ίδιο συνέβη και στη Γάζα, χρησιμοποιώντας τον Κορεσμό του Φάκελου και τη Φωτεινότητα ως τιμή βάσης, μετακινήσαμε από 40 σε 44 (αύξηση +04) και μειώσαμε από 82 σε 75 (μείωση -07) για Φωτεινότητα. στον τύπο:

Σκοτεινότερη τιμή = Η αύξηση του κορεσμού είναι μια μείωση στη Φωτεινότητα
Λιγότερη τιμή = Η μείωση του κορεσμού είναι μια αύξηση της Φωτεινότητας

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

Επιλογή Β

Επιλογή Β

Στην Επιλογή Β, η ίδια αρχή εξακολουθεί να εφαρμόζεται (ο τύπος που είχαμε παραπάνω) αλλά αλλάζουν οι τιμές Hue. Και οι ορολογίες RGB και CMY, τις οποίες χρησιμοποιούσαμε σε διάφορα υλικά σχεδιασμού, θα έχουν τώρα νόημα για εμάς.

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

Τώρα στην επιλογή Β, αν θέλουμε να έχουμε μια πιο σκούρα διακύμανση του βασικού χρώματος, το μόνο που πρέπει να κάνουμε είναι να μετακινήσουμε τον επιλογέα χρώματος στην κατεύθυνση που βρίσκεται η κοντινότερη RGB στην παλέτα χρωμάτων μας ή να την μετακινήσουμε προς την κατεύθυνση της CMY για ελαφρύτερη παραλλαγή. Για παράδειγμα:

Επιλογέας χρώματος

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

* Συχνότερα RGB οδηγεί σε πιο σκούρο παραλλαγή και CMY για ελαφρύτερο

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

Κόκκινο, Πράσινο, Μπλε (RGB) + Επιλογή Α τύπος = Σκοτεινότερη παραλλαγή
Κυανό, Ματζέντα, Κίτρινο (CMY) + Επιλογή Α τύπος = Παραλλαγή ελαφρύτερο

4. Χρησιμοποιήστε απόσταση για να διαχωρίσετε τις ομάδες

Να είστε ένας γενναιόδωρος δωρητής χώρου

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

Όπως ορίζει ο νόμος της εγγύτητας:

Τα αντικείμενα που βρίσκονται κοντά ή κοντά σε άλλα τείνουν να ομαδοποιούνται.

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

5. Χρησιμοποιήστε τα χρώματα για να διαχωρίσετε τις σειρές

Τα χρώματα ως διαχωριστικά

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

6. Πολλαπλασιάστε αντί για κείμενο με σκιασμένα στοιχεία

Σχεδίαση κεφαλίδων

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

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

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

Χαρακτηριστικά για επιλογές συνδυασμού πολλαπλασιασμού

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

7. Μήκος γραμμής

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

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

με μεγάλο λευκό χώρο στα δεξιά

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

κεντρικό περιεχόμενο

8. Μην επανεφεύρετε τον τροχό

Αυτό που κάνει ένα σχέδιο ασυνεπής είναι όταν δεν βασίζεται σε συστατικά. Είναι όταν συνειδητοποιήσατε ότι έχετε κάνει 5 είδη διασύνδεσης κάρτας, 10 κουμπιά, 5 τίτλους τίτλου κτλ.

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

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

9. Χρησιμοποιήστε χρώματα επωνυμίας ως τόνους

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

10. Κρεμάστε τις σφαίρες

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

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

Αυτό το άρθρο είναι εμπνευσμένο από 7 πρακτικές συμβουλές για εξαπάτηση στο σχεδιασμό και από τους τόνους των σχεδίων άρθρα που έχω διαβάσει :)

Άλλες ιστορίες από μένα

Για οποιεσδήποτε ερωτήσεις, πατήστε μου στο mhariellmosqueriola@gmail.com

giphy