Κατανόηση των μικροεπεξεργασιών στο σχεδιασμό εφαρμογών για κινητά

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

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

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

Η δύναμη των μικροδιαστημάτων

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

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

Βρήκα ένα απίστευτο απόσπασμα σε αυτή την ανάρτηση συζητώντας την τεράστια αξία των microinteractions για κινητές εφαρμογές:

“Τα καλύτερα προϊόντα κάνουν δύο πράγματα καλά: χαρακτηριστικά και λεπτομέρειες. Χαρακτηριστικά είναι αυτά που αντλούν τους ανθρώπους στο προϊόν σας. Τα στοιχεία είναι αυτά που τα κρατούν εκεί. Και οι λεπτομέρειες είναι αυτό που κάνει την εφαρμογή μας να ξεχωρίζει από τον ανταγωνισμό μας.”

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

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

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

Εδώ είναι τις πιο κοινές χρήσεις της κινούμενης εικόνας και της κίνησης σε κινητό σχεδιασμό UI / UX:

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

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

Πώς λειτουργούν οι μικροεπεξεργασίες

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

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

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

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

1. Δράση - ο ο χρήστης κάνει κάτι όπως κίνηση, σύρετε, πατήστε και κρατήστε πατημένο, ή κάποια άλλη αλληλεπίδραση.
2. Αντίδραση - ο η διεπαφή αποκρίνεται με βάση το τι πρέπει να συμβεί. Η ολίσθηση μιας οθόνης μπορεί να μετακινηθεί ξανά στο ιστορικό του προγράμματος περιήγησης ή να πατήσετε ένα ρυθμιστικό ON / OFF μπορεί να απενεργοποιήσει μια ρύθμιση.
3. Ανατροφοδότηση - αυτό είναι το που βλέπει ο χρήστης ως αποτέλεσμα της αλληλεπίδρασης. Όταν ο χρήστης επιστρέψει ξανά σε ένα πρόγραμμα περιήγησης για κινητά, μπορεί να επιπλεύσει την προηγούμενη σελίδα μέχρι να εμφανιστεί "στην κορυφή" της οθόνης. Το ρυθμιστικό ενεργοποίησης / απενεργοποίησης μπορεί να ολισθήσει ομαλά ή να αυξηθεί όταν εφαρμοστεί πίεση στην οθόνη.

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

Αναζητήστε τα στοιχεία

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

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

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

Δείτε μερικά παραδείγματα

Νομίζω ότι ο καλύτερος τρόπος για να μάθετε κάτι είναι να το κάνετε αυτό και ο δεύτερος καλύτερος τρόπος είναι να μελετήσετε το έργο άλλων. Έχω συγκεντρώσει μια μικρή χούφτα UI / UX μικροσύνθεση animations από τους ταλαντούχους χρήστες του Dribbble, για να σας δείξει πώς αυτές φαίνονται σε ένα πραγματικό mockup.

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

1. Εφαρμογή UI σε σκηνικά με κινούμενα σχέδια

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

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

2. Διαδραστική οθόνη άσκησης

Αυτή η δημιουργική κινούμενη κίνηση κινουμένων σχεδίων προέρχεται από τον σχεδιαστή Vitaly Rubtsov. Δείχνει έναν χρήστη που εξοικονομεί την προπόνησή του για ένα σύνολο καταλήψεων.

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

3. Αναζήτηση εφαρμογών μικροεπεξεργασίας

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

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

4. Στόχος μικροσυστολής στόχου φυσικής κατάστασης

Νομίζω ότι ο Jakub Antalâ ????????????????????????????????. Οι οθόνες έχουν όλα αυτό το αίσθημα jiggly jell-o επειδή το τα σχήματα κινούνται τόσο ρευστά.

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

5. Τραβήξτε για Ανανέωση κινούμενης εικόνας

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

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

6. Μικροσυσσωμάτωση Tab

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

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

7. Προφορτίζοντας το Animation

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

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

Τυλίγοντας

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

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