Το Motion Design δεν πρέπει να είναι δύσκολο

Στις περιοχές που είναι πιο σημαντικές σε ένα UI, ο σχεδιασμός κίνησης μπορεί και πρέπει να είναι απλός

Η κίνηση βοηθάει να γίνουν τα UIs εκφραστικά και εύχρηστα. Παρά το γεγονός ότι έχει τόσο μεγάλο δυναμικό, η κίνηση είναι ίσως η λιγότερο κατανοητή από όλους τους κλάδους του σχεδιασμού. Αυτό μπορεί να οφείλεται στο γεγονός ότι είναι ένα από τα νεότερα μέλη της οικογένειας σχεδιασμού UI. Ο οπτικός σχεδιασμός και ο σχεδιασμός αλληλεπίδρασης χρονολογούνται από τα πρώτα GUI, αλλά η κίνηση έπρεπε να περιμένει για το σύγχρονο υλικό να κάνει την κινούμενη εικόνα ομαλά. Η αλληλεπικάλυψη μεταξύ της κίνησης της UI και της παραδοσιακής κινούμενης εικόνας μάλιστα μάλιστα προσβάλλει τα νερά. Μια ζωή μπορεί να δαπανηθεί mastering 12 βασικές αρχές της Disney, αυτό σημαίνει ότι η κίνηση UI είναι επίσης πολύπλοκη; Οι άνθρωποι συχνά λένε ότι ο σχεδιασμός της κίνησης είναι περίπλοκος ή ότι η επιλογή των σωστών τιμών είναι διφορούμενη. Υποστηρίζω ότι στις περιοχές που είναι πιο σημαντικές σε ένα UI, ο σχεδιασμός κίνησης μπορεί και πρέπει να είναι απλός.

Από πού να αρχίσω

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

Μοντέλα μεταβάσεων

Όταν σχεδιάζετε μια μετάβαση στο Nav, η απλότητα και η συνέπεια είναι καθοριστικές. Για να επιτευχθεί αυτό, θα επιλέξουμε από δύο τύπους μοτίβων κίνησης:

  1. Μεταβάσεις που βασίζονται σε ένα δοχείο
  2. Μεταβάσεις χωρίς δοχείο.

Μεταβάσεις που βασίζονται σε ένα δοχείο

Στοιχεία όπως το κείμενο, τα εικονίδια και οι εικόνες ομαδοποιούνται μέσα σε δοχεία

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

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

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

* Η κινούμενη εικόνα επιβραδύνθηκε για να δείξει πώς τα στοιχεία κλιμακώνουν και καλύπτονται μέσα σε ένα δοχείο

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

* Η κίνηση επιβραδύνθηκε για να απεικονίσει πώς ξεκινούν τα στοιχεία και εισέρχονται χρησιμοποιώντας εξασθενίζοντας

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

* Η κίνηση επιβραδύνθηκε για να απεικονίσει πώς οι συνθέσεις αρχής και τέλους συνδέονται από το δοχείο

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

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

* Ο κινηματογράφος επιβραδύνθηκε για να καταδείξει πώς μπορούν να εισέλθουν τα εμπορευματοκιβώτια με ένα ξεθωριασμένο κινούμενο μέγεθος

Μεταβάσεις χωρίς δοχείο

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

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

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

* Η κίνηση επιβραδύνθηκε για να απεικονίσει κάθετη και οριζόντια κοινή κίνηση

Βέλτιστες πρακτικές

Κρατήστε το απλό

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

* Η κίνηση επιβραδύνθηκε για να δείξει διαφορετικά στυλ κίνησης

Επιλέξτε τη σωστή διάρκεια και χαλαρώστε

Οι μεταβάσεις στο Nav πρέπει να χρησιμοποιούν διάρκειες που δίνουν προτεραιότητα στη λειτουργικότητα, διότι είναι γρήγορες, αλλά όχι τόσο γρήγορες ώστε να αποπροσανατολίζονται. Οι διάρκειες επιλέγονται με βάση το μέγεθος της οθόνης που καταλαμβάνει η κινούμενη εικόνα. Δεδομένου ότι οι μεταβάσεις στο πλοίο συνήθως καταλαμβάνουν το μεγαλύτερο μέρος της οθόνης, μια μακρά διάρκεια των 300ms είναι ένας καλός κανόνας. Αντίθετα, μικρά εξαρτήματα όπως ένας διακόπτης χρησιμοποιούν σύντομη διάρκεια 100ms. Εάν μια μετάβαση αισθάνεται πάρα πολύ γρήγορα ή αργά, ρυθμίστε τη διάρκειά της σε βήματα των 25ms μέχρι να επιτύχει τη σωστή ισορροπία.

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

* Η κίνηση επιβραδύνθηκε για να απεικονίσει διαφορετικούς τύπους χαλάρωσης

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

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

Η απεικόνιση χαρακτήρων μπορεί να προσθέσει ευελιξία σε ένα απογοητευτικό σφάλμα

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