Ένας πρακτικός οδηγός για τα εικονίδια εφαρμογών Android: Επεξήγηση των προσαρμοστικών εικονιδίων (και πώς να δημιουργήσετε σωστά τα δικά σας)
Είναι μια συνηθισμένη έκπληξη για τους πρώτους προγραμματιστές Android: γυαλίζετε ένα μόνο τετράγωνο PNG για το εικονίδιο της εφαρμογής σας, το εξάγετε σε τακτοποιημένο 512x512 και φαίνεται τέλειο στο πρόγραμμα επεξεργασίας εικόνας σας. Στη συνέχεια, εγκαθιστάτε μια έκδοση εντοπισμού σφαλμάτων σε ένα τηλέφωνο Samsung και το εικονίδιο φαίνεται ξαφνικά περικομμένο και ελαφρώς εκτός κέντρου, σαν μέρος του λογότυπου να έχει κοπεί. Τίποτα δεν είναι λάθος με το ίδιο το αρχείο. Το πρόβλημα είναι ότι μια μεμονωμένη τετράγωνη εικόνα δεν επρόκειτο ποτέ να επιβιώσει σε επαφή με τον πραγματικό κόσμο των εκτοξευτών Android, καθένας από τους οποίους περικόπτει, καλύπτει και αναδιαμορφώνει διαφορετικά τα εικονίδια. Αν δεν το έχετε αντιμετωπίσει ακόμα, είναι θέμα χρόνου να το κάνετε, οπότε ας δούμε τι συμβαίνει κάτω από την κουκούλα και πώς να το διορθώσετε την πρώτη φορά.
Γιατί ένα τετράγωνο PNG δεν είναι αρκετό πια
Στα πρώτα χρόνια του Android, τα εικονίδια εφαρμογών ήταν ακριβώς όπως έμοιαζαν: ένα μεμονωμένο τετράγωνο (ή περιστασιακά ελεύθερου σχήματος) PNG που κάθε πρόγραμμα εκκίνησης εμφανιζόταν ως έχει. Αυτό λειτούργησε καλά έως ότου οι κατασκευαστές άρχισαν να διαφοροποιούν τα τηλέφωνά τους οπτικά και ένα από τα πιο εύκολα μέρη για να το κάνετε αυτό ήταν η αρχική οθόνη. Η Samsung ήθελε στρογγυλεμένα τετράγωνα, μερικά κινέζικα δέρματα OEM ήθελαν διαφορετικές γωνιακές θεραπείες και το stock Android τελικά εγκαταστάθηκε σε κύκλους. Ξαφνικά, το ίδιο ακριβώς αρχείο εικονιδίων φαινόταν αισθητά διαφορετικό και μερικές φορές εμφανώς χειρότερο, ανάλογα με το τηλέφωνο στο οποίο προσγειώθηκε.
Η απάντηση της Google, που παρουσιάστηκε με το Android 8.0 Oreo, ήταν το προσαρμοστικό σύστημα εικονιδίων. Αντί να παρέχουν ένα σταθερό σχήμα, οι προγραμματιστές παρέχουν πολυεπίπεδα έργα τέχνης που το ίδιο το λειτουργικό σύστημα καλύπτει σε οποιοδήποτε σχήμα προτιμά ένας συγκεκριμένος εκτοξευτής. Η οπτική ταυτότητα παραμένει συνεπής. αλλάζει μόνο η εξωτερική σιλουέτα.
Τι είναι ακριβώς ένα προσαρμοστικό εικονίδιο;
Ένα προσαρμοστικό εικονίδιο δημιουργείται από δύο ξεχωριστά επίπεδα, το καθένα από τα οποία καταλαμβάνει έναν καμβά 108 dp επί 108 dp: ένα στρώμα φόντου και ένα στρώμα προσκηνίου. Το Android συνθέτει τα δύο μαζί και στη συνέχεια εφαρμόζει οποιοδήποτε σχήμα μάσκας χρησιμοποιεί ο τρέχων εκκινητής, είτε είναι κύκλος, στρογγυλεμένο τετράγωνο, δάκρυ ή κάτι εντελώς άλλο. Η δομή δύο επιπέδων είναι αυτή που επιτρέπει στο Android να προσθέτει ανεπαίσθητα εφέ παράλλαξης και κίνησης, καθώς τα επίπεδα μπορούν να μετατοπιστούν ανεξάρτητα όταν πατάτε ή σύρετε ένα εικονίδιο.
Στους πόρους μιας εφαρμογής, αυτό ορίζεται συνήθως μέσω ενός αρχείου XML όπως το mipmap-anydpi-v26/ic_launcher.xml, το οποίο απλώς δείχνει προς τα σχέδια σχεδίασης του φόντου και του προσκηνίου αντί να περιέχει τα ίδια δεδομένα pixel. Ένα παραδοσιακό επίπεδο ic_launcher.png εξακολουθεί να διατηρείται ως εναλλακτική λύση για συσκευές με Android 7.1 ή προγενέστερη έκδοση, οι οποίες προηγούνται εξ ολοκλήρου του προσαρμοστικού συστήματος εικονιδίων.
Γιατί έχει σημασία η Ασφαλής Ζώνη
Εδώ είναι το μέρος που ταξιδεύει περισσότερο τους ανθρώπους. Παρόλο που ο καμβάς για κάθε στρώμα είναι 108 dp επί 108 dp, μόνο ο εσωτερικός κύκλος 66 dp επί 66 dp, με κέντρο σε αυτόν τον καμβά, είναι εγγυημένο ότι είναι ορατός ανεξάρτητα από το σχήμα της μάσκας που θα εφαρμοστεί. Αυτή η εσωτερική περιοχή ονομάζεται συνήθως ασφαλής ζώνη. Οτιδήποτε έξω από αυτό μπορεί να εμφανιστεί σε μια κυκλική μάσκα και στη συνέχεια να κοπεί απότομα σε μια πιο επιθετική μάσκα σκίουρου ή δάκρυ, ή το αντίστροφο.
Αυτό είναι ακριβώς το είδος του ζητήματος που εμφανίζεται όταν ένα λογότυπο σχεδιάζεται κοντά στις άκρες του καμβά για να μεγιστοποιηθεί το οπτικό του μέγεθος: μπορεί να φαίνεται τέλειο σε μια κυκλική μάσκα, αλλά να κόβεται ανομοιόμορφα στη μάσκα squircle της Samsung. Η επιδιόρθωση δεν είναι επανασχεδιασμός, απλώς συρρικνώνει ελαφρά το έργο τέχνης, ώστε το ουσιαστικό περιεχόμενο να παραμένει εντός της ασφαλούς ζώνης ανεξάρτητα από το σχήμα που θα εφαρμοστεί τελικά.
Σχήματα εκκίνησης που θα συναντήσετε
| Σχήμα | Που θα το δεις |
|---|---|
| Κύκλος | Stock Android, Pixel launcher (η μακροχρόνια προεπιλογή) |
| Squircle (στρογγυλεμένο τετράγωνο) | Samsung One UI και πολλά άλλα skins Android |
| Στρογγυλεμένο τετράγωνο (υπερέλλειψη) | iOS, που εφαρμόζεται αυτόματα από το σύστημα χωρίς έλεγχο προγραμματιστή |
| Δάκρυ | Προσφέρεται ως επιλέξιμη επιλογή σε ορισμένες εκδόσεις λογισμικού Samsung |
| Τετράγωνο με απαλές γωνίες | Διάφοροι άλλοι κατασκευαστές launcher skins |
Το πρακτικό πακέτο είναι ότι δεν μπορείτε να επιλέξετε ποια από αυτά τα σχήματα θα φορέσει το εικονίδιο σας. Οι χρήστες σε stock εκκίνησης Android μπορούν συχνά να επιλέξουν ακόμη και το σχήμα που προτιμούν από ένα μενού ρυθμίσεων. Ο μόνος πραγματικός μοχλός σας είναι να βεβαιωθείτε ότι το ίδιο το έργο τέχνης επιβιώνει όλα με χάρη, κάτι που ακριβώς εγγυάται η ασφαλής ζώνη.
Δημιουργία των στοιχείων ενεργητικού: Μεγέθη και πυκνότητες που χρειάζεστε
| Κάδος πυκνότητας | Μέγεθος εικονιδίου εκκίνησης |
|---|---|
| mdpi | 48 x 48 px |
| hdpi | 72 x 72 px |
| xhdpi | 96 x 96 px |
| xxhdpi | 144 x 144 px |
| xxxhdpi | 192 x 192 px |
| Εικονίδιο καταχώρισης Play Store | 512 x 512 px |
Εάν αποστέλλετε επίσης την εφαρμογή σε iOS, προσθέστε ένα άλλο σύνολο εξ ολοκλήρου, καθώς οι απαιτήσεις για το εικονίδιο του App Store της Apple ξεπερνούν τα 1024x1024 και χρησιμοποιούν μια εντελώς διαφορετική μορφή, χωρίς επίπεδα, χωρίς καθόλου διαφάνεια.
Ο χειροκίνητος τρόπος έναντι της χρήσης γεννήτριας
Μπορείτε να δημιουργήσετε απολύτως κάθε ένα από αυτά τα μεγέθη με το χέρι σε ένα πρόγραμμα επεξεργασίας εικόνας ή μέσω του ενσωματωμένου Image Asset Studio του Android Studio, το οποίο χειρίζεται την κλιμάκωση της πυκνότητας και τις προεπισκοπήσεις μάσκας αρκετά καλά για ένα μόνο έργο. Αυτό που γίνεται κουραστικό είναι όταν διατηρείτε ένα σύστημα σχεδίασης σε πολλές εφαρμογές, χρειάζεστε αντίστοιχες εξαγωγές iOS από το ίδιο κύριο έργο τέχνης ή απλά θέλετε έναν γρήγορο τρόπο να ελέγξετε ξανά πώς συμπεριφέρεται ένα σχέδιο σε κάθε σχήμα προτού δεσμευτείτε σε αυτό.
Δημιουργήστε κάθε μέγεθος από μία κύρια εικόνα
Το Γεννήτρια εικονιδίων εφαρμογής λαμβάνει μια ενιαία εικόνα πηγής υψηλής ανάλυσης και παράγει το πλήρες σετ κάδους πυκνότητας Android, την προσαρμοστική δομή εικονιδίων προσκηνίου/παρασκηνίου και το μέγεθος καταχώρισης του Play Store, όλα από μία μεταφόρτωση, ώστε να μην εξάγετε και να μετονομάσετε με μη αυτόματο τρόπο δώδεκα αρχεία με το χέρι.
Εξαγωγή εικονιδίων από ένα υπάρχον APK
Μερικές φορές η ανάγκη τρέχει προς την αντίθετη κατεύθυνση. Ίσως κληρονομήσατε ένα έργο χωρίς τα αρχικά του αρχεία σχεδίασης ή θέλετε να δείτε πώς ακριβώς δόμησε το εικονίδιο ένας ανταγωνιστής πριν σχεδιάσει το δικό σας ή απλά πρέπει να τραβήξετε ένα εικονίδιο πίσω από ένα ενσωματωμένο APK για να το χρησιμοποιήσετε ξανά σε ένα σχετικό εργαλείο ή στοιχείο μάρκετινγκ. Δεδομένου ότι ένα APK είναι ουσιαστικά ένα δομημένο αρχείο που περιέχει όλους τους πόρους μιας εφαρμογής, τα αρχεία εικονιδίων εκκίνησης υπάρχουν φυσικά μέσα σε αυτό και μπορούν να εξαχθούν απευθείας, αντί να αναδημιουργηθούν από την αρχή.
Το Εξαγωγέας εικονιδίων εξάγει ακριβώς αυτά τα αρχεία από οποιοδήποτε APK ανεβάζετε, δίνοντάς σας τα ακατέργαστα στοιχεία εικονιδίων σε οποιαδήποτε ανάλυση απέστειλε ο αρχικός προγραμματιστής, που είναι συχνά ο ταχύτερος τρόπος για να ανακτήσετε ένα χαμένο αρχείο προέλευσης ή να μελετήσετε πώς μια άλλη εφαρμογή προσέγγισε το ίδιο πρόβλημα σχεδίασης.
Συνήθη λάθη εικονιδίων που επισημαίνονται στην αναθεώρηση
- Ψήσιμο σε επιπλέον επένδυση ή UI chrome. Ένα εφέ σκιάς, περιγράμματος ή στρογγυλεμένης γωνίας που προστίθεται χειροκίνητα μέσα στην εικόνα έρχεται σε διένεξη με τη κάλυψη του συστήματος και συχνά φαίνεται διπλό ή λάθος ευθυγράμμιση.
- Χρησιμοποιώντας ένα καθαρό λευκό φόντο χωρίς διακριτή άκρη. Σε εκτοξευτές με θέμα το φως, το εικονίδιο μπορεί να γίνει σχεδόν αόρατο στο φόντο της αρχικής οθόνης.
- Υπερβολικά λεπτομέρεια. Το κείμενο και οι περίπλοκες γραμμές που φαίνονται ευκρινείς στα 512 εικονοστοιχεία συχνά μετατρέπονται σε μια δυσανάγνωστη μουντζούρα μόλις μειωθεί στα 48 εικονοστοιχεία, όπως το βλέπουν οι περισσότεροι χρήστες καθημερινά.
- Αναντιστοιχία μεταξύ του εικονιδίου καταχώρισης του Play Store και του εικονιδίου που εγκαθίσταται. Οι αναθεωρητές και οι χρήστες παρατηρούν πότε αυτά τα δύο δεν ταιριάζουν και φαίνεται ως ατημέλητο ή, χειρότερα, ύποπτο.
- Ξεχνώντας εντελώς το παλιό backback. Εάν η εφαρμογή σας εξακολουθεί να υποστηρίζει εκδόσεις Android πριν από την έκδοση 8.0, η παράλειψη της επίπεδης εναλλακτικής PNG μπορεί να αφήσει σε αυτούς τους χρήστες ένα σπασμένο ή γενικό εικονίδιο.
Δοκιμή του εικονιδίου σας σε σχήματα πριν την αποστολή
Πριν οριστικοποιήσετε ένα εικονίδιο, αξίζει να το κάνετε προεπισκόπηση κάτω από τουλάχιστον μια κυκλική μάσκα και μια μάσκα σκίουρου δίπλα-δίπλα, αντί να υποθέσουμε ότι θα μεταφραστεί καθαρά. Το Image Asset Studio του Android Studio περιλαμβάνει μια ζωντανή προεπισκόπηση πολλών σχημάτων εκκίνησης για αυτόν ακριβώς τον λόγο και χρειάζεται μόνο ένα λεπτό για να αντιμετωπιστεί ένα ζήτημα που διαφορετικά θα εμφανιζόταν μόνο μετά τη δημοσίευση, όταν ένας χρήστης με το "λάθος" σχήμα εκκίνησης αναφέρει ότι κάτι δεν φαίνεται.
Βασικά Takeaways
- Τα προσαρμοστικά εικονίδια χρησιμοποιούν δύο επίπεδα, φόντο και προσκήνιο, σε έναν καμβά 108 dp, τον οποίο το σύστημα καλύπτει σε διαφορετικά σχήματα ανά εκκινητή.
- Μόνο η εσωτερική ασφαλής ζώνη 66dp είναι εγγυημένη ορατή σε κάθε σχήμα μάσκας. κρατήστε το ουσιαστικό έργο τέχνης μέσα σε αυτό.
- Εξακολουθείτε να χρειάζεστε ένα επίπεδο εικονίδιο παλαιού τύπου για συσκευές σε Android 7.1 ή παλαιότερη έκδοση.
- Μια γεννήτρια μπορεί να παράγει κάθε απαιτούμενη πυκνότητα και το μέγεθος της καταχώρισης του Play Store από μια κύρια εικόνα, εξοικονομώντας σημαντική χειροκίνητη εργασία εξαγωγής.
- Τα εικονίδια μπορούν να εξαχθούν απευθείας από ένα υπάρχον APK όταν χαθούν τα αρχεία προέλευσης ή όταν πρέπει να μελετήσετε τα στοιχεία μιας άλλης εφαρμογής.
Συχνές Ερωτήσεις (FAQ)
Ποιο είναι το πραγματικό μέγεθος pixel που απαιτείται για ένα εικονίδιο καταχώρισης στο Play Store;
512x512 pixel, ένα PNG 32 bit με κανάλι άλφα. Αυτό είναι ξεχωριστό από τα μεγέθη εικονιδίων εκκίνησης που περιλαμβάνονται στο ίδιο το APK.
Το επίπεδο φόντου του προσαρμοστικού εικονιδίου μου πρέπει να είναι μονόχρωμο;
Όχι απαραίτητα επίπεδο χρώμα, αλλά γενικά θα πρέπει να είναι αδιαφανές και απλό, καθώς μπορεί να μετατοπιστεί, να κλιμακωθεί ή να καλυφθεί με τρόπους που δεν ελέγχετε πλήρως. Τα πολυάσχολα ή διαφανή φόντο τείνουν να φαίνονται ασυνεπή σε όλους τους εκτοξευτές.
Μπορώ να επαναχρησιμοποιήσω το προσαρμοστικό μου σχέδιο εικονιδίων Android απευθείας για iOS;
Όχι άμεσα. Το iOS χρησιμοποιεί μια ενιαία επίπεδη τετράγωνη εικόνα με στρογγυλοποίηση γωνίας που εφαρμόζεται από το σύστημα αντί για ξεχωριστά επίπεδα, επομένως συνήθως εξάγετε μια απλοποιημένη, πεπλατυσμένη έκδοση του ίδιου έργου τέχνης για iOS.
Γιατί το εικονίδιο μου φαίνεται καλά στο τηλέφωνό μου αλλά είναι θολό στην καταχώριση του Play Store;
Αυτό συμβαίνει συνήθως όταν το εικονίδιο της καταχώρισης κλιμακώθηκε από μια μικρή εικόνα πηγής. Ξεκινάτε πάντα από ένα κύριο αρχείο τουλάχιστον 1024x1024 pixel και εξάγετε κάθε απαιτούμενο μέγεθος από αυτό.
Τι θα συμβεί αν παραλείψω το εναλλακτικό εικονίδιο παλαιού τύπου για παλαιότερες εκδόσεις Android;
Οι συσκευές σε Android 7.1 ή παλαιότερες εκδόσεις, οι οποίες δεν υποστηρίζουν προσαρμοστικά εικονίδια, ενδέχεται να επιστρέψουν σε ένα γενικό εικονίδιο συστήματος ή να αποδώσουν το εικονίδιο σας εσφαλμένα. Είναι ασφαλές να παραλείψετε μόνο εάν η ελάχιστη υποστηριζόμενη έκδοση Android της εφαρμογής σας είναι 8.0 ή νεότερη.
Δεν χρειάζεστε ένα υπόβαθρο στη θεωρία σχεδίασης για τίποτα από όλα αυτά, απλώς μια επίγνωση ότι το εικονίδιό σας θα αναδιαμορφωθεί με τρόπους που δεν ελέγχετε τη στιγμή που θα φύγει από τα χέρια σας. Σχεδιάστε για την ασφαλή ζώνη, διατηρήστε ένα παλιό backback, δημιουργήστε κάθε απαιτούμενο μέγεθος από ένα καθαρό κύριο αρχείο και το εικονίδιό σας θα κρατηθεί ανεξάρτητα σε ποιο πρόγραμμα εκκίνησης προσγειωθεί.