01 από 03
Η τελευταία έκδοση του Atomic.io περιλαμβάνει μετακινούμενα κοντέινερ
Λίγους μήνες πίσω έδειξα πώς το atomic.io μπορεί να χρησιμοποιηθεί για την πρότυπη κίνηση . Ένα από τα βασικά σημεία που έκανα στο κομμάτι ήταν "να δείξω κίνηση" αντί να το αφήσω στη φαντασία του πελάτη ή της ομάδας είναι σημαντικό. Στην πραγματικότητα, αυτό έχει γίνει τόσο σημαντικό ώστε μια ολόκληρη νέα κατηγορία εργαλείων UX / UI να εμφανίζεται στη σκηνή. Περιλαμβάνουν - Apple Keynote, Edge Animate της Adobe, After Effects και UXPin , για να αναφέρουμε μερικά. Το νέο παιδί στο μπλοκ είναι το Atomic.io το οποίο ήταν σε open beta όταν έγραψα για το προϊόν.
Το τακτοποιημένο πράγμα για τα ανοικτά betas είναι ότι δίνουν στον κατασκευαστή του λογισμικού τη δυνατότητα να συλλέξει ανατροφοδότηση χρήστη σχετικά με το σετ χαρακτηριστικών, συμπεριλαμβανομένων ελλειπουσών χαρακτηριστικών, και στη συνέχεια να τα προσθέσει στην εφαρμογή και να τα δοκιμάσει πριν από την εμπορική κυκλοφορία. Στην περίπτωση του ατομικού, ένα χαρακτηριστικό που πραγματικά χάνεται ήταν η δυνατότητα να μετακινηθείτε περιεχόμενο κάθετα ή οριζόντια. Αυτό θα μπορούσε να περιλαμβάνει πράγματα όπως κάρτες, προβολές διαφανειών ή σχεδόν τίποτα που ένας χρήστης θα σύρει ή θα σύρεψε μέσα στα όρια μιας διασύνδεσης μιας εφαρμογής ή ενός ιστότοπου.
Αυτό πρέπει να ήταν ένα θέμα που ζήτησαν πολλοί χρήστες, επειδή τα μετακινούμενα εμπορευματοκιβώτια μόλις εισήχθησαν στην εφαρμογή αυτό το μήνα και, πρέπει να ομολογήσω, η δημιουργία περιεχομένου με δυνατότητα κύλισης στο πρωτότυπο είναι νεκρό απλό να ενεργοποιηθεί.
Εδώ είναι πώς ...
02 του 03
Πώς να δημιουργήσετε κατακόρυφη περιήγηση στο Atomic
Θα χρειαστεί να εγγραφείτε πρώτα για δωρεάν δοκιμή 30 ημερών και, στο τέλος αυτής της περιόδου, θα σας παρουσιαστούν τρία σχέδια τιμολόγησης.
Το πρώτο πράγμα που πρέπει να ξέρετε είναι ότι όλη η εργασία που θα κάνετε είναι στο πρόγραμμα περιήγησης και η εφαρμογή προορίζεται αυστηρά στο Google Chrome. Μόλις συνδεθείτε, θα μεταφερθείτε στη σελίδα Έργα . Για να ανοίξετε την εφαρμογή, κάντε κλικ στο κουμπί Νέο έργο .
Όταν εμφανιστεί η διεπαφή θα δείτε ότι υπάρχει ένας περιορισμένος αριθμός εργαλείων, η δυνατότητα να προσθέσετε σελίδες και στρώματα στις σελίδες, το artboard και, πάνω δεξιά, έναν πίνακα ευαίσθητων περιβάλλοντος.
Σε αυτό το παράδειγμα, ξεκίνησα με μια προεπιλογή iPhone 5 που είναι 320 x 568. Ανοίξτε το φάκελο που περιέχει τις εικόνες που θέλετε να μετακινηθείτε και τις σύρετε στον καμβά. Αυτά προστέθηκαν αυτόματα στο έργο και μπορείτε να δείτε ότι βρίσκονται σε ξεχωριστά επίπεδα αν κάνετε κλικ στην καρτέλα "Επίπεδα" . Στη συνέχεια, επέλεξα το εργαλείο βέλους (Επιλογή), επιλέξατε μια εικόνα και τη σύρετε σε μια νέα θέση για να προσθέσετε κάποιο διάστημα μεταξύ τους. Στη συνέχεια, επέλεξα όλες τις εικόνες και έκανα κλικ στο κουμπί Κατανομή κάθετης στη γραμμή εργαλείων. Αυτό κατανέμεται ομοιόμορφα τις εικόνες.
Το επόμενο βήμα είναι να επιλέξετε το σύνολο του περιεχομένου που θέλετε να μετακινηθείτε και να κάνετε κλικ στο κουμπί Container ή να επιλέξετε Create Scroll Container από το κουμπί Group . Αφού δημιουργηθεί το δοχείο - θα το δείτε στον πίνακα "Επίπεδα" - κάντε κλικ στο δοχείο και σύρετε τη κάτω λαβή προς τα πάνω στο κάτω μέρος του καμβά . Κάντε κλικ στο κουμπί Προεπισκόπηση στο κάτω μέρος του πίνακα Ιδιότητες και αυτό θα ξεκινήσει ένα παράθυρο προγράμματος περιήγησης. Χρησιμοποιήστε τον τροχό κύλισης του ποντικιού για να μετακινηθείτε στο περιεχόμενο. Για να επιστρέψετε στο έργο σας, κάντε κλικ στο κουμπί Επεξεργασία στην κάτω δεξιά γωνία του παραθύρου του προγράμματος περιήγησης.
03 του 03
Πώς να δημιουργήσετε περιεχόμενο οριζόντιας κύλισης σε ατομικό
Η οριζόντια κύλιση είναι εξίσου εύκολη.
Σε αυτή την περίπτωση, έσυρε μια σειρά εικόνων πάνω στον καμβά και τους έβαλε το ένα πάνω στο άλλο. Με τις επιλεγμένες εικόνες, στη συνέχεια, κάντε κλικ στο κουμπί Top Align για να βεβαιωθείτε ότι όλες είναι ευθυγραμμισμένες μεταξύ τους.
Κατόπιν έβαλα κάτω το πλήκτρο Shift και επέλεξα κάθε στρώμα στον πίνακα "Επίπεδα". Με τις εικόνες που επιλέξατε, έκανα κλικ στο κουμπί Container και , στην καρτέλα Ιδιότητες, επιλέξατε Οριζόντια στην περιοχή "Συμπεριφορές".
Στη συνέχεια, εξέτασα το έργο σε ένα παράθυρο προγράμματος περιήγησης κάνοντας κλικ στο κουμπί Προεπισκόπηση.
Παρόλο που έχω δείξει πώς να δημιουργήσετε μεμονωμένες εκδοχές οριζόντιας και οριζόντιας κύλισης, εφ 'όσον βάζετε το περιστρεφόμενο περιεχόμενο σε ένα δοχείο, μπορείτε να έχετε αυτά τα δοχεία σε ξεχωριστές περιοχές της οθόνης. Για παράδειγμα, μια ιστοσελίδα θα μπορούσε να μετατοπίζει κάθετα περιεχόμενο σε ένα πλευρικό μενού και οριζόντια κύλιση περιεχομένου σε μια προβολή διαφανειών στην ίδια σελίδα. Στην πραγματικότητα, ένα δοχείο μπορεί να έχει τόσο κατακόρυφη όσο και οριζόντια κύλιση για στοιχεία όπως ένας επιλογέας εικόνων ο οποίος έχει μια ντουζίνα περίπου μικρογραφίες.
Για να μάθετε περισσότερα σχετικά με αυτό το χαρακτηριστικό στο atomic.io δείτε:
- Η ανακοίνωση του Blog
- Μετακίνηση σεμιναρίου για τα κοντέινερ
- Κάλυψη με χρήση κοντέινερ
- Αντιμετώπιση προβλημάτων κύλισης κύλισης