Δημιουργία πρωτοτύπου για τον Ιστό με τον Framer
Σχεδιαστής είναι ένα πραγματικά ισχυρό εργαλείο που μπορεί να προκαλέσει οτιδήποτε μπορείτε να σκεφτείτε, αλλά αν ρίξετε μια ματιά στο Gallery του Framer θα παρατηρήσετε γρήγορα κάτι:
Από τα 54 παραδείγματα, 48 από αυτά είναι εφαρμογές, 4 από τα Apple Watch, 1 από το iPad και 1 από την Apple TV. Είναι ο Framer ακόμη και για τον «παραδοσιακό» web / desktop σχεδιασμό;
Απολύτως.
Στο IBM Design τα περισσότερα μου σχέδια γίνονται για εφαρμογές επιτραπέζιων επιτραπέζιων επιχειρήσεων. Οι περισσότεροι σχεδιαστές δουλεύω με τη χρήση Σκίτσο (συμπεριλαμβανομένου και εμού). Αυτά τα αρχεία Sketch στη συνέχεια πρωτοτυποποιούνται χρησιμοποιώντας ένα εργαλείο όπως το InVision ή αναδημιουργούνται και παράγονται σε κώδικα. Ως προπονητής σε μια ομάδα σχεδιασμού, έχω μια μοναδική θέση, όπου και τα δύο σχεδιάζω και κωδικοποιώ πρωτότυπα.
Αφού μάθαινα τα βασικά του Framer, αποφάσισα να το προσθέσω στη δουλειά μου και βελτίωσε πραγματικά τη διαδικασία σχεδιασμού μου. Το πιο ισχυρό κομμάτι είναι η δυνατότητα εισαγωγής ενός στατικού αρχείου Sketch στο Framer και η μετατροπή του σε ένα ρεαλιστικό, αλληλεπιδραστικό πρωτότυπο σε σχετικά σύντομο χρονικό διάστημα.
Με αυτό, δεν χρειάζεται να ξοδεύω πολύτιμο χρόνο στην αρχή της διαδικασίας αναδημιουργίας σχεδίων σε κώδικα. Μπορώ να πάρω ιδέες μπροστά στους ενδιαφερόμενους και τους χρήστες πολύ πιο γρήγορα. Μπορώ να σώσω την κωδικοποίηση για αργότερα όταν το έργο είναι πιο στερεοποιημένο.
Μετά τη χρήση του Framer για μερικούς μήνες εδώ είναι μερικά πράγματα που έχω μάθει:
Σχεδιάστε και εμβαθύνετε τα πρωτότυπά σας
Πριν ξεκινήσω ένα έργο, αποφασίζω μερικά πράγματα:
Τι προσπαθώ να ολοκληρώσω;
Είτε το πρωτότυπο είναι για δοκιμές χρηστών είτε για να πάρει μια ιδέα εννοιολογείται, ποιο είναι το ελάχιστο ποσό εργασίας που απαιτείται για να πάρω την ιδέα μου πέρα από ή για να αποκτήσω γνώσεις από τις δοκιμές; Δεν είμαι μόνο τεμπέλης?), Αυτό βοηθά να αποφασίσει τις απαραίτητες αλληλεπιδράσεις, κινούμενα σχέδια και οθόνες που χρειάζονται.
Όσο περισσότερο χρόνο ξοδεύετε στο σχεδιασμό σας τόσο περισσότερο συνδέεστε. Όσο πιο συνημμένο είναι, τόσο λιγότερο πιθανό είναι να κάνετε τις απαραίτητες αλλαγές.
Ας χρησιμοποιήσουμε πρώτα το πρωτότυπο ως παράδειγμα.
Δούλεψα σε ένα νέο έργο και ήθελα να διερευνήσω ποια θα ήταν η εμφάνιση μιας κάρτας βασισμένης σε "κινούμενα σχέδια" μεταξύ των κρατών. Σχεδίασα τη βασική ιδέα που ήθελα να κάνω και την χρησιμοποίησα ως αφετηρία μου.
Αν εσύ Ρίξε μια ματιά στο τελικό πρωτότυπο, μόνο η πρώτη κάρτα είναι clickable σε κάθε βήμα. Δεν υπάρχει κανένας τρόπος να επιστρέψουμε, δεν υπάρχει κατάσταση hover, το περιεχόμενο στην τελευταία οθόνη δεν είναι πλήρες και δεν είναι σχεδόν τέλειο pixel. Κανένα από αυτά δεν ήταν απαραίτητο για να βγάλω την ιδέα μου, γι 'αυτό δεν περνούσα τον χρόνο που τους συμπεριλάμβανα. Ο Framer μπορεί να κάνει σχεδόν οτιδήποτε, αλλά αυτό δεν σημαίνει ότι πρέπει να προσπαθήσετε να κάνετε τα πάντα στο πρωτότυπο σας.
Δημιουργήστε ροές UI χρησιμοποιώντας την εκπληκτική λειτουργική μονάδα ViewController του Andreas
Μπορείτε να χρησιμοποιήσετε το ViewController Προσθέστε σκίτσο για να δημιουργήσετε ροές UI ακριβώς στο Sketch. Γρήγορα μετατρέψτε τα σχέδιά σας σε πρωτότυπα με δυνατότητα κλικ χωρίς να χρειάζεται να γράψετε κώδικα.
Αυτό είναι μεγάλο για την παρουσίαση της εργασίας σας στους ενδιαφερόμενους και είναι πραγματικά πολύ απλό να το κάνετε. Αντί να περπατάτε μέσω ενός αρχείου Sketch με δώδεκα πίνακες τέχνης ή ενός .pdf, μπορείτε να παρουσιάσετε ένα διαδραστικό πρωτότυπο ή να μοιραστείτε τη φιλοξενούμενη διεύθυνση URL του έργου Framer.
Ανάλογα με αυτό που προσπαθώ να ολοκληρώσω, ίσως καταλήξω να γράφω κάποιο κώδικα για πράγματα όπως εφέ κίνησης, κινούμενα σχέδια και εισροές κειμένου για μια πρόσθετη πινελιά ρεαλισμού και αλληλεπίδρασης. Και πάλι, ως σχεδιαστής, αποφασίστε τι είναι απαραίτητο για να αποκτήσετε την ιδέα σας και να εφαρμόσετε κατάλληλα.
Ολοκλήρωση αγοράς Ανδρέας 'Δημιουργήστε ροές UI χρησιμοποιώντας το άρθρο Sketch και Framer για να μάθετε περισσότερα σχετικά με το plugin.
Μικροσυσσωμάτωση
Νομίζω ότι υπάρχουν μερικοί λόγοι για τους οποίους τα κινητά πρωτότυπα είναι πολύ δημοφιλή με τον Framer, ένας από τους οποίους είναι μικροσυστοιχίες που φαίνονται πολύ πιο συνηθισμένοι στο κινητό. Αλλά δεν πρέπει να είναι έτσι! Νομίζω ότι οι σχεδιαστές του διαδικτύου μπορεί να είναι καλύτεροι στο να δουλεύουν περισσότερο η δουλειά μας και ο Framer είναι πολύ καλός σε αυτό.
Αυτό είναι απλώς ένα απλό παράδειγμα μιας γρήγορης αλληλεπίδρασης που έκανα χρησιμοποιώντας ένα αρχείο σκίτσου που είχε ήδη δημιουργήσει ένας σχεδιαστής στην ομάδα μου. Η διερεύνηση τέτοιων αλληλεπιδράσεων διαρκεί λίγα λεπτά.
Σίγουρα, αλλά γιατί όχι μόνο κωδικός;
Ως υπεύθυνος ανάπτυξης, πολλά από τα έργα μου τελικά θα καταλήξουν σε κωδικοποιημένο πρωτότυπο. Στη συνέχεια, χρησιμοποιώ αυτό το πρωτότυπο ως βάση για να γράψω τον κωδικό μπροστινού τέλους στο προϊόν, που εργάζεται κατά μήκος της μηχανικής πλευράς. Γιατί λοιπόν όχι μόνο να κωδικοποιήσετε από την αρχή;
Όπως ανέφερα νωρίτερα, ταχύτητα. Μπορώ γρήγορα να σαρώνω ιδέες που είτε εγώ είτε κάποιος άλλος σχεδιαστής έχουν ήδη κάνει με την εισαγωγή τους από Sketch σε Framer. Είναι υπέροχο για το αρχικό στάδιο της διαδικασίας σχεδιασμού, όπου εξερευνάτε ιδέες και εφαρμόζετε γρήγορα τα σχόλιά σας. Μπορώ να κινηθώ πολύ γρήγορα στον κώδικα, αλλά ο Framer το παίρνει στο επόμενο επίπεδο.
Ένας άλλος λόγος είναι η ελευθερία. Το απλό γεγονός ότι όλος ο κωδικός μου που γράφτηκε στον Framer θα πεταχτεί είναι πραγματικά καλός. Μου επιτρέπει να δοκιμάζω πράγματα που διαφορετικά δεν θα ήμουν λίγο πιο χαλαρός με τον κώδικα μου. Μπορώ να περάσω 15 λεπτά για να διερευνήσω μια ιδέα και στη συνέχεια να σκουπίσω χωρίς καμία τύψη.
Μερικές συμβουλές και κόλπα
Εσείς (ή ο σχεδιαστής με τον οποίο συνεργάζεστε) πιθανόν να χρειαστεί να ρυθμίσετε τα αρχεία Sketch λίγο διαφορετικά.
- Ομαδοποιήστε τα επίπεδα σας. Τα επίπεδα που δεν ανήκουν σε μια ομάδα αγνοούνται
- Αποφύγετε τη χρήση διαστημάτων στα ονόματα ομάδων σας
- Τα κρυμμένα στρώματα στο Sketch εξακολουθούν να εισάγονται, αλλά η ορατότητα τους θα είναι ψευδής.
- Δημιουργήστε απλά, μοναδικά ονόματα για τους πίνακες τέχνης σας
- Ένα μείον (-) στο τέλος του artboard σας θα το αποκλείσει από την εισαγωγή του στο Framer
Συμπληρώστε τυχόν στρώματα στο Sketch που θα παραμείνουν στατικά. Αυτό θα βελτιώσει το χρόνο φόρτωσης του έργου σας, το οποίο είναι ιδιαίτερα καλό όταν δημιουργείτε ένα πιο εξελιγμένο πρωτότυπο. Μπορείτε να το κάνετε προσθέτοντας έναν αστερίσκο (*) στο τέλος του στρώματος στο Sketch.
Αξίζει να αφιερώσετε λίγο χρόνο με τους σχεδιαστές στην ομάδα σας για να δείτε πώς να ρυθμίσετε τα αρχεία Sketch ώστε να ταιριάζουν καλύτερα στη ροή εργασίας και τι λειτουργεί καλύτερα για την ομάδα.
Όταν εισάγετε ένα αρχείο σκίτσου στο Framer, θα δείτε κάτι παρόμοιο:
# Import file "design" sketch = Framer.Importer.load("imported/design@1x")Αντικαταστήστε το σκίτσο με $, και μπορείτε να χρησιμοποιήσετε τώρα το $ για να αναφερθείτε στα στρώματα Σκίτσων σας, εξοικονομώντας τον εαυτό σας από το γράψιμο της λέξης sketch εκατοντάδες φορές:
$ = Framer.Importer.load("imported/design@1x")Χρησιμοποιήστε το απόσπασμα 'Κανονικό δρομέα' για έναν κανονικό δείκτη του ποντικιού:
document.body.style.cursor = "auto"and then scale them down, so they're extra crisp. Εισάγω τα σχέδια μου στο @ 2Χ και στη συνέχεια να τα κλιμακώ προς τα κάτω, γι 'αυτό είναι πιο τραγανή. Σημειώστε ότι αυτό δεν φαίνεται να συμβαδίζει με τη λειτουργική μονάδα ViewController που αναφέρθηκε παραπάνω.
Framer.Device.contentScale = .5Το Sketch και ο Framer χρησιμοποιούν διαφορετικούς προεπιλεγμένους πίνακες / συσκευές για τον ιστό. Το σκίτσο χρησιμοποιεί 1440 × 1024 ενώ ο Framer χρησιμοποιεί 1440 × 900. Επιλέγω 1440 × 900. Μην νομίζετε ότι έχετε περιορίσει σε 900 pixels για το ύψος όμως, μπορείτε εύκολα να δημιουργήσετε σελίδες με δυνατότητα κύλισης στο Framer.
[- Αυτό το άρθρο ήταν αρχικά δημοσιεύτηκε στο Medium , αναδημοσιεύθηκε με την άδεια του συντάκτη -]