Σχεδίαση εφαρμογών χωρίς Jank

Πώς οι σχεδιαστές μπορούν να βοηθήσουν στην αποτροπή οπτικών δυσλειτουργιών στις εφαρμογές iOS

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

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

Παρατηρήστε τη διπλή κίνηση πλοήγησης και την έλλειψη κίνησης πληκτρολογίου.

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

Τι είναι ο Τζάνκ;

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

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

Μια εφαρμογή μπορεί να είναι "janky" ή να εμφανίσει "jankiness" αν φαίνεται να συμπεριφέρεται λανθασμένα. Εκτός από τις οπτικές δυσλειτουργίες, η φρενίτιδα μπορεί να αναφέρεται σε κουμπιά που δεν ανταποκρίνονται, σε ασυνεπή συμπεριφορά φόρτωσης ή σε αμήχανες χειρονομίες.

Σε αυτή τη θέση, θα επικεντρωθώ αποκλειστικά σε οπτικές δυσλειτουργίες.

Κίνητρο

Εάν είστε σχεδιαστής, μπορεί να μην αισθάνεστε εξουσιοδοτημένοι να διορθώσετε το app jank-είναι ένα πρόβλημα κώδικα, σωστά;

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

Θα συζητήσουμε μερικές κοινές πηγές jank στις εφαρμογές iOS και θα διερευνήσουμε τρόπους σχεδιασμού εφαρμογών που μπορούν να αποτρέψουν την εμφάνιση αυτών των ζητημάτων.

Μεταβάσεις πλοήγησης

Ας ξεκινήσουμε με ένα κοινό στοιχείο διεπαφής χρήστη: τη γραμμή πλοήγησης.

Εδώ είναι μια κανονική, ευτυχισμένη γραμμή πλοήγησης:

Ομαλή μετάβαση όταν αγγίζετε το κουμπί πίσω και όταν οδηγείτε διαδραστικά.

Εδώ είναι μια janky, λυπημένη γραμμή πλοήγησης:

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

Τι τρέχει? Γιατί είναι αυτή η μπάρα πλοήγησης τόσο janky;

Στην περίπτωση αυτή, η γραμμή πλοήγησης της οθόνης "Home" είναι ημιδιαφανής, ενώ η γραμμή πλοήγησης της οθόνης "New Screen" είναι αδιαφανής.

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

Σχεδιασμός μεταβάσεων πλοήγησης

Δεν υποστηρίζονται πλήρως πολλές θεραπείες στη γραμμή πλοήγησης: αποκρύπτοντας την προεπιλεγμένη υπογράμμιση 1px γκρι, κρύβοντας το κείμενο του κουμπιού πίσω, προσθέτοντας επιπλέον προβολές κάτω από τη γραμμή πλοήγησης και επιτρέποντας μια πίσω κίνηση από οπουδήποτε στην οθόνη.

Πώς μπορούν οι σχεδιαστές, οι οποίοι ίσως δεν γνωρίζουν τις αποχρώσεις του API UINavigationController, να σχεδιάσουν αυτά τα θέματα;

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

Πληκτρολόγια

Από την εμπειρία μου, τα πληκτρολόγια είναι η πιο κοινή πηγή του jank. Και τα δύο παραδείγματα στην κορυφή αυτής της ανάρτησης σχετίζονται με το πληκτρολόγιο.

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

Σχετικά με το πληκτρολόγιο στο Snapchat.

Εξέταση σχεδιασμού πληκτρολογίου

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

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

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

Πολυεθνικές κινήσεις

Λατρεύω κινούμενα σχέδια πολλών κρατών. Είναι απίστευτα διασκεδαστικό να σχεδιάζετε και να χτίζετε. Ωστόσο, τα κινούμενα σχέδια που έχουν πολλά κράτη έχουν την τάση να προκαλούν jank.

Ακολουθεί ένα παράδειγμα πολυσύνθετης κινούμενης εικόνας:

Κουμπί App Store με ανεπιθύμητη κίνηση.

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

Ακόμα και η

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

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

Πολλαπλές πολιτικές σχεδιασμού κινουμένων σχεδίων

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

De-Janking ένα σχέδιο

Τώρα που γνωρίζουμε κάποιες κοινές πηγές jank στις εφαρμογές iOS, ας χρησιμοποιήσουμε τη νέα μας προοπτική για να αξιολογήσουμε ένα σχέδιο.

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

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

Φαίνεται αρκετά καλό, έτσι; Όχι. Αυτός ο σχεδιασμός είναι ένα εισιτήριο μονής κατεύθυνσης στο Jankville.

Ας υπολογίσουμε τις πιθανές πηγές του jank:

  1. Οι διάφορες γραμμές πλοήγησης και οι μεταβάσεις μεταξύ τους.
  2. Η προεπισκόπηση διαφάνειας που παραμένει πάντα πάνω από το πληκτρολόγιο.
  3. Το διαδραστικό και κρατικό κινούμενο σχέδιο για την επέκταση της προεπισκόπησης διαφάνειας.
  4. Η θέση κύλισης και οι κινήσεις του πληκτρολογίου όταν ο χρήστης προσθέτει πολλές γραμμές κειμένου.
  5. Η κινούμενη με βάση το κράτος κινούμενη εικόνα επιλέγει τον τύπο του κειμένου ("Τίτλος", "Υπότιτλος", "Σφαίρα", κλπ.)

Το πιο σημαντικό, δεν είναι όλα ανεξάρτητα - θα πρέπει να αντιμετωπίσουμε τις παρενέργειες όλων των πιθανών συνδυασμών.

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

Εδώ είναι ένα νέο σχέδιο που γρήγορα χλευάστηκα:

Η μεσαία οθόνη "My Presentation" έχει επεκταθεί σε τρεις οθόνες: η πρώτη για την οργάνωση διαφανειών, η δεύτερη για την οργάνωση στοιχείων και η τρίτη για την επεξεργασία ενός μόνο στοιχείου.

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

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

Σημείωση Σχετικά με τα προσαρμοσμένα σχέδια

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

Αλλά πολύ συχνά έβλεπα προσαρμοσμένα σχέδια που το κάνουν μόνο το 90% του δρόμου μέχρι την ολοκλήρωση. Λόγω ποικίλων λόγων, το τελευταίο 10% μειώνεται, και η φρεσκάδα παραμένει σε διαφορετικά καλά σχεδιασμένες εφαρμογές.

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

Πάμε

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

Εδώ είναι μερικά πρακτικά βήματα για να μειώσετε το jank:

  1. Λάβετε νωρίς την εισαγωγή προγραμματιστών. Ένας έμπειρος προγραμματιστής iOS μπορεί γρήγορα να εκτιμήσει την πολυπλοκότητα της οικοδόμησης ενός σχεδίου και να σας ενημερώσει για πιθανά θέματα.
  2. Απλοποιήστε τα σχέδια! Είναι εύκολο να αποκρύψετε την πολυπλοκότητα υποθέτοντας ότι οι μεταβάσεις και τα κινούμενα σχέδια θα λειτουργήσουν από μόνα τους. Μελετώντας όλες τις πιθανές περιπτώσεις και μεταβάσεις, φυσικά θα προχωρήσετε σε απλούστερες λύσεις.

Ας ελπίσουμε ότι έχετε μάθει μερικούς από τους λόγους για τους οποίους ορισμένες εφαρμογές αισθάνονται janky, και το πιο σημαντικό, αισθάνονται την εξουσία να λύσει jank μέσω του σχεδιασμού!

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

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