AR / VR Πρωτότυπο:

Πάρτε σχέδια από χαρτί σε γυαλιά

Μέρος II

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

Intro

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

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

Χρησιμοποιήστε την καλή υγεία και ελπίζω να συνεχίσετε να βελτιώνετε αυτό το έργο με όλες τις πληροφορίες και την εμπειρία που σας ενδιαφέρει να μοιραστείτε!

ΣΦΑΙΡΙΚΗ ΕΙΚΟΝΑ

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

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

Lo-Fi

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

Είναι δύσκολο να απεικονίσετε ιδέες στα αρχικά στάδια του AR / VR καθώς πολλά από τα οικεία εργαλεία ιδεών, συμπεριλαμβανομένων των οθονών ηλεκτρονικών υπολογιστών, είναι επίπεδη. Ξεκινήστε σε χαρτί, αλλά μην παραμείνετε σε αυτό το 2D χώρο για μεγάλο χρονικό διάστημα.

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

Ενεργοποιήστε το! Αν τα πράγματα μετακινούνται στον φυσικό χώρο, μετακινήστε το χαρτί, τα πρωτότυπα γύρω στο φυσικό χώρο. Ταινία στους τοίχους ή κρατήστε και μετακινήστε καθώς επαναφέρετε μια ροή χρήστη. Δοκιμή χρήστη Lo-Fi σχεδιάζει με αυτόν τον τρόπο για να αποκτήσει γνώσεις. Πειραματιστείτε, επειδή μπορεί να χρειαστούν πολλαπλές μέθοδοι για να κατανοήσετε τις δυνατότητες των χρηστών. Γίνετε δημιουργικοί!

Το AfterNow δημοσίευσε ένα υπέροχο παράδειγμα διαδικασίας για τη χρήση αυτής της μεθόδου πρωτοτύπου.

Αυτό είναι ίσως το πιο γνωστό μέρος της διαδικασίας σχεδιασμού. Αγαπώ ακόμα τον τρόπο με τον οποίο το Σκίτσο σας επιτρέπει να δημιουργείτε πίνακες τέχνης, να δημιουργείτε την αρχιτεκτονική ενός προϊόντος και να προτείνετε ένα βασικό εργαλείο δημιουργίας UI.

  • Διάταξη διάταξης των οθονών ροής χρηστών στο σκίτσο. Αυτό είναι LO-FI, ΟΧΙ πλήρεις ροές χρηστών! Αποκλείστε τα σχήματα για να προσδιορίσετε το μέγεθος, την απόσταση κλπ. Και δοκιμή δοκιμής δοκιμής!
  • Συνεχίστε να εμφανίζετε στον παίκτη για προβολή, (δείτε την επόμενη ενότητα όπου αυτό μπαίνει στο παιχνίδι)
  • Σχέδιο στο VR plugin [Artboard είναι 2: 1 Αναλογία, 3600px x 1800px]
  • Proto.io [Container / Artboard είναι αναλογία 2: 1, 4096px x 2048px]
  • Κατανοήστε την αρχιτεκτονική: Πώς υπάρχει αυτός ο πίνακας διάστασης ως μια πλήρη ροή μέσω ενός περιεχομένου. Πώς μπορείτε να πλοηγηθείτε από αυτό σε αυτό;
  • Καθορίστε το άνετο εύρος κίνησης. Πόσους βαθμούς μπορεί το περιεχόμενο να κάθονται πάνω / κάτω / δίπλα στον χρήστη πριν να μετακινηθούν για να δουν ή να αλληλεπιδράσουν; Μια μεγάλη αναφορά που έχω βρει είναι το έργο του Mike Alger που αναγνωρίζει άνετες σειρές
  • Δομή UI για χώρο AR / VR. Εξετάστε το πώς οι αποφάσεις σχεδιασμού διαφέρουν ή σχετίζονται με υπάρχουσες, 2D διεπαφές. Χρησιμοποιείτε υπάρχουσες συμβάσεις επειδή είναι κοινή πρακτική στο 2D UI, ή μήπως επιμένουν στην πραγματικότητα για τρισδιάστατο χώρο; Για παράδειγμα, αν οι χρήστες χρησιμοποιούνται σε ένα κουμπί πίσω ή ένα κουμπί εξόδου που βρίσκεται στην πάνω αριστερή πλευρά της οθόνης, γιατί είναι αυτό; Εάν σχετίζεται με το πλαίσιο της συσκευής, πείτε την απόσταση του αντίχειρά σας σε ένα iphone και είναι μια αναμενόμενη τοποθέτηση, αυτό έχει νόημα. Αλλά συμβαίνει αυτό για το UI σας AR / VR;
  • Όνομα περιεχομένου κατάλληλα! Ονομάζοντας Artboards (και δημιουργώντας σύμβολα καθώς φτάνετε στο hi-fi) θα σας βοηθήσει πολύ αργότερα! Φαίνεται κουραστικό, αλλά εξετάστε την εναλλακτική λύση της πληκτρολόγησης σε ένα όνομα κάθε φορά που εξάγετε τον artboard.

Σύνδεσμος: https://www.sketchapp.com/

Πρόσθετα εργαλεία: Το Adobe After Effects είναι αξιόπιστα χρήσιμο για να δημιουργηθεί η κίνηση από νωρίς, ειδικά επειδή τα περισσότερα εργαλεία δημιουργίας πρωτοτύπων δεν έχουν την επιλογή για κινούμενα σχέδια μετάβασης σε πρωτότυπα. Μπορείτε επίσης να τραβήξετε μικρά κλιπ σε 3D video players, αλλά να θυμάστε ότι θα τεντώσουν ανάλογα με τον τύπο του παίκτη, το μέγεθος και την τοποθέτηση.

Αποκτήστε 3D! Όσο το δυνατόν νωρίτερα, είναι ανεκτίμητο να βλέπετε το έργο σας σε 3D. Παρόλο που η κύρια ροή εργασίας μου βρίσκεται στο Sketch, τραβώνω αυτές τις σελίδες στα γυαλιά μας ή σε έναν θεατή όσο πιο συχνά γίνεται.

Αυτό το plugin λειτουργεί καλά και για τα σχέδια και τα αρχεία σκίτσων. Μπορείτε να σχεδιάσετε ιδέες σε ένα πρότυπο 3D για να τοποθετήσετε την εργασία σας σε προοπτική για το VR! Χρησιμοποιήστε αυτόν τον πόρο για να κάνετε λήψη των προτύπων σχεδίασης 3D. Στη συνέχεια, κατεβάστε το Sketch to VR Plugin και ακολουθήστε το εκπαιδευτικό τους πρόγραμμα για να ρυθμίσετε τον θεατή. Αυτός είναι ένας μεγάλος πρώτος, γρήγορος τρόπος για να βρεθεί περιεχόμενο σε ένα 3D χώρο.

Τεχνική βοήθεια: Χρησιμοποιώ ακόμα τερματικό για να ανοίξω το localhost κάθε φορά που το χρησιμοποιώ, η επιλογή για το SimpleHTTPServer δεν εμφανίστηκε ποτέ στο μενού δεξί κλικ. Αντίθετα, αν ανοίξετε τον τερματικό και πληκτρολογήστε: python -m SimpleHTTPServer. Θα ξεκινήσει να εκτελείται το localhost στο πρόγραμμα περιήγησης, όπου μπορείτε να ανοίξετε ένα νέο παράθυρο, πληκτρολογήστε: localhost: 8000 και να εντοπίσετε τη θέση του αρχείου. Από εδώ, πρέπει να ανανεώνετε το πρόγραμμα περιήγησης κάθε φορά που αλλάζετε εικόνες.

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

Σύνδεσμος: https://blog.prototypr.io/sketch-plugin-sketch-to-vr-4e23ced47e6

Πρόσθετα εργαλεία: Χρησιμοποιώ επίσης το GoPro VR Player ως γρήγορη μεταφορά και απόθεση για προβολή περιεχομένου σε 3D χώρο. Μπορεί επίσης να εισαγάγει βίντεο τα οποία μπορούν να προσομοιώσουν την κίνηση της διεπαφής και τις μεταβάσεις. Δημιουργήστε βίντεο AE στο μέγεθος του πίνακα καλλιτεχνικών έργων 2: 1, το περιεχόμενο στο κέντρο είναι 600px και ένα υπόβαθρο εικόνας 360 πλήρωσης (χρησιμοποιώ μαύρο αφού είναι διαφανές για AR). Ζωντανέψτε το βίντεο για να εμφανίσετε κίνηση και περιεχόμενο μέσα. Αυτά τα Φόντα για VR Wraps είναι χρήσιμα!

Το σκίτσο έχει μια σειρά από πολύ χρήσιμα πρόσθετα σκίτσων:

  • Γεννήτρια Περιεχομένου: Σας παρέχει κείμενο γεμίσματος, εικόνες, ονόματα και αριθμούς κ.λπ.
  • Proto.io export: Απλοποιεί τη διαδικασία μεταφοράς στο εργαλείο Proto.io
  • Μετονομασία επιπέδων: Εξαιρετική για προσθήκη πρότασης / προσάρτησης, ώστε οι πίνακες τέχνης να μην αντικαθίστανται ακούσια μεταξύ τους στις Παρουσιάσεις Google ή Zeplin
  • Συγχρονισμός σε διαφάνειες: Εύκολος τρόπος για να δημιουργήσετε διαφάνειες ροής σελίδας
  • Zeplin: Σκίτσο εξαγωγές κατευθείαν στο Zeplin για τους προγραμματιστές να τραβήξει τις διαστάσεις!

Lo-Fi σε Mid-Fi

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

Το Proto.io είναι ένα εξαιρετικό εργαλείο που πρόσφατα βρήκα για το πρωτότυπο VR. Με παρόμοιο τρόπο με το πρόσθετο Sketch to VR, μπορείτε εύκολα να τραβήξετε στοιχεία για να δείτε μια πρωτότυπη ενημέρωση σε πραγματικό χρόνο καθώς δουλεύετε!

Απλά δημιουργήστε έναν λογαριασμό και κάντε λήψη της εφαρμογής για το τηλέφωνό σας. Το Blog του Component του VR του Proto.io περιγράφει το εργαλείο και έχει δύο μαθήματα για να σας καθοδηγήσει στη ρύθμιση και τη χρήση. Βρήκα αυτό το σεμινάριο ιδιαίτερα χρήσιμο για την περίπτωση χρήσης μου.

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

Από εδώ, το μόνο που χρειάζεστε είναι το σετ μικροφώνου-ακουστικού, το χαρτόνι, το Google Daydream κ.λπ. και είστε έτοιμοι να πάτε!

Σύνδεσμος: https://proto.io/

https://support.proto.io/hc/en-us/articles/115002611692

Πρόσθετα εργαλεία: Το InstaVR είναι εξίσου εξαιρετικό εργαλείο για τη δημιουργία πρωτοτύπων με παρόμοιο τρόπο. Δεν έχω ακόμα να βρεθώ πολύ μακριά σε αυτό το εργαλείο, ωστόσο από αυτό που έχω βιώσει φαίνεται διαισθητικό και μπορεί να ενσωματώσει το βίντεο.

Το InVision είναι επίσης ένα μεγάλο εργαλείο ροής πρωτοτύπου χρήστη. Παρόλο που είναι ένα εργαλείο 2D πρωτοτύπου, εξακολουθώ να βρίσκω τον πιο γρήγορο τρόπο να παρουσιάζω αρχιτεκτονική σε "επίπεδο" περιεχόμενο, όπως μενού ή modals. Μπορεί να χρειαστεί να διατυπώσετε περιεχόμενο στην ομάδα σας που έχει αρκετές κρατικές αλλαγές, αυτό μπορεί να είναι ένα γρήγορο εργαλείο και να καθιερώσει τη χωρική τοποθέτηση και το μέγεθος αλλού.

Το Sketchbox είναι ένα εξαιρετικό εργαλείο storyboarding για να τραβήξετε γρήγορα το περιεχόμενο, να το μετακινήσετε στο VR και να δημιουργήσετε κλικ μέσω σταδίων μιας ιστορίας. Βρήκα αυτό το εργαλείο ιδιαίτερα χρήσιμο για να αποκτήσετε μια γενική αίσθηση του μεγέθους και της απόστασης του περιεχομένου και να δημιουργήσετε 3D "slideshows" ενός χρήστη που εκτελεί ένα συγκεκριμένο σύνολο ενεργειών.

Το Sketchbox εισάγει εικόνες (εξαγωγή κατευθείαν από το Sketch), 360 εικόνες και τρισδιάστατα μοντέλα και αν και δεν χρησιμοποιώ αυτό το χαρακτηριστικό, αξίζει να σημειωθεί ότι το Sketchbox εξάγει επίσης ως αρχεία FBX για να τραβήξει απευθείας στον κινητήρα παιχνιδιού της επιλογής σας!

Σύνδεσμος: https://www.sketchbox3d.com/

Πρόσθετα εργαλεία: Το Artefact κυκλοφόρησε ένα εργαλείο που ονομάζεται VR Storyboard, το οποίο σας επιτρέπει να δημιουργήσετε πρωτότυπο σε 3D χώρο με παρόμοιο τρόπο. Προσωπικά δεν το δοκιμάσω, αλλά φαίνεται να είναι ένα διαισθητικό και ισχυρό εργαλείο δημιουργίας πρωτοτύπων.

Εργαλεία δημιουργίας 3D: Και το MakeVR και το Σκίτσο βαρύτητας είναι ισχυρά εργαλεία δημιουργίας για την κατασκευή 3D περιεχομένου μέσα στο VR.

Mid-Fi σε Hi-Fi

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

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

Το Halo εισάγει εικόνες, Gifs, βίντεο και τρισδιάστατα μοντέλα και προσθέτει λειτουργικότητα σε δράσεις όπως ενεργοποίηση συμβάντων σε κλικ / hover κλπ. Επιπλέον, τα νέα χαρακτηριστικά τους προσθέτουν εργαλεία συνεργασίας για να σχολιάζουν και να δημιουργούν κάρτες για την ανάθεση καθηκόντων σε κοινά έργα. Το Halo ενσωματώνει επίσης το Google Blocks and Fonts για να προσθέσει το 3D περιεχόμενο και τις γραμματοσειρές στο έργο σας μέσα από το εργαλείο.

Σύνδεσμος: https://www.halolabs.io/

Hi-Fi

Στο στάδιο της υψηλής πιστότητας, ο σχεδιασμός σας είναι εκλεπτυσμένος και είναι έτοιμος για λεπτομερή δόμηση και έλεγχο των χρηστών!

Η ενότητα είναι η δύσκολη εκκίνηση. Ωστόσο, είναι επίσης το πιο ισχυρό εργαλείο για τη δημιουργία τελικών σχεδίων. Η Unity επίσης κυκλοφόρησε τον EditorVR, για πρωτότυπο απευθείας σε ένα ακουστικό VR!

Δημιουργήστε ένα σύστημα πρωτοτύπων: Χρησιμοποιώντας την ενότητα, δημιουργήστε ένα βασικό περιβάλλον με τη σωστή απόσταση, το μέγεθος FOV κλπ., Ώστε να μπορείτε να ανταλλάξετε περιεχόμενο γρήγορα και εύκολα. Δεδομένου ότι η άνεση επιτρέπει στην Unity, μπορείτε να συνεχίσετε να δημιουργείτε αυτό το πρωτότυπο ώστε να είναι τόσο ισχυρό όσο επιθυμείτε, με αλληλεπιδράσεις και πλήρεις ροές χρηστών για δοκιμές χρηστών και επιδείξεις.

Υπάρχουν πολλά μαθήματα για να ξεκινήσετε με τη διάταξη και τις διαφορετικές ροές εργασίας. Έχω μερικούς που με βοήθησαν πολύ, συμπεριλαμβανομένης της εξαιρετικής σειράς μαθημάτων της Unity, αυτό το μάθημα Udemy για να ξεκινήσω να μαθαίνεις το C # μέσω παιχνιδιών οικοδόμησης και τα μίνι μαθήματα στο VR Dev School. Υπάρχουν πολλοί εκεί έξω που προτείνω να εξερευνήσετε, καθώς ο καθένας έχει κάποια διαφορετική εστίαση, αλλά η λήψη ενός μαθήματος είναι ένας διασκεδαστικός τρόπος να εξοικειωθείτε με το περιβάλλον!

Δεν έχω ακόμη εξερευνήσει τον Unity's EditorVR, αλλά μοιάζει με ένα παιχνίδι αλλαγής για πρωτότυπα. Το εργαλείο παίρνει το Unity και το μετακινεί από την επιφάνεια εργασίας απευθείας στο ακουστικό VR για να απολαύσετε την εργασία σας καθώς δουλεύετε!

Σύνδεσμος: https://unity3d.com/

Πρόσθετα εργαλεία: Το Unreal Engine είναι επίσης μια ισχυρή μηχανή παιχνιδιών ικανή να δημιουργήσει αστρική εργασία. Το Unreal έχει επίσης "Blueprints", μια οπτική ροή ιδιοτήτων για να αναπτύξει συμπεριφορά και αλληλεπιδράσεις χωρίς κώδικα! (Ξέρω ότι η Ενότητα έχει επίσης ένα plugin για αυτό). Δεν έχω χρησιμοποιήσει το Unreal ακόμα, γι 'αυτό αξίζει να τα ελέγξετε και τα δύο και να δείτε ποια έργα για σας.

Το φόντο μου

Λίγο για μένα, έχω προχωρήσει μέσα από καλές τέχνες, βιομηχανικό σχεδιασμό, σχεδιασμό εμπειρίας χρήστη και τώρα εργάζομαι ως σχεδιαστής UX / UI στην Augmented Reality στο Osterhout Design Group. Αποφοίτησα από το Πανεπιστήμιο Carnegie Mellon στο Βιομηχανικό Σχέδιο, ως ο πρώτος σχεδιαστής που ολοκλήρωσε έναν ανήλικο στις σπουδές Μηχανικών. Από την αποφοίτησή μου, έχω εξερευνήσει το UX και το βιομηχανικό σχεδιασμό που κυμαίνονται από μεγάλες εταιρείες, όπως η Samsung και η IBM, σε εργασίες ελεύθερων επαγγελματιών στον τομέα του ιατρικού σχεδιασμού και της εκπαίδευσης.

Μου αρέσει να δημιουργώ και να έχω μια ακόρεστη περιέργεια. Ω, και έχω afro!

Σας ευχαριστώ!