Πώς να πρωτότυπη εφαρμογή κινητής τηλεφωνίας με στούντιο Origami

Sep 14, 2025

πως να

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

10 κορυφαία εργαλεία πρωτοτύπων

Υπάρχουν πολλές προσεγγίσεις που μπορείτε να πάρετε στο πρωτότυπο και πολλά εργαλεία εκεί έξω για να βοηθήσετε. Ένα από τα νεότερα στο μπλοκ είναι Στούντιο origami , που αναπτύχθηκε από το Facebook και διαθέτει δωρεάν για MacOs.

Το Studio Origami, το οποίο ξεκίνησε την πραγματικότητα τη ζωή του ως plugin για τον συνθέτη Quartz (μια οπτική γλώσσα προγραμματισμού στο περιβάλλον ανάπτυξης XCode του MacOS) πριν γίνει ένα αυτόνομο εργαλείο, έχει κερδίσει μεγάλη προσοχή το τελευταίο έτος.

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

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

01. Ένα νέο πρωτότυπο

Start by creating a new iPhone 8 prototype — Ξεκινήστε δημιουργώντας ένα νέο πρωτότυπο iPhone 8

Θα δημιουργήσουμε ένα πρωτότυπο για μια εφαρμογή για κινητά, η οποία θα μας επιτρέψει να σβήσουμε μέσα από φωτογραφίες των γατών και «σαν» μερικά από αυτά. Μόλις εγκαταστήσουμε το Studio Origami, θα δημιουργήσουμε ένα νέο πρωτότυπο iPhone 8 από την οθόνη Splash.

02. Προσθήκη στρώσεων

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

03. Δημιουργία αλληλεπίδρασης

For interactions you'll need to create a patch — Για τις αλληλεπιδράσεις θα χρειαστεί να δημιουργήσετε ένα έμπλαστρο

Πρέπει να κάνουμε το κουμπί καρδιάς να ανταποκριθεί στις αλληλεπιδράσεις των χρηστών. Θα παρατηρήσετε ότι στο παράθυρο προεπισκόπησης, ο δρομέας αλλάζει να αντιπροσωπεύει την αφή σε μια κινητή συσκευή. Για να απαντήσετε σε αυτό, πρέπει να δημιουργήσουμε ένα «έμπλαστρο», το οποίο είναι ουσιαστικά μια λειτουργία στην origami που λαμβάνει εισροές και παράγει αποτελέσματα. Κάντε διπλό κλικ στην κενή γκρίζα περιοχή για να φέρετε μια λίστα νέων επιθέσεων και αναζητήστε "αλληλεπίδραση". Τοποθετήστε το έμπλαστρο σας και θα πρέπει να εμφανίζεται στην οθόνη.

04. Σύνδεση αλληλεπιδράσεων σε στρώματα

Change the patch properties so that it only responds when you click in the right place — Αλλάξτε τις ιδιότητες patch έτσι ώστε να ανταποκρίνεται μόνο όταν κάνετε κλικ στο σωστό μέρος

Αυτή τη στιγμή, το έμπλαστρο σας θα απαντήσει σε επαφή οπουδήποτε στο πρωτότυπο. Δοκιμάστε το κάνοντας κλικ και θα δείτε τις ιδιότητες "κάτω" και 'Tap' αλλάζουν σε πραγματικό χρόνο. Εάν επιλέξετε την ιδιότητα του 'Layer' στο έμπλαστρο, μπορείτε να το συνδέσετε με το στρώμα που περιέχει την εικόνα της καρδιάς και τώρα θα ανταποκρίνεται μόνο σε κλικ σε αυτή τη συγκεκριμένη περιοχή.

05. Animations

A pop animation will give users a bit of visual feedback — Μια ποπ animation θα δώσει στους χρήστες ένα κομμάτι οπτικής ανατροφοδότησης

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

06. Μεταβάσεις

You can change the extent to which objects change size when they're clicked — Μπορείτε να αλλάξετε την έκταση στην οποία τα αντικείμενα αλλάζουν το μέγεθος όταν κάνουν κλικ

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

07. Διακόπτες

Use switch patches to toggle objects between different states — Χρησιμοποιήστε το Switch Patches για εναλλαγή αντικειμένων μεταξύ διαφορετικών κρατών

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

08. πιο περίπλοκη συμπεριφορά

By experimenting with patches you can add more complex behaviour to your prototype — Με τον πειραματισμό με τα μπαλώματα μπορείτε να προσθέσετε πιο περίπλοκη συμπεριφορά στο πρωτότυπο σας

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

09. Carousel

It's time to bring on all the cats — Ήρθε η ώρα να φέρετε όλες τις γάτες

Για να ολοκληρώσουμε το πρωτότυπο, ας προσθέσουμε ένα Carousel εικόνας με τις γάτες που θέλουμε να επιτρέψουμε στους χρήστες να «όπως». Για να το κάνετε αυτό, πρέπει πρώτα να προσθέσουμε μια ομάδα στρωμάτων. Κάθε εικόνα θα είναι ένα ξεχωριστό στρώμα, με όλο και περισσότερο αντιστάθμιση X συντονίζει έτσι ώστε να καθίσουν ουσιαστικά πλευρικά σε μια σειρά με μόνο μία ορατή στην οθόνη σε οποιοδήποτε στοιχείο.

10. Περιστρέψτε αριστερά και δεξιά

Follow these steps to add a classic swiping action to your carousel — Ακολουθήστε αυτά τα βήματα για να προσθέσετε μια κλασική διαφήμιση με το καρουσέλ

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

11. Επόμενα βήματα

Now you've learned the basics you can add more advanced features — Τώρα έχετε μάθει τα βασικά στοιχεία που μπορείτε να προσθέσετε πιο προηγμένα χαρακτηριστικά

Αυτό είναι. Έχετε δημιουργήσει μια πολύ βασική εφαρμογή. Μπορείτε επίσης να χρησιμοποιήσετε το Origami Studio's Studio's Colord In Button για να το τοποθετήσετε σε φόντο συσκευής, η οποία μπορεί να σας βοηθήσει να δώσετε ένα επαγγελματικό φινίρισμα. Τώρα που είστε εξοικειωμένοι με τα βασικά της χρήσης patches, μπορείτε να αρχίσετε να δημιουργείτε πιο προηγμένες συμπεριφορές. Υπάρχουν πολλοί οδηγοί στην ιστοσελίδα του Studio Origami, η οποία εξηγεί πώς να εφαρμόζει λαϊκές λειτουργίες που συνήθως παρατηρούνται στις εφαρμογές.

Αυτό το άρθρο δημοσιεύθηκε αρχικά στην έκδοση 270 του δημιουργικού σχεδιασμού Web Design Magazine Web. Αγοράστε τεύχος 270 εδώ ή Εγγραφείτε στο Web Designer εδώ .

Σχετικά Άρθρα:

Τάσεις που θα διαμορφώσουν το σχεδιασμό εφαρμογών το 2018
3 κορυφαίοι τρόποι για να δημιουργήσετε ένα πρωτότυπο ιστοτόπου
Το μόνο που χρειάζεται να ξέρετε για mockups, wireframes και πρωτότυπα

Πώς να πρωτότυπη εφαρμογή κινητής τηλεφωνίας με στούντιο Origami

01. Ένα νέο πρωτότυπο

02. Προσθήκη στρώσεων

03. Δημιουργία αλληλεπίδρασης

04. Σύνδεση αλληλεπιδράσεων σε στρώματα

05. Animations

06. Μεταβάσεις

07. Διακόπτες

08. πιο περίπλοκη συμπεριφορά

09. Carousel

10. Περιστρέψτε αριστερά και δεξιά

11. Επόμενα βήματα

πως να - Τα πιο δημοφιλή άρθρα

Σχεδιάστε τη δύναμη της αντίθεσης στο άρθρο

Δημιουργήστε ένα παλιό σχολικό εφέ Anaglyph

Ξεκινήστε με το Redux Thunk

Πώς να δημιουργήσετε μια ψηφιακή ελαιογραφία χρησιμοποιώντας την περιοχή

Δημιουργήστε έναν ζωντανό ψηφιακό ανθρώπινο

10 συμβουλές για τη μοντελοποίηση της σκληρής επιφάνειας

Δημιουργήστε μια επίδραση splash στην realflow

Δημιουργία σύνθετων διατάξεων με postcss-flexbox

Κατηγορίες