Sketch & InVision για προγραμματιστές

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

Στο MOBGEN Accenture Interactive, χρησιμοποιήσαμε πρόσφατα τη σουίτα InVision για τη μεταβίβαση σχεδιασμού σε προγραμματιστές και για να διατηρήσουμε τα έργα καθαρά χρησιμοποιούμε ένα ενιαίο έργο που διαθέτει τόσο σχέδια iOS όσο και Android.

Όταν πρόκειται για τις μετρήσεις, το InVision λειτουργεί πολύ καλά για εμάς. ο καθένας μπορεί εύκολα να αλλάξει τα έργα και τους τύπους μέτρησης. Ωστόσο, όταν πρόκειται για εξαγόμενα περιουσιακά στοιχεία, έχουμε ξεπεράσει μερικά προβλήματα.

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

Κάνοντας μια μικρή έρευνα σχετικά με τα μεγέθη που απαιτούνται για iOS και Android, μπορούμε να δούμε ότι υπάρχουν μερικά κοινά μεγέθη.

FileΡυθμίστε το αρχείο Sketch

Ξεκινήστε πλοηγώντας στο Sketch 'Preferences' και δημιουργήστε μια νέα προεπιλογή για επιλογές εξαγωγής. Έχω ονομάσει το δικό μου "Όλα τα στοιχεία ενεργητικού" - αυτό περιλαμβάνει όλες τις επιλογές εξαγωγής για Android και iOS συνδυασμένες (θα ταξινομήσουμε και θα μετονομάσουμε στοιχεία αργότερα με ένα σενάριο).

Προτιμήσεις σκίτσων

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

Γραμμή εργαλείων σκίτσων

Invision

Πλοηγηθείτε στο έργο σας στο InVision. Κάντε κλικ σε μία από τις οθόνες και εισαγάγετε τη λειτουργία Επιθεώρηση (μπορείτε επίσης να χρησιμοποιήσετε το 'i' στο πληκτρολόγιο). Τώρα επιλέξτε την καρτέλα "Στοιχεία ενεργητικού" και "Λήψη όλων".

Το έργο InVision

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

Θα τελειώσετε με ένα φάκελο παρόμοιο με αυτό

Όταν συμβαίνει η μαγεία

Θα χρειαστεί λίγο κομμάτι # hackerSkills χρησιμοποιώντας την εντολή shell - αλλά μην ανησυχείτε - είναι συνήθως απλώς αντιγραφή και επικόλληση .

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

Και πηγαίνει λίγο κάτι τέτοιο ...

Ανοίξτε το τερματικό σας και αντιγράψτε και επικολλήστε τον κωδικό που χρειάζεστε. Πριν από την επικόλληση, αλλάξτε το 'YourDestination' στον πραγματικό προορισμό του φακέλου σας (για παράδειγμα στο / Desktop / temp).

Για τα στοιχεία του Android

cd yourDestination
mkdir xxxhdpi; mkdir xxhdpi; mkdir xhdpi; mkdir hdpi; mkdir mdpi; mkdir ldpi
Ολοκληρώθηκε
για αρχείο σε $ (βρείτε. -type f -name '* @ 4x *'); κάνω
  mv "$ αρχείο" "xxxhdpi / $ {αρχείο / @ 4x /}"
Ολοκληρώθηκε
για αρχείο σε $ (βρείτε. -type f -name '* @ 3x *'); κάνω
  mv "$ αρχείο" "xxhdpi / $ {αρχείο / @ 3x /}"
Ολοκληρώθηκε
για το αρχείο σε $ (βρείτε. -type f -name '* @ 2x *'); κάνω
  mv "$ αρχείο" "xhdpi / $ {αρχείο / @ 2x /}"
Ολοκληρώθηκε
για το αρχείο σε $ (βρείτε. -type f -name '* @ 1,5x *'); κάνω
  mv "$ αρχείο" "hdpi / $ {αρχείο / @ 1,5x /}"
Ολοκληρώθηκε
για αρχείο σε $ (βρείτε. -type f -name '* @ 0,75x *'); κάνω
  mv "$ αρχείο" "ldpi / $ {αρχείο / @ 0,75x /}"
Ολοκληρώθηκε
για αρχείο σε $ (βρείτε. -type f -name '* .png'); κάνω
  mv "$ αρχείο" "mdpi /"
Ολοκληρώθηκε

Αφού εκτελέσετε το σενάριο, θα πρέπει να καταλήξετε σε κάτι που μοιάζει με αυτό. Όλα τα αρχεία στοιχείων θα μετονομαστούν και θα τοποθετηθούν στον αντίστοιχο φάκελο.

Για τα στοιχεία iOS

cd yourDestination
για το αρχείο σε $ (βρείτε. -type f -name '* @ 1x *'); κάνω
  mv "$ αρχείο" "$ {αρχείο / @ 1x /}"
Ολοκληρώθηκε
  rm -f * @ 4x *
Ολοκληρώθηκε
  rm -f * @ 1,5x *
Ολοκληρώθηκε
  rm -f * @ 0,75x *
Ολοκληρώθηκε

Αφού εκτελέσετε το σενάριο θα πρέπει να καταλήξετε με κάτι τέτοιο. Το σενάριο θα αφαιρέσει τα αρχεία για μεγέθη x4, x1.5, x0.75 και μετονομασία x1.

Bonus

Αν δεν χρησιμοποιείτε ήδη μια προσθήκη Sketch για να συμπιέσετε όλες τις εικόνες σας, σας προτείνω να δοκιμάσετε το ImageOptim ή το TinyPNG.

Γρήγορα και εύκολα

Βρήκαμε αυτή τη ροή εργασίας πολύ χρήσιμη. Μπορούμε να δημιουργήσουμε όλα τα στοιχεία για το iOS και το Android σε ένα ενιαίο έργο - που σημαίνει ότι οι προγραμματιστές καταλήγουν σε βελτιστοποιημένα και οργανωμένα περιουσιακά στοιχεία.

Είμαι ο Lan Belic, σχεδιαστής που ζει στο Άμστερνταμ. Δημιούργησα αυτό όχι μόνο για να κάνουμε ευκολότερη τη ζωή μας στο MOBGEN, αλλά και να το κάνουμε το ίδιο για εμάς. Έχετε κάποιες σκέψεις ή ίσως μια ανατροφοδότηση; ➡Δείτε μου μια φωνή στο Twitter!