Τέλεια πρωτότυπα και σχέδια χεριών με Marvel

Sep 14, 2025

πως να

A person sat in a cafe using Marvel on their laptop and displaying a finished prototype on their smartphone.

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

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

01. Δημιουργήστε το πρώτο σας έργο Marvel

Marvel's new design screen, indicating the locations of the buttons to create new designs. — Μόλις επιλέξετε το έργο σας, κάντε κλικ σε ένα από τα δύο κουμπιά για να ξεκινήσετε τη διαδικασία σχεδιασμού

Εγγραφείτε στο Marvel για να ξεκινήσετε, όπου απαιτείται μόνο το όνομα και η διεύθυνση ηλεκτρονικού ταχυδρομείου σας. Επιλέξτε ένα σχέδιο σχεδιασμού ή πρωτότυπο έργο. Ένα έργο πρωτοτύπου είναι όταν ανεβάζετε οθόνες που έχετε ήδη σχεδιάσει (συνήθως στο σκίτσο). Ένα σχέδιο σχεδίασης είναι όταν ξεκινάτε από το μηδέν και θέλετε να χρησιμοποιήσετε τα εργαλεία σχεδιασμού του Marvel για να δημιουργήσετε ένα mockup χαμηλής πιστότητας (αυτή είναι μια εκπληκτική επιλογή για ταχεία επανάληψη και brainstorming).

Επιλέξτε Design Project, στη συνέχεια, δώστε το όνομα και, στη συνέχεια, επιλέξτε iPhone X και κάντε κλικ στο κουμπί Δημιουργία έργου. Από εδώ (θα καλέσουμε αυτό το ταμπλό του έργου από εδώ έξω), κάντε κλικ στο κουμπί σχεδιασμού στην αριστερή πλευρά ή το κουμπί "Έναρξη σχεδίασης" στη μέση του παραθύρου.

02. Σχεδιασμός πρωτότυπα χαμηλής πιστότητας

Marvel's protoyping screen, showing how easy it is to add mocked up components, include smartphone camera screens. — Μπορείτε να χρησιμοποιήσετε και να προσαρμόσετε τα έτοιμα εξαρτήματα, όπως αυτή η οθόνη της κάμερας

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

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

Παρόλο που δεν μπορείτε να περιμένετε διάνυσμα, κάλυψη και άλλα σύνθετα εργαλεία σχεδιασμού, αυτή η διασύνδεση θα αισθάνεται, ωστόσο, να γνωρίζει αρκετά γνωστό εάν είστε σκίτσο, Adobe XD ή Figma χρήστης (στην πραγματικότητα, θα συζητήσουμε την εισαγωγή σχεδίων υψηλότερης πιστότητας από το σκίτσο σε λίγο). Αυτό που μπορείτε να περιμένετε είναι η μεγέθυνση, η ευθυγράμμιση, η ομαδοποίηση, τα βασικά οπτικά εργαλεία σχεδιασμού, τα χειριστήρια ποντικιών όπως η μεταφορά, η αλλαγή και η περιστροφή και μερικές εύχρηστες συντομεύσεις πληκτρολογίου.

03. Λάβετε σχόλια

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

Ανεξάρτητα από το ποιο κύριο ρόλο σας είναι σε μια ομάδα, θα πρέπει να είναι εξαιρετικά εύκολο να το πω: "Γεια σου, θα μπορούσε να είναι μια ιδέα;", και στη συνέχεια να αποδείξει ότι οπτικά. Θαυμάσιος ΚΡΟΤΟΣ Η εφαρμογή Mobile μειώνει το φράγμα της εισόδου ακόμα περισσότερο φέρνοντας αυτά τα απλοποιημένα εργαλεία σχεδιασμού σε κινητές συσκευές επειδή, ας το αντιμετωπίσουμε, οι ιδέες μπορούν να έρθουν σε εμάς στις πιο περίεργες στιγμές. Οι ιδέες που σχεδιάστηκαν σε χαρτί μπορούν να μετατραπούν σε μια διαδραστική οθόνη Marvel χρησιμοποιώντας τη φωτογραφική μηχανή της συσκευής. Ο σχεδιασμός πρέπει να είναι ένας εκδημοκρατισμένος, όπου ο καθένας μπορεί να έχει λόγο χωρίς να περιορίζεται στη χρήση σύνθετων εφαρμογών σχεδιασμού.

04. Ενσωματώστε το Marvel με σκίτσο

Μετά από παραγωγικά ιδέες χαμηλής πιστότητας με την ομάδα σας, θα θελήσετε να μαυρίσετε την πρώτη επανάληψη στην εφαρμογή του σχεδιασμού σας. Ενώ μπορείτε να μεταφορτώσετε εντελώς τις εξαγόμενες οθόνες PNG από οποιαδήποτε εφαρμογή σχεδιασμού, το σκίτσο είναι η συνιστώμενη εφαρμογή επειδή υπάρχει ένα ειδικό plugin σκίτσο που αυτοματοποιεί τη διαδικασία (και ακόμη και τις ανάγκες του σχεδιασμού, έτσι ώστε να μπορεί να επιθεωρηθεί από τους προγραμματιστές αργότερα). Η υποστήριξη του Photoshop για το σχεδιασμό Handoff θα έρθει αργότερα, ωστόσο η Adobe δεν εκδικάζει το Photoshop για το σχεδιασμό διεπαφής χρήστη πια, αφού δημιούργησε το Adobe XD.

Από το ταμπλό, κάντε κλικ στην επιλογή Ρυθμίσεις & GT; Ενσωμάτωση & GT; Plugin Sketch, στη συνέχεια κάντε λήψη του plugin. Μόλις εγκαταστήσετε, και το αρχείο σχεδίασης ανοίγματος, πατήστε το επιλεγμένο συγχρονισμό ή συγχρονίστε όλα τα κουμπιά στη γραμμή Marvel (αυτό εμφανίζεται πάνω από τη λίστα στρώσεων) για να αρχίσετε να επιλέγετε ένα πρόγραμμα Marvel για να συγχρονίσετε τις οθόνες σε.

05. Πρωτότυπες αλληλεπιδράσεις

Marvel screen showing how you can create interactions, for example placing your thumb on the thumbprint scanner to progress to the next screen. — Σύρετε τις περιφέρειες για να δημιουργήσετε hotspots για σύνδεση από μια οθόνη σε άλλη

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

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

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

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

Και φυσικά, μπορούμε να χρησιμοποιήσουμε αυτά τα εργαλεία πρωτοτύπων ακόμη και σε mockup χαμηλής πιστότητας. Στην πραγματικότητα, συνιστάται να κάνετε, όλη τη στιγμή που χρησιμοποιείτε τις λειτουργίες σχολιασμού για να συζητήσετε και να επαναλάβετε.

06. Παράδοση σχεδίων σε προγραμματιστές

A screen grab of Marvel showing how easy it is for developers to access detailed information from handed off designs, such as the positions and sizes of each element. — Το σχεδιασμό Handoff καθιστά εύκολο για το σχεδιασμό και τον προγραμματιστή να συνεργαστεί ο ένας με τον άλλον

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

Χτυπήστε το κουμπί αναπαραγωγής και, στη συνέχεια, κάντε κλικ στο κουμπί Μετάφραση στην κάτω αριστερή γωνία για να ανοίξετε τη διεπαφή χειρισμού σχεδιασμού. Από εδώ, οι προγραμματιστές θα μπορούν να κάνουν κλικ στα στοιχεία σχεδιασμού και να επιθεωρούν τα μεμονωμένα στυλ που τα καθιστούν αυτά που είναι, χρησιμοποιώντας την πλαϊνή μπάρα στη δεξιά πλευρά (όπως και η διεπαφή επιθεωρητή στο σκίτσο, το Figma ή το Adobe XD). Η μόνη διαφορά εδώ είναι ότι οι προγραμματιστές μπορούν να κάνουν κλικ στο κουμπί αντιγραφής για να αντιγράψετε τα στυλ ως κώδικα στο πρόχειρο.

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

Πάρτε περισσότερη γνώση σε επαναληπτικό πρωτότυπο

Generate NYC 2018 runs from the 25th-27th April 2018 — Η Marisa Morby δίνει τη συζήτησή της ανακαλύψτε πώς οι επαναλαμβανόμενες πρωτότυπες δοκιμές θα σας βοηθήσουν να δημιουργήσετε ένα νικηφόρο σχέδιο, κάθε φορά που δημιουργεί τη Νέα Υόρκη από τις 25-27 Απριλίου 2018

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

Ευτυχώς, στην ομιλία της στο Δημιουργία της Νέας Υόρκης από τις 25-27 Απριλίου 2018 , Marisa Morby, επικεφαλής της έρευνας στο Clearhead, θα σας δείξει έναν καλύτερο τρόπο να δημιουργήσετε και να επικυρώσετε νέα σχέδια που είναι ταχύτερα, ευκολότερα και λιγότερο δαπανηρά από την παραδοσιακή διαδικασία σχεδιασμού χρησιμοποιώντας επαναληπτικό πρωτότυπο και δοκιμή.

Δημιουργία της Νέας Υόρκης πραγματοποιείται από τις 25-27 Απριλίου 2018. Πάρτε το εισιτήριό σας τώρα .

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

10 κορυφαία εργαλεία πρωτοτύπων
Τα 18 καλύτερα εργαλεία wireframe
Πώς να αποφύγετε τις παγίδες πρωτοτύπων

Τέλεια πρωτότυπα και σχέδια χεριών με Marvel

01. Δημιουργήστε το πρώτο σας έργο Marvel

02. Σχεδιασμός πρωτότυπα χαμηλής πιστότητας

03. Λάβετε σχόλια

04. Ενσωματώστε το Marvel με σκίτσο

05. Πρωτότυπες αλληλεπιδράσεις

06. Παράδοση σχεδίων σε προγραμματιστές

Πάρτε περισσότερη γνώση σε επαναληπτικό πρωτότυπο

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

Ο βασικός οδηγός για την καταπολέμηση της τέχνης

Το μόνο που χρειάζεται να ξέρετε για τον κωδικό JavaScript Spliting

Σχεδιαστής συγγένειας: Πώς να χρησιμοποιήσετε το Pixel Persona

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

Βάλτε υγρό σε υγρό σε έλαια

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

Ακονίστε τις δεξιότητες σκίτσων σας

Βάλτε μια επική σκηνή της Νέας Υόρκης

Κατηγορίες