10 Συμβουλές για την εξαγωγή ενεργών στοιχείων διάνυσμα από Sketch σε Android

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

Δουλεύω σε μια σχετικά περίπλοκη εφαρμογή που υποστηρίζει πολλές διαφορετικές πλατφόρμες. Με τα αυξανόμενα μεγέθη και αναλύσεις οθόνης (που εξετάζουμε το Nexus 6P) για το Android, θεωρήσαμε απαραίτητο να ενημερώσουμε τα υπάρχοντα στοιχεία από μορφές ράστερ σε μορφές διάνυσμα για να διατηρήσουμε τα περιουσιακά στοιχεία επεκτάσιμα λόγω της ανάγκης υποστήριξης διαφορετικών ψηφιακών αναλύσεων.

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

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

Δεν είναι αρκετά

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

1. Κρατήστε το Απλό Ηλίθιο

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

2. Αποφύγετε τη χρήση μάσκας

Οι μάσκες που έγιναν με το Σκίτσο δεν υποστηρίζονται από την τρέχουσα έκδοση του Android API. Οποιεσδήποτε μάσκες που έγιναν στο Sketch αγνοούνται από το Android VectorDrawble (AVD) και οι μάσκες που έγιναν στο Sketch θα έπλητταν μερικές φορές το Adobe Illustrator. Εάν υπάρχει μια κατάσταση στην οποία πρέπει να δημιουργηθεί ένα φαινόμενο σκίασης, θα πρέπει να χρησιμοποιηθεί ένα υπέρθεσης σχήμα πάνω από το υπάρχον στρώμα υπέρ των μάσκες.

Χρησιμοποιήστε τη λειτουργία

3. Κάντε περιγράμματα, όχι εγκεφαλικά επεισόδια

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

Έτσι, αυτό σημαίνει ότι ένα εσωτερικό περίγραμμα πάχους 10 στο Σκίτσο γίνεται κεντρικό εγκεφαλικό επεισόδιο πάχους 20 όταν παρέχεται στο AVD.

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

Μπορείτε εύκολα να αλλάξετε τα περιγράμματα σε περιγράμματα χρησιμοποιώντας CMD + Shift + O.

4. Οι διαδηλωτές είναι φίλοι σου

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

5. Το Adobe Illustrator είναι το καλύτερο εργαλείο αντιμετώπισης προβλημάτων

Το Adobe Illustrator αποδίδει τα στοιχεία του φορέα με τον ίδιο τρόπο όπως το VectorDrawable του Android (από την ανεπανάληπτη εμπειρία). Εάν ένα στοιχείο δεν εμφανίζεται σωστά στο AVD, δοκιμάστε να διαγνώσετε το πρόβλημα χρησιμοποιώντας το Illustrator. Συχνά φορές η λύση είναι τόσο απλή όσο η απλή αφαίρεση ενός συμπληρώματος.

Ένα συνηθισμένο πρόβλημα για την εξαγωγή στοιχείων ενεργητικού για το Android χρησιμοποιώντας το Σκίτσο.

6. Τα συνδυασμένα και μεταμορφωμένα σχήματα μπορεί να μην εμφανίζονται ως αυτά που φαίνονται

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

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

7. Οι διαφάνειες είναι φίλοι σου ...

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

Σημειώστε τη σκιά σταγόνας κάτω από τη μπριζόλα

8. ... και οι κλίσεις δεν είναι

Από την άλλη πλευρά, το AVD δεν υποστηρίζει επί του παρόντος κλίσεις. Τα περιουσιακά στοιχεία που έγιναν κατ 'αυτόν τον τρόπο θα σπάσουν σχεδόν κατά τη διάρκεια της εισαγωγής Η σκίαση Cel θα πρέπει να χρησιμοποιηθεί υπέρ των τεχνικών σκίασης κλίσης.

Η σκιά απόρριψης κάτω από το μπριζόλα εξαφανίζεται

9. Εξαγωγή artboards, όχι στρώματα

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

10. Τα συμπαγή σχήματα θα λύσουν τα περισσότερα προβλήματα

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

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

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