10 κοινά λάθη σχεδίασης ... και πώς να τα αποφύγετε

Οι εργασίες σχεδιασμού είναι μια πολύπλοκη επιχείρηση. Είναι πάρα πολύ εύκολο να χαλάσετε.

Για να δημιουργήσετε προϊόντα υψηλής ποιότητας, όλες οι μικρές λεπτομέρειες είναι εξαιρετικά σημαντικές. Κάθε λεπτομέρεια πρέπει να ληφθεί υπόψη. Μπορεί να είναι εύκολο να χαθείτε στις λεπτομέρειες και να χάσετε τη θέα της μεγάλης εικόνας. Αυτός είναι ο λόγος για τον οποίο υπάρχουν πολλά απίστευτα κοινά σφάλματα και αδυναμίες σχεδιασμού διεπαφής χρήστη (UI).

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

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

1. Έλλειψη προγραμματισμού για περιπτώσεις άκρων (Ας πούμε όχι στο Lorem Ipsum)

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

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

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

Επιλογή εικόνων

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

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

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

Κατανόηση των επαναλαμβανόμενων μπλοκ

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

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

Σχεδιασμός κλίμακας

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

2. Ανεπαρκείς σχολιασμοί οθόνης

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

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

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

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

3. Φρουτίζοντας τα κράτη σφάλματος

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

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

  • Πρέπει να είναι αναγνωρίσιμα και εμφανή (π.χ., το κόκκινο χρώμα είναι ένα κοινό μοτίβο UI που υποδεικνύει ένα σφάλμα).
  • Πρέπει να εξηγούν με σαφήνεια τι συνέβη και πώς οι χρήστες μπορούν να διορθώσουν το σφάλμα.
  • Θα πρέπει να είναι συμφραζόμενα. Είναι καλύτερα να εμφανίζετε μηνύματα σφάλματος κοντά στο στοιχείο στο οποίο σχετίζονται.
  • Δεν πρέπει να είναι ερεθιστικές. Ο χρήστης σας δεν είναι ήδη αρκετά ερεθισμένος από το σφάλμα;

Οι σχεδιαστές θα πρέπει επίσης να φροντίζουν για απροσδόκητα σφάλματα (π.χ. σφάλματα διακομιστή, η σελίδα δεν βρέθηκε). Οποιοδήποτε μήνυμα σφάλματος αποτελεί εμπόδιο στη ροή του χρήστη. Γι 'αυτό πρέπει να βοηθήσουμε τον χρήστη να το χειριστεί, να δώσει οποιεσδήποτε πιθανές λύσεις και να προσπαθήσει να εξομαλύνει μια κακή εμπειρία - ειδικά αν δεν είναι λάθος του χρήστη. Για παράδειγμα, μια καλή λύση μπορεί να είναι να σχεδιάσετε εικονογραφήσεις ή κινούμενα σχέδια για 404 και 500 σελίδες.

Να είστε προσεκτικοί με τους Έλεγχους Φόρμας

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

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

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

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

Ζύγιση κόστους και αξίας

Μην ακούτε τους προγραμματιστές που προσπαθούν να σας πω ότι θα κοστίσει ένα υψηλό επίπεδο προσπάθειας για την εφαρμογή με τον τρόπο που θέλετε. Θυμηθείτε: ΜΗΝ αποφύγετε αυτό το πρόβλημα θα σας κοστίσει πελάτες! Κανείς δεν χρειάζεται μια υπηρεσία ή ένα προϊόν χωρίς πελάτες. Ακόμα κι αν ήταν φθηνό να αναπτυχθεί.

4. Πολύ κενά κενά κράτη

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

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

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

5. Έλλειψη ιεραρχίας τυπογραφίας

Στη συνέχεια, ένα άλλο θέμα που προκαλεί πολλά σχεδιαστικά λάθη αποφεύγεται καλύτερα - τυπογραφία.

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

Χρήση γραμματοσειρών και γραμματοσειρών

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

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

Δίνοντας προσοχή στο Kerning

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

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

Διατήρηση της οπτικής ιεραρχίας

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

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

6. Ανεπαρκής κάλυψη και διαχωρισμός

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

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

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

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

  • Ορίστε την επικεφαλίδα padding-bottom σε 40px, στη συνέχεια ακολουθήστε την με μια παράγραφο κειμένου.
  • Ορίστε την παρακέντηση παραγράφου-κάτω σε 10px.
  • Εάν υπάρχει ένα υποκεφάλαιο μετά την παράγραφο, δώστε το 30px για το padding-top (δηλ. Ο χώρος μεταξύ της παραγράφου και της κορυφής του υποτίτρου θα είναι 30px) και 20px για το padding-bottom (δηλ. Ο χώρος μεταξύ του κάτω κεφαλαίου και της παραγράφου θα είναι 20px, το οποίο είναι μεγαλύτερο από το διάστημα μεταξύ των παραγράφων).

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

7. Μελωδική εικονογραφία

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

Στις εφαρμογές, τα εικονίδια είναι συχνά τα αντίστοιχα κουμπιά. Απλά ελέγξτε το Instagram: Θα δείτε μόνο εικονίδια και κείμενο.

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

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

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

  • Πλάτος γραμμής - Μετά την αλλαγή μεγέθους, όλα τα εικονίδια σας θα πρέπει να έχουν ίσο πλάτος γραμμής. Διαφορετικά, θα είναι πολύ αισθητό ότι δεν το κάνουν.
  • Ακτίνα γωνίας - Εάν τα εικονίδια σας περιλαμβάνουν κάποια ορθογώνια σχήματα, συγκρίνετε την ακτίνα γωνίας κάθε εικονιδίου στο σετ σας. Αν είναι διαφορετικό για διαφορετικά εικονίδια, θα πρέπει να το διορθώσετε.
  • Σχήματος καπακιού γραμμής (για εικονίδια) - Μπορεί να είναι ορθογώνιο ή στρογγυλεμένο.
  • Οι γωνίες ενώνουν το σχήμα (για εικονίδια) - Μπορούν να είναι ορθογώνιες ή στρογγυλεμένες.

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

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

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

8. Χαμηλή Αντίθεση

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

Η αντίθεση εμφανίζεται όταν δύο στοιχεία σε μια σελίδα είναι διαφορετικά. Για παράδειγμα, η αντίθεση μπορεί να οφείλεται στη χρήση διαφορετικών χρωμάτων για το κείμενο και το χρώμα φόντου. Θα μπορούσε να είναι μια επικεφαλίδα σε μια μεγάλη, τολμηρή, πλούσια γραμματοσειρά που χρησιμοποιείται παράλληλα με μια κομψή γραμματοσειρά sans-serif για το κείμενο κορμί. Θα μπορούσε να είναι η διαφορά ανάμεσα σε ένα μεγάλο γραφικό και ένα μικρό γραφικό, ή θα μπορούσε να είναι μια τραχιά υφή σε συνδυασμό με μια λεία υφή.

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

Χρησιμοποιώντας το Λευκό Διάστημα

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

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

Εξασφαλίζοντας επαρκή αντίθεση μεταξύ κειμένου και εικόνων

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

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

Αποφυγή υπερβολικής δόσης αντίθεσης

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

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

9. Αποτυχία να σκεφτούμε την πολλαπλή πλατφόρμα

Ναι, ιδανικά, αυτό δεν πρέπει πλέον να αποτελεί πρόβλημα στον σημερινό κόσμο. Όλοι γνωρίζουμε ότι οι περισσότεροι χρήστες έχουν πρόσβαση σε υπηρεσίες ιστού από κινητές συσκευές. Δυστυχώς, πολλοί σχεδιαστές εξακολουθούν να έχουν την τάση να ξεχνούν αυτό το γεγονός. (Ή ίσως είναι ότι οι πελάτες δεν θέλουν να περάσουν τα χρήματα για να δημιουργήσουν σχέδια βελτιστοποιημένα για κινητά;)

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

Μπορείτε να επιλέξετε ένα ωραίο στοιχείο UI που θα λειτουργεί τέλεια σε επιτραπέζιες συσκευές - αλλά δεν θα είναι ωραίο για τους χρήστες smartphone. Ή αντιστρόφως. Γι 'αυτό είναι σημαντικό να έχετε πάντα κατά νου τη μεγάλη ποικιλία συσκευών που πρέπει να σχεδιάσουμε για τις μέρες μας.

10. Πολύ Σχεδιασμός

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

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

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

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

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

Σχετικά με τον Συγγραφέα

Η Senior UI / UX σχεδιαστής Maria Pisarenko εντάχθηκε στο Distillery το 2018. Έφερε πάνω από 6 χρόνια εμπειρίας σχεδιασμού και έχει κατασκευάσει αμέτρητες διεπαφές για πελάτες σε όλο τον κόσμο. Τα πάθη της Μαρίας περιλαμβάνουν την εικονογραφία, την τυπογραφία και την εικονογράφηση. πιστεύει ότι ο σχεδιασμός διαδραματίζει καθοριστικό ρόλο για να γίνει ο κόσμος μια καλύτερη θέση.