Κάνετε ένα πρωτότυπο Hi-Fidelity στο Atomic

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

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

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

Το πρωτότυπο στο Atomic είναι απίστευτα γρήγορο: μπορείτε να δημιουργήσετε όμορφα, προηγμένα mockups μέσα σε λίγα λεπτά, χωρίς να γράψετε κανένα κώδικα, να εγκαταστήσετε οποιοδήποτε λογισμικό ή να πιείτε πάρα πολύ καφέ. Θα είστε σε θέση να κάνετε προεπισκόπηση με το πρωτότυπο απευθείας στην κινητή συσκευή σας ή να την μοιραστείτε με έναν συμπαίκτη για ανατροφοδότηση. Έχουμε επίσης προρυθμίσει όλα τα περιουσιακά στοιχεία που χρειάζεστε για να ξεκινήσετε, ώστε να μην χρειαστεί να εισαγάγετε ένα πράγμα (αλλά μπορείτε να εισάγετε από σκίτσο και Photoshop CC πολύ).

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

01. Εγγραφή

Ας αρχίσουμε! Εάν δεν έχετε ήδη λογαριασμό, ανοίξτε το Google Chrome, επισκεφθείτε atomic.io και εγγραφείτε για δωρεάν δοκιμή. Αυτό διαρκεί 30 ημέρες, η οποία θα πρέπει να είναι αρκετός χρόνος για να εξερευνήσετε το Atomic και να κάνετε το πρώτο πρωτότυπο.

02. Έχετε μια ματιά γύρω

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

03. Νέο έργο

Δημιουργήστε ένα νέο έργο κάνοντας κλικ στο κουμπί "Νέο Έργο" και ονομάστε την εφαρμογή "Συνταγή". Το Pressing Enter θα ανοίξει το φάκελο του έργου. Εδώ μπορείτε να δείτε όλα τα σχέδια μέσα σε αυτό το συγκεκριμένο έργο. Καθώς πρόκειται για ένα νέο έργο, είναι άδειο. Ωστόσο, τα σχέδια θα γεμίσουν εδώ με την πάροδο του χρόνου καθώς τα δημιουργείτε.

04. Πιάσε ένα δείγμα

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

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

05. Εξερευνήστε τον επεξεργαστή

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

06. Ελέγξτε τα στοιχεία

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

07. Προεπισκόπηση

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

08. Ξεκινήστε

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

09. Τοποθετήστε τα περιουσιακά σας στοιχεία

Χωρίς στοιχεία που έχουν επιλεγεί, ρυθμίστε την πλήρωση του φόντου του καμβά σας στο # F6F7F8 (κοιτάξτε στον πίνακα δεξιάς ιδιοκτησίας). Τοποθετήστε την κεφαλίδα στον καμβά, πάνω και στο κέντρο.

Θα θελήσετε να αναδιατάξετε τα περιουσιακά στοιχεία, ώστε να τοποθετείται η πρώτη σας κατάσταση (όλες οι συνταγές) στο καμβά και τα περιουσιακά στοιχεία για τη δεύτερη κράτησή σας σύντομα να δημιουργηθούν (αποθηκευμένες συνταγές) είναι εκτός καμβά προς τα δεξιά. Εδώ είναι γιατί: Όταν το ίδιο αντικείμενο υπάρχει στη σελίδα 1 και στη σελίδα 2, η Atomic θα ζωντανέψει τυχόν αλλαγές μεταξύ τους αυτόματα.

10. Στοίβα τις κάρτες σας

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

11. Δημιουργήστε ένα δοχείο κύλισης

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

12. Τοποθετήστε τα στοιχεία σας

Για τη συγκεκριμένη μετάβαση, θέλουμε το πλέγμα "αποθηκευμένων συνταγών που έρχονται από το δεξί και το κείμενο" Προσθήκη περισσότερων "που έρχονται από κάτω. Για να βεβαιωθείτε ότι αυτό συμβαίνει, τοποθετήστε κάθε στοιχείο στην αντίστοιχη θέση εκκίνησης. Για παράδειγμα, οι «αποθηκευμένες συνταγές» πρέπει να τοποθετούνται στη σελίδα 1, εκτός από τον καμβά και προς τα δεξιά. Ενώ το κείμενο "Προσθήκη περισσότερων" πρέπει να τοποθετηθεί στη σελίδα 1, από τον καμβά και παρακάτω.

13. Πατήστε Μετάβαση

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

14. Επικάλυψη

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

15. Αποθηκευμένες συνταγές

Μεταβείτε στη νεοσυσταθείσα σελίδα σας για να δημιουργήσετε τη δεύτερη κατάσταση: Οι αποθηκευμένες συνταγές σας. Είναι σημαντικό εδώ να μην διαγράψετε οποιαδήποτε στοιχεία στη σελίδα, καθώς αυτό θα σπάσει τη μετάβαση. Επειδή έχουμε ψηφίσει τη σελίδα, η Atomic γνωρίζει ότι τα στοιχεία και στις δύο σελίδες είναι τα ίδια συνδεδεμένα στοιχεία. Ως εκ τούτου, ξέρει να ζωντανεύει τυχόν αλλαγές που κάνουμε στις ιδιότητες των στοιχείων στη σελίδα 2 (μέγεθος, θέση, περιστροφή, αδιαφάνεια, χρώμα και ούτω καθεξής).

16. Περισσότερες μεταβάσεις

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

17. Περαιτέρω κινούμενα σχέδια

Για την κεφαλίδα, θέλουμε το μπλε φόντο να γλιστρήσει σε όλη τη δεύτερη κατάσταση. Ενώ βρίσκεστε στη σελίδα 2, με το πλαίσιο των στρωμάτων ανοιχτό, να επεκτείνετε την ομάδα με τίτλο "Header" και επιλέξτε το μπλε ορθογώνιο. Στη συνέχεια, μετακινήστε αυτό στα δεξιά, οπότε τοποθετείται πίσω από τις «αποθηκευμένες συνταγές». Ομορφη!

18. Το διασκεδαστικό μέρος

Τώρα έρχεται το διασκεδαστικό μέρος της δημιουργίας της μετάβασης. Στη σελίδα 1 Θα σχεδιάζουμε ένα hotspot πάνω από το κείμενο "Αποθηκευμένες συνταγές" στην κεφαλίδα, καθώς αυτή είναι η περιοχή που θέλουμε ο χρήστης μας να αλληλεπιδράσει. Επιλέξτε το εργαλείο hotspot αλληλεπίδρασης από το πάνελ εργαλείων στο αριστερό αριστερά του επεξεργαστή (ή απλά πατήστε H). Μπορείτε να σχεδιάσετε hotspots χρησιμοποιώντας την ίδια μέθοδο που θα χρησιμοποιήσετε για να σχεδιάσετε ένα ορθογώνιο στον καμβά: απλά κάντε κλικ και σύρετε.

19. Ρυθμίσεις μετάβασης

Μόλις τραβήξετε το hotspot σας, με την επιλεγμένη ακόμα, θα εμφανιστεί μια ενότητα αλληλεπιδράσεων στον πίνακα Ιδιότητες προς τα δεξιά. Εδώ μπορείτε να ορίσετε τη χειρονομία σκανδάλης, τη σελίδα προορισμού, τον τύπο κίνησης και τη διάρκεια της μετάβασης. Για αυτή τη μετάβαση καθορίζει τις ακόλουθες ρυθμίσεις: χειρονομία: Κάντε κλικ ή πατήστε ? Παω σε: Σελίδα 2 ? MOTION: E ase in-out ? Διάρκεια: 250 .

20. Πίσω και πίσω

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

21. Προεπισκόπηση

Ήρθε η ώρα να κάνετε προεπισκόπηση τη μετάβασή σας! Μεταβείτε στη σελίδα 1 στον πίνακα σελίδων και κάντε κλικ στην επιλογή Προεπισκόπηση στο κάτω δεξί μέρος του επεξεργαστή (συντόμευση cmd + enter ). Κάντε κλικ ή πατήστε σε "Αποθηκευμένες συνταγές" στο πρωτότυπο για να μεταβείτε στη σελίδα 2. Στη συνέχεια, επιλέξτε "Όλα τα πρωτοτύπητα" Όλα τα συνταγές "που θα μεταφερθούν στη σελίδα 1.

22. Όλα γίνονται!

Τώρα είστε επαγγελματίας! Επιλέξτε "Επεξεργασία" για να επιστρέψετε στον επεξεργαστή, στη συνέχεια, εάν διαγράψετε τα περιουσιακά στοιχεία και δύο σελίδες αναφοράς (επιλέγοντας το μενού Hamburger της σελίδας και στη συνέχεια "Διαγραφή σελίδας"), το πρωτότυπο που μόλις κάνατε είναι έτοιμο να μοιραστεί. Μπορείτε εύκολα να δημιουργήσετε μια σύνδεση μετοχικού συνδέσμου πατώντας 'Κοινή χρήση' στο κάτω δεξί μέρος του επεξεργαστή.

Αυτό το άρθρο εμφανίστηκε αρχικά στο καθαρό περιοδικό Τεύχος 283; Αγοράστε το εδώ !