Εργαλεία Και Σεμινάρια

Πώς να δημιουργήσετε προσαρμοσμένα κινούμενα σχέδια φόρτωσης για να μειώσετε τα ποσοστά εγκατάλειψης

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

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

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

Σε αυτό το σεμινάριο, θα χρησιμοποιήσουμε το Sketch για να δημιουργήσουμε βασικά σχήματα και Αρχή για να δημιουργήσουμε γρήγορα απλές προσαρμοσμένες κινούμενες εικόνες φόρτωσης. (Και οι δύο αυτές εφαρμογές είναι για Mac.) Θα μάθετε πώς να δημιουργείτε τα πολύχρωμα κινούμενα σχέδια φόρτωσης που χρησιμοποιούνται από τους Trello, Flickr, Slack και άλλα.

Ας φτάσουμε σε αυτό.

Slack φόρτωση κινουμένων σχεδίων

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

Τοποθετήστε τα τέσσερα σχήματα με τέτοιο τρόπο ώστε να δημιουργήσετε ένα φανταστικό τετράγωνο με 150px χώρο μεταξύ κάθε πλευράς. Εφαρμόστε τέσσερα διαφορετικά χρώματα (# 35BA90 πράσινο, # 69CADD μπλε, # EBA900 κίτρινο και # E20661 ροζ).

Εισαγάγετε τα σχήματα στο Principle, ομαδοποιήστε τα και κάντε κλικ στο 'Δημιουργία στοιχείου' για να τοποθετήσετε την ομάδα.

Πηγαίνετε μέσα στην ένθετη ομάδα και περιστρέψτε το artboard κατά 15 μοίρες. Στη συνέχεια, επιλέξτε κάθε μεμονωμένο κύκλο και περιστρέψτε τον πίσω στην αρχική του θέση (προς τα πίσω 15 μοίρες). Αυτό δημιουργεί το ελαστικό αποτέλεσμα σε ευθεία γραμμή.

Εφαρμόστε μια 'Αυτόματη' σκανδάλη στο artboard και στη συνέχεια τεντώστε κάθε στρογγυλεμένο ορθογώνιο στην αντίθετη πλευρά του artboard σε μήκος 295px. Δώστε μια αδιαφάνεια 75% σε κάθε σχήμα και στους δύο πίνακες γραφικών.

Εφαρμόστε μια άλλη σκανδάλη 'Auto' στο δεύτερο artboard. Στο νέο artboard, μειώστε κάθε γραμμή στο αρχικό πλάτος 50px, αλλά στην αντίθετη πλευρά από την αρχική της θέση.

Συνδέστε τον τελευταίο πίνακα γραφικών με τον πρώτο με ένα 'Auto' σκανδάλη. Κάντε κλικ στο κουμπί 'Πίσω στο γονέα' για προεπισκόπηση του τελικού αποτελέσματος.

Συμβουλή: Όταν μεταβείτε στο 'Back to Parent', μπορείτε να περιστρέψετε την κύρια ομάδα κατά -30 μοίρες για να μοιάσετε περισσότερο με το Slack. Επίσης, μπορείτε να αλλάξετε το ρυθμό κινούμενης εικόνας μέσα στον πίνακα 'Animate' και να εφαρμόσετε ένα εφέ 'Ease Both' για να εξομαλύνετε τις μεταβάσεις.

Trello Loading Animation

Χρησιμοποιώντας το Sketch, εντοπίστε ένα μπλε τετράγωνο 100 εικονοστοιχείων. Σχεδιάστε ένα λευκό ορθογώνιο πλάτος 60px με ύψος 140px. Ευθυγραμμίστε το με την επάνω αριστερή γωνία του προηγούμενου τετραγώνου με το πάνω και το αριστερό περιθώριο 30 εικονοστοιχείων. Αντιγράψτε αυτό το λευκό ορθογώνιο, ευθυγραμμίστε το προς τα δεξιά του τετραγώνου με το δεξί περιθώριο 30px και μειώστε το ύψος του στα 70px.

Εισαγάγετε το artboard στην Αρχή και εφαρμόστε τη σκανδάλη 'Auto' για να δημιουργήσετε ένα νέο βασικό καρέ. Στη νέα πλακέτα τέχνης, αντιστρέψτε τα ύψη των λευκών ορθογωνίων (κάντε το αριστερό ορθογώνιο 70px υψηλό και το δεξί ορθογώνιο 140px). Εφαρμόστε ένα εφέ 'Ease-Both' στον πίνακα 'Animate' για να εξομαλύνετε τη μετάβαση.

Κύλινδρος

Εντοπίστε έναν κύκλο στο Σκίτσο. Εφαρμόστε ένα περίγραμμα 10px με τιμές 'Dash' και 'Gap' και χωρίς συμπλήρωση. Χρησιμοποιήστε ένα χρώμα 'Γωνιακή κλίση' για το περίγραμμα που θα τονίσει το εφέ περιστροφής που θα δημιουργήσετε αργότερα.

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

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

Τέλος, συνδέστε ξανά τον τρίτο πίνακα γραφικών με τον αρχικό με ένα άλλο 'Auto' σκανδάλη. Εφαρμόστε μια 'Γραμμική' μετάβαση στο χρονοδιάγραμμα μεταξύ artboards 1 και 2. Ελέγξτε την κινούμενη εικόνα που μόλις δημιουργήσατε στο παράθυρο προεπισκόπησης.

Flickr Φόρτωση κινούμενων σχεδίων

Εντοπίστε έναν μπλε κύκλο και έναν ροζ κύκλο δίπλα-δίπλα. Εισαγάγετε τα στο Principle και εφαρμόστε ένα 'Auto' trigger για να δημιουργήσετε ένα νέο artboard.

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

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

Τύπος φόρτωσης

Δημιουργήστε ένα νέο έργο στο Principle και χρησιμοποιώντας το εργαλείο κειμένου, γράψτε «ΦΟΡΤΩΣΗ». Ευθυγραμμίστε το κείμενο προς τα αριστερά και κεντράρετε το κάθετα στον πίνακα γραφικών.

Εφαρμόστε μια 'Αυτόματη' σκανδάλη πέντε φορές στη σειρά. Έχετε την πέμπτη σκανδάλη από τον τελευταίο βρόχο artboard πίσω στον αρχικό πίνακα γραφικών.

βέλτιστες πρακτικές συντονισμού απόδοσης διακομιστή sql

Ξεκινώντας από τον αρχικό πίνακα γραφικών και μετακινηθείτε προς τα δεξιά, επεξεργαστείτε το κείμενο σε κάθε πίνακα γραφικών για να προσθέσετε μηδέν, ένα, δύο, τρία, δύο και μία τελείες, αντίστοιχα, δίπλα στο αρχικό κείμενο 'ΦΟΡΤΩΣΗ'. Η εξέλιξη των artboards θα πρέπει να μοιάζει με αυτό:

ΦΟΡΤΩΣΗ ΦΟΡΤΩΣΗΣ. ΦΟΡΤΩΣΗ .. ΦΟΡΤΩΣΗ ... ΦΟΡΤΩΣΗ .. ΦΟΡΤΩΣΗ.

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

Παλμικές κουκκίδες

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

Εφαρμόστε μια 'Αυτόματη' σκανδάλη τέσσερις φορές στη σειρά.

Στο δεύτερο πίνακα γραφικών, μειώστε τη δεύτερη κουκκίδα στα 30 εικονοστοιχεία.

Στον τρίτο πίνακα γραφικών, μειώστε τη δεύτερη κουκκίδα στα 0px και την πρώτη έως 30px.

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

Στον πέμπτο πίνακα γραφικών, κλιμακώστε την πρώτη κουκκίδα στα 30 εικονοστοιχεία και συνδέστε τον πίνακα εικόνων πίσω στον πρώτο πίνακα με ένα 'Αυτόματο' σκανδάλη.

Κυλιόμενες κουκίδες

Τοποθετήστε πέντε κουκκίδες στη διάταξη που θα βρείτε σε ένα εξάπλευρο καλούπι. Εισαγάγετε το artboard στο Principle και κεντράρετε το.

Εφαρμόστε μια 'Αυτόματη' σκανδάλη στον πίνακα γραφικών.

Στον νέο πίνακα γραφικών, περιστρέψτε την ομάδα κουκκίδων κατά 360 μοίρες.

Συνδέστε το δεύτερο artboard πίσω στο πρώτο με ένα 'Auto' σκανδάλη.

Παλλόμενος κύκλος

Ξεκινήστε με έναν κύκλο 50 εικονοστοιχείων στο κέντρο σε έναν κύκλο 150 εικονοστοιχείων που έχει περίγραμμα 5 εικονοστοιχείων αλλά χωρίς γέμισμα.

Εφαρμόστε μια 'Αυτόματη' σκανδάλη τρεις φορές στη σειρά.

Στον πρώτο πίνακα γραφικών, κλιμακώστε τον κύκλο γραμμής έως 50 εικονοστοιχεία και ο εσωτερικός κύκλος έως 10 εικονοστοιχεία.

Στον τρίτο πίνακα γραφικών, κλιμακώστε τον κύκλο γραμμής έως 200px και δώστε του 0% αδιαφάνεια. Κλιμάκωση του εσωτερικού κύκλου έως και 150 εικονοστοιχεία και δώστε του 50% αδιαφάνεια.

Στον τελευταίο πίνακα γραφικών, κλιμακώστε τον εσωτερικό κύκλο έως 200px και δώστε του 0% αδιαφάνεια. Μειώστε τον κύκλο γραμμής στα 50px και δώστε το 25% αδιαφάνεια.

Εφαρμόστε μια 'Αυτόματη' σκανδάλη στον τελευταίο πίνακα γραφικών. Μειώστε τον εσωτερικό κύκλο στα 10px με 50% αδιαφάνεια.

Συνδέστε τον τελευταίο πίνακα γραφικών με τον πρώτο με τη σκανδάλη 'Auto'.

Άλματα

Ευθυγραμμίστε τρεις τέλειους κύκλους ύψους 50px με απόσταση μεταξύ τους 50px.

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

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

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

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

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

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

Κλασικό φορτωτή

Εντοπίστε έναν κύκλο στο Sketch και δώστε του ένα γκρι περίγραμμα 20 εικονοστοιχείων χωρίς γέμισμα.

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

Εντοπίστε ένα τετράγωνο που επικαλύπτει το ένα τέταρτο του μπλε κύκλου. Μετακινήστε το ορθογώνιο στρώμα κάτω από το επίπεδο του κύκλου και εφαρμόστε το 'Mask' στο ορθογώνιο στρώμα.

Μεταβείτε στην αρχή και εισαγάγετε το έργο τέχνης Sketch με το κουμπί 'Εισαγωγή'.

Εφαρμόστε μια σκανδάλη 'Auto' στον πρώτο πίνακα γραφικών και περιστρέψτε τον μπλε κύκλο 360 μοίρες.

Εφαρμόστε μια δεύτερη σκανδάλη 'Auto' στο δεύτερο artboard. Μετονομάστε το δημιουργημένο στρώμα τρίτου κύκλου σε 'αντιγραφή' και συνδέστε το ξανά στον πρώτο πίνακα γραφικών με ένα 'Αυτόματο' σκανδάλη.

c corporation vs s corporation vs llc

συμπέρασμα

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

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

• • •