10 πράγματα που πρέπει να θυμάστε να εργάζεστε με το Sketch & Zeplin. Οι προγραμματιστές θα σας ευχαριστήσουν!

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

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

Εάν ένα από αυτά τα πράγματα συμβαίνουν σε σας, αυτό το άρθρο είναι για σας. Αυτά είναι τα 10 πράγματα που θα σας βοηθήσουν να αξιοποιήσετε στο έπακρο το χρόνο σας και να βρείτε ένα ευχάριστο μέσο με τους προγραμματιστές.

1. Μέγεθος τέχνης

iOS

  • @ 1X: 375 x 667 px

Android

  • mdpi: 360 x 640 px

Ιστός

Σε ποιες συσκευές θα εμφανιστεί το προϊόν σας; Καθορίστε τα σημεία διακοπής και λάβετε υπόψη τα ερωτήματα των μέσων που πρόκειται να χρησιμοποιήσουν οι προγραμματιστές. Συζητήστε με τον προγραμματιστή σας αν δεν ξέρετε τι είναι.

  • 1920 x 1080 px
  • 1200 x 900 px
  • 1024 x 768 px
  • 320 x 480 px

2. Πώς λειτουργούν τα σημεία διακοπής σε ανταποκρινόμενες διατάξεις

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

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

Κοινή χρήση του σχεδιασμού που ανταποκρίνεται

3. Μεγέθυνση εικόνας

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

Στείλτε μου τις εικόνες μεγάλου μεγέθους επειδή φαίνονται pixelated όταν βλέπω το σχέδιο σε ένα iPhone 7.

4. Κάντε εξαγώγιμη την ομάδα εικονιδίων, αλλά και τα επιμέρους αντικείμενα ξεχωριστά

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

5. Κάντε εξαγωγή των εικόνων και όχι του κειμένου

Φανταστείτε ένα banner που περιέχει μια εικόνα, ένα κείμενο και ένα φίλτρο και το φίλτρο δεν μπορεί να κατασκευαστεί με CSS. Στη συνέχεια, οι προγραμματιστές πρέπει να είναι σε θέση να εξάγουν:

  1. Μόνο η εικόνα
  2. Μόνο το φίλτρο
  3. Εικόνα + φίλτρο

6. Υψος γραμμής

Το ύψος γραμμής του κειμένου του σώματος πρέπει να είναι 6px μεγαλύτερο από το τρέχον μέγεθος γραμματοσειράς, η εξαίρεση μπορεί να είναι τίτλοι ή κείμενα επικάλυψης όπου θέλετε να επηρεάσετε τον χρήστη ενισχύοντας τα γραφικά ενός στοιχείου.

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

7. Εύρος πλαισίου κειμένου

Ορίστε το πλάτος ενός κειμένου μιας γραμμής σε 'αυτόματη'. Αυτό θα επιτρέψει στην ομάδα dev σας να δει το περιθώριο μεταξύ του κειμένου και άλλων στοιχείων της διασύνδεσης ή τα όρια του σχεδιασμού της οθόνης.

8. Αφαιρέστε την περιοχή γύρω από το εικονίδιο

Μερικά από τα εικονίδια που εισάγετε στο Sketch έχουν μια γύρω περιοχή, η οποία είναι καλή για την εξαγωγή του περιουσιακού στοιχείου, αλλά είναι δύσκολο για τον προγραμματιστή όταν προσπαθεί να ελέγξει το περιθώριο μεταξύ αντικειμένων στο Zeplin. Καταργήστε αυτό το χώρο για να επιτρέψετε στους προγραμματιστές να είναι σε θέση να ελέγξουν το περιθώριο μεταξύ του εικονιδίου και του επόμενου στοιχείου της διασύνδεσης.

9. Κουμπιά δηλώνει

Έχετε κάνει το σχέδιό σας στο Sketch και έχετε ανεβάσει τις οθόνες στο Zeplin. Τώρα έρχεται η ερώτηση του προγραμματιστή.

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

Δημιουργήστε ένα νέο έργο τέχνης με όλες τις καταστάσεις για τα διάφορα στοιχεία που χρησιμοποιείτε στη διεπαφή. Μπορείτε να το ονομάσετε "Χαρακτηριστικά".

10. Πώς να οργανώσετε τις οθόνες σχεδίασης στο Zeplin

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

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

Τι περισσότερο?

Μην σπαταλάτε το χρόνο σας δημιουργώντας ένα styleguide, μπορείτε να προσθέσετε τα χρώματα και τις τυπογραφίες απευθείας από Zeplin (καρτέλα Styleguide).

PD: Μην ξεχάσετε να καλέσετε την ομάδα ανάπτυξης στο έργο της Zeplin!

Ελπίζω αυτό να σας βοηθήσει, επιτρέψτε μου να ξέρω αν έχετε οποιεσδήποτε ερωτήσεις!

Συμμετοχή στην τάξη Skillshare σχετικά με τον τρόπο κατασκευής πρωτοτύπων στο inVision χρησιμοποιώντας το plugin Sketch & Craft για περισσότερες συμβουλές: https://skl.sh/2Y4hj6l