100DaysUI - 002: Πώς να πρωτότυπο μια διάκριση Widget Αλληλεπίδραση στην αρχή

Διαθέτει σκοτεινό UI για τον ήχο web

Σκούρο Dribble UI

100daysUI

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

Ημέρα 2 - Dark Audible Web Player και βαθμολόγηση του Widget χρησιμοποιώντας τους Drivers Αρχή

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

μερικά πράγματα είναι πιο εύκολα με τον κώδικα

Έτσι, πώς να κάνετε αυτό το widget στην αρχή:

Μέρος 1 - Σχεδιασμός & προετοιμασία

1. στο Sketch ή στο Figma, σχεδιάστε το widget αξιολόγησης δημιουργώντας όλα τα απαραίτητα στοιχεία:

  • 5 emojis (ή ό, τι θέλετε) για τις πέντε πιθανές βαθμολογίες (χασμουρητό, umm, καλό, μεγάλο, ερωτευμένο) και τοποθετήστε τις επάνω ο ένας στον άλλο.

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

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

2. Βάλτε το στην αρχική κατάσταση (χασμουρητό) μειώνοντας την αδιαφάνεια όλων των emojis και των περιγραφών κειμένου σε 0% εκτός από εκείνες για εκείνη την κατάσταση.

3. Εισαγάγετε τον artboard στην αρχή.

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

ελέγξτε την παρακάτω εικόνα οθόνης για να δείτε πώς να το κάνετε αυτό.

Μέρος 2 - Σχέδιο αλληλεπίδρασης

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

θα αλλάξουμε την εμφανιζόμενη εικόνα βαθμολόγησης και κείμενο βάσει της οριζόντιας θέσης της λαβής.

2. επιλέξτε όλα τα επίπεδα emojis και κειμένου, εκτός από το χασμουρητό + όλα τα πλήκτρα αξιολόγησης πληρώνουν εκτός από το κόκκινο και δημιουργήστε ένα keyframe όπου όλα έχουν αδιαφάνεια 0%.

2. Μετακινήστε τη λαβή στο μήκος του πορτοκαλί γεμίσματος και προσθέστε ένα κλειδί σε ένα κλειδί όπου:

  • η αδιαφάνεια του YAWN και του κειμένου του είναι 0%.
  • η αδιαφάνεια του κράτους UMM και του κειμένου του είναι 100%.
  • η αδιαφάνεια του γεμίσματος πορτοκαλιού είναι 100% και η κόκκινη είναι 0%.

ΠΡΟΒΛΗΜΑ

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

υπάρχουν σημεία στα οποία ο χρήστης θα έχει μια κατάσταση μεταξύ

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

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

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

5. Επαναλάβετε αυτό για όλες τις επόμενες καταστάσεις και θα έχετε ένα λειτουργικό widget όπως το παρακάτω:

Ελπίζω να απολαύσετε αυτό το σεμινάριο!

  1. Υπάρχουν σχόλια? πράγματα που ξέρετε έναν καλύτερο τρόπο να κάνετε;

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

3. Emjois είναι από το Roundicons.

4. Μάθετε για τους οδηγούς της αρχής εδώ.