Πώς και γιατί σχεδίασα μια χρωματική παραλλαγή και ένα εργαλείο προσβασιμότητας

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

Η διαδικασία μου έμοιαζε κάπως έτσι:

  1. Δημιουργήστε μια παλέτα χρησιμοποιώντας Coolors
  2. Επιλέξτε παραλλαγές για κάθε χρώμα χρησιμοποιώντας το SASS Color Generator
  3. Σύζευξη παραλλαγών σε συνδυασμούς φόντου / προσκηνίου.
  4. Βεβαιωθείτε ότι τα ζεύγη είναι προσβάσιμα χρησιμοποιώντας τον ελεγκτή χρωματικής αντίθεσης.
  5. Προσθέστε τα επιλεγμένα χρώματα στο εργαλείο επιλογής μου (Figma).
  6. Ρυθμίστε τα χρώματα και επαναλάβετε από το βήμα 2.

Λοιπόν, ποιο ήταν το πρόβλημα;

Η παλιά μου διαδικασία περιλάμβανε πολλά μεταξύ των διαφορετικών εφαρμογών. Δεν μπορούσα να τροποποιήσω τα χρώματα μου και να δω τον αντίκτυπο στην προσβασιμότητα σε πραγματικό χρόνο. Αντ 'αυτού, έπρεπε να αντιγράψω / επικολλήσω κωδικούς HEX από τη μία εφαρμογή στην άλλη. Στη συνέχεια, όταν ήμουν έτοιμος να ξεκινήσω την ανάπτυξη, έπρεπε να δημιουργήσω χειροκίνητα τις μεταβλητές στο SASS / CSS και να αντιγράψω ξανά τις τιμές.

Και η λύση;

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

  1. Δημιουργήστε μια παλέτα χρησιμοποιώντας Coolors
  2. Επιλέξτε παραλλαγές, συνδυάστε χρώματα και κάντε τροποποιήσεις χρησιμοποιώντας μία εφαρμογή.
  3. Προσθέστε τα χρώματα που προκύπτουν στο εργαλείο επιλογής μου.

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

Η αρχική απόδειξη της έννοιας

Ήθελα να ξεκινήσω κάτι το συντομότερο δυνατό, ώστε να μπορέσω να το δοκιμάσω Για το σκοπό αυτό, ξεκίνησα να δημιουργώ ένα πρωτότυπο.

Χρησιμοποιήστε Θήκες

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

  1. Ως χρήστης, θέλω να δημιουργήσω παραλλαγές για τα βασικά μου χρώματα.

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

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

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

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

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

Μια (πολύ τραχιά) έκδοση εργασίας

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

Αντί να το περιγράψουμε περισσότερο, ας ρίξουμε μια ματιά.

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

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

Το καλό και το κακό του αρχικού σχεδιασμού

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

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

Λειτουργία παραλλαγής

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

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

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

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

Οι αλληλεπιδράσεις δεν ήταν προφανείς

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

Οι τρόποι ήταν μπερδεμένοι

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

Χρειάστηκε πάρα πολύ κλικ

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

Δεν ήταν ορατές αρκετές πληροφορίες στην οθόνη ταυτόχρονα

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

Μια δεύτερη απόπειρα

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

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

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

Ας ρίξουμε μια ματιά σε αυτό που βρήκα.

Μπορείτε να αποκτήσετε πρόσβαση στην τρέχουσα έκδοση της εφαρμογής εδώ.

Επόμενα βήματα

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

Εισαγωγή από κωδικό

Εκτός από την εξαγωγή της παλέτας, σχεδιάζω να προσθέσω τη δυνατότητα ανάγνωσης των αρχικών βασικών χρωμάτων από κώδικα που περιέχει μεταβλητές (SASS και CSS μεταβλητές για να ξεκινήσετε με)

Εξαγωγή σε περισσότερες μορφές

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

Ενσωματώστε με εργαλεία σχεδίασης

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

Κάντε πιο συγκεκριμένη τη διεπαφή χρήστη

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

Ανατροφοδότηση και αναφορά σφαλμάτων

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

Ανατροφοδότηση

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

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

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

Συνδέσεις

Πρωτότυπο

Τρέχουσα έκδοση

Βιβλιοθήκη συστατικών