linguagem de design Realidade Misturada – MRTK3

Button Main

Nos últimos anos, enviamos muitos dispositivos e fatores de formulário diferentes com diferentes tipos de exibição, resoluções e experiências do usuário. Desenvolvemos um conjunto de práticas recomendadas para criar grandes experiências em realidade misturada, mas essas práticas recomendadas continuam evoluindo à medida que testamos e avaliamos designs em diferentes produtos e dispositivos.

Estamos entusiasmados em apresentar a linguagem de design Realidade Misturada mais recente, exibida pela primeira vez no aplicativo Mesh para HoloLens, ao público por meio dos blocos de construção da MRTK. As novas alterações de design visam capacitar os desenvolvedores a criar aplicativos prontos para produção mais bonitos, utilizáveis e portáteis.

Aprimoramentos

  • Comentários visuais aprimorados para entrada multi modal
  • Belos elementos de design arredondados, combinando o visual iridescente HoloLens tradicional com design moderno Fluent
  • Sistema de backplate modular para criar layouts complexos que permanecem claros e utilizáveis
  • Visuais de caixa delimitadora reprojetados para reduzir o ruído visual e habilitar interações fluidas movidas a olhar
  • Layout dinâmico com RectTransform e Canvas

Elementos Key

Geometria

Geometry

Geometria descreve a forma, o tamanho e a posição dos elementos da interface do usuário. Esses elementos de design fundamentais ajudam as experiências a parecerem coerentes em todo o sistema de design. A nova linguagem de design apresenta geometria com cantos arredondados que criam uma experiência mais acessível, envolvente e moderna. A geometria também é totalmente tridimensional, com uma espessura tangível que ajuda a fundamentar os designs na realidade. Ele também lembra ao usuário que esses elementos são objetos físicos reais que existem em seu espaço 3D e podem ser anexados a objetos e capturados, movidos ou manipulados.

Color

Backplate color

A cor ajuda os usuários a se concentrarem em suas tarefas indicando uma hierarquia visual e uma estrutura entre elementos da interface do usuário. A nova linguagem de design usa um esquema de cores mais escuro para minimizar a fadiga ocular enquanto ainda permanece brilhante e opaca o suficiente em exibições aditivas para fortalecer a confiança do usuário quando eles fazem interações diretas com as mãos.

Luz e materiais

Light

A luz e os materiais desempenham um papel essencial no fornecimento de comentários visuais em interações espaciais. O uso da iluminação 3D contextual ajuda o usuário a perceber a profundidade e o estado de interação, especialmente quando as exibições aditivas do dispositivo podem causar confusão de profundidade. Por exemplo, as pontas dos dedos do usuário lançam um brilho sutil nas superfícies pressionáveis dos botões, melhorando a percepção do usuário sobre a distância do dedo do holograma.

Camadas

Layering and Elevation

Camadas é o conceito de sobreposição de uma superfície com outra. A linguagem de design Realidade Misturada usa camadas e elevação para criar uma interface do usuário volumétrica que aprimora a qualidade da interação e a usabilidade em interações espaciais e encanta os usuários com uma resposta bonita e intuitiva à sua entrada.

Iconografia

Iconography

A iconografia é um conjunto de imagens e símbolos visuais que ajudam os usuários a entender e navegar pelo aplicativo. A linguagem de design Realidade Misturada usa a iconografia do Windows 11. Cada glifo em nossa fonte de ícones do sistema foi reprojetado para adotar uma geometria mais suave e metáforas mais modernas.

Tipografia

Typography

Como a representação visual da linguagem, a principal tarefa da tipografia é informar. A rampa de tipo da Linguagem de Design ajuda você a criar estrutura e hierarquia em seu conteúdo para maximizar a legibilidade e a legibilidade na interface do usuário.

linguagem de design Realidade Misturada no MRTK3

MRTKv3 Tearsheet

Exemplos de como usar Realidade Misturada Linguagem de Design

Explore e saiba mais sobre os exemplos de linguagem de design Realidade Misturada em ação.

Microsoft Mesh aplicativo para HoloLens 2

Mesh app for HoloLens 2