Prototipos AR / VR:

Lleva diseños del papel a los vasos

Parte II

Para obtener más información sobre el proceso inicial y la configuración, consulte mi artículo anterior, Parte I.

Introducción

La creación de prototipos en realidad aumentada es un proceso de adivinanzas y verificación en este momento. Puede ser frustrante encontrar las herramientas adecuadas y luego aprender a usarlas. Sin embargo, después de una considerable prueba de juego en una variedad de herramientas, encontré mi proceso actual de creación de prototipos. A continuación se muestra la lista y el proceso de herramientas que utilizo para aportar ideas a los Smartglasses de mi ODG.

Tenga en cuenta que este proceso satisface específicamente mi trabajo como diseñador en ODG para Realidad Aumentada. Hay muchas herramientas que no he agregado a esta lista porque sus fortalezas no se adaptaron a mi trabajo. Sin embargo, a medida que las herramientas continúan desarrollándose y mis proyectos cambian, no tengo dudas de que mi proceso madurará en consecuencia. Independientemente de su caso de uso específico, considero que muchas de estas herramientas son universalmente útiles. También sugerí herramientas adicionales que pueden ser útiles para casos de uso alternativos en cada etapa de creación de prototipos.

Úselo con buena salud y espero continuar refinando este trabajo con todas y cada una de las ideas y experiencias que quiera compartir.

Visión general

Comencemos con una explicación de alto nivel de creación de prototipos para AR. A continuación se muestra el cuadro completo que resume cada herramienta que discutiré. Es importante tener en cuenta que, aunque el formato de este artículo es lineal, el proceso de diseño con estas herramientas no lo es. Utilizo algunas herramientas, como Sketch, en todo momento, mientras que otras son específicamente para etapas de ideación iniciales o finales.

Además, también menciono esta lista en la parte I, pero esta es una lista de algunos trabajos excelentes que he descubierto a lo largo de mi viaje, que van desde herramientas de aprendizaje hasta proyectos inspiradores. Recomienda navegar a través de.

Lo-Fi

La etapa de baja fidelidad saca ideas de tu cabeza y las lleva al mundo como un prototipo rápido para probar conceptos amplios y visualizar ideas.

Visualizar ideas en las primeras etapas de AR / VR es un desafío, ya que muchas de las herramientas de ideación familiares, incluidas las pantallas de nuestras computadoras, son planas. Comience en papel, pero no permanezca en este espacio 2D por mucho tiempo.

Anote la ideación general y los conceptos que desea visualizar más adelante. ¡El papel y el bolígrafo son siempre la captura rápida de ideas! A lo largo de mi proceso, garabatearé mini bocetos de ideas o diseños para pensar, volver a dibujar, y luego ver qué sucede cuando lo recrea en el espacio 3D.

¡Actuarlo! Si las cosas se mueven en el espacio físico, mueva papel, prototipos en el espacio físico. Pegue con cinta adhesiva a las paredes, o sostenga y mueva mientras recrea un flujo de usuario. El usuario prueba los diseños de Lo-Fi de esta manera para obtener información. Experimente, ya que puede tomar varios métodos para comprender las conclusiones del usuario. ¡Se creativo!

AfterNow publicó un maravilloso ejemplo de proceso de utilización de este método de creación de prototipos.

Esta es probablemente la parte más familiar del proceso de diseño. Todavía me encanta la forma en que Sketch le permite diseñar mesas de trabajo, crear la arquitectura de un producto y recomendarlo como una herramienta de creación de interfaz de usuario esencial.

  • Progresión de diseño de pantallas de flujo de usuario en boceto. ¡Esto es LO-FI, NO flujos de usuarios completos! ¡Bloquee en formas para identificar el tamaño, el espaciado, etc. y pruebe la prueba!
  • Continúe apareciendo en el reproductor para ver, (vea la siguiente sección donde esto entra en juego)
  • Sketch to VR plugin [Artboard es 2: 1 Ratio, 3600px x 1800px]
  • Proto.io [Contenedor / Mesa de trabajo es 2: 1 Ratio, 4096px x 2048px]
  • Comprender la arquitectura: cómo existe ese guión gráfico como un flujo completo a través de una pieza de contenido. ¿Cómo navegas de esto a aquello?
  • Defina el rango cómodo de movimiento. ¿Cuántos grados puede contener el contenido arriba / abajo / al lado del usuario antes de que tengan que moverse para ver o interactuar? Una gran referencia que he encontrado es el trabajo de Mike Alger identificando rangos cómodos
  • Estructura de interfaz de usuario para espacio AR / VR. Considere cómo las decisiones de diseño difieren o se relacionan con las interfaces 2D existentes. ¿Está utilizando convenciones existentes porque son una práctica común en la interfaz de usuario 2D o persisten realmente para el espacio 3D? Por ejemplo, si los usuarios están acostumbrados a que un botón de retroceso o un botón de salida esté en la parte superior izquierda de la pantalla, ¿por qué es eso? Si se relaciona con el contexto del dispositivo, digamos el alcance de su pulgar en un iPhone y es una ubicación esperada, esto tiene sentido. Pero, ¿es este el caso de su interfaz de usuario AR / VR?
  • ¡Nombra el contenido apropiadamente! Nombrar mesas de trabajo (y crear símbolos a medida que llegue a alta fidelidad) lo ayudará inmensamente más adelante. Parece tedioso, pero considere la alternativa de escribir un nombre cada vez que exporta la mesa de trabajo.

Enlace: https://www.sketchapp.com/

Herramientas adicionales: Adobe After Effects es de gran ayuda para crear movimiento desde el principio, especialmente porque la mayoría de las herramientas de creación de prototipos no tienen una opción para las animaciones de transición en los prototipos. También puede insertar clips cortos en reproductores de video 3D, pero tenga en cuenta que se estirarán según el tipo, tamaño y ubicación del reproductor.

¡Obtén 3D! Tan pronto como sea posible, es invaluable ver su trabajo en 3D. Aunque mi flujo de trabajo principal reside en Sketch, pongo esas páginas en nuestros anteojos o en un visor con la mayor frecuencia posible.

Este complemento funciona bien tanto para dibujos como para archivos de boceto. ¡Puede esbozar ideas en una plantilla 3D para colocar su trabajo en perspectiva para la realidad virtual! Use este recurso para descargar las plantillas de dibujo 3D. Luego, descargue el complemento Sketch to VR y siga su tutorial para configurar el visor. Esta es una excelente primera forma rápida de llevar contenido a un espacio 3D.

Asistencia técnica: todavía uso terminal para abrir localhost cada vez que lo uso, la opción para SimpleHTTPServer nunca apareció en mi menú de clic derecho. En cambio, si abre la terminal y escribe: python -m SimpleHTTPServer. Comenzará a ejecutar localhost en su navegador, donde puede abrir una nueva ventana, escriba: localhost: 8000 y busque la ubicación del archivo. A partir de aquí, solo necesita actualizar el navegador cada vez que cambie las imágenes.

En este paso, también pongo cosas en nuestros lentes para probar cómo se traducen los diseños de la computadora a AR. Esto es crucial para validar las decisiones desde los colores y el tamaño del texto hasta la ubicación del contenido. Es útil saber para qué plataforma está diseñando y considerar sus diferencias.

Enlace: https://blog.prototypr.io/sketch-plugin-sketch-to-vr-4e23ced47e6

Herramientas adicionales: también utilizo el reproductor GoPro VR como un rápido arrastrar y soltar para ver el contenido en el espacio 3D. También puede importar videos que pueden simular el movimiento de la interfaz y las transiciones. Realice videos AE en el tamaño de la mesa de trabajo de 2: 1, con contenido centrado para est. 600 px y un fondo de imagen de relleno 360 (uso negro ya que es transparente para AR). Anima videos para mostrar movimiento y contenido dentro. ¡Estos fondos para VR Wraps son útiles!

Sketch tiene una serie de complementos de sketch muy útiles:

  • Generador de contenido: le brinda texto de relleno, imágenes, nombres y números, etc.
  • Exportación de Proto.io: simplifica el proceso de transferencia a la herramienta Proto.io
  • Cambiar el nombre de las capas: ideal para agregar prefijos / sufijos para que las mesas de trabajo no se sobrescriban involuntariamente en las diapositivas de Google o Zeplin
  • Sincronizar con diapositivas: forma fácil de hacer diapositivas de flujos de página
  • Zeplin: Sketch exporta directamente a Zeplin para que los desarrolladores tomen dimensiones.

Lo-Fi a Mid-Fi

Ahora es el momento de obtener una información más detallada. Estas herramientas ayudan a refinar la arquitectura, el contenido y los flujos de usuarios. Los diseños de fidelidad media comienzan a explorar el color, el tipo y el estilo. Además, uso estas herramientas para realizar pruebas de usuario.

Proto.io es una excelente herramienta que encontré recientemente para la creación de prototipos de realidad virtual. De manera similar al plugin Sketch to VR, ¡puede extraer fácilmente activos para ver una actualización de prototipo en tiempo real mientras trabaja!

Simplemente cree una cuenta y descargue la aplicación para su teléfono. El Blog de componentes VR de Proto.io describe la herramienta y tiene dos tutoriales para guiarlo a través de la configuración y el uso. Encontré este tutorial particularmente útil para mi caso de uso.

Consejos rápidos, asegúrese de que su contenido en Sketch tenga un buen nombre para facilitar la transferencia. Recomiendo tener un archivo de boceto copiado separado para las piezas de creación de prototipos que sus archivos de diseño, ya que agrupará y exportará las cosas de manera muy diferente.

A partir de aquí, todo lo que necesita son auriculares, cartón, Google Daydream, etc., ¡y listo!

Enlace: https://proto.io/

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

Herramientas adicionales: InstaVR es una herramienta igualmente excelente para crear prototipos de manera similar. Todavía tengo que profundizar demasiado en esta herramienta, sin embargo, por lo que he experimentado, parece intuitiva y puede integrar la reproducción de video.

InVision es también una gran herramienta de creación de prototipos para el flujo de usuarios. Aunque es una herramienta de creación de prototipos en 2D, todavía considero que es la forma más rápida de mostrar arquitectura en contenido "plano", como menús o modales. Es posible que necesite articular contenido para su equipo que tenga bastantes cambios de estado, esta puede ser una herramienta rápida y establecer la ubicación espacial y el tamaño en otro lugar.

Sketchbox es una excelente herramienta de creación de guiones gráficos para extraer rápidamente contenido, moverlo en realidad virtual y crear clics a través de las etapas de una historia. Encontré esta herramienta particularmente útil para tener una idea general del tamaño y la distancia del contenido, y crear "presentaciones de diapositivas" en 3D de un usuario que realiza un conjunto específico de acciones.

Sketchbox importa imágenes (exportar directamente desde Sketch), imágenes 360 y modelos 3D y, aunque no utilizo esta función, cabe destacar que Sketchbox también exporta como archivos FBX para acceder directamente al motor de juego que elijas.

Enlace: https://www.sketchbox3d.com/

Herramientas adicionales: Artefact lanzó una herramienta llamada Storyboard VR, que le permite crear prototipos en el espacio 3D de manera similar. Personalmente todavía tengo que probarlo, pero parece ser una herramienta de creación de prototipos intuitiva y poderosa.

Herramientas de creación 3D: tanto MakeVR como Gravity Sketch son potentes herramientas de creación para crear contenido 3D dentro de la realidad virtual.

Mid-Fi a Hi-Fi

En este punto, debe tener un fuerte sentido de su dirección y estar listo para un mayor refinamiento visual y espacial.

Halo es una gema oculta con la que he experimentado durante varias etapas de creación de prototipos. La herramienta es intuitiva y aporta simplicidad al diseño de flujos de usuario completos en el espacio 3D. Para los diseñadores que aún se orientan en la creación de entornos de motor de juego, Halo no requiere código para agregar funcionalidad, y es ideal para la construcción de prototipos más detallados.

Halo importa imágenes, Gif, videos y modelos 3D, y agrega funcionalidad en acciones como la activación de eventos al hacer clic / pasar el mouse, etc. Además, sus nuevas características agregan herramientas de colaboración para comentar y crear tarjetas para la delegación de tareas en proyectos compartidos. Halo también integra Google Blocks and Fonts para agregar contenido 3D y fuentes a su proyecto desde la herramienta.

Enlace: https://www.halolabs.io/

De alta fidelidad

¡En la etapa de alta fidelidad, su diseño está refinado y listo para la construcción detallada y las pruebas de usuario!

La unidad es la complicada que comienza. Sin embargo, también es la herramienta más robusta para crear proyectos finales. ¡Unity también lanzó EditorVR, para crear un prototipo directamente en un auricular VR!

Configure un sistema de creación de prototipos: con la unidad, cree un entorno básico con la distancia correcta, el tamaño del campo de visión (FOV), etc., para poder intercambiar contenido de forma rápida y sencilla. Como lo permite la comodidad con Unity, puede continuar construyendo este prototipo para que sea tan robusto como lo desee, con interacciones y flujos de usuarios completos para pruebas de usuarios y demostraciones.

Existen numerosos tutoriales para comenzar con el diseño y los diferentes flujos de trabajo. Tengo algunos que me ayudaron mucho, incluido el excelente conjunto de tutoriales de Unity, este curso de Udemy para comenzar a aprender C # a través de juegos de construcción y los mini cursos en VR Dev School. Recomiendo explorar muchos, ya que cada uno tiene un enfoque un poco diferente, ¡pero tomar un curso es una forma divertida de familiarizarse con el medio ambiente!

Todavía tengo que explorar el EditorVR de Unity, pero parece un cambio de juego para la creación de prototipos. ¡La herramienta toma Unity y lo mueve desde el escritorio directamente a sus auriculares VR para experimentar su trabajo mientras trabaja!

Enlace: https://unity3d.com/

Herramientas adicionales: Unreal Engine también es un motor de juego robusto capaz de construir un trabajo estelar. ¡Unreal también tiene "Blueprints", un flujo visual de propiedades para desarrollar comportamientos e interacciones sin código! (Sé que Unity también tiene un complemento para esto). Todavía no he usado Unreal, así que vale la pena echarles un vistazo y ver cuál funciona para usted.

Mi pasado

Un poco sobre mí, he progresado en bellas artes, diseño industrial, diseño de experiencia de usuario, y ahora trabajo como diseñador de UX / UI en Realidad Aumentada en Osterhout Design Group. Me gradué de la Universidad Carnegie Mellon en Diseño Industrial, como el primer diseñador que completó una especialización en estudios de ingeniería. Desde que me gradué, he explorado UX y diseño industrial que abarca desde grandes empresas, como Samsung e IBM, hasta trabajos independientes en diseño y educación médica.

Me encanta crear, y tengo una curiosidad insaciable. Ah, y tengo un afro!

¡Gracias!