7 Χρήσιμες συμβουλές για το σχεδιασμό ενός Dark UI

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

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

1. Μην χρησιμοποιείτε καθαρό μαύρο

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

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

2. Βεβαιωθείτε ότι η αντίθεση κειμένου πληροί τις οδηγίες WCAG 2.0

Επιλέξτε έναν συνδυασμό χρωμάτων που προσφέρει το κατάλληλο επίπεδο αντίθεσης, ώστε το κείμενο να είναι ευανάγνωστο. Οι οδηγίες του WCAG 2.0 αναφέρουν ότι το κείμενο ή οι εικόνες κειμένου πρέπει να έχουν λόγο αντίθεσης τουλάχιστον 4,5:1 με μεγάλο κείμενο (τουλάχιστον 18 σημεία ή έντονη γραφή 14 σημείων) πρέπει να έχουν λόγο αντίθεσης τουλάχιστον 3:1.

Υπάρχουν πολλά εργαλεία για τον έλεγχο της χρωματικής αντίθεσης, συμπεριλαμβανομένου του ΚΥΜΑ Επέκταση Chrome που ελέγχει επίσης πόσο προσβάσιμα είναι τα χρώματα.

3. Επιλέξτε το σωστό στυλ γραμματοσειράς

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

Εξετάστε τα ακόλουθα στυλ για μια ιστοσελίδα:

σώμα {
γραμματοσειρά-οικογένεια: "ΜεταφορέαςΝέος", μονοδιάστημα;
μέγεθος γραμματοσειράς: 12px;
βάρος γραμματοσειράς: 200;
ύψος γραμμής: 1; 
χρώμα: #333333;
}

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

Παρακάτω είναι μερικά κατάλληλα στυλ που θα μπορούσατε να χρησιμοποιήσετε αντ 'αυτού.

σώμα {
γραμματοσειρά-οικογένεια: "Arial", Σανς σέριφ;
μέγεθος γραμματοσειράς: 16px; 
βάρος γραμματοσειράς: 400; 
ύψος γραμμής: 1.5; 
χρώμα: #FFFFFF;
χρώμα του φόντου: #121212; 
}

Και εδώ είναι η σελίδα που προκύπτει:

4. Αποφύγετε τα κορεσμένα χρώματα με έμφαση

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

Για να το αποδείξετε, εξετάστε αυτά τα δύο στυλ κουμπιών:

/* Κορεσμένο μπλε */
.btn-saturated-blue {
χρώμα του φόντου: #121212;
χρώμα: #0e0bf6;
}
/* Μπλε σε σίγαση */
.btn-muted-blue {
χρώμα του φόντου: #121212; 
χρώμα: #4c5ab3;
}

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

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

5. Χρησιμοποιήστε το αρνητικό διάστημα για να αποτρέψετε τη δημιουργία βαριάς διεπαφής χρήστη

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

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

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

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

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

7. Βεβαιωθείτε ότι οι εικόνες σας ταιριάζουν με το Dark UI

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

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

@μεσο ΜΑΖΙΚΗΣ ΕΝΗΜΕΡΩΣΗΣ (prefers-color-scheme: σκοτεινό) {
/* Εφαρμόστε αυτό το στυλ μόνο σε σκοτεινή λειτουργία */
.bgpattern {
εικόνα φόντου: url("/σκοτάδι.jpg");
 }
}

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

Πότε να χρησιμοποιήσετε ένα Dark UI

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

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