Χρησιμοποιήστε το Framer X για την κατασκευή διαδραστικών πρωτοτύπων

Ως σχεδιαστές, υπάρχει πάντα το ερώτημα τι εργαλεία πρωτοτύπων θα πρέπει να χρησιμοποιήσετε για το έργο σας. Υπάρχει πολλά λογισμικά εκεί έξω για εργασίες όπως wireframing (δείτε την κορυφή μας Εργαλεία wireframing και εξαιρετική Οικοδόμοι ιστοτόπων ), πρωτότυπες και οικοδομικές αλληλεπιδράσεις. Ωστόσο, πολύ λίγα εργαλεία είναι ικανά να χειριστούν όλα αυτά. Το Framer είναι ένα εργαλείο που έχει όλες αυτές τις λειτουργίες και επιταχύνει σημαντικά τη διαδικασία δημιουργίας μικροσκοπικών κινούμενων εικόνων και αλληλεπιδράσεων.

Την τελευταία επανάληψη, Framer x , τώρα χρησιμοποιεί αντιδρά και javascript αντί να χρησιμοποιήσετε το Coffeescript για την ανάπτυξη μικρο-αλληλεπιδράσεων και κινούμενων εικόνων. Αυτό βοηθά στην παραγωγή ταχύτερων χρόνων φόρτωσης και καλύτερες επιδόσεις. Επιπλέον, η χρήση αντιδράσεων εξαρτημάτων σημαίνει ότι οι χρήστες έχουν περισσότερα περιθώρια να προσθέσουν και να επεκταθούν συμπεριλαμβανομένων των παικτών ενσωμάτωσης των πολυμέσων, των δεδομένων σε πραγματικό χρόνο και τα γραφήματα μέσα σε πρωτότυπα.

Η δοκιμή είναι ένα βασικό μέρος της διαδικασίας κτιρίου πρωτότυπου και ενώ το FRAMER X είναι εξαιρετικό στη δημιουργία διαδραστικών πρωτοτύπων που χρειάζεται βοήθεια για να δούμε πόσο καλά είναι οι δημιουργίες της. Ελέγξτε μας Δοκιμή χρηστών Δημοσίευση για μερικά από τα καλύτερα εργαλεία για να συμπληρώσετε το Framer και να βοηθήσετε να δημιουργήσετε πρωτότυπα πραγματικού κόσμου και βεβαιωθείτε ότι χρησιμοποιείτε το καλύτερο web hosting Υπηρεσία για εσάς.

Πώς να δημιουργήσετε μια εφαρμογή με το Framer X

Για να εκτιμήσετε πλήρως τη δύναμη του Framer X Θα δημιουργήσουμε ένα έργο πραγματικής ζωής: μια απλή εφαρμογή συνταγών μαγειρέματος με κάποιο περιεχόμενο και μέσα (περιουσιακά στοιχεία που υποστηρίζονται σε αξιόπιστα αποθήκευση σύννεφων ). Το πρώτο πράγμα που πρέπει να οικοδομήσουμε είναι η αρχική σελίδα. Θα διατηρήσουμε τα πράγματα απλά με τα ακόλουθα στοιχεία:

• Τυπική γραμμή αναζήτησης για να βρείτε συνταγές
• Πρόσφατη δραστηριότητα για να εμφανιστεί οι τελευταίες συνταγές που βλέπετε
• Κάρτες συνταγών που δείχνουν πράγματα όπως οι πιο δημοφιλείς συνταγές
• Δημιουργία λεπτομερούς προβολής της συνταγής με επιλογές βίντεο και κοινής χρήσης

Για να ξεκινήσετε, πρέπει να δημιουργήσετε ένα νέο πλαίσιο (ένα τέχνης) κάνοντας κλικ στο εικονίδιο + στο αριστερό Navbar. Επιλέξτε οποιοδήποτε στυλ σχεδίου από μια λίστα τυποποιημένων προτύπων iPhone / Android στη δεξιά γραμμή. Τώρα είστε έτοιμοι να πάτε.

01. Δημιουργήστε μια γραμμή αναζήτησης

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

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

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

02. Δημιουργήστε μια στοίβα περιεχομένου

Για αυτό το πρόσφατο μπλοκ δραστηριότητας, προσθέστε πρώτα το κείμενο «πρόσφατη δραστηριότητα», η οποία είναι αρκετά απλή. Τώρα μπορούμε να χρησιμοποιήσουμε ένα νέο χαρακτηριστικό του Framer X που ονομάζεται Stacks. Αυτό μπορεί να γίνει κάνοντας κλικ στο εικονίδιο + και επιλέγοντας στοίβα S από το μενού. Αφού επιλέξετε τη στοίβα, σύρετε και ρίξτε μια περιοχή 600 x 300 στο πλαίσιο εργασίας για να δημιουργήσετε μια στοίβα. Αυτή η στοίβα θα εμφανιστεί ως μπλε.

Τώρα ας επιστρέψουμε στην ενότητα εξαρτημάτων και κάτω από το Android Kit, αναζητήστε το στοιχείο Card-5 και σύρετέ το στη στοίβα που μόλις δημιουργήσαμε. Διπλασιάζοντας αυτές τις κάρτες δύο φορές και βεβαιωθείτε ότι όλες οι τρεις κάρτες βρίσκονται στη στοίβα.

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

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

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

03. Δημιουργήστε μια κατακόρυφη στοίβα

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

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

04. Δημιουργία νέας σελίδας

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

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

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

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

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

05. Εισαγωγή αλληλεπιδράσεων

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

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

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

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

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

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

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

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

06. Προσθέστε ένα κουμπί αποθήκευσης

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

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

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

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

Το άρθρο αυτό δημοσιεύθηκε αρχικά στο θέμα 325 του Net, το περιοδικό Best-Selling στον κόσμο για τους σχεδιαστές και τους προγραμματιστές ιστοσελίδων. Αγοράστε τεύχος 325 ή Εγγραφείτε στο δίχτυ.

Ελάτε μαζί μας τον Απρίλιο του 2020 με τη σύνθεση του JavaScript Superstars στο GenerateJs - το συνέδριο που σας βοηθά να χτίσετε καλύτερα JavaScript. Κάντε κράτηση τώρα στο generateconf.com

Διαβάστε περισσότερα:

• Πώς να ξεχωρίσετε και να προσληφθεί ως σχεδιαστής UX
• Οι συμβουλές των 20 UX που πρέπει να γνωρίζετε
• 22 καλύτερα εργαλεία σχεδιασμού UI