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

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

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

Βασικά στοιχεία Framer

Ας αρχίσουμε! Απλά πηγαίνετε στο framer.com και κατεβάστε μια δοκιμαστική έκδοση. Σας δίνουν δύο εβδομάδες από την πλήρως λειτουργική τους επίδειξη, και εμπιστευθείτε με, είναι αρκετός χρόνος για να μάθετε πολύ σχετικά με αυτό το πρωτότυπο λογισμικό.

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

(Σε αυτό το σεμινάριο Framer, θα επικεντρωθώ στη δημιουργία πρωτοτύπων απευθείας στο Framer.js. Θα πρέπει επίσης να γνωρίζετε ότι υπάρχουν και άλλοι τρόποι για να ξεκινήσετε το πρωτότυπο στο Framer. Για παράδειγμα, μπορείτε να εργαστείτε απευθείας με αρχεία Sketch. Θα καλύψω αυτήν τη ροή εργασίας στο άλλο άρθρο.)

Το ολοκαίνουργιο Framer - Λειτουργία σχεδίασης

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

Η νεότερη έκδοση του Framer έχει ένα εξαιρετικό νέο χαρακτηριστικό: λειτουργία σχεδίασης. Σας επιτρέπει να εργάζεστε σχεδόν με τον ίδιο τρόπο όπως στο Sketch ή το Figma. Μπορείτε να δημιουργήσετε διανυσματικά επίπεδα, να εισαγάγετε εικόνες ή να δημιουργήσετε και να στυλ στυλ επιπέδων κειμένου. Όλα αυτά γίνονται πολύ βολικά όταν θέλετε να κάνετε πρωτότυπο γρήγορα χωρίς εφαρμογές τρίτων.

Ας δημιουργήσουμε μια σχεδίαση τύπου εφαρμογής

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

Βήμα 1: Δημιουργήστε ένα απλό κουμπί και φόντο.

Για να ξεκινήσετε το σχέδιό σας, επιλέξτε την πρώτη καρτέλα - που είναι λειτουργία σχεδιασμού —Και προσθέστε ένα artboard, όπως στο Sketch. Σε αυτό το σεμινάριο, θα εργαζόμαστε σε ένα πρωτότυπο iPhone 7, οπότε έχω επιλέξει αυτήν την προεπιλογή ως το μέγεθος του artboard μου. Έχω προσθέσει επίσης ένα μπλε φόντο.

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

Βήμα 2: Προσθέστε μια κάρτα με μια εικόνα.

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

Βήμα 3: Προσθέστε έναν τίτλο εφαρμογής.

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

Βήμα 4: Πείτε στο Framer ποια επίπεδα είναι διαδραστικά.

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

Βήμα 5 (Μπόνους): Ορίστε τα παγκόσμια χρώματα.

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

Όταν ρυθμίζετε τα χρώματα σας, απλώς ονομάστε τα στον επεξεργαστή κώδικα και δώστε τιμές HEX, RGB ή RGBa μετά το κατάλληλο σύμβολο '='. Θυμηθείτε να διατηρήσετε όλες τις μεταβλητές στην κορυφή του κώδικα.

# variables ------------------------------- blue = '#005D99' green = '#3DBE8B' white = '#FFFFFF'

Βήμα 6 (Μπόνους): Προσθήκη σχετικής θέσης.

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

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

# This is how you can align layer position: x: Align.center(0) # align layer horizontaly x: Align.center(200) # align layer horizontaly with 200 offset x: Align.right(0) x: Align.left(0) y: Align.center(0) # align layer verticaly y: Align.top(0) y: Align.bottom(0) # You can use also some variables width: Screen.width # current device width height: Screen.height # current device height # As a reference you can also user layer names x: layerA.x # layerA horizontal position y: layerA.y # layerA vertical position width: layerA.width # layerA width height: layerA.height # layerA height # You can combine all of this into the simple math to calculate position or dimensions width: Screen.width / 2 - layerA.width

Τώρα είστε έτοιμοι — Ας ξεκινήσουμε το έργο μας

Έχουμε δημιουργήσει διαφορετικούς τύπους επιπέδων Framer. Τώρα η παιδική χαρά αλληλεπίδρασης είναι έτοιμη.

Τελικά! Το βαρετό μέρος έχει τελειώσει. Τώρα ήρθε η ώρα για κάποιο σχεδιασμό αλληλεπίδρασης.

Κατεβάστε ολόκληρο το πρωτότυπο εδώ .

1. Δημιουργία αλληλεπίδρασης σχολίων με κουμπιά

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

Βήμα 1: Δημιουργία του συμβάντος για αλληλεπίδραση.

Θα το κρατήσουμε απλό. Ας δημιουργήσουμε ένα σχόλιο κουμπιού όταν το πατήσετε, χρησιμοποιώντας την ακόλουθη εντολή:

layerA.onTap (event, layer) ->

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

Βήμα 2: Προσθήκη κινούμενης εικόνας στο συμβάν.

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

Ο Framer πρόσθεσε μερικές ακόμη γραμμές κώδικα. (Μην ανησυχείτε - μπορείτε ακόμα να επεξεργαστείτε την κινούμενη εικόνα σας με τον πίνακα κινούμενων σχεδίων.)

button.onTap (event, layer) -> button.animate borderRadius: 27 borderWidth: 10 borderColor: 'rgba(115,250,121,1)' options: time: 0.30 curve: Bezier.ease

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

Βήμα 3: Επαναφορά κινούμενων σχεδίων.

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

Αυτή τη φορά, ο κώδικας που προστέθηκε από τον Framer θα έχει την εξής μορφή:

button.onAnimationEnd (event, layer) ->

Έτσι, όταν το κινούμενο σχέδιο στο κουμπί το επίπεδο τελείωσε, μπορούμε να προσθέσουμε το επόμενο κινούμενο σχέδιο που θα επαναφέρει το κουμπί παράμετροι επιπέδου:

button.onAnimationEnd (event, layer) -> button.animate borderWidth: 100 borderColor: 'rgba(255,255,255,1)' borderRadius: 100 options: time: 0.3 curve: Bezier.ease

Αυτό είναι! Τώρα έχουμε λειτουργικά σχόλια μετά από ένα πάτημα στο κουμπί μας.

2. Δημιουργία διαφορετικών καταστάσεων για αλληλεπιδράσεις επιπέδου κάρτας

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

Βήμα 1: Προσθήκη και δημιουργία καταστάσεων για ένα επίπεδο κάρτας.

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

Δώστε προσοχή στην εσοχή του κωδικού. Θα πρέπει να ξεκινά από την πρώτη σειρά.

Έχω σχεδιάσει δύο διαφορετικές καταστάσεις για τη δική μου κάρτα στρώμα:

card.states.a = width: 248 height: 287 x: 63 y: 190 borderWidth: 10 borderColor: 'rgba(115,250,121,1)' card.states.b = x: 139 y: 529 width: 98 height: 98 borderRadius: 49 borderWidth: 1 borderColor: 'rgba(255,255,255,1)'

Βήμα 2: Προσθήκη συμβάντων.

Υπάρχει μόνο ένα ακόμη βήμα για να λειτουργήσει. Πρέπει να δημιουργήσουμε ένα συμβάν για την αλλαγή αυτών των καταστάσεων.

button.onTap -> card.stateCycle()

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

button.onTap -> card.stateSwitch('b')

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

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

card.animationOptions = curve: Spring time: 0.8

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

Επιτάχυνση της εργασίας σας στο Framer: Components

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

1. Το πρώτο στοιχείο: Κύλιση

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

Βήμα 1: Δημιουργία επιπέδων και ρύθμιση στοιχείων.

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

scroll = new ScrollComponent width: Screen.width height: Screen.height

Αυτός ο κωδικός δημιουργεί μια αόρατη περιοχή με το πλάτος και το ύψος της τρέχουσας συσκευής.

Βήμα 2: Πείτε στο Framer ποια επίπεδα θέλετε να κάνετε κύλιση.

Τίποτα δεν έχει συμβεί ακόμα. Πρέπει να πούμε στον Framer ποια επίπεδα πρέπει να μπορούν να μετακινηθούν. Για να το κάνουμε αυτό, προσθέτουμε το δικό μας λίστα επίπεδο στο στοιχείο κύλισης:

list.parent = scroll.content

Βήμα 3: Κλείδωμα κάθετης κύλισης.

Επιτρέπεται η κύλιση τώρα, αλλά συμβαίνει προς όλες τις κατευθύνσεις. Πρέπει να κλειδώσουμε την κύλιση σε κάθετο άξονα:

scroll.scrollHorizontal = false

Ουάου! Δημιουργήσατε μια κύλιση μέσα στην εφαρμογή σας με μόλις πέντε γραμμές απλού κώδικα.

2. Το στοιχείο σελίδας: Ολίσθηση οθόνης σε οθόνη

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

Βήμα 1: Ρύθμιση του στοιχείου.

Πρώτον, πρέπει να δημιουργήσουμε ένα «κουτί» στον επεξεργαστή κώδικα όπου θα συμβεί η μαγεία:

page = new PageComponent width: 315 height: Screen.height x: Align.center scrollVertical: false clip: false # the content outside the box won't be clipped

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

Βήμα 2: Δημιουργία επιπέδων

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

Αρχικά, πρέπει να κάνουμε το artboard δύο φορές μεγαλύτερο. Στον πίνακα ιδιοτήτων του artboard, βρείτε το πλάτος και πολλαπλασιάστε το με δύο (ή απλώς προσθέστε *2). Τοποθετήστε τις κάρτες το ένα δίπλα στο άλλο, ενεργοποιήστε τις με την μπλε κουκκίδα και ονομάστε τις σωστά: κάρτα1 και κάρτα2 .

Βήμα 3: Προσθήκη επιπέδων στο στοιχείο της σελίδας.

Στο τέλος του κώδικα στον επεξεργαστή κώδικα, πρέπει να προσθέσουμε:

card1.parent = page.content card2.parent = page.content

Αυτό σημαίνει ότι προσθέτουμε αυτά τα επίπεδα στο στοιχείο.

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

Τελικό Word

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

Εάν θέλετε να πάτε πιο βαθιά μέσα στο Framer, δοκιμάστε να διαβάσετε το Τεκμηρίωση Framer .

• • •

Περαιτέρω ανάγνωση στο ApeeScape Design Blog:

• eCommerce UX - Μια επισκόπηση των βέλτιστων πρακτικών (με το Infographic)
• Η σημασία του ανθρωποκεντρικού σχεδιασμού στο σχεδιασμό προϊόντων
• Τα καλύτερα χαρτοφυλάκια σχεδιαστών UX - Εμπνευσμένες μελέτες περιπτώσεων και παραδείγματα
• Ευρετικές αρχές για φορητές διεπαφές
• Προγνωστικός σχεδιασμός: Πώς να δημιουργήσετε μαγικές εμπειρίες χρηστών