Σχεδιασμός κίνησης για το web, το iOS και το Android με Haiku

Ένας κοινός στόχος σχεδιασμού των σύγχρονων ψηφιακών προϊόντων είναι να εκπλήξουν και να ευχαριστήσουν τους χρήστες, και ο σχεδιασμός κίνησης μπορεί να είναι ένα ισχυρό εργαλείο στο οπλοστάσιό σας για να το κάνει αυτό. Η διασκέδαση των κινούμενων εικόνων φόρτωσης, η ευχάριστη ανατροφοδότηση και η χρήση της κίνησης για να οδηγήσετε το μάτι ανάμεσα στις μεταβάσεις είναι όλοι μεγάλοι τρόποι για να αυξήσετε την εμπειρία του χρήστη σας.
 
Ο Paul Stamatiou συνοψίζει τις σκέψεις μας για το πού οι σχεδιαστές πρέπει να ταιριάζουν σε αυτήν την εξίσωση πριν από τρία χρόνια:

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

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

Το Haiku είναι διαφορετικό

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

Γνωρίστε το Χαϊκού

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

Σκέψη στο χρόνο και στο χώρο

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

Εάν είστε νέοι στην κίνηση, ένας απλός τρόπος για να το κάνετε αυτό είναι στον πίνακα πλοήγησης.

Οι ιστορικοί δίσκοι διαδόθηκαν από τη Walt Disney Productions στη δεκαετία του '30 ως ένας τρόπος για τους animators και τους διευθυντές να μεταδώσουν μια ιστορία σαν μια ακολουθία. Στο σχεδιασμό αλληλεπίδρασης, οι storyboards μπορούν να μας βοηθήσουν να καθορίσουμε:

  • Ποια στοιχεία θα χρειαστούμε
  • Τι ιδιότητες θα χειριστούμε
  • Τι βασικά πλαίσια θα ξεκινήσουμε (περισσότερα για αυτά αργότερα)

Για παράδειγμα, αφήστε το storyboard μια σφαίρα αναπήδησης, την οποία θα χρησιμοποιήσουμε για να ξεκινήσετε στο Haiku:

Από αυτό το απλό storyboard, μπορούμε να καθορίσουμε:

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

Όταν το storyboarding, προσπαθήστε να μην κρεμασθείτε σε μικρές λεπτομέρειες - πολλές από τις μαγικές κινήσεις που συμβαίνουν όταν animate και iterating στα σχέδιά σας οπτικά. Απλά καταλάβετε αρκετά για να ξεκινήσετε.

Ξεκινώντας με το Haiku

Εργασία με το Σκίτσο

Στο Haiku, υπάρχουν 2 τρόποι για να εργαστείτε με το Sketch - μπορείτε είτε να εισαγάγετε ένα υπάρχον αρχείο Sketch είτε να δημιουργήσετε νέα σχέδια από την αρχή.

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

Το αρχείο Boetplate Sketch περιέχει περισσότερες οδηγίες - θα τις καλύψουμε αργότερα.

Μπορείτε επίσης να εισαγάγετε τα υπάρχοντα αρχεία Sketch & SVG:

Εδώ είναι ένα που έκανα νωρίτερα.

Το Haiku αναζητά πίνακες τέχνης και φέτες και τα εισάγει έξυπνα ως ξεχωριστά στοιχεία στη βιβλιοθήκη σας. Αφού σχεδιάσετε την μπάλα και τη σκιά σας, ο ευκολότερος τρόπος για να μετατρέψετε τα σχήματα σας σε φέτες είναι να τα χαρακτηρίσετε ως "Make Exportable" στο Sketch:

Μετά το πλήκτρο αποθήκευσης, οι φέτες Σκίτσο θα εμφανιστούν στη βιβλιοθήκη Haiku σας:

Στη συνέχεια, μπορείτε να μεταφέρετε στοιχεία από τη βιβλιοθήκη στη σκηνή:

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

Οι ιδιότητες μπορούν να επεξεργαστούν απευθείας στη χρονολογική σειρά ή με χειρισμό στοιχείων οπτικά στη σκηνή:

Η είσοδος στις ακριβείς ιδιότητες εξασφαλίζει ένα βρόχο 100% χωρίς ραφή της σφαίρας μας.

Τώρα που έχουν ρυθμιστεί τα βασικά μας πλαίσια, ας χαλαρώσουμε ομαλά μεταξύ τους χρησιμοποιώντας την ενσωματωμένη βιβλιοθήκη tween κάνοντας δεξί κλικ στο χρονοδιάγραμμα. Χρησιμοποιώ το Ease In → Cubic και Ease Out → Cubic αλλά θα πρότεινα να πειραματιστείτε με διαφορετικά tweens για να βρείτε το σωστό για το animation σας:

Τώρα φτάνουμε κάπου!

Χρησιμοποιώντας τις βασικές τεχνικές που μόλις χρησιμοποιήσαμε, είναι εύκολο να προσθέσετε περισσότερες λεπτομέρειες. Προσθέτοντας τα βασικά καρέ μερικώς μέσω της γραμμής χρόνου για να αποκαλύψετε τη σκιά όταν η μπάλα είναι κοντά:

Και σκουπίζοντας τη σφαίρα κάθετα για να μιμηθεί τη φυσική:

Η δημοσίευση δημιουργεί μια μοναδική διεύθυνση URL κοινής χρήσης που μπορείτε να χρησιμοποιήσετε για κοινή χρήση με άλλους:

Η σελίδα κοινής χρήσης σάς επιτρέπει να δείτε το haiku σας στον ιστό με οδηγίες ενσωμάτωσης:

Δείτε τη σελίδα κοινής χρήσης για αυτό το haiku

Τα πάντα που δημιουργήθηκαν στο Haiku είναι καθαρά JS / CSS έτοιμα να μπουν σε οποιαδήποτε εφαρμογή στο διαδίκτυο, με native renderers για iOS και Android powered by Lottie.

Αυτό είναι ένα περιτύλιγμα!

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

Μπορείτε επίσης να ενημερώνεστε για τις τελευταίες πληροφορίες σχετικά με:

  • Κελάδημα
  • Facebook
  • Ίνσταγκραμ
  • Χαλαρότητα