Σχεδιασμός προσαρμοστικών εικονιδίων

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

Για μια ματιά πίσω από πού προέρχεται αυτό το χαρακτηριστικό, δείτε:

Βασικές αρχές

Μέγεθος και σχήμα

Τα προσαρμοστικά εικονίδια είναι μεγέθους 108dp * 108dp αλλά καλύπτονται σε μέγιστο επίπεδο 72dp * 72dp. Διαφορετικές συσκευές μπορούν να παρέχουν διαφορετικές μάσκες που πρέπει να έχουν κυρτό σχήμα και να φθάνουν τουλάχιστον 33dp από το κέντρο σε μέρη.

Παραδείγματα διαφορετικών διαμορφωμένων μάσκες που εφαρμόζονται

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

Ασφαλής ζώνη μέσα σε μια στρογγυλή τετράγωνη μάσκα

Keylines

Κλειδιά εικονιδίων

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

  • Κύκλοι: 52dp & 36dp
  • Τετράγωνο: 44dp * 44dp, ακτίνα ακτίνας 4dp
  • Ορθογώνια: 52dp * 36dp & 36dp * 52dp, ακτίνα ακτίνας 4dp

Δείτε τα πρότυπα που περιλαμβάνονται στο τέλος αυτού του άρθρου.

Επίπεδα

Τα προσαρμοστικά εικονίδια αποτελούνται από δύο στρώματα. ένα πρώτο πλάνο και ένα υπόβαθρο. Και τα δύο επίπεδα είναι 108dp * 108dp. το φόντο πρέπει να είναι πλήρως αδιαφανές ενώ το προσκήνιο μπορεί να περιλαμβάνει διαφάνεια. Αυτά τα στρώματα στοιβάζονται το ένα πάνω στο άλλο.

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

Καθώς τα εικονίδια 108dp * 108dp καλύπτονται μέχρι 72dp * 72dp, το εξωτερικό 18dp σε κάθε πλευρά μπορεί να θεωρηθεί ως το "επιπλέον" περιεχόμενο, το οποίο αποκαλύφθηκε μόνο κατά τη διάρκεια της κίνησης.

Ζητήματα σχεδιασμού

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

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

Απόκομμα

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

Αγκύρωση φόντου

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

Στοιχεία σε διαφορετικές στρώσεις υπογραμμίζουν τη στρωματοποίηση

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

Μάσκες μάσκες

Νομίζω ότι μπορεί να υπάρξουν ενδιαφέρουσες ευκαιρίες για την τοποθέτηση στοιχείων κάλυψης στο προσκήνιο - δηλαδή συμπαγή στοιχεία με περιοχές που κόβονται. Εξετάστε ένα πιθανό εικονίδιο για το Google Play Store, αυτό θα μπορούσε να κατασκευαστεί με έναν «προφανή» τρόπο, ο οποίος τοποθετεί το έγχρωμο τρίγωνο στο προσκήνιο πάνω σε λευκό φόντο.

Ένα «τυποποιημένο» προσκήνιο τοποθετημένο πάνω σε λευκό φόντο

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

Ένα εναλλακτικό πολύχρωμο φόντο με προσκήνιο κάλυψης

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

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

Φως και σκιές

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

Παράδειγμα σκιάς προσκηνίου και (υπερβολικού) φωτός πηγαίνει στο φόντο

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

Αφήστε πίσω

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

Τα στοιχεία αποκάλυψαν μόνο υπό κίνηση

Πόροι και εργαλεία

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

Επίσης, έχω ανεβάσει ένα πρότυπο Adobe Illustrator εάν αυτό είναι κάτι περισσότερο.

Επιπλέον, ελέγξτε αυτούς τους άλλους πόρους που έχω συναντήσει:

  • Εργαλείο προεπισκόπησης προσαρμοστικού εικονιδίου
  • Πρότυπο σχεδιαστή συγγένειας
  • Τα πρότυπα Bjango περιλαμβάνουν προσαρμοσμένα εικονίδια
  • Πρότυπο Figma (απαιτείται σύνδεση)
  • Πρότυπο Adobe XD

Παιδική χαρά προσαρμοστικών εικονιδίων

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

Πειραματιστείτε με μάσκες και εφέ κίνησης που εφαρμόζονται στα εικονίδια σας

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

Μπορείτε να κατεβάσετε ένα APK ή να εξαργυρώσετε την πηγή στο github:

Προχωρήστε και προσαρμόστε

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

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