Γιατί η εφαρμογή σας φαίνεται καλύτερο στο σκίτσο

Εξερεύνηση διαφορών απόδοσης μεταξύ του Sketch και του iOS

Spot Η Διαφορά

Μπορείτε να εντοπίσετε τις διαφορές μεταξύ αυτών των δύο εικόνων;

Αν κοιτάξετε αρκετά σκληρά, ίσως παρατηρήσετε μερικές λεπτές διαφορές:

Η εικόνα στα δεξιά:

  1. Έχει μεγαλύτερη σκιά.
  2. Έχει πιο σκούρο κλίση.
  3. Έχει τη λέξη "in" στην πάνω γραμμή της παραγράφου.

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

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

Γιατί φροντίζουμε

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

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

Υπάρχουν πολλοί λόγοι για τους οποίους οι εφαρμογές ενδέχεται να μην φαίνονται τόσο καλά όσο τα αρχικά τους σχέδια. Πρόκειται να διερευνήσουμε έναν από τους πιο λεπτούς λόγους - τις διαφορές στην απόδοση μεταξύ του Sketch και του iOS.

Χάνεται στη μετάφραση

Ορισμένοι τύποι στοιχείων διεπαφής χρήστη έχουν αξιοσημείωτες διαφορές μεταξύ του Sketch και του iOS. Θα διερευνήσουμε τα ακόλουθα στοιχεία:

  1. Τυπογραφία
  2. Σκιές
  3. Διαβαθμίσεις

1. Τυπογραφία

Η τυπογραφία μπορεί να εφαρμοστεί με διάφορους τρόπους, αλλά για αυτή τη δοκιμασία θα χρησιμοποιήσω ετικέτες (στοιχείο "Κείμενο" στο Sketch, UILabel στο iOS).

Ας δούμε μερικές από τις διαφορές:

Η μεγαλύτερη διαφορά στο παραπάνω παράδειγμα είναι η θέση των διακοπών γραμμών. Η τρίτη ομαδοποίηση κειμένου που αρχίζει με "Αυτό το κείμενο είναι SF Semibold" σπάει μετά τη λέξη "25" στο σχέδιο, αλλά μετά τη λέξη "σημεία" στην εφαρμογή. Το ίδιο πρόβλημα παρουσιάζεται με την παράγραφο του κειμένου - τα διαλείμματα γραμμής είναι ασυμβίβαστα.

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

Είναι ευκολότερο να δείτε αυτές τις διαφορές όταν επικαλύπτονται άμεσα:

Τι γίνεται με άλλες γραμματοσειρές; Αντικατάσταση του Σαν Φρανσίσκο με Lato (μια ευρέως χρησιμοποιούμενη ελεύθερη γραμματοσειρά), έχουμε τα ακόλουθα αποτελέσματα:

Πολύ καλύτερα!

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

Πώς να φτιάξεις

Ορισμένα από αυτά τα θέματα σχετίζονται με την προεπιλεγμένη γραμματοσειρά iOS: Σαν Φρανσίσκο. Όταν το iOS μετατρέπει τη γραμματοσειρά του συστήματος, περιλαμβάνει αυτόματα την παρακολούθηση με βάση το μέγεθος του σημείου. Αυτός ο αυτόματα εφαρμοσμένος πίνακας παρακολούθησης είναι διαθέσιμος στον ιστότοπο της Apple. Υπάρχει ένα πρόσθετο Sketch που ονομάζεται "Fixer SF Font" το οποίο αντανακλά αυτές τις τιμές στο Sketch. Συστήνω ιδιαίτερα αν το σχέδιο σας χρησιμοποιεί το Σαν Φρανσίσκο.

(Πλευρά Σημείωση: Να θυμάστε πάντα να κάνετε το πλαίσιο κειμένου να τυλίγεται γύρω από το κείμενο στο Sketch. κάθε επιπλέον απόσταση, αυτό μπορεί εύκολα να οδηγήσει στην εισαγωγή εσφαλμένων τιμών στη διάταξη.)

2. Σκιές

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

Όπως μπορούμε να δούμε στην παραπάνω εικόνα, οι σκιές στο iOS είναι μεγαλύτερες από προεπιλογή. Στα παραπάνω παραδείγματα, αυτό κάνει τη μεγαλύτερη διαφορά στις κορυφαίες ακμές των ορθογωνίων.

Οι σκιές είναι περίπλοκες επειδή οι παράμετροι μεταξύ του Sketch και του iOS δεν είναι οι ίδιες. Η μεγαλύτερη διαφορά είναι ότι δεν υπάρχει έννοια "διάδοσης" σε ένα CALayer, αν και αυτό μπορεί να ξεπεραστεί αυξάνοντας το μέγεθος του στρώματος που περιέχει τη σκιά.

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

Πώς να φτιάξεις

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

// παλαιός
layer.shadowColor = UIColor.black.cgColor
layer.shadowOpacity = 0.2
layer.shadowOffset = CGSize (πλάτος: 0, ύψος: 4)
layer.shadowRadius = 10
// νέος
layer.shadowColor = UIColor.black.cgColor
layer.shadowOpacity = 0,3
layer.shadowOffset = CGSize (πλάτος: 0, ύψος: 6)
layer.shadowRadius = 7

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

3. Διαβαθμίσεις

Οι κλίσεις αποδεικνύονται επίσης ενοχλητικές.

Από τις τρεις κλίσεις, μόνο οι "πορτοκαλί" (επάνω) και "μπλε" (κάτω δεξιά) διαφέρουν.

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

Η διαφορά είναι πιο αισθητή στο μπλε κλίση - η γωνία είναι πιο κάθετη στο iOS. Αυτή η κλίση ορίζεται από τρία χρώματα: ανοιχτό μπλε στην κάτω αριστερή γωνία, σκούρο μπλε στη μέση και ροζ στην επάνω δεξιά γωνία.

Πώς να φτιάξεις

Τα σημεία έναρξης και λήξης ίσως χρειαστεί να ρυθμιστούν εάν η κλίση είναι γωνιακή. Δοκιμάστε να αντισταθμίσετε ελαφρώς το startPoint και endpoint του CAGradientLayer σας για να υπολογίσετε αυτές τις διαφορές.

// παλαιός
layer.startPoint = CGPoint (χ: 0, γ: 1)
layer.endPoint = CGPoint (χ: 1, γ: 0)
// νέος
layer.startPoint = CGPoint (χ: 0,2, γ: 1)
layer.endPoint = CGPoint (χ: 0,8, γ: 0)

Δεν υπάρχει μαγική φόρμουλα εδώ * - οι τιμές πρέπει να προσαρμοστούν και να επαναληφθούν έως ότου τα αποτελέσματα συμφωνούν οπτικά.

* Η Jirka Třečák δημοσίευσε μια εξαιρετική απάντηση με συνδέσμους που εξηγούν πώς λειτουργεί η απόδοση της κλίσης. Ελέγξτε το αν θέλετε να βάψετε βαθιά σε περισσότερους κώδικες!

Δες το και μονος σου

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

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

Αποκτήστε την εφαρμογή επίδειξης ανοιχτού κώδικα εδώ: https://github.com/nathangitter/sketch-vs-ios

Το Sketch vs iOS Demo App - Δοκιμάστε τον εαυτό σας!

Πάμε

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

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

Απολαύσατε την ιστορία; Αφήστε μερικά χτυπήματα εδώ στο Medium και μοιραστείτε το με τους φίλους σας iOS design / dev. Θέλετε να μείνετε ενημερωμένοι σχετικά με τις τελευταίες εκδόσεις του σχεδιασμού εφαρμογών για κινητά / dev; Ακολουθήστε με στο Twitter εδώ: https://twitter.com/nathangitter

Χάρη στους Rick Messer και David Okun για την αναθεώρηση των σχεδίων αυτής της θέσης.