Dela via


Mixed Reality designspråk – MRTK3

Knapp, huvud

Under de senaste åren har vi levererat många olika enheter och formfaktorer med olika visningstyper, upplösningar och användarupplevelser. Vi har utvecklat en uppsättning metodtips för att utforma fantastiska upplevelser i mixad verklighet, men dessa metodtips fortsätter att utvecklas när vi testar och utvärderar design för olika produkter och enheter.

Vi är glada över att kunna introducera den senaste Mixed Reality Design Language – som först visades i Mesh-appen för HoloLens – för allmänheten via MRTK:s byggstenar. De nya designändringarna syftar till att ge utvecklare möjlighet att skapa produktionsklara program som är vackrare, användbara och portabla.

Förbättringar

Uppdaterad geometri Uppdaterad geometri med rundade hörn för mer lättillgängliga och användarvänliga upplevelser

Förbättrad visuell feedback Förbättrad visuell feedback för förbättrad multimodal inmatning, till exempel ögonöga kombinerat med nypa gest

Förbättrade modulära enheter Förbättrade modulära enheter som stöder olika UI-scenarier med permutationer

Modulärt bakplåtssystem Modulärt bakplåtssystem för att skapa komplexa layouter som förblir tydliga och användbara

Uppdateringar av avgränsningsruta Omdesignade visuella avgränsningsrutor för att minska visuellt brus och möjliggöra smidiga blickdrivna interaktioner

Arbetsytebaserat användargränssnitt Integrering med RectTransform och Unity Canvas som stöder dynamisk och flexibel layout

Viktiga element

Geometri
Geometri
Det nya designspråket introducerar geometri med rundade hörn som skapar en mer lättillgänglig, engagerande och modern upplevelse. Geometrin är också helt tredimensionell, med en påtaglig tjocklek som hjälper till att jorda designerna i verkligheten. Den påminner också användaren om att dessa element är verkliga, fysiska objekt som finns inom deras 3D-utrymme och kan kopplas till objekt och hämtas, flyttas eller manipuleras.

Färg
Färg
Färg hjälper användarna att fokusera på sina uppgifter genom att ange en visuell hierarki och struktur mellan användargränssnittselement. Det nya designspråkets färgschema minimerar ögontrötthet samtidigt som det förblir tillräckligt ljust och ogenomskinlig på additiva skärmar för att stärka användarens förtroende när de gör direkta handinteraktioner. Detaljerade element som iriserande effekter är resultatet av iterationer av design och användarforskning för att ge bästa möjliga upplevelse i HoloLens additiva bildskärm och andra Mixed Reality enheter.

Ljus och material
Ljus och material
Ljus och material spelar en viktig roll för att ge visuell feedback i rumsliga interaktioner. Med sammanhangsbaserad 3D-belysning kan användaren uppfatta djup och interaktionstillstånd, särskilt när enhetens additiva skärmar kan orsaka djupförvirring. Till exempel kastar användarens fingertoppar en subtil glöd på knapparnas pressbara ytor, vilket förbättrar användarens uppfattning om avståndet från hologrammet.

Skiktning och höjning
Skikt
Skiktning är konceptet att överlappa en yta med en annan. Designspråket Mixed Reality använder skiktning och höjning för att skapa volymtriskt användargränssnitt som förbättrar interaktionskvaliteten och användbarheten i rumsliga interaktioner och ger användarna ett vackert och intuitivt svar på deras indata.

Ikonografi
Ikonografi
Ikonografi är en uppsättning visuella bilder och symboler som hjälper användarna att förstå och navigera i din app. Designspråket Mixed Reality använder Microsofts Fluent-systemikoner. Varje tecken i vårt systemikonteckensnitt har gjorts om för att omfatta en mjukare geometri och mer moderna metaforer.

Typografi
Typografi
Som en visuell representation av språket är typografins huvuduppgift att kommunicera information. Designspråkets typramp hjälper dig att skapa struktur och hierarki i ditt innehåll för att maximera läsbarheten och läsbarheten i användargränssnittet.

Mixed Reality designspråk i MRTK3

Du kan titta på de här exempelscenerna för olika gränssnittselement med Mixed Reality Design Language.

  • CanvasUITearSheet.unity: Visar alla tillgängliga prefabvarianter för arbetsytebaserade knappar i MRTK.
  • CanvasExample.unity: Exempel på att skapa större layouter med hjälp av canvas-baserade komponenter.
  • UITearSheet.unity: Visar alla tillgängliga prefabvarianter för icke-arbetsytebaserade knappar i MRTK.

Canvas Tearsheet

Exempel på hur du använder Mixed Reality designspråk

Utforska och lär dig mer om Mixed Reality designspråkexempel i praktiken.

MRTK3 GitHub-exempel