Caso prático - Criar o HoloSketch, um esquema espacial e uma aplicação de desenho UX para o HoloLens

O HoloSketch é um esquema espacial no dispositivo e uma ferramenta de desenho UX para o HoloLens para ajudar a criar experiências holográficas. O HoloSketch funciona com um teclado e rato Bluetooth emparelhados, bem como comandos de gestos e voz. O objetivo do HoloSketch é fornecer uma ferramenta de esquema UX simples para visualização e iteração rápidas.

HoloSketch: um esquema espacial e uma aplicação de desenho UX para o HoloLens.
HoloSketch: esquema espacial e aplicação de desenho UX para HoloLens

Uma ferramenta de esquema UX simples para visualização rápida e iteração.
Uma ferramenta de esquema UX simples para visualização e iteração rápidas

Funcionalidades

Primitivos para estudos rápidos e prototipagem de escala

Utilizar formas primitivas

Utilize formas primitivas para estudos rápidos de massa e prototipagem de escala.

Importar objetos através do OneDrive

importar objetos

Importe imagens PNG/JPG ou objetos FBX 3D (requer empacotamento no Unity) para o espaço de realidade mista através do OneDrive.

Manipular objetos

manipular objetos

Manipular objetos (mover/rodar/dimensionar) com uma interface de objeto 3D familiar.

Bluetooth, rato/teclado, gestos e comandos de voz

suporta Bluetooth

O HoloSketch suporta rato/teclado Bluetooth, gestos e comandos de voz.

Fundo

Importância de experimentar a sua estrutura no dispositivo

Quando estrutura algo para o HoloLens, é importante experimentar a sua estrutura no dispositivo. Um dos maiores desafios no design de aplicações de realidade mista é que é difícil obter a sensação de escala, posição e profundidade, especialmente através de esboços 2D tradicionais.

Custo da comunicação baseada em 2D

Para comunicar eficazmente fluxos e cenários UX a outras pessoas, um designer pode acabar por gastar muito tempo a criar recursos com ferramentas 2D tradicionais, como o Illustrator, o Photoshop e o PowerPoint. Muitas vezes, estas estruturas 2D requerem esforço adicional para convertê-las em 3D. Algumas ideias são perdidas nesta tradução de 2D para 3D.

Processo de implementação complexo

Uma vez que a realidade mista é uma nova tela para nós, envolve muita iteração de design, tentativa e erro pela sua natureza. Para designers que não estão familiarizados com ferramentas como o Unity e o Visual Studio, não é fácil reunir algo no HoloLens. Normalmente, tem de percorrer o processo abaixo para ver os elementos artísticos 2D/3D no dispositivo. Esta era uma grande barreira para os designers iterarem rapidamente ideias e cenários.

Processo de implementação complexo
Processo de implementação

Processo simplificado com o HoloSketch

Com o HoloSketch, queríamos simplificar este processo sem envolver ferramentas de desenvolvimento e emparelhamento do portal do dispositivo. Com o OneDrive, os utilizadores podem facilmente colocar recursos 2D/3D no HoloLens.

Processo simplificado com o HoloSketch
Processo simplificado com o HoloSketch

Incentivar o pensamento e as soluções tridimensionais de design

Pensamos que esta ferramenta daria aos designers a oportunidade de explorar soluções num espaço verdadeiramente tridimensional e não ficar preso em 2D. Não precisam de pensar em criar um fundo 3D para a IU, uma vez que o fundo é o mundo real no caso do HoloLens. O HoloSketch abre uma forma de os designers explorarem facilmente o design 3D no HoloLens.

Começar Agora

Como importar imagens 2D (JPG/PNG) para o HoloSketch

  • Carregue imagens JPG/PNG para a pasta do OneDrive "Documents/HoloSketch".
  • No menu do OneDrive no HoloSketch, poderá selecionar e colocar a imagem no ambiente.

Importar imagens 2D
Importar imagens e objetos 3D através do OneDrive

Como importar objetos 3D para o HoloSketch

Antes de carregar para a sua pasta do OneDrive, siga os passos abaixo para empacotar os objetos 3D num pacote de recursos do Unity. Com este processo, pode importar os seus ficheiros FBX/OBJ a partir de software 3D, como Maya, Cinema 4D e Microsoft Paint 3D.

Importante

Atualmente, a criação de pacotes de recursos é suportada com a versão 5.4.5f1 do Unity.

  1. Transfira e abra o projeto do Unity "AssetBunlder_Unity". Este projeto do Unity inclui o script para a geração de recursos do pacote.

  2. Crie um novo GameObject.

  3. Atribua um nome ao GameObject com base nos conteúdos.

  4. No painel Inspetor, clique em "Adicionar Componente" e adicione "Colisor de Caixas".

    No painel Inspetor, clique em

    No painel Inspetor, clique em

  5. Importe o ficheiro 3D FBX ao arrastá-lo para o painel do projeto.

  6. Arraste o objeto para o painel Hierarquia sob o seu novo GameObject.

    Arraste o objeto para o painel Hierarquia no seu novo GameObject

  7. Ajuste a dimensão do colisor se não corresponder ao objeto. Rode o objeto para o eixo Z.

    Ajuste a dimensão do colisor se não corresponder ao objeto.

  8. Arraste o objeto do painel Hierarquia para o painel Projeto para o tornar pré-fabricado.

  9. Na parte inferior do painel inspetor, clique na lista pendente, crie e atribua um novo nome exclusivo. O exemplo abaixo mostra a adição e atribuição de "brownchair" para o Nome do AssetBundle.

    Na parte inferior do painel inspetor, clique no menu pendente e atribua um novo nome exclusivo.

  10. Preparar uma imagem em miniatura para o objeto de modelo. Arraste uma imagem para o painel do projeto e atribua o nome utilizado para o objeto.

  11. Crie uma pasta denominada "Assetbundles" na pasta "Asset" do projeto unity.

  12. No menu Ativos, selecione "Build AssetBundles" (Criar AssetBundles) para gerar o ficheiro. No menu Ativos, selecione

  13. Carregue o ficheiro gerado para a pasta /Files/Documents/HoloSketch no OneDrive. Carregue apenas o ficheiro asset_unique_name. Não precisa de carregar ficheiros de manifesto ou ficheiro do AssetBundles.
    Adicionar ficheiros a Ficheiros/Documentos/HoloSketch/ pastaVerá o objeto 3D adicionado no menu do OneDrive do HoloSketch

Como manipular os objetos

O HoloSketch suporta a interface tradicional que é amplamente utilizada no software 3D. Pode utilizar mover, rodar, dimensionar os objetos com gestos e um rato. Pode alternar rapidamente entre diferentes modos com voz ou teclado.

Modos de manipulação de objetos

Como manipular os objetos
Como manipular os objetos

Menus contextual e do Cinto de Ferramentas

Utilizar o Menu Contextual

Faça duplo toque no ar para abrir o Menu Contextual.

Itens de menu:

  • Esquema surface: Este é um sistema de grelha 3D onde pode esquematar vários objetos e geri-los como um grupo. Faça duplo toque de ar no Surface de Esquema para adicionar objetos ao mesmo.
  • Primitivos: Utilize cubos, esferas, cilindros e cones para estudos de massas.
  • OneDrive: Abra o menu do OneDrive para importar objetos.
  • Ajuda: Apresenta o ecrã de ajuda.

Menu contextual
Menu contextual

Utilizar o Menu do Cinto de Ferramentas

Mover, Rodar, Dimensionar, Guardar e Carregar Cena estão disponíveis no Menu Do Cinto de Ferramentas.

Utilizar teclado, gestos e comandos de voz

Comandos de Teclado, Gestos e Voz
Teclado, gestos e comandos de voz

Transferir a aplicação

Ícone da aplicação HoloSketch Transferir e instalar a aplicação HoloSketch gratuitamente a partir da Microsoft Store

Problemas conhecidos

  • Atualmente, a criação de pacotes de recursos é suportada com a versão 5.4.5f1 do Unity.
  • Dependendo da quantidade de dados no seu OneDrive, a aplicação pode aparecer como se tivesse parado durante o carregamento de conteúdos do OneDrive
  • Atualmente, a funcionalidade Guardar e Carregar só suporta objetos primitivos
  • Os menus Texto, Som, Vídeo e Fotografia estão desativados no menu contextual
  • O botão Reproduzir no menu Cinto de Ferramentas limpa os gizmos de manipulação

Partilhar os seus esboços

Pode utilizar a funcionalidade de gravação de vídeo no HoloLens ao indicar "Olá Cortana, Iniciar/Parar gravação". Prima a tecla para cima/para baixo do volume em conjunto para tirar uma fotografia do seu esboço.

Sobre os autores

Imagem de Patrick Sebring
Imagem de Dong Yoon Park Parque Yoon
UX Designer @Microsoft
Patrick Sebring
@Microsoft do programador