Η δημιουργία εικονιδίων προϊόντων δεν είναι τόσο δύσκολη όσο μπορεί να φαίνεται με την πρώτη ματιά. Μάθετε περισσότερα σχετικά με το σχεδιασμό του πρώτου σας εικονιδίου εφαρμογής Android από την αρχή!
Ανεξάρτητα από την αγορά ή την υπηρεσία μέσω της οποίας διανέμεται μια εφαρμογή, το εικονίδιο της εφαρμογής της είναι το πρώτο πράγμα που θα προσέξει ένας υποψήφιος χρήστης. Οι πρώτες εντυπώσεις είναι υψίστης σημασίας όταν προσπαθείτε να προσελκύσετε νέους χρήστες, πράγμα που σημαίνει ότι τα εικονίδια είναι βασικά στοιχεία οποιασδήποτε εφαρμογής. Και, ανεξάρτητα από την πρόθεση της εφαρμογής, η δημιουργία ενός όμορφου εικονιδίου εφαρμογής θα πρέπει να αποτελεί σημαντικό μέρος της φάσης ανάπτυξης κάθε εφαρμογής. Αν και πολλοί προγραμματιστές τεχνικών εφαρμογών αφήνουν τα γραφικά σε αφοσιωμένους σχεδιαστές, κατανοώντας το τα βασικά στοιχεία του σχεδιασμού και η εφαρμογή τους είναι κάτι που μπορεί να κάνει ο καθένας, έχοντας την ικανότητα να πειραματίζεται και ανάλυση. Τα εικονίδια εφαρμογών δεν αποτελούν εξαίρεση!
Αυτός ο οδηγός περιλαμβάνει τη δημιουργία ενός προσαρμοστικού εικονιδίου για ένα δείγμα εφαρμογής Android χρησιμοποιώντας λογισμικό ανοιχτού κώδικα. Αν και το τελικό αποτέλεσμα μπορεί να μην είναι στη μορφή που μπορεί να χρειάζεστε, πολλές από τις συμβουλές σχεδιασμού που συζητούνται εδώ θα ισχύουν σε πολλές πλατφόρμες.
Μετά την κυκλοφορία των «προσαρμοστικών εικονιδίων» με το Android Oreo, ένα εικονίδιο εφαρμογής μπορεί να αποτελείται από τρία βασικά επίπεδα: αδιαφανές στρώμα φόντου, ένα στρώμα πρώτου πλάνου με υποστήριξη διαφάνειας, και ένα μάσκα που καθορίζει το σχήμα του εικονιδίου. Όλα αυτά τα επίπεδα έχουν μέγεθος 108 x 108 dp, αν και μόνο το εσωτερικό 72 x 72 dp μπορεί να είναι ορατό στον χρήστη. η άλλη περιοχή, που κόβεται από τη μάσκα στο επάνω μέρος, χρησιμοποιείται για ειδικά εφέ μέσα στο περιβάλλον χρήστη για να κάνει το εικονίδιο να φαίνεται δυναμικό. Για τους αμύητους, dp ή pixel ανεξάρτητο από την οθόνη είναι μια μονάδα μέτρησης για όλη τη διεπαφή του Android και ορίζεται ότι ισούται με το μέγεθος του ένα pixel σε οθόνη 160 κουκκίδων ανά ίντσα.)
Ο Nick Butcher από την Google μιλά για έναν κύκλο 66 dp στο κέντρο του εικονιδίου που καμία μάσκα δεν μπορεί να αφαιρέσει, που ονομάζεται "ασφαλής ζώνη". Αυτό είναι όπου τα κύρια στοιχεία του σχεδίου εικονιδίων μας θα καθίσουν αργότερα, όταν φτάσουμε στον πραγματικό σχεδιασμό. Οτιδήποτε πέρα από αυτήν την ακτίνα 33 dp ενδέχεται να μην είναι ορατό στο εικονίδιο, ενώ έχει επάνω μια μάσκα σχήματος.
Δεδομένου ότι τα εικονίδια είναι προτιμότερο να είναι διανυσματικές εικόνες λόγω της κλίμακας διεπαφής χρήστη, θα χρειαστούμε ένα πρόγραμμα επεξεργασίας διανυσματικών γραφικών για να δημιουργήσουμε το εικονίδιό μας. Inkscape είναι ανοιχτού κώδικα και μια εξαιρετική εναλλακτική σε πιο ακριβό λογισμικό, επομένως θα είναι η επιλογή μας για τους σκοπούς αυτού του σεμιναρίου. Έχω επίσης σχεδιάσει ένα αρχείο έργου διαθέσιμο εδώ που έχει επισημασμένη την ασφαλή ζώνη και τη γραμμή κλειδιού σχεδιασμού της Google, καθώς και μια εξαιρετική μάσκα επιπέδου που μας επιτρέπει να κάνουμε προεπισκόπηση του σχήματος του εικονιδίου.
Με το αρχείο του έργου ανοιχτό στο Inkscape και το Γέμισμα και Εγκεφαλικό (Shift+Ctrl+F), Εξαγωγή εικόνας PNG (Shift+Ctrl+E) και Επίπεδα Οι πίνακες (Shift+Ctrl+L) ανοίγουν, είμαστε έτοιμοι να ξεκινήσουμε. Το πάνελ Layers είναι όπου βρίσκεται το κρέας του έργου, με το Σε πρώτο πλάνο και Ιστορικό στρώματα που προορίζονται να στεγάσουν τα στοιχεία του τίτλου τους και Κατευθυντήριες γραμμές και Μάσκα προορίζονται για εναλλαγή και απενεργοποίηση (κάνοντας κλικ στο εικονίδιο του μικρού ματιού δίπλα τους) για αναφορά.
Ένα εικονίδιο είναι μια έκφραση της ταυτότητας μιας εφαρμογής. Ως εκ τούτου, πρέπει να ενσωματώνει τόσο τον χαρακτήρα της προσωπικότητας της εφαρμογής όσο και τις οδηγίες σχεδίασης για συγκεκριμένη πλατφόρμα, όπως αυτές του Android Η γλώσσα σχεδιασμού υλικού έχει να προσφέρει. Για τους σκοπούς της επίδειξης, ας υποθέσουμε ότι εργαζόμαστε σε μια εφαρμογή καιρού που χρησιμοποιεί στοιχεία υλικού. Θα μπορούσαμε να χρησιμοποιήσουμε το κλασικό μοτίβο ήλιος και σύννεφα για να ενημερώσουμε έναν χρήστη για το σκοπό της εφαρμογής και να βάλουμε λίγο περιστρέψτε αυτό το βασικό σχέδιο χρησιμοποιώντας σκιές και γεωμετρία για να το κάνετε να ταιριάζει καλά στο περιβάλλον Android του.
Ιστορικό
Ας ξεκινήσουμε με τη δημιουργία του φόντου, το οποίο θα αποτελείται από έναν μπλε ουρανό και έναν κίτρινο ήλιο στο κέντρο. Στροφή Μάσκα αόρατος, επιλέγω και κάνω ορατό το Στρώμα φόντου, γεμίστε ολόκληρο τον καμβά με το Δημιουργήστε ορθογώνια και τετράγωνα εργαλείο (F4) και ορίστε το χρώμα πλήρωσης του ορθογωνίου Γέμισμα και Εγκεφαλικό έως 64B5F6FF (ένα ανοιχτό μπλε) σύμφωνα με το Παλέτα χρωμάτων υλικού. Στη συνέχεια επιλέγω το Δημιουργήστε κύκλους, έλλειψη και τόξα εργαλείο (F5) και κρατώντας πατημένο το Shift και το Ctrl, σχεδιάστε έναν κύκλο από το κέντρο της γραμμής κλειδιού προς τον δεύτερο μεγαλύτερο κύκλο και ορίστε το χρώμα του σε FFEE58FF, που μας δίνει έναν ζεστό μικρό ήλιο. Είναι πάντα καλό να τηρείτε τη βασική γεωμετρία σε οποιοδήποτε είδος σχεδίασης, και η σχεδιαστική γλώσσα του Android ιδιαίτερα ενθαρρύνει την απλότητα. Για να συμμορφωθώ με τις οδηγίες για το υλικό, δίνω επίσης στον ήλιο μια ανεπαίσθητη σκιά Φίλτρα → Σκιές και λάμψεις → Πτώση σκιάς.
Σε πρώτο πλάνο
Ερχομαι σε Σε πρώτο πλάνο, Σχεδιάζω μια ομάδα από σύννεφα γύρω από τον ήλιο σχεδιάζοντας κύκλους από τις περιφέρειες άλλων κύκλων και τους δίνω σε όλα ένα χρώμα πλήρωσης EEEEEEFF. Στη συνέχεια, ομαδοποιώ τους κύκλους κατάλληλα κάνοντας δεξί κλικ σε πολλά αντικείμενα και επιλέγοντας Ομάδα, και εκτελέστε τη γεννήτρια σκιάς στα δύο τελικά σχήματα που λαμβάνω στο τέλος. Στροφή Κατευθυντήριες γραμμές αόρατο και εναλλασσόμενο Σε πρώτο πλάνο και Ιστορικό Εναλλακτικά, μπορείτε να δείτε τα συστατικά στρώματα του εικονιδίου της εφαρμογής καιρού. Εάν το εικονίδιο της εφαρμογής σύρεται ποτέ σε μια αρχική οθόνη, τα σύννεφα θα πέφτουν πάνω σε έναν ακίνητο ήλιο!
Αποτέλεσμα
Μάσκα μπορεί τώρα να γίνει ορατό και να τροποποιηθεί Επεξεργασία μονοπατιών κατά κόμβους (F2) για να δοκιμάσετε να προσομοιώσετε διαφορετικές μάσκες σχήματος. Επίσης, τα δύο επίπεδα μπορούν να εξαχθούν χωριστά χρησιμοποιώντας το Εξαγωγή εικόνας PNG πάνελ για χρήση στο Android Studio, και μαζί για ένα εικονίδιο Google Play.
Κατά τη δημιουργία ενός εικονιδίου προϊόντος, είναι πάντα καλή πρακτική να προσπαθείτε να λάβετε το σκοπό μιας εφαρμογής, να την αποστάξετε στην πιο αφηρημένη οπτική της μορφή και να το αναπαραστήσετε χρησιμοποιώντας απλή γεωμετρία. Όσο πιο απλό είναι οποιοδήποτε στοιχείο στο σχεδιασμό, τόσο καλύτερα και πιο αξιόπιστα λειτουργεί συνήθως, και αυτό ισχύει και στη γραφιστική. Για τους περισσότερους σκοπούς, ένα σχήμα αντικειμένου στο προσκήνιο και ένα συμπαγές χρώμα ή ένα σχέδιο στο φόντο (ή αντίστροφα) λειτουργεί μια χαρά, αλλά όπως στην περίπτωσή μας, μπορεί να χρησιμοποιηθεί ένα άλλο στρώμα αντικειμένων εάν είναι αισθητό απαραίτητη; Η υπερβολική στοίβαξη ή η χρήση σκιών θα περιπλέξει το σχεδιασμό του εικονιδίου.
Μπορείτε να διαβάσετε περισσότερα σχετικά με τη σχεδίαση εικονιδίων στις διεπαφές υλικού στο επίσημο Ιστοσελίδα υλικούκαι πάρτε δωρεάν εικονίδια συστήματος για χρήση στη σχεδίαση εικονιδίων από τον ίδιο ιστότοπο.