Progettazione di contenuto per la visualizzazione olograficaDesigning content for holographic display

Posizione della mano del lato ulnare

Quando si progettano contenuti per le visualizzazioni olografiche, è necessario prendere in considerazione diversi elementi per ottenere un'esperienza ottimale.When designing content for holographic displays, there are several elements that you need to consider for achieving the best experience. Di seguito sono elencate alcune delle raccomandazioni ed è possibile ottenere altre informazioni sulle caratteristiche delle visualizzazioni olografiche nella pagina colore, luce e materiali .We've listed some of our recommendations below and you can learn more about the characteristics of holographic displays at Color, light and materials page.


Problemi con colore luminoso su larga superficieChallenges with bright color on a large surface

In base alla ricerca e al test dell'esperienza HoloLens, abbiamo scoperto che l'uso di colori luminosi in un'area di grandi dimensioni della visualizzazione può causare diversi problemi:Based on our HoloLens experience research and testing, we found that using bright colors in a large area of the display can cause several issues:

Affaticamento degli occhiEye fatigue

Poiché la visualizzazione olografica è additiva, gli ologrammi con colori luminosi usano una maggiore luminosità.Since holographic display is additive, holograms with bright colors use more light. Un colore chiaro e a tinta unita in un'area di grandi dimensioni dello schermo può causare la fatica degli occhi per l'utente.Bright, solid color in a large area of the display can easily cause eye fatigue for the user.

Occlusione manoHand occlusion

Il colore luminoso rende difficile per l'utente vedere le proprie mani quando si interagisce direttamente con gli oggetti.Bright color makes it difficult for the user to see their hands when directly interacting with objects. Poiché l'utente non può visualizzare le loro mani, diventa difficile percepire la profondità o la distanza tra la mano/il dito e la superficie di destinazione.Since the user can't see their hands, it becomes difficult to perceive the depth/distance between the hand/finger to the target surface. Il cursore del dito aiuta a compensare questo problema, ma può comunque essere difficile su una superficie bianca luminosa.The Finger Cursor helps compensate for this issue, but it can still be challenging on a bright white surface.

Occlusione di colore e mano difficili da visualizzare la mano sul Backplate del contenuto coloratoColor and hand occlusion Difficult to see the hand on the bright colored content backplate

Uniformità del coloreColor uniformity

A causa delle caratteristiche delle visualizzazioni olografiche, una grande area luminosa sullo schermo può diventare chiazzata.Because of the characteristics of holographic displays, a large bright area on the display can become blotchy. Con le combinazioni di colori scure è possibile ridurre il problema.By using dark color schemes, you can minimize this issue.

Linee guida di progettazione per le scelte cromaticheDesign guidelines for color choices

Usa colore scuro per lo sfondo dell'interfaccia utenteUse dark color for the UI background

Utilizzando la combinazione di colori scura, è possibile ridurre al minimo l'affaticamento degli occhi e migliorare la confidenza sulle interazioni con la mano diretta.By using the dark color scheme, you can minimize eye fatigue and improve the confidence on direct hand interactions.

Esempi di colore scuro usato per gli esempi di sfondo del contenuto del colore scuro usato per lo sfondo del contenutoExamples of dark color used for the content background Examples of dark color used for the content background

USA SemiBold o spessore carattere grassettoUse semibold or bold font weight

HoloLens consente alla tua esperienza di mostrare un bel testo ad alta risoluzione.HoloLens allows your experience to show beautiful high-resolution text. Tuttavia, si consiglia di evitare i pesi dei tipi di carattere sottili, ad esempio Light o Semilight, perché i tratti verticali possono ingrandire le dimensioni del tipo di carattere ridotto.However, it's recommended that you avoid thin font weights such as light or semi-light because the vertical strokes can jitter in small font size.

Spessore carattere grassetto o semi-grassetto (pannello superiore) migliora la leggibilità o il peso del carattere semi-grassetto (pannello superiore) migliora la leggibilitàBold or semi-bold font weight (upper panel) improves the legibility Bold or semi-bold font weight (upper panel) improves the legibility

Usa il materiale HolographicBackplate di MRTKUse MRTK’s HolographicBackplate material

Il materiale HolographicBackplate viene applicato a diversi pannelli dell'interfaccia utente nella shell di HoloLens.The HolographicBackplate material is applied to several UI panels in the HoloLens shell. Una delle sue funzionalità è un effetto iridescenza che è visibile agli utenti mentre spostano la loro posizione in base al pannello.One of its features is an iridescence effect that is visible to users as they shift their position based on the panel. Il colore del backplate si sposta leggermente in uno spettro predefinito, creando un effetto visivo accattivante e dinamico senza interferire con la leggibilità del contenuto.The backplate color shifts subtly across a predefined spectrum, creating an engaging and dynamic visual effect without interfering with content readability. Questo piccolo cambiamento di colore serve anche per compensare eventuali irregolarità dei colori minori.This subtle shift in color also serves to compensate for any minor color irregularities.

Problemi con la contropiastra dell'interfaccia utente trasparente o traslucidaChallenges with transparent or translucent UI backplate

Esempi di interfaccia utente trasparente esempi di backplating dell'interfaccia utente trasparenteTransparent UI examples Examples of transparent UI backplate

Complessità visiva e accessibilitàVisual complexity and accessibility

Poiché gli oggetti olografici si fondono con l'ambiente fisico, la leggibilità del contenuto o dell'interfaccia utente nelle finestre trasparenti o trasparenti potrebbe essere degradata.Since holographic objects blend with the physical environment, content or UI legibility on transparent or translucent windows could be degraded. Inoltre, quando gli oggetti olografici trasparenti sono sovrapposti l'uno sull'altro, potrebbe rendere difficile per l'utente interagire a causa del livello di confusione.Additionally, when transparent holographic objects are overlaid on top of each other, it could make it difficult for the user to interact because of the confusing depth.

PrestazioniPerformance

Per eseguire il rendering corretto degli oggetti trasparenti o traslucidi, è necessario ordinarli e combinarli con tutti gli oggetti esistenti in background.For transparent or translucent objects to render correctly they must be sorted and blended with any objects, which exist in the background. L'ordinamento degli oggetti trasparenti presenta un modesto costo della CPU, mentre la fusione ha un notevole costo della GPU, perché non consente alla GPU di eseguire la rimozione della superficie nascosta tramite l'abbattimento z, ovveroSorting of transparent objects has a modest CPU cost, blending has considerable GPU cost because it doesn't allow the GPU to do hidden surface removal via z-culling (i.e test di profondità).depth testing). Non consentire la rimozione della superficie nascosta aumenta il numero di operazioni necessarie per il pixel finale sottoposto a rendering.Not allowing hidden surface removal increases the number of operations needed for the final rendered pixel. In questo modo, vengono applicati più vincoli di velocità di riempimento della pressione.This puts on more pressure fill rate constraints.

Problema di stabilità degli ologrammi con tecnologia Depth LSRHologram stability issue with Depth LSR technology

Per migliorare la riproiezione olografica o la stabilità dell'ologramma, un'applicazione può inviare un buffer di profondità al sistema per ogni frame sottoposto a rendering.To improve holographic reprojection, or hologram stability, an application can submit a depth buffer to the system for every rendered frame. Quando si usa il buffer di profondità per la riproiezione, è necessario scrivere un buffer di profondità per ogni pixel di cui viene eseguito il rendering in una profondità corrispondente.When using the depth buffer for reprojection, you need to write a depth buffer for every color rendered pixel a corresponding depth. Qualsiasi pixel con un valore di profondità deve avere anche un valore di colore.Any pixel with a depth value should also have color value. Se il materiale sussidiario sopra indicato non viene seguito, le aree dell'immagine di cui è stato eseguito il rendering che non dispongono di informazioni di profondità valide possono essere riproiettate in modo da produrre artefatti, che sono spesso visibili come distorsioni di tipo Wave.If the above guidance isn't followed, areas of the rendered image that lack valid depth information may be reprojected in a way that produces artifacts, which are often visible as a wave-like distortion.

Linee guida per la progettazione di elementi trasparentiDesign guidelines for transparent elements

Usa sfondo interfaccia utente opacoUse opaque UI background

Per impostazione predefinita, gli oggetti trasparenti o traslucidi non scrivono la profondità per consentire una corretta fusione.By default, transparent or translucent objects don't write depth to allow for proper blending. I modi per attenuare questo problema includono l'utilizzo di oggetti opachi, assicurando che gli oggetti translucidi siano visualizzati vicino a oggetti opachi, ad esempio un pulsante traslucido davanti a un Backplate opaco, forzando gli oggetti traslucidi a scrivere profondità (non applicabile in tutti gli scenari) o eseguendo il rendering di oggetti proxy che contribuiscono solo a valori di profondità alla fine del frame.Ways to mitigate this issue include, using opaque objects, ensuring translucent objects appear close to opaque objects (such as a translucent button in front of an opaque backplate), forcing translucent objects to write depth (not applicable in all scenarios), or rendering proxy objects, which only contribute depth values at the end of the frame.

Soluzioni in MRTK-Unity: https://microsoft.github.io/MixedRealityToolkit-Unity/Documentation/hologram-stabilization.html#depth-buffer-sharing-in-unitySolutions within MRTK-Unity: https://microsoft.github.io/MixedRealityToolkit-Unity/Documentation/hologram-stabilization.html#depth-buffer-sharing-in-unity

Grazie a una contropiastra solida e opaca, possiamo proteggere la leggibilità e la confidenza dell'interazione.By using a solid and opaque backplate, we can secure legibility and interaction confidence.

Ridurre al minimo il numero di pixel interessatiMinimize the number of pixels affected

Se il progetto deve usare oggetti trasparenti, provare a ridurre al minimo il numero di pixel interessati.If your project must use transparent objects, try to minimize the number of pixels affected. Se, ad esempio, un oggetto è visibile solo in determinate condizioni (ad esempio un effetto di bagliore additivo), disabilitare l'oggetto quando è completamente invisibile, anziché impostare il colore additivo su nero.For example, if an object is only visible under certain conditions (like an additive glow effect), disable the object when it's fully invisible (instead of setting the additive color to black). Per le semplici forme 2D create usando un quad con una maschera alfa, provare a creare una rappresentazione mesh della forma con uno shader opaco.For simple 2D shapes created using a quad with an alpha mask, consider creating a mesh representation of the shape with an opaque shader instead.




Esempi di interfaccia utente scura in MRTK (Mixed Reality Toolkit) per UnityDark UI examples in MRTK (Mixed Reality Toolkit) for Unity

MRTK fornisce molti esempi di blocchi di compilazione dell'interfaccia utente basati sulle combinazioni di colori oscuri.MRTK provides many UI building block examples based on the dark color schemes.



Vedere ancheSee also