Σχεδιασμός Διεπαφής Χρήστη

Ένας βήμα προς βήμα οδηγός για το UI Animation με Αρχή και Σκίτσο

Ο σχεδιασμός μιας διεπαφής χρήστη με γνώμονα την κίνηση και τις μεταβάσεις είναι ένας πολύ καλός τρόπος για να σχεδιάσετε μια καλύτερη εμπειρία χρήστη (UX) για την επόμενη εφαρμογή σας. Οι κινούμενες μικρο-αλληλεπιδράσεις είναι ο τέλειος τρόπος για να διεγείρετε την αφοσίωση των χρηστών, σε έναν κόσμο με σύντομα χρονικά διαστήματα. Γι 'αυτό η Airbnb παρουσίασε πρόσφατα το Lottie - το 'Νέο εργαλείο ανοιχτού κώδικα που κάνει την προσθήκη κινούμενης εικόνας σε εγγενείς εφαρμογές.'

Έργα όπως το Lottie δείχνουν την αυξανόμενη σημασία της προσθήκης κίνησης ως νέου στοιχείου για τη δημιουργία βελτιωμένου UX τόσο για εφαρμογές όσο και για ιστότοπους.

Σε αυτό το σεμινάριο, θα μάθετε αποτελεσματικά UI τεχνικής κίνησης χρησιμοποιώντας το Principle για Mac. Αφού ακολουθήσετε αυτόν τον οδηγό, θα μπορέσουμε να μετατρέψουμε βαρετές και στατικές κοροϊδεύσεις σε διαδραστικό πρωτότυπο για την καλύτερη προβολή της εργασίας σας. Μπορείτε να εφαρμόσετε αυτό που θα μάθετε εδώ για να βελτιώσετε το επόμενο βήμα UI και τις λήψεις Dribbble.

Ας αρχίσουμε.

Κατεβάστε αυτούς τους δωρεάν πόρους για να ακολουθήσετε.

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

πώς να φτιάξετε μια μηχανή συστάσεων

Κατεβάστε μια δωρεάν δοκιμαστική αρχή εδώ .
Κατεβάστε μια δωρεάν δοκιμή Sketch εδώ .
τι μπορείτε να κάνετε με το node.js
Κατεβάστε το δωρεάν αρχείο προέλευσης φροντιστηρίου εδώ .

Μια επισκόπηση της διεπαφής αρχών

Οδηγός για την Κινούμενη διεπαφή χρήστη με Αρχή και Σκίτσο

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

Κατανόηση βασικών εννοιών ζωτικότητας στην αρχή

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

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

Συστατικό: Ένα στοιχείο είναι ένα είδος ομαδοποίησης που βοηθάει να περιέχει στοιχεία και ακόμη και κινούμενες εικόνες. Είναι το αντίστοιχο ενός «έξυπνου αντικειμένου» στο Photoshop ή ενός «συμβόλου» στο Illustrator.
Δώσει το έναυσμα για: Ένας τρόπος έναρξης μιας κινούμενης εικόνας - δηλ. Πατώντας, κύλιση, αιωρούμενος κ.λπ. Στην Αρχή, μια σκανδάλη μπορεί να οριστεί επιλέγοντας οποιοδήποτε στοιχείο μέσα στην Αρχή και κάνοντας κλικ στο εικονίδιο που εμφανίζεται στη δεξιά πλευρά του με ένα εικονίδιο αστραπής.
Μετάβαση: Αλλαγή κατάστασης από ένα πίνακα γραφικών σε άλλο, δηλαδή συρόμενη αριστερά ή δεξιά.
Ελαφρυντικό αποτέλεσμα: Το επίπεδο ομαλότητας μιας μετάβασης με βάση τον τρόπο έναρξης και λήξης της κινούμενης εικόνας.

A. Ενεργοποίηση και μετάβαση

Οδηγός για την Κινούμενη διεπαφή χρήστη με Αρχή και Σκίτσο

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

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

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

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

Β. Μήκος κίνησης και εφέ χαλάρωσης

Ένα σεμινάριο για την κινούμενη διεπαφή χρήστη με το Principle και το Sketch

σε τι χρησιμοποιείται το adobe xd

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

Ανοίξτε τον Πίνακα κινουμένων σχεδίων: Επιλέξτε τα μαύρα βέλη ανάμεσα σε δύο πίνακες γραφικών και κάντε κλικ στο κουμπί 'Animate' που βρίσκεται στην επάνω γραμμή.
Επεκτείνετε το μήκος κινούμενης εικόνας: Μετακινήστε τα τελικά σημεία των μπλε γραμμών.
Εφαρμογή ευκολίας: Επιλέξτε όλα τα σημεία σε σχήμα διαμαντιού και επιλέξτε 'Ease Both' από το αναπτυσσόμενο μενού για να εξομαλύνετε τις μεταβάσεις.

Τι θα λάβετε

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

Βεβαιωθείτε ότι κατεβάσατε το δωρεάν αρχείο προέλευσης φροντιστηρίου εδώ .

Ας αρχίσουμε.

Μετάβαση από ένα αρχείο σκίτσου στην αρχή

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

Αφαίρεση των κεφαλίδων οθόνης για απρόσκοπτη κύλιση

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

Δημιουργία του Animation φόρτωσης - Τα σχήματα

Επιλέξτε την ομάδα φόρτωσης φόρτωσης και κάντε κλικ στο 'Δημιουργία εξαρτήματος' που περιέχει τα σχήματα και το κείμενο φόρτωσης. Δημιουργήστε ένα στοιχείο για το κείμενο μέσα στο πρώτο σύμβολο. θα κινούσουμε το κείμενο ξεχωριστά αμέσως μετά.
Επιλέξτε τα ομαδοποιημένα σχήματα. Επιλέξτε τη σκανδάλη 'Πατήστε' και σύρετε και αποθέστε πάνω από τον ίδιο πίνακα γραφικών για να δημιουργήσετε ένα αντίγραφο.
Ο δεύτερος πίνακας γραφικών αντιπροσωπεύει την τελική κατάσταση της κινούμενης εικόνας και μπορείτε να περιστρέψετε την ομάδα χρησιμοποιώντας την ιδιότητα γωνίας. Δώστε διαφορετικές τιμές γωνίας στο 'γέμισμα' και στο 'περίγραμμα' για να δημιουργήσετε ένα πιο ενδιαφέρον αποτέλεσμα.
Για να ολοκληρώσετε, επιλέξτε τα βέλη μεταξύ των πινάκων γραφικών, κάντε κλικ στο 'Animate' για να ανοίξετε το 'panel animation' και αλλάξτε τη διάρκεια σύροντας τα τελικά σημεία σε περίπου 1,00 s.

Δημιουργία του Animation φόρτωσης - Το κείμενο

Αρχικά, δημιουργήστε το slide-up animation. Επιλέξτε το σχήμα του κουμπιού και εφαρμόστε το συμβάν ενεργοποίησης 'Πατήστε'. Στο νέο artboard μετακινήστε όλες τις οθόνες κατά 640px (ίσο με το τρέχον ύψος του artboard).
Τώρα, ας δημιουργήσουμε το parallax. Μεταβείτε στον προηγούμενο πίνακα γραφικών, στην οθόνη υποδοχής, μετακινήστε τα γεωμετρικά σχήματα και το κείμενο προς τα κάτω σε διαφορετικές τιμές Υ.
Τέλος, μέσα στον πίνακα κίνησης, επεκτείνετε το χρονοδιάγραμμα, ας πούμε στο 1s. Εφαρμόστε το εφέ 'Ευκολία και των δύο' στο χρονοδιάγραμμα (βεβαιωθείτε ότι έχετε επιλέξει όλα τα σημεία σε σχήμα διαμαντιού και κάντε κλικ σε οποιαδήποτε μπλε γραμμή για να εφαρμόσετε το εφέ σε όλους).
Κάντε προεπισκόπηση της κινούμενης εικόνας και μετακινήστε τα σχήματα έως ότου το εφέ παράλλαξης να σας φανεί καλό.

Δημιουργία του εφέ Parallax - Σελίδα καλωσορίσματος

Επιλέξτε το στοιχείο φόρτωσης και εφαρμόστε τη σκανδάλη 'Πατήστε' σύροντας ένα βέλος από αυτό οπουδήποτε στον πίνακα γραφικών.
Επιλέξτε όλες τις οθόνες (από την κύρια ομάδα) και μετακινήστε τις κατά 640 εικονοστοιχεία. Αυτό το βήμα εμφανίζει την οθόνη υποδοχής σε προβολή.
Επιστρέψτε στον προηγούμενο πίνακα γραφικών και μετακινήστε τα σχήματα στην οθόνη 'Καλώς ήλθατε' προς τα κάτω. Αυτό δημιουργεί το ασύγχρονο συρόμενο φαινόμενο που ονομάζεται parallax.
Προσαρμόστε την κινούμενη εικόνα προσθέτοντας χρόνο στη μετάβαση μέσα στον πίνακα κινούμενων σχεδίων: Επιλέξτε το βέλος μεταξύ του πίνακα γραφικών και, στη συνέχεια, σύρετε τα τελικά σημεία στις μπλε γραμμές σε περίπου 1 δευτερόλεπτο.

Δημιουργία του εφέ Parallax - Σχετικά με τη σελίδα

Επιλέξτε το κουμπί κάτω βέλους (βεβαιωθείτε ότι έχετε επιλέξει ολόκληρη την ομάδα) και εφαρμόστε τη σκανδάλη 'Πατήστε' σύροντας ένα βέλος από αυτό οπουδήποτε στον πίνακα γραφικών.
Επιλέξτε όλες τις οθόνες (από την κύρια ομάδα) και μετακινήστε τα πάντα πάνω από 640 εικονοστοιχεία. Αυτό το βήμα εμφανίζει την οθόνη Σχετικά σε προβολή.
Επιστρέψτε στον προηγούμενο πίνακα γραφικών και μετακινήστε τα σχήματα στην οθόνη 'Σχετικά' προς τα κάτω. Αυτό δημιουργεί το ασύγχρονο συρόμενο φαινόμενο που ονομάζεται parallax.

Δημιουργία του εφέ Parallax - Σελίδα χρωμάτων

Εφαρμόστε τη σκανδάλη 'Πατήστε' στο κουμπί κάτω βέλους (βεβαιωθείτε ότι έχετε επιλέξει ολόκληρη την ομάδα) και αυτό θα δημιουργήσει έναν νέο πίνακα γραφικών.
Στο νέο artboard, επιλέξτε όλες τις οθόνες και μετακινήστε τις κατά 640px.
Στον προηγούμενο πίνακα γραφικών, μετακινήστε τα χρώματα και το κείμενο προς τα κάτω. Σημειώστε ότι όσο χαμηλότερα μετακινείτε ένα αντικείμενο, τόσο περισσότερο χρειάζεται για να μετακινηθείτε προς τα πίσω, οπότε φροντίστε να χρησιμοποιήσετε διαφορετική τοποθέτηση για να δημιουργήσετε ένα πιο δυναμικό εφέ.
Τέλος, επεκτείνετε την κινούμενη εικόνα και εφαρμόστε μια «ευκολία και των δύο» σε όλα τα μπλε χρονοδιαγράμματα μέσα στον πίνακα κινούμενων σχεδίων.

Ολίσθηση μιας σελίδας από την πλευρά - Σελίδα επιλογής χρώματος

Εφαρμόστε μια σκανδάλη 'Πατήστε' στο κουμπί 'Φόρτωση περισσότερων' στην οθόνη 'Χρώματα'.
Στον νέο πίνακα γραφικών, μετακινήστε το περιεχόμενο 'Χρώματα' και 'Επιλογή' προς τα αριστερά κατά 360px (πλάτος artboard)
Επιστρέψτε στον προηγούμενο πίνακα γραφικών και μετακινήστε το περιεχόμενο της οθόνης προς την αντίθετη κατεύθυνση - δεξιά.
Σημειώστε ότι μπορείτε επίσης να κινούσετε την αδιαφάνεια της ολίσθησης της οθόνης από το μηδέν στο 100 τοις εκατό.
Παίξτε με διάρκεια κίνησης και εφέ χαλάρωσης για να τροποποιήσετε το εφέ μετάβασης.

Σημειώστε ότι οποιοδήποτε επίπεδο και σχήμα που είχε ένα αποτέλεσμα (όπως σκιές) από το αρχικό αρχείο Sketch εισάγεται στην Αρχή ως εικόνα. Εάν πρέπει να επεξεργαστείτε σχήματα μέσα στην Αρχή, προσπαθήστε να μην προσθέσετε κανένα ειδικό εφέ μόνο μετά την εισαγωγή.
Τούτου λεχθέντος, χρησιμοποιώντας το υπάρχον εικονίδιο ως οδηγό, σχεδιάστε τρία λεπτά ορθογώνια και ομαδοποιήστε τα για να δημιουργήσετε το εικονίδιο μενού χάμπουργκερ. Τώρα, μπορείτε να διαγράψετε ή να αποκρύψετε το προηγούμενο εικονίδιο μενού.
Επιλέξτε το νεοδημιουργημένο εικονίδιο και εφαρμόστε μια σκανδάλη 'tap'.
Στον νέο πίνακα γραφικών, περιστρέψτε το επάνω και το κάτω ορθογώνιο στο εικονίδιο μενού, βεβαιωθείτε ότι είναι στοίχιση στο κέντρο και μηδενική αδιαφάνεια στο μεσαίο.
Για να δείτε την κινούμενη εικόνα που μόλις δημιουργήσατε, συνδέστε ξανά το εικονίδιο του μενού που έχει αλλάξει στον πίνακα γραφικών προεπισκόπησης με τη σκανδάλη 'Πατήστε' και δοκιμάστε το.

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

Μετακίνηση στην οθόνη επαφής

Στο ανοιχτό μενού, εφαρμόστε μια σκανδάλη 'Πατήστε' στο κουμπί 'Επικοινωνήστε μαζί μας'.
Στο artboard που δημιουργήθηκε πρόσφατα, μετακινήστε όλες τις οθόνες κατά 640 px.
Στη συνέχεια, επιστρέψτε στο artboard προεπισκοπήσεων και μετακινήστε τα στοιχεία από τη σελίδα 'Φόρμα' προς τα κάτω.
Μετακινήστε τα στοιχεία σε διαφορετικές τιμές Y για να δημιουργήσετε το εφέ παράλλαξης.
Τέλος, επιλέξτε τα βέλη μεταξύ των πινάκων γραφικών, επεκτείνετε το μήκος κινούμενης εικόνας και εφαρμόστε το 'Ease Both' στα μπλε χρονοδιαγράμματα.

Τελειώνοντας με τη σελίδα Ευχαριστώ

Εφαρμόστε μια σκανδάλη 'Πατήστε' στο κουμπί 'αποστολή μηνύματος'.
Στο νέο artboard μετακινήστε όλες τις οθόνες κατά 640 px.
Στη συνέχεια, επιστρέψτε στο artboard προεπισκοπήσεων και μετακινήστε τα στοιχεία από τη σελίδα 'Επιβεβαίωση' προς τα κάτω.
Παίξτε με κλίμακα και περιστροφή για το έγχρωμο εικονίδιο για να δημιουργήσετε ένα πιο δυναμικό εφέ.
Βεβαιωθείτε ότι έχετε προσθέσει στο μήκος της κινούμενης εικόνας για να κατανοήσετε καλύτερα το εφέ μετάβασης.

Η απλότητα της προσθήκης κινούμενων σχεδίων με την αρχή.

Το Principle είναι ένα φανταστικό εργαλείο για να ζωντανεύουν οι ιδέες αλληλεπίδρασης UI.

Η διεπαφή είναι φιλική προς Mac και δημιουργήθηκε για να λειτουργεί άψογα με αρχεία Sketch.

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